354 lines
19 KiB
Plaintext
354 lines
19 KiB
Plaintext
<!--pages/sjddxq/sjddxq.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="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}}">
|
||
<!-- 待缴纳(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}}">
|
||
<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="{{jibenShuju.zhuangtai == 1 || jibenShuju.zhuangtai == 7}}">撤销订单</view>
|
||
<!-- 【暂时隐藏】更换打手按钮：恢复时取消下面整段注释即可 -->
|
||
<!-- <view class="btn-primary" bindtap="showGhDashouConfirm" wx:if="{{(jibenShuju.zhuangtai == 2 || jibenShuju.zhuangtai == 8) && dashouInfo.yonghuid}}">更换打手</view> -->
|
||
<!-- 申请退款按钮：状态为2或8时显示 -->
|
||
<view class="btn-danger" bindtap="showTuikuanBtn" wx:if="{{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> |