203 lines
6.7 KiB
Plaintext
203 lines
6.7 KiB
Plaintext
<!--pages/dingdanxiangqing/dingdanxiangqing.wxml-->
|
||
<view class="dingdanxiangqing-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"
|
||
binderror="onImageError"
|
||
></image>
|
||
</view>
|
||
<view class="shangpin-jieshao">
|
||
<text class="jieshao-text">{{jibenShuju.jieshao || '暂无描述'}}</text>
|
||
</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>
|
||
|
||
<!-- 备注信息 -->
|
||
<view class="info-item-row" wx:if="{{jibenShuju.beizhu}}">
|
||
<text class="item-label">备注信息：</text>
|
||
<text class="item-value">{{jibenShuju.beizhu}}</text>
|
||
</view>
|
||
|
||
<!-- 指定打手 -->
|
||
<view class="info-item-row" wx:if="{{xiangxiShuju.zhiding}}">
|
||
<text class="item-label">指定打手：</text>
|
||
<text class="item-value">{{xiangxiShuju.zhiding}}</text>
|
||
</view>
|
||
|
||
<!-- 订单ID（可复制） -->
|
||
<view class="info-item-row">
|
||
<text class="item-label">订单ID：</text>
|
||
<view class="item-right-area">
|
||
<text class="item-value">{{jibenShuju.dingdanId}}</text>
|
||
<view
|
||
class="copy-btn"
|
||
bindtap="fuzhiWenben"
|
||
data-text="{{jibenShuju.dingdanId}}"
|
||
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.chuangjianshijian}}</text>
|
||
</view>
|
||
|
||
<!-- 订单价格（红色） -->
|
||
<view class="info-item-row">
|
||
<text class="item-label">订单价格：</text>
|
||
<text class="item-value jine-red">¥{{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>
|
||
|
||
<!-- 服务区域（有服务数据时显示） -->
|
||
<view
|
||
class="fuwu-area"
|
||
wx:if="{{xiangxiShuju.dashou || xiangxiShuju.dashoujiaofu.length > 0 || xiangxiShuju.dashouliuyan}}"
|
||
>
|
||
<view class="info-title">服务详情</view>
|
||
|
||
<!-- 服务打手（可复制） -->
|
||
<view class="info-item-row" wx:if="{{xiangxiShuju.dashou}}">
|
||
<text class="item-label">服务打手：</text>
|
||
<view class="item-right-area">
|
||
<text class="item-value">{{xiangxiShuju.dashou}}</text>
|
||
<view
|
||
class="copy-btn"
|
||
bindtap="fuzhiWenben"
|
||
data-text="{{xiangxiShuju.dashou}}"
|
||
hover-class="copy-btn-hover"
|
||
>
|
||
<text class="copy-icon">📋</text>
|
||
<text class="copy-text">复制</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 打手交付图片 -->
|
||
<view class="dashou-jiaofu-container" wx:if="{{xiangxiShuju.dashoujiaofu.length > 0}}">
|
||
<text class="section-subtitle">打手交付</text>
|
||
<view class="jiaofu-grid">
|
||
<block wx:for="{{xiangxiShuju.dashoujiaofu}}" wx:key="index">
|
||
<view
|
||
class="jiaofu-image-item"
|
||
bindtap="yulanTupian"
|
||
data-url="{{item}}"
|
||
data-urls="{{xiangxiShuju.dashoujiaofu}}"
|
||
>
|
||
<image
|
||
class="jiaofu-image"
|
||
src="{{item}}"
|
||
mode="aspectFill"
|
||
></image>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 打手留言 -->
|
||
<view class="dashou-liuyan-container" wx:if="{{xiangxiShuju.dashouliuyan}}">
|
||
<text class="section-subtitle">打手留言</text>
|
||
<view class="liuyan-content">
|
||
{{xiangxiShuju.dashouliuyan}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 结算区域（仅状态=8时显示） -->
|
||
<view class="jiesuan-area" wx:if="{{jibenShuju.zhuangtai == 8}}">
|
||
<view class="info-title">订单结算</view>
|
||
|
||
<!-- 星星评分 -->
|
||
<view class="pingfen-container">
|
||
<view class="xingxing-layout">
|
||
<text class="section-subtitle">打星评分：</text>
|
||
<view class="xingxing-wrapper">
|
||
<block wx:for="{{xingxingData}}" wx:key="id">
|
||
<text
|
||
class="xingxing-icon {{item.active ? 'xingxing-active' : ''}}"
|
||
bindtap="dianjiXingxing"
|
||
data-index="{{index + 1}}"
|
||
>
|
||
{{item.active ? '★' : '☆'}}
|
||
</text>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 留言输入 -->
|
||
<view class="liuyan-input-container">
|
||
<text class="section-subtitle">订单留言（可选）</text>
|
||
<textarea
|
||
class="liuyan-textarea"
|
||
value="{{jiesuanShuju.liuyan}}"
|
||
placeholder="请输入留言（最多50字）"
|
||
maxlength="50"
|
||
bindinput="shuruLiuyan"
|
||
></textarea>
|
||
<text class="zi-shu">
|
||
已输入 {{jiesuanShuju.liuyan.length}}/50 字
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部安全区域 -->
|
||
<view class="safe-area"></view>
|
||
</view>
|
||
|
||
<!-- 结单按钮（固定在底部，仅状态=8时显示） -->
|
||
<view
|
||
class="jiedan-btn-container"
|
||
wx:if="{{!isLoading && jibenShuju.zhuangtai == 8}}"
|
||
>
|
||
<button
|
||
class="jiedan-btn"
|
||
bindtap="tijiaoJiedan"
|
||
hover-class="btn-hover"
|
||
loading="{{isJiesuanLoading}}"
|
||
disabled="{{isJiesuanLoading}}"
|
||
>
|
||
<text class="btn-text">结单</text>
|
||
<view class="btn-sparkle"></view>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
<global-notification id="global-notification" />
|