| | |
| | | <view class="nr-status-type1" v-if="info.type === 1 && info.isUrgent === 1">极速达</view> |
| | | </view> |
| | | <view class="item" style="padding: 10rpx;" v-if="info.type ===1 && info.status===4"> |
| | | <map name="mapAddr"></map> |
| | | <map |
| | | name="mapAddr" |
| | | :latitude="mapLat" |
| | | :longitude="mapLng" |
| | | :scale="mapScale" |
| | | :markers="markers" |
| | | :polyline="polyline" |
| | | show-location |
| | | style="width: 100%; height: 362rpx;" |
| | | ></map> |
| | | </view> |
| | | <view class="item"> |
| | | <view class="addr"> |
| | |
| | | <view class="addr-item-top"> |
| | | <text>{{info.depositShopName || ''}}</text> |
| | | </view> |
| | | <text>{{info.depositShopAddress || ''}} </text> |
| | | <view class='addr-link' style="top: 50rpx;"> |
| | | <image style="margin-right: 10rpx;" @click="contactPhoneDo(info.takePhone)" src="/static/icon/ic_call@2x.png" mode="widthFix" ></image> |
| | | <text style="width: 70%;">{{info.depositShopAddress || ''}} </text> |
| | | <view class='addr-link' style="top: 0;" @click="contactPhoneDo(info.takePhone)"> |
| | | <image style="margin-right: 10rpx;" src="/static/icon/ic_call@2x.png" mode="widthFix" ></image> |
| | | <text class=" txt-d1">联系客户</text> |
| | | </view> |
| | | </view> |
| | |
| | | <view class="addr-item-top"> |
| | | <text class=" txt-d">司机:{{info.driverName || '战神'}} </text> |
| | | </view> |
| | | <view class='addr-link'> |
| | | <image style="margin-right: 10rpx;" @click="contactPhoneDo(info.driverPhone)" src="/static/icon/ic_call@2x.png" mode="widthFix" ></image> |
| | | <view class='addr-link' style="top: 0;" @click="contactPhoneDo(info.driverPhone)"> |
| | | <image style="margin-right: 10rpx;" src="/static/icon/ic_call@2x.png" mode="widthFix" ></image> |
| | | <text class=" txt-d1">联系司机</text> |
| | | </view> |
| | | |
| | |
| | | </view> |
| | | <view style="width: 100%; height: calc(210rpx + env(safe-area-inset-bottom));"></view> |
| | | </view> |
| | | <view class="tips" v-if="info.overdueStatus !==0"> |
| | | <view class="tips" v-if="info.overdueStatus !==0 &&info.overdueStatus !==2"> |
| | | <image src="/static/icon/ic_waring@2x.png" mode="widthFix"></image> |
| | | <text v-if="info.overdueStatus ===1">已超过取件时间,已产生超时费用:¥{{((info.overdueFee || 0)/100).toFixed(2)}}元</text> |
| | | <text v-if="info.overdueStatus ===3">已超过取件时间,等待客户支付超时费用:¥{{((info.overdueFee || 0)/100).toFixed(2)}}元</text> |
| | |
| | | <view class="footer-btns"> |
| | | <view class="btn kong" @click="contactPhoneDo(info.takePhone)" v-if="info.status === 1 || info.status === 5" >联系客户</view> |
| | | <view class="btn kong" @click="contactPhoneDo(info.driverPhone)" v-if="info.type ===1&&(info.status === 4 || info.status === 3)">联系骑手</view> |
| | | <view class="btn you" v-if="info.status ===1 || info.status ===4 " @click="hexiaoOrder(info)" >收件核销</view> |
| | | <view class="btn you" v-if="info.status ===5 &&(info.overdueStatus ==0 || info.overdueStatus == 1)" @click="hexiaoOrder(info)" >确认到店</view> |
| | | <view class="btn you" v-if="[1,4].includes(info.status) && info.takeShopId" @click="hexiaoOrder(info)" >收件核销</view> |
| | | <view class="btn you" v-if="info.status>0||info.status<=7 " @click="printerOrder(info)" >打印标签</view> |
| | | <view class="btn you" v-if="info.status ===5 &&(info.overdueStatus ==0 || info.overdueStatus == 1) && info.takeShopId" @click="hexiaoOrder(info)" >确认到店</view> |
| | | <view class="btn you" v-if="info.status ===5 && (info.overdueStatus == 4 || info.overdueStatus == 2)" @click="hexiaoOrder(info)" >取件核销</view> |
| | | </view> |
| | | </view> |
| | |
| | | <script> |
| | | import { mapState } from 'vuex' |
| | | import drawQrcode from 'weapp-qrcode' |
| | | var amapFile = require('@/utils/amap-wx.130.js') |
| | | |
| | | export default { |
| | | computed: { |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | loading:false, |
| | | id:null, |
| | | qrcodeImage:null, |
| | | showCancel:false, |
| | | info:{} |
| | | info:{}, |
| | | mapLat: 0, |
| | | mapLng: 0, |
| | | mapScale: 12, |
| | | markers: [], |
| | | polyline: [] |
| | | } |
| | | }, |
| | | onShow() { |
| | |
| | | cancelOrder(item){ |
| | | this.showCancel = !this.showCancel |
| | | }, |
| | | async printerOrder(){ |
| | | if(this.loading){ |
| | | return |
| | | } |
| | | this.loading =true |
| | | try{ |
| | | var that =this |
| | | that.$u.api.printOrderLabel({ orderId: this.id }).then(res=>{ |
| | | if (res.code === 200 ) { |
| | | uni.showToast({ |
| | | title:'发起打印请求成功', |
| | | icon:'none' |
| | | }) |
| | | } |
| | | that.loading =false |
| | | }) |
| | | }catch(e){ |
| | | this.loading =false |
| | | } |
| | | |
| | | }, |
| | | async cancelOrderDo(){ |
| | | var that =this |
| | | let res = await that.$u.api.cancelOrder({ orderId: this.id }); |
| | |
| | | if (res.code === 200) { |
| | | this.info = res.data |
| | | uni.$emit('updateOrder',{info:this.info,delete:0}) |
| | | if (this.info.type === 1 && this.info.status === 4) { |
| | | this.getRoutePlanning() |
| | | } |
| | | } |
| | | }, |
| | | getRoutePlanning() { |
| | | var that = this |
| | | var driverLat = this.info.driverLat |
| | | var driverLng = this.info.driverLng |
| | | var depositShopLat = this.info.depositShopLat |
| | | var depositShopLng = this.info.depositShopLng |
| | | |
| | | console.log('getRoutePlanning called', driverLat, driverLng, depositShopLat, depositShopLng) |
| | | |
| | | if (!driverLat || !driverLng || !depositShopLat || !depositShopLng) { |
| | | console.log('坐标缺失') |
| | | return |
| | | } |
| | | |
| | | this.mapLat = driverLat |
| | | this.mapLng = driverLng |
| | | |
| | | var myAmapFun = new amapFile.AMapWX({ key: this.$gaodeMapKey }) |
| | | myAmapFun.getDrivingRoute({ |
| | | origin: driverLng + ',' + driverLat, |
| | | destination: depositShopLng + ',' + depositShopLat, |
| | | success: function(data) { |
| | | console.log('获取路径规划成功 data:', data) |
| | | console.log('data keys:', Object.keys(data)) |
| | | console.log('data.paths:', data.paths) |
| | | console.log('driverLng:', driverLng, 'driverLat:', driverLat, 'depositShopLng:', depositShopLng, 'depositShopLat:', depositShopLat) |
| | | var points = [] |
| | | var duration = 0 |
| | | if (data.paths && data.paths.length > 0) { |
| | | var path = data.paths[0] |
| | | duration = path.duration || 0 |
| | | console.log('path:', path) |
| | | console.log('path keys:', Object.keys(path)) |
| | | |
| | | var steps = path.steps || path.routs || path.roads || [] |
| | | if (steps.length === 0 && path.distance) { |
| | | steps = [path] |
| | | } |
| | | |
| | | console.log('steps:', steps) |
| | | |
| | | if (steps && steps.length > 0) { |
| | | for (var i = 0; i < steps.length; i++) { |
| | | var step = steps[i] |
| | | console.log('step:', step) |
| | | console.log('step keys:', step ? Object.keys(step) : 'null') |
| | | |
| | | var polylineStr = step.polyline || step.Polyline || step.path || step.line || step.road || '' |
| | | console.log('polylineStr:', polylineStr) |
| | | |
| | | if (!step || !polylineStr) continue |
| | | var stepPoints = polylineStr.split(';') |
| | | if (!stepPoints || stepPoints.length === 0) continue |
| | | for (var j = 0; j < stepPoints.length; j++) { |
| | | if (!stepPoints[j]) continue |
| | | var point = stepPoints[j].split(',') |
| | | if (!point || point.length < 2) continue |
| | | points.push({ |
| | | latitude: parseFloat(point[1]), |
| | | longitude: parseFloat(point[0]) |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | console.log('points:', points) |
| | | |
| | | 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) |
| | | } |
| | | |
| | | that.polyline = [{ |
| | | points: points, |
| | | color: '#00c47c', |
| | | width: 10, |
| | | arrowLine: true |
| | | }] |
| | | console.log('polyline set:', that.polyline) |
| | | |
| | | that.markers = [ |
| | | { |
| | | id: 1, |
| | | latitude: parseFloat(driverLat), |
| | | longitude: parseFloat(driverLng), |
| | | iconPath: '/static/icon/start.png', |
| | | width: 30, |
| | | height: 40, |
| | | anchor: { x: 0.5, y: 1 } |
| | | }, |
| | | { |
| | | id: 2, |
| | | latitude: parseFloat(depositShopLat), |
| | | longitude: parseFloat(depositShopLng), |
| | | iconPath: '/static/icon/end.png', |
| | | width: 30, |
| | | height: 40, |
| | | anchor: { x: 0.5, y: 1 } |
| | | }, |
| | | { |
| | | id: 3, |
| | | latitude: parseFloat(driverLat), |
| | | longitude: parseFloat(driverLng), |
| | | iconPath: '/static/icon/dizhi.png', |
| | | width: 24, |
| | | height: 30, |
| | | anchor: { x: 0.5, y: 0.5 }, |
| | | callout: { |
| | | content: '预计到店时间\n' + expectedTime, |
| | | color: '#222222', |
| | | fontSize: 14, |
| | | borderRadius: 4, |
| | | padding: 8, |
| | | display: 'ALWAYS', |
| | | bgColor: 'rgba(255, 255, 255, 0.95)' |
| | | } |
| | | } |
| | | ] |
| | | |
| | | if (points.length > 0) { |
| | | that.mapLat = points[Math.floor(points.length / 2)].latitude |
| | | that.mapLng = points[Math.floor(points.length / 2)].longitude |
| | | } |
| | | }, |
| | | fail: function(err) { |
| | | console.error('获取路径规划失败', err) |
| | | that.markers = [ |
| | | { |
| | | id: 1, |
| | | latitude: parseFloat(driverLat), |
| | | longitude: parseFloat(driverLng), |
| | | iconPath: '/static/icon/start.png', |
| | | width: 30, |
| | | height: 40, |
| | | anchor: { x: 0.5, y: 1 } |
| | | }, |
| | | { |
| | | id: 2, |
| | | latitude: parseFloat(depositShopLat), |
| | | longitude: parseFloat(depositShopLng), |
| | | iconPath: '/static/icon/end.png', |
| | | width: 30, |
| | | height: 40, |
| | | anchor: { x: 0.5, y: 1 } |
| | | } |
| | | ] |
| | | } |
| | | }) |
| | | } |
| | | |
| | | } |
| | |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | gap: 20rpx; |
| | | .item-form-list-row { |
| | | width: 88rpx; |
| | | height: 88rpx; |