xingque/pages/order-detail/order-detail.wxml

<!-- pages/order-detail/order-detail.wxml -->
<view class="page">
  <!-- 加载中 -->
  <view class="loading-box" wx:if="{{isLoading}}">
    <view class="spinner"></view>
    <text class="loading-text">加载中...</text>
  </view>

  <!-- 内容区 -->
  <view class="main" wx:if="{{!isLoading}}">
    <!-- 商品图片与简介 -->
    <view class="goods-box">
      <image class="goods-img" src="{{jibenShuju.tupian}}" mode="aspectFill" binderror="onGoodsImgError"></image>
      <view class="goods-text">{{jibenShuju.jieshao || '暂无描述'}}</view>
    </view>

    <!-- 订单信息 -->
    <view class="block">
      <view class="block-title">订单信息</view>
      <view class="row" wx:if="{{jibenShuju.nicheng}}">
        <text class="label">游戏昵称</text>
        <text class="value">{{jibenShuju.nicheng}}</text>
        <view class="copy-btn" bindtap="copyText" data-text="{{jibenShuju.nicheng}}">复制</view>
      </view>
      <view class="row" wx:if="{{jibenShuju.beizhu}}">
        <text class="label">备注</text>
        <text class="value">{{jibenShuju.beizhu}}</text>
      </view>
      <view class="row">
        <text class="label">订单ID</text>
        <text class="value">{{jibenShuju.dingdanId}}</text>
        <view class="copy-btn" bindtap="copyText" data-text="{{jibenShuju.dingdanId}}">复制</view>
      </view>
      <view class="row">
        <text class="label">价格</text>
        <text class="value price">¥{{jibenShuju.jine}}</text>
      </view>
      <view class="row">
        <text class="label">状态</text>
        <text class="value status-text">{{zhuangtaiWenziMap[jibenShuju.zhuangtai] || '未知'}}</text>
      </view>
      <view class="row">
        <text class="label">创建时间</text>
        <text class="value">{{jibenShuju.chuangjianshijian}}</text>
      </view>
      <view class="row" wx:if="{{jibenShuju.updateTime}}">
        <text class="label">更新时间</text>
        <text class="value">{{jibenShuju.updateTime}}</text>
      </view>
    </view>

    <!-- 接单员信息（有接单员时显示） -->
    <view class="block" wx:if="{{xiangxiShuju.dashou}}">
      <view class="block-title">服务接单员</view>
      <view class="row">
        <text class="label">头像</text>
        <image class="avatar" src="{{xiangxiShuju.dashouTouxiang}}" mode="aspectFill"></image>
      </view>
      <view class="row">
        <text class="label">昵称</text>
        <text class="value">{{xiangxiShuju.dashouNicheng || '未设置'}}</text>
      </view>
      <view class="row">
        <text class="label">接单员ID</text>
        <text class="value">{{xiangxiShuju.dashou}}</text>
        <view class="copy-btn" bindtap="copyText" data-text="{{xiangxiShuju.dashou}}">复制</view>
      </view>
      <view class="row" wx:if="{{xiangxiShuju.jiedanTime}}">
        <text class="label">接单时间</text>
        <text class="value">{{xiangxiShuju.jiedanTime}}</text>
      </view>
      <view class="row" wx:if="{{xiangxiShuju.tijiaoTime}}">
        <text class="label">提交时间</text>
        <text class="value">{{xiangxiShuju.tijiaoTime}}</text>
      </view>
      <!-- 联系接单员 -->
      <view class="contact-btn" bindtap="contactDashou">联系接单员</view>
    </view>

    <!-- 交付图片（九宫格） -->
    <view class="block" wx:if="{{xiangxiShuju.dashoujiaofu.length > 0}}">
      <view class="block-title">交付截图</view>
      <view class="grid-nine">
        <image wx:for="{{xiangxiShuju.dashoujiaofu}}" wx:key="index" class="grid-img" src="{{item}}" mode="aspectFill" bindtap="previewImages" data-url="{{item}}" data-urls="{{xiangxiShuju.dashoujiaofu}}"></image>
      </view>
    </view>

    <!-- 接单员留言 -->
    <view class="block" wx:if="{{xiangxiShuju.dashouliuyan}}">
      <view class="block-title">接单员留言</view>
      <view class="msg-text">{{xiangxiShuju.dashouliuyan}}</view>
    </view>

    <!-- 老板自己的评价（已完成/退款等状态） -->
    <view class="block" wx:if="{{showMyEvaluation}}">
      <view class="block-title">我的评价</view>
      <view class="row">
        <text class="label">上线速度</text>
        <text class="value highlight">{{speedText}}</text>
      </view>
      <view class="row">
        <text class="label">服务态度</text>
        <text class="value highlight">{{attitudeText}}</text>
      </view>
      <view class="row">
        <text class="label">翻车次数</text>
        <text class="value">{{xiangxiShuju.fancheCishu}}</text>
      </view>
      <view class="row" wx:if="{{xiangxiShuju.laobanPingjia}}">
        <text class="label">我的留言</text>
        <text class="value">{{xiangxiShuju.laobanPingjia}}</text>
      </view>
    </view>

    <!-- 结算区域（仅状态8） -->
    <view class="block settle-block" wx:if="{{jibenShuju.zhuangtai == 8}}">
      <view class="block-title">订单结算</view>

      <!-- 翻车次数 -->
      <view class="row vertical">
        <text class="label">翻车次数</text>
        <input class="input" type="number" placeholder="请输入（必填）" value="{{jiesuan.fancheCishu}}" bindinput="onFancheshuInput" />
        <text class="hint" wx:if="{{!jiesuan.fancheCishu}}">填写该订单翻车次数，用于评价接单员实力</text>
      </view>

      <!-- 上线速度 -->
      <view class="row vertical">
        <view class="label-row">
          <text class="label">上线速度</text>
          <text class="standard-link" bindtap="showSpeedStandard">标准详情</text>
        </view>
        <view class="options-grid">
          <view wx:for="{{speedOptions}}" wx:key="value" class="option-card {{jiesuan.speedValue == item.value ? 'active' : ''}}" bindtap="selectSpeed" data-value="{{item.value}}">
            <text class="option-label">{{item.label}}</text>
          </view>
        </view>
        <!-- 解释文字（纯文本，大号醒目） -->
        <view class="explain-text" wx:if="{{speedExplain}}">{{speedExplain}}</view>
      </view>

      <!-- 服务态度 -->
      <view class="row vertical">
        <view class="label-row">
          <text class="label">服务态度</text>
          <text class="standard-link" bindtap="showAttitudeStandard">标准详情</text>
        </view>
        <view class="options-grid">
          <view wx:for="{{attitudeOptions}}" wx:key="value" class="option-card {{jiesuan.attitudeValue == item.value ? 'active' : ''}}" bindtap="selectAttitude" data-value="{{item.value}}">
            <text class="option-label">{{item.label}}</text>
          </view>
        </view>
        <view class="explain-text" wx:if="{{attitudeExplain}}">{{attitudeExplain}}</view>
      </view>

      <!-- 留言 -->
      <view class="row vertical">
        <text class="label">留言（选填）</text>
        <textarea class="textarea" value="{{jiesuan.liuyan}}" placeholder="给接单员或平台留言" maxlength="50" bindinput="onLiuyanInput"></textarea>
        <text class="count">{{jiesuan.liuyan.length}}/50</text>
      </view>

      <view class="settle-btn" bindtap="showSettleConfirm">确认结算</view>
    </view>
  </view>

  <!-- 上线速度标准弹窗 -->
  <view class="standard-modal" wx:if="{{showSpeedModal}}" bindtap="hideSpeedModal">
    <view class="modal-content" catchtap="noop">
      <view class="modal-title">上线速度标准</view>
      <scroll-view scroll-y class="modal-body">
        <view wx:for="{{speedOptions}}" wx:key="value" class="standard-item">
          <text class="s-label">{{item.label}}（{{item.value}}分）</text>
          <text class="s-desc">{{item.explain}}</text>
        </view>
      </scroll-view>
      <view class="modal-close" bindtap="hideSpeedModal">关闭</view>
    </view>
  </view>

  <!-- 服务态度标准弹窗 -->
  <view class="standard-modal" wx:if="{{showAttitudeModal}}" bindtap="hideAttitudeModal">
    <view class="modal-content" catchtap="noop">
      <view class="modal-title">服务态度标准</view>
      <scroll-view scroll-y class="modal-body">
        <view wx:for="{{attitudeOptions}}" wx:key="value" class="standard-item">
          <text class="s-label">{{item.label}}（{{item.value}}分）</text>
          <text class="s-desc">{{item.explain}}</text>
        </view>
      </scroll-view>
      <view class="modal-close" bindtap="hideAttitudeModal">关闭</view>
    </view>
  </view>

  <!-- 结算确认倒计时弹窗 -->
  <view class="confirm-modal" wx:if="{{showConfirm}}">
    <view class="confirm-box">
      <text class="confirm-title">确认结算订单？</text>
      <text class="confirm-desc">结算后订单将变为已完成，确认无误后再点击按钮（{{countdown}}s）</text>
      <view class="confirm-btn {{countdown===0 ? 'active' : ''}}" bindtap="confirmSettle">确认结算</view>
      <view class="cancel-btn" bindtap="cancelConfirm">取消</view>
    </view>
  </view>
</view>