提交

MrShi

2026-05-22 ea2fb93a0dfcde8f5b66825b20f9d9b835a28acc

 small-program/pages/delivery-order-detail/delivery-order-detail.vue

@@ -16,8 +16,14 @@
            <view class="nr-status-type"  v-if="info.type === 1">同城寄送</view>
            <view class="nr-status-type1"  v-if="info.type === 1 && info.isUrgent === 0">标速达</view>
            <view class="nr-status-type1"  v-if="info.type === 1 && info.isUrgent === 1">极速达</view>
            <view class="nr-status-type2" v-if="info.exceptionStatus === 1">异常转存</view>
         </view>
         <view class="nr-desc" v-if="info.statusDesc">{{info.statusDesc || ''}}</view>
         <view class="nr-desc" v-if="info.statusDesc && info.status !== 0">{{info.statusDesc || ''}}</view>
         <view class="nr-desc" style="display: flex; align-items: center;" v-if="info.statusDesc && info.status === 0">
            请在
            <u-count-down :time="info.payCountdownMs" format="mm:ss"></u-count-down>
            内完成支付，超时订单将自动取消
         </view>
         <view class="item" style="padding: 10rpx;" v-if="info.type ===1 && info.status===4">
            <map 
               name="mapAddr"
@@ -26,8 +32,7 @@
               :scale="mapScale" 
               :markers="markers" 
               :polyline="polyline"
               show-location
               style="width: 100%; height: 100%;"
               style="width: 100%; height: 362rpx;"
            ></map>
         </view>
         <view class="item">
@@ -52,6 +57,7 @@
            </view>
            <view class="item-qrcode" v-if=" (info.type ===0 && info.status >=1 &&info.status <7) || (info.type ===1 && (info.status ===1 || (info.takeShopId && info.status ===5)))">
               <!-- <image src="/static/image/btn_upload@2x.png" mode="widthFix"></image> -->
               <text style="font-size: 36rpx;font-weight: 600;margin-bottom: 20rpx;">行李编号：{{info.sortnum || ''}}</text>
               <view style="width: 360rpx; height: 360rpx;">
                  <canvas canvas-id="qrcodeCanvas" id="qrcodeCanvas":style="'width: '+width+'px; height:'+height+'px;'"></canvas>
                  <image class="qrcode-image" :src="qrcodeImage" mode="widthFix"></image>
@@ -70,7 +76,7 @@
                  <view class="item-form-val">{{info.takePhone || ''}}</view>
               </view>
               <view class="item-list-row">
                  <view class="item-form-label">预计到店时间</view>
                  <view class="item-form-label">到店寄存时间</view>
                  <view class="item-form-val">{{info.expectedDepositTime || ''}}</view>
               </view>
               <view class="item-list-row">
@@ -153,13 +159,21 @@
            </view>
            <view class="item-x"></view>
            <view class="item-list">
               <view class="item-list-row">
               <!-- <view class="item-list-row">
                  <view class="item-form-label" style="color: #333333; font-size: 28rpx;">保价金额</view>
                  <view class="item-form-val" style="color: #333333; font-size: 24rpx;">¥{{((info.declaredAmount || 0)/100).toFixed(2)}}</view>
               </view> -->
               <view class="item-list-row">
                  <view class="item-form-label" style="color: #333333; font-size: 28rpx;">{{ info.type === 1 ? '配送费' : '寄存费' }}</view>
                  <view class="item-form-val" style="color: #333333; font-size: 24rpx;">¥{{((info.basicAmount || 0)/100).toFixed(2)}}</view>
               </view>
               <view class="item-list-row">
                  <view class="item-form-label" style="color: #333333; font-size: 28rpx;">行李保费</view>
                  <view class="item-form-val" style="color: #333333; font-size: 24rpx;">¥{{((info.declaredFee || 0)/100).toFixed(2)}}</view>
               </view>
               <view class="item-list-row">
                  <view class="item-form-label" style="color: #333333; font-size: 28rpx;">优惠金额</view>
                  <view class="item-form-val" style="color: #333333; font-size: 24rpx;">¥{{((info.deductionAmount || 0)/100).toFixed(2)}}</view>
               </view>
               <view class="item-list-row">
                  <view class="item-form-label" style="color: #222222; font-size: 30rpx; font-weight: 600;">实付款</view>
@@ -238,7 +252,7 @@
      <view class="footer" v-if="info.type===0">
         <view class="footer-btns">
            <view class="btn kong" @click="contactPhone(info,0)" v-if="info.status ===1 || info.status==2 || info.status===98">联系门店</view>
            <view class="btn kong" v-if="info.status ===0 || info.status ===1"  @click="cancelOrder(info)">取消订单</view>
            <view class="btn kong" v-if="[0,1].includes(info.status) && info.abnormalOrder !== 1"  @click="cancelOrder(info)">取消订单</view>
            <view class="btn kong" @click="deleteOrder(info)" v-if="info.status ===7 || info.status===96 || info.status == 99">删除订单</view>
            <view class="btn you"  @click="payOrder(info)" v-if="info.status ===0">立即支付</view>
<!--             <view class="btn you" v-if="info.status >=1 &&info.status <7 " @click="openQrcode(info)" >核销码</view>
@@ -248,10 +262,10 @@
      </view>
      <view class="footer" v-if="info.type===1">
         <view class="footer-btns">
            <view class="btn kong" @click="contactPhone(info,0)" v-if="info.status ===1 || info.status ==2">联系门店</view> 
            <view class="btn kong" @click="contactPhone(info,2)" v-if="info.status ===3 || info.status ===4 ">联系骑手</view>
            <view class="btn kong" @click="contactPhone(info,1)" v-if="info.status ===5">联系门店</view>
            <view class="btn kong" v-if="info.status ===0"  @click="cancelOrder(info)">取消订单</view>
            <view class="btn kong" @click="contactPhone(info,0)" v-if="(info.status ===1 || info.status ==2) && info.takeShopId">联系门店</view> 
            <view class="btn kong" @click="contactPhone(info,2)" v-if="[3,4,5].includes(info.status) && !info.takeShopId">联系骑手</view>
            <view class="btn kong" @click="contactPhone(info,1)" v-if="info.status ===5 && info.takeShopId">联系门店</view>
            <view class="btn kong" v-if="[0,1,2].includes(info.status)"  @click="cancelOrder(info)">取消订单</view>
            <view class="btn you" @click="payOrder(info)" v-if="info.status ===0">立即支付</view>
            <view class="btn kong" @click="deleteOrder(info)" v-if="info.status ===7 || info.status===96 || info.status == 99">删除订单</view>
            <view class="btn you" @click="cancelOrder(info)" v-if="info.status ===1">申请退款</view>
@@ -559,8 +573,10 @@
            }
         },
         async showQrcodeImg(){
            console.log("showQrcodeImg")
            if((this.info.type ===0 && this.info.status >=1 &&this.info.status <7) 
            || (this.info.type ===1 && (this.info.status ===1 || (this.info.takeShopId && this.info.status ===5)))){
               console.log("showQrcodeImg-------进入")
               if(this.qrcodeImage){
                  return
               }
@@ -577,7 +593,11 @@
                  uni.canvasToTempFilePath({
                     canvasId: 'qrcodeCanvas',
                     success: (res) => {
                        console.log("showQrcodeImg-------成功",res)
                        that.qrcodeImage = res.tempFilePath
                     },
                     fail: (err) => {
                        console.log("showQrcodeImg-------失败",err)
                     }
                  }, this)
               }, 100)
@@ -624,12 +644,18 @@
               destination: depositShopLng + ',' + depositShopLat,
               success: function(data) {
                  var points = []
                  var duration = 0
                  console.log("data",data)
                  if (data.paths && data.paths.length > 0) {
                     var path = data.paths[0]
                     duration = path.duration || 0
                     for (var i = 0; i < path.steps.length; i++) {
                        var step = path.steps[i]
                        var stepPoints = step.Polyline.split(';')
                        var polylineStr = step.Polyline || step.polyline
                        if (!polylineStr) continue
                        var stepPoints = polylineStr.split(';')
                        for (var j = 0; j < stepPoints.length; j++) {
                           if (!stepPoints[j]) continue
                           var point = stepPoints[j].split(',')
                           points.push({
                              latitude: point[1],
@@ -639,10 +665,23 @@
                     }
                  }
                  
                  var expectedTime = ''
                  if (duration > 0) {
                     var now = new Date()
                     var arrivalTime = new Date(now.getTime() + duration * 1000)
                     var month = arrivalTime.getMonth() + 1
                     var day = arrivalTime.getDate()
                     var hours = arrivalTime.getHours()
                     var minutes = arrivalTime.getMinutes()
                     expectedTime = month + '.' + (day < 10 ? '0' + day : day) + ' ' + (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes)
                  }
						
                  console.log("points", points)
						
                  that.polyline = [{
                     points: points,
                     color: '#004096',
                     width: 6,
                     color: '#10c27b',
                     width: 10,
                     arrowLine: true
                  }]
                  
@@ -652,7 +691,7 @@
                        latitude: driverLat,
                        longitude: driverLng,
                        iconPath: '/static/icon/start.png',
                        width: 30,
                        width: 35,
                        height: 40,
                        anchor: { x: 0.5, y: 1 }
                     },
@@ -661,7 +700,7 @@
                        latitude: depositShopLat,
                        longitude: depositShopLng,
                        iconPath: '/static/icon/end.png',
                        width: 30,
                        width: 35,
                        height: 40,
                        anchor: { x: 0.5, y: 1 }
                     },
@@ -670,9 +709,18 @@
                        latitude: driverLat,
                        longitude: driverLng,
                        iconPath: '/static/icon/dizhi.png',
                        width: 24,
                        width: 30,
                        height: 30,
                        anchor: { x: 0.5, y: 0.5 }
                        anchor: { x: 0.5, y: 0.5 },
                        callout: {
                           content: '预计到店时间\n' + expectedTime,
                           color: '#222222',
                           fontSize: 14,
                           borderRadius: 4,
                           padding: 8,
                           display: 'ALWAYS',
                           bgColor: '#FFFFFF'
                        }
                     }
                  ]
                  
@@ -712,6 +760,11 @@
<style>
   page {
      background-color: #F8F9FB;
   }
   .u-count-down__text {
      font-weight: 400 !important;
       font-size: 26rpx !important;
      color: #ffffff !important;
   }
</style>
<style lang="scss" scoped>
@@ -836,6 +889,19 @@
               font-size: 24rpx;
               color: #FA8010;
            }
            .nr-status-type2 {
               width: 158rpx;
               height: 38rpx;
               display: flex;
               align-items: center;
               justify-content: center;
               background: #FFFFFF;
               border-radius: 8rpx;
               font-weight: 400;
               font-size: 24rpx;
               color: #FF0000;
               margin-left: 16rpx;
            }
            .nr-status-type1 {
               width: 158rpx;
               height: 38rpx;
@@ -864,8 +930,6 @@
            border-radius: 16rpx;
            margin-top: 30rpx;
            map {
               width: 100%;
               height: 362rpx;
               border-radius: 16rpx;
            }
            .addr {
@@ -1071,7 +1135,7 @@
                  width: 360rpx;
                  height: 360rpx;
               }
               canvas {
               #qrcodeCanvas {
                  position: fixed;
                  top: -100%;
                  left: -100%;