jzmall_wx/pages/ucenter/orderDetail/orderDetail.wxml

<wxs src="../../../utils/formatFuc.wxs" module="utils" />
<view class="container">
  <!-- 未支付 -->
  <view class="not-pay-module" wx:if="{{payOverTime>0}}">
    <view class="pay-amount">
      <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-wallet.png"></image>
      <view> 待支付，剩余<text>{{utils.formatOverTime(payOverTime)}}</text></view>
    </view>
    <view class="over-time">超过30分钟未支付,订单将自动取消</view>
    <view class="pay-now" catchtap="payOrder" data-id="{{orderInfo.id}}" data-sn="{{orderInfo.orderSn}}" wx:if="{{orderInfo.handleOption.pay}}">立即支付</view>
  </view>

  <!-- 卡片 -->
  <view class="top-card" tt-if="{{orderInfo.orderStatusVal!='未支付'&&orderInfo.orderStatusVal!='已取消'}}">

    <view class="top-name">{{orderInfo.goodsName}}</view>


    <view class="top-times">
      <view class="top-sku-name">{{orderInfo.skuName}}</view>
      <view>剩余<text>{{remainTimes}}</text>次</view>
      <view class="serviced-times">已服务<text>{{orderInfo.servedTimes}}</text>次</view>
    </view>
    <view class="top-tips">预约后，将为您上门服务，详情请咨询客服。</view>
    <!-- tt-if="{{orderInfo.orderStatusVal!='服务已完成'}}" -->
    <view class="appoint-tag" data-detail="{{orderInfo.detailId}}" bindtap="goAppoint" wx:if="{{orderInfo.handleOption.book}}">预约服务</view>

  </view>

  <!-- 退款工单 -->
  <view class="refund-order-module" wx:if="{{afterSale}}">
    <view class="refund-title">
      <view class="title-text">退款工单</view>
      <view class="title-order">编号：{{afterSale.afterSn}}</view>
      <view class="title-status">{{afterSale.statusVal}}</view>
    </view>
    <view class="refund-main">
      <view class="row">
        <text>申请时间：</text>
        {{afterSale.createTime}}
      </view>
      <view class="row" wx:if="{{afterSale.refundTime!=null}}">
        <text>退款时间：</text>
        {{afterSale.refundTime}}
      </view>
      <view class="row">
        <text>退款原因：</text>
        {{afterSale.typeVal}}
      </view>
      <view class="row">
        <text>详细原因：</text>
        {{afterSale.reason}}
      </view>
    </view>
    <view class="refuse-remark-wrapper" wx:if="{{afterSale.statusVal=='已拒绝'}}">
      <view class="refuse-remark">
        <text>已拒绝：</text>
        {{afterSale.refusalRemark}}
      </view>
    </view>
    <view wx:if="{{afterSale.statu=='1'}}" class="refund-operate">
      <view bindtap="cancelRefund">取消退款</view>
    </view>

  </view>

  <!-- 工单列表 -->
  <view class="service-list" wx:if="{{dyDetails.length>0}}">
    <view class="service-item" wx:for="{{dyDetails}}" wx:key="index">
      <view class="service-title">
        <view class="sercive-name">服务{{utils.servciceName(index)}}</view>
        <view class="service-id">工单编号：{{item.id}}</view>
        <view class="service-status">{{item.statusVal}}</view>
      </view>

      <view class="service-main">
        <view class="customer-info">
          <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-map.png"></image>
          <view class="customer-main">
            <view class="main-line">
              <view>{{item.customerName}}</view>
              <view class="phone">{{item.customerPhone}}</view>
            </view>
            <view class="customer-address" wx:if="{{item.addressName}}">{{item.addressName}}</view>
            <view class="customer-address" wx:else="">{{item.serviceAddress}}</view>
          </view>
        </view>
        <view class="row" wx:if="{{isShowPL}}">
          <text>开始时间：</text>{{item.bookStartTime}}
        </view>
        <view class="row" wx:else="">
          <text>预约时段：</text>{{item.bookTime}}
        </view>

        <view class="several-people" wx:if="{{item.isMultiWorker}}">
          <view class="title-tips">
            <view class="image">
              <image src="https://jzmall.lifejingzhi.com/file/jzmall-dy/dr.png" mode="aspectFill"></image>
            </view>

            <view class="tips-content">
              本单为多人上门服务，上门时段可能不同，请您留意
            </view>
          </view>

          <view class="product-one" wx:for="{{item.serviceInfoList}}" wx:for-item="iitem">
            <view class="service-name">
              {{iitem.skillName}}
            </view>
            <view class="service-peoplenum">
              ({{iitem.workerNum}}人)
            </view>
            <view class="service-time">
              {{iitem.bookTime}}
            </view>
          </view>
        </view>




        <view class="row" wx:if="{{isShowPL}}">
          <text>服务内容：</text>{{orderInfo.skuName}}
        </view>
        <view class="row">
          <text>预约备注：</text>{{item.customerRemark}}
        </view>
      </view>
      <view class="service-remark-wrapper">
        <view class="service-store">
          <view class="store-left">
            <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-store.png"></image>
            <view>{{item.fraShopName}}</view>
          </view>
          <view>服务咨询</view>
          <view class="store-right" bindtap="makeStorePhone" data-phone="{{item.shopPhone}}">

            <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-phone.png"></image>
          </view>
        </view>

        <view class="service-remark" wx:if="{{item.reminder}}">
          <text>提醒：</text>
          {{item.reminder}}
        </view>
      </view>

      <view wx:if="{{item.ticketVo}}" class="ticket">
        <view class="title">
          <view style="font-weight: 600;">售后进度</view>
          <view class="comment" bindtap="showTicketTips" data-id="{{item.ticketVo.ticketId}}" wx:if="{{item.ticketVo.isSatisfaction}}">评价售后</view>
        </view>

        <view class="timeline">
          <block wx:for="{{item.ticketVo.actions}}" wx:for-index="index" wx:for-item="action" wx:key="action">
            <view class="timeline-event">
              <view style="{{index==0?'background-color: #09afff':'background-color: rgb(193 194 195)'}}" class="timeline-marker"></view>
              <!-- <view wx:else style="background-color: rgb(193 194 195);border-radius: 50%; height: 15px;width: 15px;"></view> -->

              <view class="timeline-event-copy">
                <view class="timeline-event-thumbnail">
                  <text class="{{index==0?'':'timeline-text'}}">状态：{{action.status}}</text>
                  <text class="timeline-text">{{action.createTime}}</text>
                </view>
                <view class="timeline-event-content">
                  <text class="timeline-text">{{action.content}}</text>
                </view>
              </view>
            </view>
          </block>
        </view>

      </view>

      <view class="service-operate" wx:if="{{item.status==1||item.status==7||item.acceptanceAble}}">
        <view wx:if="{{item.canModify}}" bindtap="goEditAppoint" data-id="{{item.id}}" class="warning-color" data-status="{{item.status}}" data-time="{{item.bookTime}}">修改预约</view>
        <view wx:if="{{item.acceptanceAble}}" bindtap="goReVisit" data-id="{{item.id}}">服务验收</view>
        <view wx:if="{{item.isCancel}}" class="del" bindtap="goCancelBook" data-id="{{item.id}}" data-phone="{{item.shopPhone}}">取消预约</view>
      </view>

    </view>
  </view>

  <!-- 商品和订单信息 -->
  <view class="product-block">

    <view class="product-detail">
      <view class="profuct-info">
        <image mode="aspectFit" class="product-img" src="{{orderInfo.picUrl+'?w=200'}}"></image>
        <view class="info-right">
          <view class="info-main">
            <view class="product-name">{{orderInfo.goodsName}}</view>
            <view class="price">¥<text style="font-size: 24rpx;">{{orderInfo.actualPrice}}</text></view>
          </view>
          <view class="sku-name" wx:if="{{orderInfo.increaseSumPrice}}">
            <view> 加购: {{orderInfo.unitDescribe}}*{{orderInfo.unitIncreaseNumber}}</view>
            <view>¥{{orderInfo.increaseSumPrice}}</view>

          </view>
          <view class="sku-name">
            规格:{{orderInfo.skuName}}
          </view>
          <view class="other-info">服务{{orderInfo.serviceTimes}}次</view>
        </view>
      </view>
    </view>
    <!-- 过期退，随时退 -->
    <view wx:if="{{payOverTime>0}}" class="refund-tips-bar">
      <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-checkred.png"></image>
      <view>过期退</view>
      <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-checkred.png"></image>
      <view>随时退</view>
      <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-checkred.png"></image>
      <view>0费用</view>
      <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-checkred.png"></image>
      <view>全国百城连锁</view>

    </view>

  </view>
  <view class="order-info">
    <view class="order-top">
      <view class="topic">
        订单编号：
      </view>
      <view>
        {{orderInfo.orderSn}}
      </view>
      <image mode="aspectFit" class="copy-img" src="https://mall.zhaijieshi.cc/file/jzmall-dy/icon-order-copy.png" bindtap="copyOrder"></image>

    </view>
    <view class="order-top">
      <view class="topic">
        下单时间：
      </view>
      <view>
        {{orderInfo.createTime}}
      </view>
    </view>
    <view class="order-top">
      <view class="topic">
        支付方式：
      </view>
      <view>
        {{orderInfo.payChannel}}
      </view>
    </view>
    <view class="order-bottom">
      <view class="order-price">
        <view class="topic">
          订单金额：
        </view>
        <view>
          ¥{{orderInfo.orderPrice}}
        </view>
      </view>
      <view class="coupon-price">
        <view class="topic">
          优惠金额：
        </view>
        <view>
          ¥{{orderInfo.discountPrice}}
        </view>
      </view>
      <view class="real-price">
        实际付款：<text>¥{{orderInfo.actualPrice}}</text>
      </view>

    </view>
  </view>
  <!-- 客户服务 -->
  <view class="customer-service">
    <view class="title">
      客户服务
    </view>
    <view class="contact-store" wx:if="{{payOverTime>0}}">
      <view class="topic">联系门店</view>
      <view class="remark">预约、服务信息咨询</view>
      <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-phone.png" bindtap="makeStorePhone" data-phone="4009218987"></image>
    </view>
    <view class="contact-company">
      <view class="topic">总部客服</view>
      <view class="remark">订单咨询、投诉建议</view>
      <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-order-kf.png" bindtap="goIm"></image>
      <!-- <button class="contact-btn" open-type="contact">客服</button> -->
    </view>
  </view>

  <!-- 底部按钮 -->
  <view class="fixed-bottom">
    <view class="order-operate-wrapper">

      <view catchtap="cancelOrder" wx:if="{{orderInfo.handleOption.cancel}}" data-id="{{orderInfo.id}}" class="del">取消订单
      </view>
      <!-- <view catchtap="aftersaleOrder" data-id="{{orderInfo.id}}" wx:if="{{orderInfo.handleOption.refund}}" class="del">
        售后/退款</view> -->

      <!-- <view  data-id="{{orderInfo.id}}" data-sn="{{orderInfo.orderSn}}" data-aid="{{orderInfo.addressId}}"
        data-type="{{orderInfo.type}}" wx:if="{{orderInfo.handleOption.book}}" class="eval-btn">评价</view> -->

      <view wx:if="{{orderInfo.handleOption.book}}" data-detail="{{orderInfo.detailId}}" class="appoint" catchtap="goAppoint">预约服务</view>
      <view catchtap="payOrder" data-id="{{orderInfo.id}}" data-sn="{{orderInfo.orderSn}}" wx:if="{{orderInfo.handleOption.pay}}">立即支付</view>
      <view class="blue-color" wx:if="{{orderInfo.orderStatus==201||orderInfo.orderStatus==205||orderInfo.orderStatus==206||orderInfo.orderStatus==301}}" bindtap="showMsg">追加备注</view>
      <!-- <view class="btn-rebuy" bindtap="buyAgain" data-id="{{orderInfo.goodsId}}"
        wx:if="{{orderInfo.orderStatusVal!='未支付'}}">再次购买</view> -->
    </view>
  </view>

</view>
<!-- 投诉建议弹框 -->
<view class="goods-info-overlay" wx:if="{{ complainTips }}">
  <view class="goods-info-popup">
    <view class="popup-title">
      投诉建议
    </view>
    <view class="tips-title">
      电话：{{shopPhone}}
    </view>
    <view style="padding:0 20rpx 100rpx 32rpx;margin-top:-20rpx;">
      对服务不满意或其他建议，请拨打投诉电话。
    </view>
    <view class="popup-bottom">
      <view class="btn-cancel" bindtap="cancelComplain">取消</view>
      <view class='btn-conf' bindtap="confComplain">拨打电话</view>
    </view>
  </view>
</view>


<!-- 客户追加备注弹框 -->
<view class="appoint-overlay-wrapper" wx:if="{{ msgShow }}" bindtap="onMsgClose">
</view>
<view class="remark-popup" wx:if="{{ msgShow }}">
  <view class="title">
    订单备注
  </view>
  <textarea bindinput="bindMsgInput" placeholder="请输入订单备注信息,此信息会提醒到服务人员" value="{{message}}" placeholder-style="font-size:26rpx;color:#666;" maxlength="100" class="remark-textarea"></textarea>
  <view class="btn" bindtap="confirmMsg">
    确定
  </view>
</view>


<!-- 售后投诉满意回收 -->
<view class="goods-info-overlay" wx:if="{{ ticketTips }}">
  <view class="goods-info-popup">
    <view class="popup-title">
      售后评价
    </view>

    <view class="ticket-tips-content">
      你的售后问题是否已被解决？您对售后服务是否满意？请打分。
    </view>
    <view style="display: flex;justify-content: center;">
      <image class="ticket-img" data-id="1" bindtap="selectTicketValue" src="/static/images/new/{{satisfaction==0?'star':(satisfaction==2||satisfaction==1?'star_red':'star_yellow')}}.png">
      </image>
      <image class="ticket-img" data-id="2" bindtap="selectTicketValue" src="/static/images/new/{{satisfaction<=1?'star':(satisfaction==2?'star_red':'star_yellow')}}.png"></image>
      <image class="ticket-img" data-id="3" bindtap="selectTicketValue" src="/static/images/new/{{satisfaction>=3?'star_yellow':'star'}}.png">
      </image>
      <image class="ticket-img" data-id="4" bindtap="selectTicketValue" src="/static/images/new/{{satisfaction>=4?'star_yellow':'star'}}.png">
      </image>
      <image class="ticket-img" data-id="5" bindtap="selectTicketValue" src="/static/images/new/{{satisfaction==5?'star_yellow':'star'}}.png">
      </image>
    </view>

    <view class="ticket-tips">{{satisfactionTips.tips}} </view>
    <view class="popup-bottom">
      <view class="btn-cancel" bindtap="cancelTicketTips">取消</view>
      <view class='btn-conf' bindtap="confTicketTips">立即提交</view>
    </view>
  </view>
</view>


<!-- 选择取消原因 -->
<view class="appoint-overlay-wrapper remark-overlay" wx:if="{{ cancelShow }}" bindtap="onCancelPopupClose">
  <view class="remark-select" catchtap="onCancelClick">
    <view class="title">
      选择取消原因
    </view>
    <view class="remark-list">
      <view class="remark-item" wx:for="{{cancelList}}" wx:key="index" data-id="{{item.id}}" catchtap="cancelItemSelect">
        <view class="remark-value">{{item.value}}</view>
        <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-select-popup.png" class="radio-img" wx:if="{{cancelReason==item.id}}"></image>
        <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall-dy/icon-unselect-popup.png" class="radio-img" wx:else></image>
      </view>
    </view>
    <view class="remark-conf-btn" catchtap="cancelItemConfirm">取消预约</view>
  </view>
</view>