yanglao/addons/service/wxapp/服务端/pages/orderDetail/orderDetail.wxml

<wxs src="../../wxs/tool.wxs" module="tool"></wxs>
<view class="orderDetail">
  <view class="main-box">
    <view class="head">
      <view class="state-text">{{info.orderLog[0].content}}</view>
      <view class="explain-text">{{tool.formatTime(info.orderLog[0].createtime)}}</view>

      <view class="z-flex-c-s-b z-padding-lr-32 z-padding-t-32 z-padding-b-80">
        <view>
          <image class="state-img" wx:if="{{info.status > 1}}" src="../../static/index/order/state-1-active.png">
          </image>
          <image class="state-img" wx:else src="../../static/index/order/state-1.png"></image>
          <view class="cur-state">已接单</view>
        </view>
        <view class="line-box z-flex">
          <view class="line"></view>
        </view>

        <view>
          <image class="state-img" wx:if="{{info.status > 2}}" src="../../static/index/order/state-2-active.png">
          </image>
          <image class="state-img" wx:else src="../../static/index/order/state-2.png"></image>
          <view class="cur-state">已出发</view>
        </view>
        <view class="line-box z-flex">
          <view class="line"></view>
        </view>

        <view>
          <image class="state-img" wx:if="{{info.status > 3}}" src="../../static/index/order/state-3-active.png">
          </image>
          <image class="state-img" wx:else src="../../static/index/order/state-3.png"></image>
          <view class="cur-state">已到达</view>
        </view>
        <view class="line-box z-flex">
          <view class="line"></view>
        </view>

        <view>
          <image class="state-img" wx:if="{{info.status > 4}}" src="../../static/index/order/state-4-active.png">
          </image>
          <image class="state-img" wx:else src="../../static/index/order/state-4.png"></image>
          <view class="cur-state">开始服务</view>
        </view>
        <view class="line-box z-flex">
          <view class="line"></view>
        </view>

        <view>
          <image class="state-img" wx:if="{{info.status > 5}}" src="../../static/index/order/state-5-active.png">
          </image>
          <image class="state-img" wx:else src="../../static/index/order/state-5.png"></image>
          <view class="cur-state">服务完成</view>
        </view>
      </view>
    </view>
    <view class="settle-box z-margin-32" wx:if="{{info.is_settle > 0}}">
      <image src="/static/index/settle.png" class="settle-bg"></image>
      <view class="settle">
        <view class="settle-title z-flex z-radius-b-20">{{info.is_settle == 1 ? '待结算' : '已结算'}}</view>
        <view class="z-flex-c z-margin-t-40 z-margin-b-100">
          <view class="z-flex-1">
            <view class="z-font-24 text_666">服务者结算</view>
            <view class="z-font-40 z-font-w" wx:if="{{info.is_settle > 1}}">
              {{tool.sum(settle.skillPrice,settle.act_travel_price)}}</view>
            <view class="z-font-40 z-font-w" wx:else>结算中</view>
          </view>
          <view class="z-flex-1" wx:if="{{info.shop_id>0}}">
            <view class="z-font-24 text_666">商家结算</view>
            <view class="z-font-40 z-font-w" wx:if="{{info.is_settle > 1}}">
              {{tool.sum(settle.shopPrice,settle.act_travel_price)}}</view>
            <view class="z-font-40 z-font-w" wx:else>结算中</view>
          </view>
        </view>
        <view class="z-flex-c z-margin-b-24">
          <view class="z-font-30">支付总金额</view>
          <view class="z-flex-1"></view>
          <view class="z-font-32">￥{{settle.payprice}}</view>
        </view>
        <view class="num-box z-flex-c">
          <view class="num z-flex-c z-radius-8">
            <view class="z-font-24  text_666">项目金额</view>
            <view class="z-flex-1"></view>
            <view class="z-font-24">￥{{settle.price}}</view>
          </view>

          <view class="num z-flex-c z-radius-8" wx:if="{{info.discount < 100}}">
            <view class="z-font-24  text_666">折扣</view>
            <view class="z-flex-1"></view>
            <view class="z-font-24">￥{{settle.goods_total_price}}</view>
            <view class="discount z-font-24 z-padding-lr-8 z-margin-l-8 z-flex">{{info.discount/10}}折</view>
          </view>
          <view class="num z-flex-c z-radius-8">
            <view class="z-font-24  text_666">优惠券</view>
            <view class="z-flex-1"></view>
            <view class="z-font-24">￥{{settle.coupon_price}}</view>
          </view>
          <view class="num z-flex-c z-radius-8">
            <view class="z-font-24  text_666">补差价</view>
            <view class="z-flex-1"></view>
            <view class="z-font-24">￥{{settle.premium_price}}</view>
          </view>
          <view class="num z-flex-c z-radius-8">
            <view class="z-font-24  text_666">加项</view>
            <view class="z-flex-1"></view>
            <view class="z-font-24">￥{{settle.add_price}}</view>
          </view>
          <view class="num z-flex-c z-radius-8">
            <view class="z-font-24  text_666">车费</view>
            <view class="z-flex-1"></view>
            <view class="z-font-24">￥{{settle.travel_price}}</view>
          </view>
        </view>
        <view class="z-flex-c z-margin-b-24">
          <view class="z-font-30">结算项目金额</view>
          <view class="z-flex-1"></view>
          <view class="z-font-32">￥{{settle.settle_price}}</view>
        </view>
        <view class="num-box z-flex-c">
          <view class="num z-flex-c z-radius-8">
            <view class="z-font-24  text_666">退款金额</view>
            <view class="z-flex-1"></view>
            <view class="z-font-24">￥{{settle.refund_price}}</view>
          </view>
          <view class="num z-flex-c z-radius-8">
            <view class="z-font-24  text_666">结算车费</view>
            <view class="z-flex-1"></view>
            <view class="z-font-24">￥{{settle.act_travel_price}}</view>
          </view>

        </view>
      </view>
    </view>
    <view class="floor-2"></view>
    <!-- 主要 content -->
    <view class="order-info-box">
      <view class="make-info">
        <view class="chunk"></view>
        <view class="z-margin-t-32 z-margin-l-32 make-time">预约时间</view>
        <view class="z-margin-t-16 z-padding-l-32">
          <text class="time-date">{{tool.formatTime(info.starttime, 'yyyy-mm-dd')}}</text>
          <text class="z-margin-l-16 time-hour theme-color">{{tool.formatTime(info.starttime, 'HH:MM')}}</text>
        </view>
        <view class="z-margin-lr-32 z-margin-t-24 z-margin-b-16 site">
          {{info.orderAddress.province}}{{info.orderAddress.city}}{{info.orderAddress.district}}{{info.orderAddress.area}}{{info.orderAddress.address}}
        </view>

        <view class="user-info z-flex-c z-padding-b-16" wx:if="{{info.status > 1}}">
          <text class="z-padding-lr-32">{{info.orderAddress.name}}{{info.orderAddress.sex == 1 ? '男士' : '女士'}}</text>
          {{info.orderAddress.mobile}}
          <view class="z-flex-1"></view>
          <image class="phone-img z-margin-r-32" bindtap="navigation" src="../../static/index/order/navigation.png">
          </image>
          <image class="phone-img" bindtap="call" src="../../static/index/order/phone.png"></image>
        </view>
        <view class="user-remark z-padding-tb-32">
          <text class="z-padding-lr-32 bz-title">备注</text> {{info.memo}}
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="orders-box z-margin-t-24">
        <view class="order-each z-flex-c-s-b z-padding-lr-32 z-padding-t-24">
          <image class="order-each-img" src="{{tool.cdn(info.detail.image)}}" mode="aspectFill"></image>
          <view class="z-margin-l-24 z-flex-1 hidden">
            <view class="z-flex-c">
              <view class="order-each-title">{{info.detail.name}}</view>
              <view class="z-flex-1"></view>
              <view class="types z-flex z-font-18 z-flex-0">{{info.to_shop === 'door' ? '上门服务' : '到店核销'}}</view>
            </view>
            <view class="order-number"> <text class="unit-money">￥</text> <text
                class="order-price">{{info.detail.price}}</text>
              <text class="quantity">x{{info.detail.num}}</text>
            </view>
          </view>
        </view>

        <view class="wire z-margin-t-24"></view>
        <view class="z-flex-c z-padding-lr-32  z-margin-t-32" wx:if="{{info.discount < 100}}">
          <view class="z-font-26">会员价</view>
          <view class="z-flex-1"></view>
          <text class="ticket-price">￥{{tool.toFix(info.price * info.discount /100)}}</text>
          <view class="discount z-font-24 z-padding-lr-8 z-margin-l-24 z-flex">{{info.discount/10}}折</view>
        </view>
        <view class="z-padding-lr-32 z-flex-c-s-b z-margin-t-32 font">
          <view>
            <image class="ticket-img" src="../../static/index/order/ticket.png"></image>
            优惠券
          </view>
          <view>- <text class="ticket-price">￥{{info.coupon_price}}</text></view>
        </view>
        <view class="z-padding-lr-32 z-flex-c-s-b z-margin-t-32 font">
          <view>补差价</view>
          <view>+ <text>￥{{info.premium_price}}</text></view>
        </view>
        <view class="z-padding-lr-32 z-flex-c-s-b z-margin-t-32 font" wx:for="{{info.adddetail}}">
          <view>加项（{{item.name}}/{{item.cost_seconds}}分钟/数量:{{item.num}}）</view>
          <view>+ <text>￥{{tool.toFix(item.price*item.num)}}</text></view>
        </view>
        <view class="z-padding-lr-32 z-flex-c-s-b z-margin-t-32 font">
          <view wx:if="{{info.distance}}">车费（共{{info.distance}}公里）</view>
          <view wx:else>车费</view>
          <view>- <text>￥{{info.travel_price}}</text></view>
        </view>

        <view class="wire z-margin-t-32"></view>

        <view class="total-t z-padding-r-32 z-padding-tb-24">合计：<text class="total-price">￥{{info.payprice}}</text>
        </view>
        <view class="total-t z-padding-r-32 z-padding-b-24" wx:if="{{info.refund_price > 0}}">（退款金额：<text
            class="z-font-22 refund">￥{{info.refund_price}}</text>）</view>
      </view>

      <!-- 订单编号 -->
      <view class="order-odd z-margin-t-24 z-padding-32">
        <view class="z-flex-c-s-b">
          <view class="odd-text">订单编号：</view>
          <view class="order-color" bindtap="copy" data-content="{{info.orderId}}">{{info.orderId}} <text
              class="copk">复制</text> </view>
        </view>
        <view class="z-flex-c-s-b z-margin-t-24">
          <view class="odd-text">下单时间：</view>
          <view class="order-color">{{tool.formatTime(info.paytime)}}</view>
        </view>
        <view class="z-flex-c-s-b z-margin-t-24">
          <view class="odd-text">支付方式：</view>
          <view class="order-color">{{info.paytype === 4 ? '余额' : '微信'}}</view>
        </view>
      </view>
    </view>
  </view>


  <!-- 按钮 -->
  <view class="order-btn-box z-padding-lr-32 z-padding-t-32" style="padding-bottom: {{safeBottom}}">
    <view class="z-btn" wx:if="{{info.is_service <= 0 && info.status === 1 && !info.skill_id}}" bindtap="accept">立即抢单
    </view>
    <view class="z-btn" wx:if="{{info.is_service <= 0 && info.status === 1 && info.skill_id}}" bindtap="accept">立即接单
    </view>
    <view class="z-btn" wx:if="{{info.is_service <= 0 && info.status === 2}}" bindtap="go">立即出发
    </view>
    <view class="z-btn" wx:if="{{info.is_service <= 0 && info.status === 3}}" bindtap="showUpload">
      已到达
    </view>
    <view class="z-btn" wx:if="{{info.is_service <= 0 && info.status === 4}}" bindtap="start">开始服务
    </view>
    <view class="z-btn" wx:if="{{info.is_service <= 0 && info.status === 5}}" bindtap="showUpload">
      服务完成
    </view>
  </view>
  <van-popup round show="{{ show }}" position="bottom" close-on-click-overlay="true" bind:close="onClose">
    <view class="upload-box">
      <view class="z-font-30 z-flex z-padding-t-32">请上传图片</view>
      <view class="image-box z-padding-32">
        <view class="images-box" wx:for="{{images}}" data-index="{{index}}" bindtap="chooseImages">
          <image src="{{tool.cdn(item)}}" class="upload" mode="aspectFill"></image>
          <image src="/static/service/del.png" class="del" catchtap="delImages" data-index="{{index}}"></image>
        </view>
        <view class="images-box" bindtap="chooseImages" wx:if="{{images.length <= 9 }}">
          <image src="/static/index/upload.png" class="upload">
          </image>
        </view>

      </view>
      <view class="z-btn z-margin-32" wx:if="{{info.is_service <= 0 && info.status === 3}}" bindtap="arrive">已到达</view>
      <view class="z-btn z-margin-32" wx:if="{{info.is_service <= 0 && info.status === 5}}" bindtap="finish">服务完成
      </view>
    </view>
  </van-popup>
</view>