478 lines
17 KiB
Plaintext
478 lines
17 KiB
Plaintext
<view class="dsddxq-page">
|
||
|
||
<!-- 加载中状态 -->
|
||
<view class="loading-container" wx:if="{{isLoading}}">
|
||
<view class="loading-spinner"></view>
|
||
<text class="loading-text">加载订单详情...</text>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<view class="content-container" wx:if="{{!isLoading}}">
|
||
|
||
<!-- 商品图片和介绍区域 -->
|
||
<view class="shangpin-area">
|
||
<view class="shangpin-image-container">
|
||
<image
|
||
class="shangpin-image"
|
||
src="{{jibenShuju.tupian}}"
|
||
mode="aspectFill"
|
||
></image>
|
||
</view>
|
||
<view class="shangpin-jieshao">
|
||
<view class="jieshao-text" bindtap="chakanWanzhengJieshao">
|
||
{{jibenShuju.jieshao || '暂无描述'}}
|
||
</view>
|
||
<view class="chakan-wanzheng" wx:if="{{jibenShuju.jieshao && jibenShuju.jieshao.length > 30}}">
|
||
<text>点击上面字体查看完整介绍</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单信息区域 -->
|
||
<view
|
||
class="dingdan-info-area"
|
||
style="background-color: {{zhuangtaiYanseMap[jibenShuju.zhuangtai] || '#F5F5F5'}}"
|
||
>
|
||
<view class="info-title">订单信息</view>
|
||
|
||
<!-- 游戏昵称 -->
|
||
<view class="info-item-row" wx:if="{{jibenShuju.nicheng}}">
|
||
<text class="item-label">游戏昵称：</text>
|
||
<text class="item-value">{{jibenShuju.nicheng}}</text>
|
||
<view
|
||
class="copy-btn"
|
||
bindtap="fuzhiWenben"
|
||
data-text="{{jibenShuju.nicheng}}"
|
||
hover-class="copy-btn-hover"
|
||
>
|
||
<text class="copy-icon">📋</text>
|
||
<text class="copy-text">复制</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 备注信息 -->
|
||
<view class="info-item-row" wx:if="{{jibenShuju.beizhu}}">
|
||
<text class="item-label">备注信息：</text>
|
||
<view class="item-right-area">
|
||
<text class="item-value">{{jibenShuju.beizhu.length > 20 ? jibenShuju.beizhu.substring(0, 20) + '...' : jibenShuju.beizhu}}</text>
|
||
<view
|
||
class="chakan-btn"
|
||
bindtap="chakanWanzhengBeizhu"
|
||
wx:if="{{jibenShuju.beizhu && jibenShuju.beizhu.length > 20}}"
|
||
>
|
||
<text>查看完整</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单ID（可复制） -->
|
||
<view class="info-item-row">
|
||
<text class="item-label">订单ID：</text>
|
||
<view class="item-right-area">
|
||
<text class="item-value">{{jibenShuju.dingdan_id}}</text>
|
||
<view
|
||
class="copy-btn"
|
||
bindtap="fuzhiWenben"
|
||
data-text="{{jibenShuju.dingdan_id}}"
|
||
hover-class="copy-btn-hover"
|
||
>
|
||
<text class="copy-icon">📋</text>
|
||
<text class="copy-text">复制</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 创建时间 -->
|
||
<view class="info-item-row">
|
||
<text class="item-label">创建时间：</text>
|
||
<text class="item-value">{{jibenShuju.create_time}}</text>
|
||
</view>
|
||
|
||
<!-- 订单价格（绿色） -->
|
||
<view class="info-item-row">
|
||
<text class="item-label">订单价格：</text>
|
||
<text class="item-value jine-green">¥{{jibenShuju.jine}}</text>
|
||
</view>
|
||
|
||
<!-- 订单状态 -->
|
||
<view class="info-item-row">
|
||
<text class="item-label">订单状态：</text>
|
||
<text class="item-value zhuangtai-text">{{zhuangtaiWenziMap[jibenShuju.zhuangtai] || '未知状态'}}</text>
|
||
</view>
|
||
|
||
<!-- 发单平台信息 -->
|
||
<view class="info-item-row" wx:if="{{jibenShuju.fadanpingtai !== undefined && jibenShuju.fadanpingtai !== null}}">
|
||
<text class="item-label">发单平台：</text>
|
||
<text class="item-value">
|
||
{{jibenShuju.fadanpingtai == 1 ? '平台发单' : (jibenShuju.fadanpingtai == 2 ? '商家发单' : '未知')}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商家信息区域 -->
|
||
<view
|
||
class="shangjia-area"
|
||
wx:if="{{xiangxiShuju.shangjia_id || xiangxiShuju.shangjia_nicheng || xiangxiShuju.shangjia_liuyan}}"
|
||
>
|
||
<view class="info-title">商家信息</view>
|
||
|
||
<!-- 商家ID -->
|
||
<view class="info-item-row" wx:if="{{xiangxiShuju.shangjia_id}}">
|
||
<text class="item-label">商家ID：</text>
|
||
<view class="item-right-area">
|
||
<text class="item-value">{{xiangxiShuju.shangjia_id}}</text>
|
||
<view
|
||
class="copy-btn"
|
||
bindtap="fuzhiWenben"
|
||
data-text="{{xiangxiShuju.shangjia_id}}"
|
||
hover-class="copy-btn-hover"
|
||
>
|
||
<text class="copy-icon">📋</text>
|
||
<text class="copy-text">复制</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 商家昵称 -->
|
||
<view class="info-item-row" wx:if="{{xiangxiShuju.shangjia_nicheng}}">
|
||
<text class="item-label">商家昵称：</text>
|
||
<text class="item-value">{{xiangxiShuju.shangjia_nicheng}}</text>
|
||
</view>
|
||
|
||
<!-- 商家留言 -->
|
||
<view class="shangjia-liuyan-container" wx:if="{{xiangxiShuju.shangjia_liuyan}}">
|
||
<text class="section-subtitle">商家留言</text>
|
||
<view class="liuyan-content">
|
||
{{xiangxiShuju.shangjia_liuyan}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 退款信息区域 -->
|
||
<view
|
||
class="tuikuan-area"
|
||
wx:if="{{showRefundInfo && xiangxiShuju.tuikuan_liyou}}"
|
||
>
|
||
<view class="info-title">退款信息</view>
|
||
|
||
<view class="info-item-row">
|
||
<text class="item-label">退款理由：</text>
|
||
<text class="item-value">{{xiangxiShuju.tuikuan_liyou}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 处罚申请信息区域 -->
|
||
<view
|
||
class="chufa-area"
|
||
wx:if="{{xiangxiShuju.chufa_liyou || xiangxiShuju.chufa_zhuangtai || xiangxiShuju.chufa_jieguo || xiangxiShuju.bohui_liyou}}"
|
||
>
|
||
<view class="info-title">处罚申请</view>
|
||
|
||
<!-- 申请原因 -->
|
||
<view class="info-item-row" wx:if="{{xiangxiShuju.chufa_liyou}}">
|
||
<text class="item-label">申请原因：</text>
|
||
<text class="item-value">{{xiangxiShuju.chufa_liyou}}</text>
|
||
</view>
|
||
|
||
<!-- 申请状态 -->
|
||
<view class="info-item-row" wx:if="{{xiangxiShuju.chufa_zhuangtai !== undefined}}">
|
||
<text class="item-label">申请状态：</text>
|
||
<text
|
||
class="item-value"
|
||
style="color: {{xiangxiShuju.chufa_zhuangtai == 0 ? '#FF9800' : (xiangxiShuju.chufa_zhuangtai == 1 ? '#4CAF50' : '#FF4444')}}"
|
||
>
|
||
{{xiangxiShuju.chufa_zhuangtai == 0 ? '审核中' : (xiangxiShuju.chufa_zhuangtai == 1 ? '处罚成功' : '处罚驳回')}}
|
||
</text>
|
||
</view>
|
||
|
||
<!-- 处罚结果 -->
|
||
<view class="info-item-row" wx:if="{{xiangxiShuju.chufa_jieguo}}">
|
||
<text class="item-label">处罚结果：</text>
|
||
<text class="item-value">{{xiangxiShuju.chufa_jieguo}}</text>
|
||
</view>
|
||
|
||
<!-- 驳回理由 -->
|
||
<view class="info-item-row" wx:if="{{xiangxiShuju.bohui_liyou}}">
|
||
<text class="item-label">驳回理由：</text>
|
||
<text class="item-value">{{xiangxiShuju.bohui_liyou}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 接单员交付历史（只读模式） -->
|
||
<view class="dashou-jiaofu-area" wx:if="{{!isModifying && xiangxiShuju.dashou_jiaofu.length > 0}}">
|
||
<view class="info-title">我的交付</view>
|
||
|
||
<!-- 接单员交付图片 -->
|
||
<view class="dashou-jiaofu-container">
|
||
<text class="section-subtitle">交付图片</text>
|
||
<view class="jiaofu-grid">
|
||
<block wx:for="{{xiangxiShuju.dashou_jiaofu}}" wx:key="index">
|
||
<view
|
||
class="jiaofu-image-item"
|
||
bindtap="yulanTupian"
|
||
data-url="{{item}}"
|
||
data-urls="{{xiangxiShuju.dashou_jiaofu}}"
|
||
>
|
||
<image
|
||
class="jiaofu-image"
|
||
src="{{item}}"
|
||
mode="aspectFill"
|
||
></image>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 打手留言 -->
|
||
<view class="dashou-liuyan-container" wx:if="{{xiangxiShuju.dashou_liuyan}}">
|
||
<text class="section-subtitle">我的留言</text>
|
||
<view class="liuyan-content">
|
||
{{xiangxiShuju.dashou_liuyan}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 🆕 修改模式下的可编辑区域（当 isModifying 为 true 时显示） -->
|
||
<view class="dashou-jiaofu-area" wx:if="{{isModifying}}">
|
||
<view class="info-title">修改交付</view>
|
||
|
||
<!-- 图片编辑区域 -->
|
||
<view class="xuanze-tupian-container">
|
||
<text class="section-subtitle">交付图片（点击叉号删除）</text>
|
||
|
||
<!-- 显示原图（使用 remainingOriginals 实时更新） -->
|
||
<view class="yixuan-tupian-grid">
|
||
<!-- 原图部分（从 remainingOriginals 循环） -->
|
||
<block wx:for="{{remainingOriginals}}" wx:key="index">
|
||
<view class="yixuan-tupian-item">
|
||
<image class="yixuan-tupian" src="{{item}}" mode="aspectFill"></image>
|
||
<view
|
||
class="shanchu-btn"
|
||
bindtap="handleDeleteImage"
|
||
data-url="{{item}}"
|
||
>
|
||
<text>×</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 新添加的本地图片 -->
|
||
<block wx:for="{{newImages}}" wx:key="index">
|
||
<view class="yixuan-tupian-item">
|
||
<image class="yixuan-tupian" src="{{item}}" mode="aspectFill"></image>
|
||
<view
|
||
class="shanchu-btn"
|
||
bindtap="handleDeleteImage"
|
||
data-url="{{item}}"
|
||
>
|
||
<text>×</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 添加按钮（基于 remainingOriginals.length + newImages.length 计算剩余容量） -->
|
||
<view
|
||
class="tianjia-btn"
|
||
bindtap="handleAddImage"
|
||
wx:if="{{remainingOriginals.length + newImages.length < 9}}"
|
||
>
|
||
<text class="tianjia-icon">+</text>
|
||
<text class="tianjia-text">添加图片</text>
|
||
<text class="tianjia-tip">({{9 - (remainingOriginals.length + newImages.length)}}/9)</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 留言编辑 -->
|
||
<view class="liuyan-input-container">
|
||
<text class="section-subtitle">留言（可选，最多50字）</text>
|
||
<textarea
|
||
class="liuyan-textarea"
|
||
value="{{modifiedLiuyan}}"
|
||
placeholder="请输入留言..."
|
||
maxlength="50"
|
||
bindinput="onModifyLiuyanInput"
|
||
></textarea>
|
||
<text class="zi-shu">
|
||
已输入 {{modifiedLiuyan.length}}/50 字
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交订单区域（仅状态=2时显示，保持不变） -->
|
||
<view class="tijiao-area" wx:if="{{jibenShuju.zhuangtai == 2}}">
|
||
<view class="info-title">提交订单</view>
|
||
|
||
<!-- 选择图片 -->
|
||
<view class="xuanze-tupian-container">
|
||
<text class="section-subtitle">选择交付图片（最多9张）</text>
|
||
|
||
<!-- 已选图片预览 -->
|
||
<view class="yixuan-tupian-grid">
|
||
<block wx:for="{{xuanzhongTupian}}" wx:key="index">
|
||
<view class="yixuan-tupian-item">
|
||
<image
|
||
class="yixuan-tupian"
|
||
src="{{item}}"
|
||
mode="aspectFill"
|
||
></image>
|
||
<view
|
||
class="shanchu-btn"
|
||
bindtap="shanchuTupian"
|
||
data-index="{{index}}"
|
||
>
|
||
<text>×</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 添加按钮 -->
|
||
<view
|
||
class="tianjia-btn"
|
||
bindtap="xuanzeTupian"
|
||
wx:if="{{xuanzhongTupian.length < 9}}"
|
||
>
|
||
<text class="tianjia-icon">+</text>
|
||
<text class="tianjia-text">添加图片</text>
|
||
<text class="tianjia-tip">({{9 - xuanzhongTupian.length}}/9)</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 上传进度 -->
|
||
<view class="shangchuan-jindu-container" wx:if="{{shangchuanZongshu > 0}}">
|
||
<view class="jindu-bar">
|
||
<view class="jindu-fill" style="width: {{jinduWidth}}"></view>
|
||
</view>
|
||
<text class="jindu-text">上传中: {{shangchuanJindu}}/{{shangchuanZongshu}}</text>
|
||
</view>
|
||
|
||
<!-- 留言输入 -->
|
||
<view class="liuyan-input-container">
|
||
<text class="section-subtitle">留言（可选，最多50字）</text>
|
||
<textarea
|
||
class="liuyan-textarea"
|
||
value="{{liuyan}}"
|
||
placeholder="请输入留言..."
|
||
maxlength="50"
|
||
bindinput="shuruLiuyan"
|
||
></textarea>
|
||
<text class="zi-shu">
|
||
已输入 {{liuyan.length}}/50 字
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ========== 底部按钮区域 ========== -->
|
||
<view class="bottom-btns-container" wx:if="{{!isLoading}}">
|
||
|
||
<!-- 🆕 修改模式下的按钮（取消/确认） -->
|
||
<block wx:if="{{isModifying}}">
|
||
<view class="btn-row">
|
||
<view
|
||
class="bottom-btn cancel-modify-btn"
|
||
bindtap="cancelModify"
|
||
hover-class="btn-hover"
|
||
>
|
||
<text class="btn-text">取消修改</text>
|
||
</view>
|
||
<view
|
||
class="bottom-btn confirm-modify-btn"
|
||
bindtap="confirmModify"
|
||
hover-class="btn-hover"
|
||
>
|
||
<text class="btn-text">{{isConfirming ? '提交中...' : '确认修改'}}</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 非修改模式下的按钮 -->
|
||
<block wx:else>
|
||
<!-- 第一行：联系客服 + 联系老板（当状态不为1且不为7时显示老板按钮） -->
|
||
<view class="btn-row" wx:if="{{jibenShuju.zhuangtai != 1 && jibenShuju.zhuangtai != 7}}">
|
||
<view
|
||
class="bottom-btn contact-btn"
|
||
bindtap="goToKefu"
|
||
hover-class="btn-hover"
|
||
>
|
||
<text class="btn-text">联系客服</text>
|
||
</view>
|
||
<view
|
||
class="bottom-btn boss-btn"
|
||
bindtap="goToChatWithBoss"
|
||
hover-class="btn-hover"
|
||
>
|
||
<text class="btn-text">联系老板</text>
|
||
</view>
|
||
</view>
|
||
<!-- 如果没有老板按钮，只显示联系客服占一行 -->
|
||
<view class="btn-row" wx:else>
|
||
<view
|
||
class="bottom-btn contact-btn full-width"
|
||
bindtap="goToKefu"
|
||
hover-class="btn-hover"
|
||
>
|
||
<text class="btn-text">联系客服</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 🆕 新增：修改按钮（仅当状态为4或8时显示） -->
|
||
<view class="btn-row" wx:if="{{jibenShuju.zhuangtai == 4 || jibenShuju.zhuangtai == 8}}">
|
||
<view
|
||
class="bottom-btn modify-btn full-width"
|
||
bindtap="enterModify"
|
||
hover-class="btn-hover"
|
||
>
|
||
<text class="btn-text">修改交付</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交按钮（仅状态=2时显示） -->
|
||
<view
|
||
class="bottom-btn submit-btn"
|
||
wx:if="{{jibenShuju.zhuangtai == 2}}"
|
||
bindtap="tijiaoDingdan"
|
||
>
|
||
<text class="btn-text">{{isSubmitting ? '提交中...' : '立即提交'}}</text>
|
||
<view class="btn-shine"></view>
|
||
</view>
|
||
</block>
|
||
|
||
</view>
|
||
|
||
<!-- 完整介绍弹窗 -->
|
||
<view class="modal-container" wx:if="{{showWanzhengJieshao}}">
|
||
<view class="modal-mask" bindtap="guanbiWanzhengJieshao"></view>
|
||
<view class="modal-content">
|
||
<view class="modal-header">
|
||
<text class="modal-title">订单介绍</text>
|
||
<view class="modal-close" bindtap="guanbiWanzhengJieshao">×</view>
|
||
</view>
|
||
<view class="modal-body">
|
||
<scroll-view class="modal-scroll" scroll-y="true">
|
||
<text class="modal-content-text">{{wanzhengJieshao}}</text>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 完整备注弹窗 -->
|
||
<view class="modal-container" wx:if="{{showWanzhengBeizhu}}">
|
||
<view class="modal-mask" bindtap="guanbiWanzhengBeizhu"></view>
|
||
<view class="modal-content">
|
||
<view class="modal-header">
|
||
<text class="modal-title">订单备注</text>
|
||
<view class="modal-close" bindtap="guanbiWanzhengBeizhu">×</view>
|
||
</view>
|
||
<view class="modal-body">
|
||
<scroll-view class="modal-scroll" scroll-y="true">
|
||
<text class="modal-content-text">{{wanzhengBeizhu}}</text>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<global-notification id="global-notification" />
|
||
<popup-notice id="popupNotice" />
|
||
</view> |