Files
Wechat/pages/merchant-order-detail/merchant-order-detail.wxml
XingQue c03d22776f backup: 紫色UI换肤前完整备份(当前橙色逍遥梦主题)
保留改造前全部页面样式与功能代码,便于回滚。

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-29 01:59:42 +08:00

373 lines
21 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!--pages/merchant-order-detail/merchant-order-detail.wxml - 商家订单详情页完整结构(正方形九宫格,圆形头像)-->
<!-- 页面根容器 -->
<view class="sjddxq-page">
<!-- 加载状态区域,当 isLoading 为 true 时显示 -->
<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="card shangpin-card">
<!-- 商品图片固定宽高180rpx已是正方形 -->
<image class="shangpin-img" src="{{jibenShuju.tupian}}" mode="aspectFill"/>
<!-- 商品介绍文本区域 -->
<view class="shangpin-text">
<!-- 订单介绍文字 -->
<text class="jieshao-text">{{jibenShuju.jieshao || '无描述'}}</text>
</view>
</view>
<!-- 订单信息卡片,左侧带状态颜色边框 -->
<view class="card info-card" style="border-left: 8rpx solid {{zhuangtaiYanseMap[jibenShuju.zhuangtai]}}">
<view class="card-title">订单信息</view>
<!-- 游戏昵称行 -->
<view class="info-row" wx:if="{{jibenShuju.nicheng}}"><text class="label">游戏昵称</text><text class="value">{{jibenShuju.nicheng}}</text></view>
<!-- 备注信息行 -->
<view class="info-row" wx:if="{{jibenShuju.beizhu}}"><text class="label">备注</text><text class="value">{{jibenShuju.beizhu}}</text></view>
<!-- 订单ID行可复制 -->
<view class="info-row"><text class="label">订单ID</text><view class="value-with-copy"><text class="value">{{jibenShuju.dingdan_id}}</text><text class="copy-btn" bindtap="fuzhiWenben" data-text="{{jibenShuju.dingdan_id}}">📋</text></view></view>
<!-- 创建时间行 -->
<view class="info-row"><text class="label">创建时间</text><text class="value">{{jibenShuju.create_time}}</text></view>
<!-- 订单金额行,红色高亮 -->
<view class="info-row"><text class="label">订单金额</text><text class="value price-red">¥{{jibenShuju.jine}}</text></view>
<!-- 订单状态行 -->
<view class="info-row"><text class="label">状态</text><text class="value zhuangtai-text">{{zhuangtaiWenziMap[jibenShuju.zhuangtai]}}</text></view>
<!-- 派单客服(有记录才展示) -->
<view class="card dispatch-staff-card" wx:if="{{dispatchStaff}}">
<view class="card-title">派单客服</view>
<view class="dashou-header">
<image class="dashou-avatar" src="{{dispatchStaffAvatar || '/images/default-avatar.png'}}" mode="aspectFill"/>
<view class="dashou-detail">
<text class="dashou-nicheng">{{dispatchStaff.dispatch_staff_name || '未知'}}</text>
<view class="dashou-id-row">
<text class="label">用户ID</text>
<text class="value">{{dispatchStaff.dispatch_staff_uid}}</text>
<text class="copy-btn" bindtap="fuzhiWenben" data-text="{{dispatchStaff.dispatch_staff_uid}}">📋</text>
</view>
<view class="dashou-id-row" wx:if="{{dispatchStaff.dispatch_role_name}}">
<text class="label">角色</text>
<text class="value">{{dispatchStaff.dispatch_role_name}}</text>
</view>
</view>
</view>
</view>
<!-- 新增:退款操作按钮(仅退款中状态) -->
<view class="refund-actions" wx:if="{{jibenShuju.zhuangtai == 4}}">
<view class="action-btn action-cancel" bindtap="showCancelTuikuan">撤销退款申请</view>
<view class="action-btn action-modify" bindtap="showModifyTuikuan">修改退款理由</view>
</view>
</view>
<!-- 接单员信息卡片仅当接单员ID存在时显示 -->
<view class="card dashou-card" wx:if="{{dashouInfo.yonghuid}}">
<view class="card-title">服务接单员</view>
<view class="dashou-header">
<!-- 接单员头像,圆形 -->
<image class="dashou-avatar" src="{{dashouInfo.avatar || '/images/default-avatar.png'}}" mode="aspectFill"/>
<view class="dashou-detail">
<!-- 接单员昵称 -->
<text class="dashou-nicheng">{{dashouInfo.nicheng || '未知昵称'}}</text>
<!-- 接单员用户ID行可复制 -->
<view class="dashou-id-row"><text class="label">用户ID</text><text class="value">{{dashouInfo.yonghuid}}</text><text class="copy-btn" bindtap="fuzhiWenben" data-text="{{dashouInfo.yonghuid}}">📋</text></view>
</view>
</view>
</view>
<!-- 服务详情卡片,展示交付图片、留言、退款理由等 -->
<view class="card service-card" wx:if="{{xiangxiShuju.dashou_jiaofu.length > 0 || xiangxiShuju.dashou_liuyan || xiangxiShuju.tuikuan_liyou || xiangxiShuju.shangjia_liuyan}}">
<view class="card-title">服务详情</view>
<!-- 交付图片区域:使用 grid-img-wrapper 实现正方形九宫格 -->
<block wx:if="{{xiangxiShuju.dashou_jiaofu.length > 0}}">
<view class="sub-title">交付图片</view>
<view class="image-grid">
<!-- 循环渲染每张交付图片 -->
<block wx:for="{{xiangxiShuju.dashou_jiaofu}}" wx:key="index">
<!-- 正方形容器 -->
<view class="grid-img-wrapper">
<!-- 图片绝对定位填充容器 -->
<image class="grid-img" src="{{item}}" mode="aspectFill" bindtap="yulanTupian" data-url="{{item}}" data-urls="{{xiangxiShuju.dashou_jiaofu}}"/>
</view>
</block>
</view>
</block>
<!-- 接单员留言 -->
<block wx:if="{{xiangxiShuju.dashou_liuyan}}">
<view class="sub-title">接单员留言</view>
<view class="content-box">{{xiangxiShuju.dashou_liuyan}}</view>
</block>
<!-- 退款理由 -->
<block wx:if="{{xiangxiShuju.tuikuan_liyou}}">
<view class="sub-title">退款理由</view>
<view class="content-box">{{xiangxiShuju.tuikuan_liyou}}</view>
</block>
<!-- 商家留言 -->
<block wx:if="{{xiangxiShuju.shangjia_liuyan}}">
<view class="sub-title">商家留言</view>
<view class="content-box">{{xiangxiShuju.shangjia_liuyan}}</view>
</block>
</view>
<!-- 罚款信息卡片,仅当罚单数据存在时显示 -->
<view class="card fakuan-card" wx:if="{{fadanData}}">
<view class="card-title">罚款信息</view>
<!-- 罚款金额,红色显示 -->
<view class="info-row"><text class="label">罚款金额</text><text class="value price-red">¥{{fadanData.fakuanjine || '0.00'}}</text></view>
<!-- 罚款理由 -->
<view class="info-row"><text class="label">罚款理由</text><text class="value">{{fadanData.chufaliyou || '-'}}</text></view>
<!-- 是否影响抢单 -->
<view class="info-row"><text class="label">是否影响抢单</text><text class="value">{{fadanData.yingxiang_qiangdan == 1 ? '是' : '否'}}</text></view>
<!-- 罚单状态 -->
<view class="info-row"><text class="label">罚单状态</text><text class="value">{{fadanData.zhuangtai == 1 ? '待缴纳' : fadanData.zhuangtai == 2 ? '已缴纳' : fadanData.zhuangtai == 3 ? '申诉中' : '已驳回'}}</text></view>
<!-- 如果有申诉理由,显示 -->
<block wx:if="{{fadanData.shensuliyou}}"><view class="sub-title">申诉理由</view><view class="content-box">{{fadanData.shensuliyou}}</view></block>
<!-- 如果有同意处罚理由,显示 -->
<block wx:if="{{fadanData.tongyi_chufaliyou}}"><view class="sub-title">同意处罚理由</view><view class="content-box">{{fadanData.tongyi_chufaliyou}}</view></block>
<!-- 如果有驳回理由,显示 -->
<block wx:if="{{fadanData.bohuiliyou}}"><view class="sub-title">驳回理由</view><view class="content-box">{{fadanData.bohuiliyou}}</view></block>
<!-- 创建时间 -->
<view class="info-row"><text class="label">创建时间</text><text class="value">{{fadanData.create_time}}</text></view>
<!-- 更新时间 -->
<view class="info-row"><text class="label">更新时间</text><text class="value">{{fadanData.update_time}}</text></view>
<!-- 新增:罚单操作按钮区域(根据状态显示) -->
<view class="fakuan-actions" wx:if="{{fadanData && canPenaltyManage}}">
<!-- 待缴纳(1) 或 申诉中(3):显示修改和撤销按钮 -->
<block wx:if="{{fadanData.zhuangtai == 1 || fadanData.zhuangtai == 3}}">
<view class="action-btn action-modify" bindtap="showModifyFakuan">修改罚款</view>
<view class="action-btn action-cancel" bindtap="showCancelFakuan">撤销罚款</view>
</block>
<!-- 已驳回(4):显示再次申请按钮 -->
<block wx:if="{{fadanData.zhuangtai == 4}}">
<view class="action-btn action-resubmit" bindtap="showResubmitFakuan">再次申请罚款</view>
</block>
</view>
</view>
<!-- 更换接单员后生成的新订单ID展示卡片 -->
<view class="card new-order-card" wx:if="{{xinDingdanId}}">
<view class="card-title">更换接单员成功</view>
<view class="info-row"><text class="label">新订单ID</text><view class="value-with-copy"><text class="value">{{xinDingdanId}}</text><text class="copy-btn" bindtap="fuzhiWenben" data-text="{{xinDingdanId}}">📋</text></view></view>
</view>
<!-- 结算区域卡片仅当订单状态为8结算中时显示 -->
<view class="card jiesuan-card" wx:if="{{jibenShuju.zhuangtai == 8 && canSettle}}">
<view class="card-title">订单结算</view>
<view class="star-row">
<text class="label">打星评分</text>
<view class="stars">
<!-- 循环渲染五颗星星 -->
<block wx:for="{{xingxingData}}" wx:key="id">
<!-- 点击星星触发评分 -->
<text class="star {{item.active ? 'star-active' : ''}}" bindtap="dianjiXingxing" data-index="{{index+1}}">{{item.active ? '★' : '☆'}}</text>
</block>
</view>
</view>
<!-- 结算留言输入框 -->
<textarea class="liuyan-input" placeholder="留言选填50字" maxlength="50" value="{{jiesuanLiuyan}}" bindinput="shuruLiuyan"/>
<!-- 结算按钮 -->
<view class="jiesuan-btn" bindtap="showJiesuanConfirm">立即结算</view>
</view>
</view>
<!-- 底部固定操作栏 -->
<view class="bottom-bar">
<!-- 第一行按钮:联系客服、联系接单员 -->
<view class="bottom-btn-group">
<view class="btn-outline" bindtap="goToKefu">联系客服</view>
<view class="btn-outline" bindtap="goToChatWithDashou" wx:if="{{dashouInfo.yonghuid}}">联系接单员</view>
</view>
<!-- 第二行按钮:各种操作按钮,根据订单状态显示 -->
<view class="bottom-btn-group">
<!-- 撤销按钮状态为1或7时显示 -->
<view class="btn-warn" bindtap="showChexiaoBtn" wx:if="{{canCancel && (jibenShuju.zhuangtai == 1 || jibenShuju.zhuangtai == 7)}}">撤销订单</view>
<!-- 【暂时隐藏】更换接单员按钮:恢复时取消下面整段注释即可 -->
<!-- <view class="btn-primary" bindtap="showGhDashouConfirm" wx:if="{{canChangePlayer && (jibenShuju.zhuangtai == 2 || jibenShuju.zhuangtai == 8) && dashouInfo.yonghuid}}">更换接单员</view> -->
<!-- 申请退款按钮状态为2或8时显示 -->
<view class="btn-danger" bindtap="showTuikuanBtn" wx:if="{{canRefund && (jibenShuju.zhuangtai == 2 || jibenShuju.zhuangtai == 8)}}">申请退款</view>
</view>
</view>
<!-- 撤销订单弹窗 -->
<view class="modal" wx:if="{{showChexiaoModal}}">
<view class="modal-mask" bindtap="closeChexiaoModal"></view>
<view class="modal-content">
<view class="modal-hd">撤销订单<text class="modal-close" bindtap="closeChexiaoModal">×</text></view>
<textarea class="modal-input" placeholder="输入撤销原因最多50字" maxlength="50" value="{{chexiaoLiyou}}" bindinput="shuruChexiaoLiyou"/>
<view class="modal-btns">
<view class="modal-btn cancel" bindtap="closeChexiaoModal">取消</view>
<view class="modal-btn confirm" bindtap="tijiaoChexiao">{{isChexiaoLoading ? '处理中' : '确认撤销'}}</view>
</view>
</view>
</view>
<!-- 申请退款弹窗 -->
<view class="modal" wx:if="{{showTuikuanModal}}">
<view class="modal-mask" bindtap="closeTuikuanModal"></view>
<view class="modal-content">
<view class="modal-hd">申请退款<text class="modal-close" bindtap="closeTuikuanModal">×</text></view>
<textarea class="modal-input" placeholder="输入退款原因最多50字" maxlength="50" value="{{tuikuanLiyou}}" bindinput="shuruTuikuanLiyou"/>
<view class="modal-btns">
<view class="modal-btn cancel" bindtap="closeTuikuanModal">取消</view>
<view class="modal-btn confirm" bindtap="tijiaoTuikuan">{{isTuikuanLoading ? '处理中' : '确认申请'}}</view>
</view>
</view>
</view>
<!-- 更换接单员确认弹窗 -->
<view class="modal" wx:if="{{showGhDashouModal}}">
<view class="modal-mask" bindtap="closeGhDashouModal"></view>
<view class="modal-content">
<view class="modal-hd">更换接单员<text class="modal-close" bindtap="closeGhDashouModal">×</text></view>
<view class="modal-body">
<text class="modal-tip">确认更换接单员吗?当前订单将被撤销,并生成一条相同内容的新订单(接单员清空)。</text>
</view>
<view class="modal-btns">
<view class="modal-btn cancel" bindtap="closeGhDashouModal">取消</view>
<view class="modal-btn confirm" bindtap="tijiaoGhDashou">{{isGhDashouLoading ? '处理中' : '确认更换'}}</view>
</view>
</view>
</view>
<!-- 申请罚款弹窗 -->
<view class="modal" wx:if="{{showFakuanModal}}">
<view class="modal-mask" bindtap="closeFakuanModal"></view>
<view class="modal-content">
<view class="modal-hd">申请罚款<text class="modal-close" bindtap="closeFakuanModal">×</text></view>
<view class="modal-body">
<text class="modal-tip">罚款原因</text>
<textarea class="modal-input" placeholder="输入罚款原因最多50字" maxlength="50" value="{{fakuanLiyou}}" bindinput="inputFakuanLiyou"/>
<text class="modal-tip">罚款金额</text>
<input class="modal-input-num" type="digit" placeholder="0.00" value="{{fakuanJine}}" bindinput="inputFakuanJine"/>
<view class="toggle-row" bindtap="toggleQiangdan">
<text class="label">是否影响抢单</text>
<view class="toggle {{yingxiangQiangdan ? 'toggle-on' : ''}}">
<view class="toggle-knob"></view>
</view>
</view>
<view class="fenhong-tip">此次罚款应得分红:¥{{jisuanFenhong()}}(利率 {{fenhongLilv*100}}%</view>
</view>
<view class="modal-btns">
<view class="modal-btn cancel" bindtap="closeFakuanModal">取消</view>
<view class="modal-btn confirm" bindtap="tijiaoFakuan">{{isFakuanLoading ? '处理中' : '确认申请'}}</view>
</view>
</view>
</view>
<!-- 结算确认弹窗 -->
<view class="modal" wx:if="{{showJiesuanConfirm}}">
<view class="modal-mask" bindtap="closeJiesuanConfirm"></view>
<view class="modal-content">
<view class="modal-hd">确认结算<text class="modal-close" bindtap="closeJiesuanConfirm">×</text></view>
<view class="modal-body">
<text class="modal-tip">确认结算该订单吗?结算后状态变为“已完成”。</text>
</view>
<view class="modal-btns">
<view class="modal-btn cancel" bindtap="closeJiesuanConfirm">取消</view>
<view class="modal-btn confirm" bindtap="tijiaoJiesuan">{{isJiesuanLoading ? '处理中' : '确认结算'}}</view>
</view>
</view>
</view>
<!-- ========== 新增:修改罚款弹窗 ========== -->
<view class="modal" wx:if="{{showModifyFakuanModal}}">
<view class="modal-mask" bindtap="closeModifyFakuanModal"></view>
<view class="modal-content">
<view class="modal-hd">修改罚款<text class="modal-close" bindtap="closeModifyFakuanModal">×</text></view>
<view class="modal-body">
<text class="modal-tip">罚款理由</text>
<textarea class="modal-input" placeholder="输入罚款理由" maxlength="100" value="{{modifyFakuanLiyou}}" bindinput="inputModifyFakuanLiyou"/>
<text class="modal-tip">罚款金额</text>
<input class="modal-input-num" type="digit" placeholder="0.00" value="{{modifyFakuanJine}}" bindinput="inputModifyFakuanJine"/>
</view>
<view class="modal-btns">
<view class="modal-btn cancel" bindtap="closeModifyFakuanModal">取消</view>
<view class="modal-btn confirm" bindtap="submitModifyFakuan">确认修改</view>
</view>
</view>
</view>
<!-- 撤销罚款弹窗 -->
<view class="modal" wx:if="{{showCancelFakuanModal}}">
<view class="modal-mask" bindtap="closeCancelFakuanModal"></view>
<view class="modal-content">
<view class="modal-hd">撤销罚款<text class="modal-close" bindtap="closeCancelFakuanModal">×</text></view>
<view class="modal-body">
<text class="modal-tip">驳回理由</text>
<textarea class="modal-input" placeholder="输入驳回理由" maxlength="100" value="{{cancelFakuanLiyou}}" bindinput="inputCancelFakuanLiyou"/>
</view>
<view class="modal-btns">
<view class="modal-btn cancel" bindtap="closeCancelFakuanModal">取消</view>
<view class="modal-btn confirm" bindtap="submitCancelFakuan">确认撤销</view>
</view>
</view>
</view>
<!-- 再次申请罚款弹窗 -->
<view class="modal" wx:if="{{showResubmitFakuanModal}}">
<view class="modal-mask" bindtap="closeResubmitFakuanModal"></view>
<view class="modal-content">
<view class="modal-hd">再次申请罚款<text class="modal-close" bindtap="closeResubmitFakuanModal">×</text></view>
<view class="modal-body">
<text class="modal-tip">罚款理由</text>
<textarea class="modal-input" placeholder="输入罚款理由" maxlength="100" value="{{resubmitFakuanLiyou}}" bindinput="inputResubmitFakuanLiyou"/>
<text class="modal-tip">罚款金额</text>
<input class="modal-input-num" type="digit" placeholder="0.00" value="{{resubmitFakuanJine}}" bindinput="inputResubmitFakuanJine"/>
</view>
<view class="modal-btns">
<view class="modal-btn cancel" bindtap="closeResubmitFakuanModal">取消</view>
<view class="modal-btn confirm" bindtap="submitResubmitFakuan">确认申请</view>
</view>
</view>
</view>
<!-- 撤销退款申请弹窗 -->
<view class="modal" wx:if="{{showCancelTuikuanModal}}">
<view class="modal-mask" bindtap="closeCancelTuikuanModal"></view>
<view class="modal-content">
<view class="modal-hd">撤销退款申请<text class="modal-close" bindtap="closeCancelTuikuanModal">×</text></view>
<view class="modal-body">
<text class="modal-tip">撤销理由</text>
<textarea class="modal-input" placeholder="输入撤销理由" maxlength="100" value="{{cancelTuikuanLiyou}}" bindinput="inputCancelTuikuanLiyou"/>
</view>
<view class="modal-btns">
<view class="modal-btn cancel" bindtap="closeCancelTuikuanModal">取消</view>
<view class="modal-btn confirm" bindtap="submitCancelTuikuan">确认撤销</view>
</view>
</view>
</view>
<!-- 修改退款理由弹窗 -->
<view class="modal" wx:if="{{showModifyTuikuanModal}}">
<view class="modal-mask" bindtap="closeModifyTuikuanModal"></view>
<view class="modal-content">
<view class="modal-hd">修改退款理由<text class="modal-close" bindtap="closeModifyTuikuanModal">×</text></view>
<view class="modal-body">
<text class="modal-tip">退款理由</text>
<textarea class="modal-input" placeholder="输入新的退款理由" maxlength="100" value="{{modifyTuikuanLiyou}}" bindinput="inputModifyTuikuanLiyou"/>
</view>
<view class="modal-btns">
<view class="modal-btn cancel" bindtap="closeModifyTuikuanModal">取消</view>
<view class="modal-btn confirm" bindtap="submitModifyTuikuan">确认修改</view>
</view>
</view>
</view>
<!-- 全局通知组件 -->
<global-notification id="global-notification" />
<!-- 教程按钮紧贴右侧右上角5秒后缩进 -->
<view
class="tutorial-btn {{tutorialBtnHidden ? 'tutorial-btn-hidden' : ''}}"
bindtap="onTutorialBtnTap"
hover-class="tutorial-btn-hover"
>
<text class="tutorial-btn-text">教程</text>
</view>
<!-- 使用教程弹窗组件 -->
<popup-notice id="popupNotice" />
</view>