| | |
| | | <view class="nr-status"> |
| | | <text>{{info.statusName|| ''}}</text> |
| | | <view class="nr-status-type1" v-if="info.type === 0">就地寄存</view> |
| | | <view class="nr-status-type" v-else>同城寄送</view> |
| | | <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> |
| | | <view class="nr-desc" v-if="info.statusDesc">{{info.statusDesc || ''}}</view> |
| | | <view class="item" style="padding: 10rpx;"> |
| | | <map name="mapAddr"></map> |
| | | <view class="item" style="padding: 10rpx;" v-if="info.type ===1 && info.status===4"> |
| | | <map |
| | | name="mapAddr" |
| | | :latitude="mapLat" |
| | | :longitude="mapLng" |
| | | :scale="mapScale" |
| | | :markers="markers" |
| | | :polyline="polyline" |
| | | style="width: 100%; height: 362rpx;" |
| | | ></map> |
| | | </view> |
| | | <view class="item"> |
| | | <view class="addr"> |
| | |
| | | <text>{{info.depositShopName || ''}}</text> |
| | | <image src="/static/icon/ar_jicundian@2x.png" mode="widthFix"></image> |
| | | </view> |
| | | <text>{{info.takeUser || ''}} {{info.takePhone || ''}}</text> |
| | | <text>{{info.depositShopAddress || ''}} </text> |
| | | </view> |
| | | <view class="addr-item"> |
| | | <view class="addr-item" v-if="info.type === 1"> |
| | | <view class="ji bg1">收</view> |
| | | <view class="addr-item-top"> |
| | | <text>{{info.takeShopName || info.takeLocation || ''}}</text> |
| | | <image src="/static/icon/ar_jicundian@2x.png" mode="widthFix"></image> |
| | | </view> |
| | | <text>{{info.takeUser || ''}} {{info.takePhone || ''}}</text> |
| | | <text>{{info.takeShopAddress || ''}}</text> |
| | | </view> |
| | | </view> |
| | | <view class="item-qrcode"> |
| | | <image src="/static/image/btn_upload@2x.png" mode="widthFix"></image> |
| | | <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> --> |
| | | <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> |
| | | </view> |
| | | <text>{{info.memberVerifyCode || ''}}</text> |
| | | <text>取件码</text> |
| | | <text @tap="copyCode(info.memberVerifyCode||'')">核销码</text> |
| | | </view> |
| | | <view class="item-x"></view> |
| | | <view class="item-list"> |
| | | <view class="item-list-row"> |
| | | <view class="item-form-label">收件人</view> |
| | | <view class="item-form-val">{{info.takeUser || ''}}</view> |
| | | </view> |
| | | <view class="item-list-row"> |
| | | <view class="item-form-label">收件人电话</view> |
| | | <view class="item-form-val">{{info.takePhone || ''}}</view> |
| | | </view> |
| | | <view class="item-list-row"> |
| | | <view class="item-form-label">预计到店时间</view> |
| | | <view class="item-form-val">{{info.expectedDepositTime || ''}}</view> |
| | |
| | | </view> |
| | | <view class="item-list-row"> |
| | | <view class="item-form-label">物品名称</view> |
| | | <view class="item-form-val">{{info.typeName || ''}}</view> |
| | | <view class="item-form-val">{{info.goodTypeName || ''}}</view> |
| | | </view> |
| | | <view class="item-list-row"> |
| | | <view class="item-form-label">物品照片</view> |
| | | <view class="item-form-list" v-if="info.orderImages && info.orderImages.length"> |
| | | <view class="item-form-list-row" v-for="(item,index) in info.orderImages" key="item"> |
| | | <image :src="item" mode="widthFix" @click="previewImage(info.orderImages,index)"></image> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="item"> |
| | | <!-- <view class="item" v-if="info.refundInfo"> |
| | | <view class="tuikuan"> |
| | | <view class="tuikuan-top"> |
| | | <text>退款金额</text> |
| | | <text>¥{{((info.refundAmount || 0)/100).toFixed(2)}}</text> |
| | | <text>¥{{((info.refundInfo.refundAmount || 0)/100).toFixed(2)}}</text> |
| | | </view> |
| | | <view class="tuikuan-bottom"> |
| | | <text v-if="info.refundStatus === 0">退款中</text> |
| | | <text v-if="info.refundStatus === 1">已退回您的支付账户</text> |
| | | <text v-if="info.refundStatus === 2">退款失败</text> |
| | | <text>{{info.refundTime || ''}}</text> |
| | | <text v-if="info.refundInfo.status === 0">退款中</text> |
| | | <text v-if="info.refundInfo.status === 1">已退回您的支付账户</text> |
| | | <text v-if="info.refundInfo.status === 2">退款失败</text> |
| | | <text v-if="info.refundInfo.status === 1">{{info.refundInfo.refundTime || ''}}</text> |
| | | <text v-if="info.refundInfo.status !== 1">{{info.refundInfo.createTime || ''}}</text> |
| | | </view> |
| | | </view> |
| | | </view> --> |
| | | <view class="item" v-if="info.commentStatus === 1"> |
| | | <view class="comment"> |
| | | <view class="comment-top"> |
| | | <text>客户已评价:</text> |
| | | </view> |
| | | <view class="comment-score"> |
| | | <view class="score-item" v-if="info.depositScore">寄件门店: <text style="color:#ffc533;font-size: 38rpx;margin-right: 10rpx;">★</text>{{info.depositScore || 1}} </view> |
| | | <view class="score-item" v-if="info.driverScore">配送司机: <text style="color:#ffc533;font-size: 38rpx;margin-right: 10rpx;">★</text>{{info.driverScore || 1}} </view> |
| | | <view class="score-item" v-if="info.takeScore">收件门店: <text style="color:#ffc533;font-size: 38rpx;margin-right: 10rpx;">★</text>{{info.takeScore || 1}} </view> |
| | | </view> |
| | | <view class="comment-row" v-if="info.commentImages && info.commentImages.length" > |
| | | <view class="comment-image" v-for="(item,index) in info.commentImages" key="item"> |
| | | <image :src="item" mode="widthFix" @click="previewImage(info.commentImages,index)"></image> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="item" v-if="info.refundInfo"> |
| | | <view class="tuikuan"> |
| | | <view class="tuikuan-top"> |
| | | <text>退款金额</text> |
| | | <text>{{((info.refundInfo.refundAmount || 0)/100).toFixed(2)}}</text> |
| | | </view> |
| | | <view class="tuikuan-bottom"> |
| | | <text v-if="info.refundInfo.status === 0">退款中</text> |
| | | <text v-if="info.refundInfo.status === 1">已退回您的支付账户</text> |
| | | <text v-if="info.refundInfo.status === 2">退款失败</text> |
| | | <text v-if="info.refundInfo.status === 1">{{info.refundInfo.refundTime || ''}}</text> |
| | | <text v-if="info.refundInfo.status !== 1">{{info.refundInfo.createTime || ''}}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="item" v-if="info.detailList"> |
| | | <view class="xl"> |
| | | <view v-for="goods in info.detailList " :key="goods.luggageName" class="xl-item"> |
| | |
| | | <view class="item-x"></view> |
| | | <view class="item-list"> |
| | | <view class="item-list-row"> |
| | | <view class="item-form-label" style="color: #333333; font-size: 28rpx;">报价金额</view> |
| | | <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-infos-item-left">订单编号:</view> |
| | | <view class="item-infos-item-right"> |
| | | <text>{{info.code ||''}}</text> |
| | | <image src="/static/icon/ic_cppy@2x.png" mode="widthFix"></image> |
| | | <image src="/static/icon/ic_cppy@2x.png" mode="widthFix" @tap="copyCode(info.code||'')"></image> |
| | | </view> |
| | | </view> |
| | | <view class="item-infos-item"> |
| | |
| | | </view> |
| | | </view> |
| | | <view class="item-infos-item" v-if="info.outTradeNo"> |
| | | <view class="item-infos-item-left">交易号:</view> |
| | | <view class="item-infos-item-left">交易单号:</view> |
| | | <view class="item-infos-item-right"> |
| | | <text>{{info.outTradeNo || ''}}</text> |
| | | </view> |
| | |
| | | <text>{{info.refundTime || ''}}</text> |
| | | </view> |
| | | </view> |
| | | <view class="item-infos-item" v-if="info.refundAmount"> |
| | | <view class="item-infos-item" v-if="info.refundInfo"> |
| | | <view class="item-infos-item-left">退款金额:</view> |
| | | <view class="item-infos-item-right"> |
| | | <text>¥{{((info.refundAmount || 0)/100).toFixed(2)}}</text> |
| | | <text>¥{{((info.refundInfo.refundAmount || 0)/100).toFixed(2)}}</text> |
| | | </view> |
| | | </view> |
| | | <view class="item-infos-item" v-if="info.refundRemark"> |
| | | <view class="item-infos-item-left">退款原因:</view> |
| | | <view class="item-infos-item-right"> |
| | | <text>{{info.refundRemark || ''}}</text> |
| | | <text>{{info.refundInfo.refundRemark || ''}}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view style="width: 100%; height: calc(210rpx + env(safe-area-inset-bottom));"></view> |
| | | </view> |
| | | <view class="tips" v-if="info.overdue"> |
| | | <view class="tips" v-if="info.overdueStatus !==0 && info.overdueStatus !==2"> |
| | | <image src="/static/icon/ic_waring@2x.png" mode="widthFix"></image> |
| | | <text>已超过取件时间,超时费用:¥{{((info.overdueFee || 0)/100).toFixed(2)}}元</text> |
| | | <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> |
| | | <text v-if="info.overdueStatus ===4">超过取件时间,已支付超时费用:¥{{((info.overdueFee || 0)/100).toFixed(2)}}元</text> |
| | | </view> |
| | | <view cclass="footer" v-if="info.type===0"> |
| | | <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" @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> |
| | | <view class="btn you" @click="evaluateOrder(info)" v-if="info.status ===7 && !info.commentStatus ">评价订单</view> |
| | | <!-- <view class="btn you" v-if="info.status >=1 &&info.status <7 " @click="openQrcode(info)" >核销码</view> |
| | | --> <view class="btn you" @click="evaluateOrder(info)" v-if="info.status ===7 && !info.commentStatus ">评价订单</view> |
| | | <view class="btn you" @click="payOrderFee(info)" v-if="info.status ===5 && info.overdueStatus===3 ">立即支付</view> |
| | | </view> |
| | | </view> |
| | | <view class="footer" v-else> |
| | | <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 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> |
| | | <view class="btn you" v-if="info.status ===1 || (info.takeShopId && info.status ===5)" @click="openQrcode(info)" >核销码</view> |
| | | <view class="btn you" @click="doneOrder(info)" v-if="!info.takeShopId && info.status ===5">确认收货</view> |
| | | <!-- <view class="btn you" v-if="info.status ===1 || (info.takeShopId && info.status ===5)" @click="openQrcode(info)" >核销码</view> |
| | | --> <view class="btn you" @click="doneOrder(info)" v-if="!info.takeShopId && info.status ===5">确认收货</view> |
| | | <view class="btn you" @click="evaluateOrder(info)" v-if="info.status ===7 && !info.commentStatus ">评价订单</view> |
| | | <view class="btn you" @click="payOrderFee(info)" v-if="info.status ===5 && info.overdueStatus ===3">立即支付</view> |
| | | </view> |
| | | </view> |
| | | <u-popup :show="showPhone" round="15" mode="bottom" :safeAreaInsetBottom="true" @close="contactPhone()" :closeable="true" :closeOnClickOverlay="true"> |
| | | <view class="phone"> |
| | | <view class="phone-head"> |
| | | <view></view> |
| | | <text>联系客户</text> |
| | | <text>{{linkItem.title}}</text> |
| | | </view> |
| | | <view class="phone-item" > |
| | | <view> |
| | | <image src="/static/icon/ic_call@2x.png" mode="widthFix" @click="contactPhoneDo()" ></image> |
| | | <text>{{linkinfo.linkname||''}} </text> |
| | | <text style="margin-left: 10px;"> {{linkinfo.linkphone||''}}</text> |
| | | <view @click="contactPhoneDo()" > |
| | | <image src="/static/icon/ic_call@2x.png" mode="widthFix"></image> |
| | | <text>{{linkItem.linkname||''}} </text> |
| | | <text style="margin-left: 10px;"> {{linkItem.linkphone||''}}</text> |
| | | </view> |
| | | </view> |
| | | <view style="width: 100%; height: 30rpx;"></view> |
| | |
| | | </view> |
| | | </view> |
| | | </u-popup> |
| | | <u-popup :show="showQrcode" round="15" @close="openQrcode()" :safeAreaInsetBottom="false" mode="bottom" :closeable="true" :closeOnClickOverlay="false"> |
| | | <!-- <u-popup :show="showQrcode" round="15" @close="openQrcode()" :safeAreaInsetBottom="false" mode="bottom" :closeable="true" :closeOnClickOverlay="false"> |
| | | <view class="tc" style="height: 700rpx;width: 100%; "> |
| | | <view class="tc-contemt" style="text-align: center;"> |
| | | <view class="tc-contemt-title" style="text-align: center;">核销码</view> |
| | | <view class="qrcode-box"> |
| | | <canvas canvas-id="qrcodeCanvas" id="qrcodeCanvas" style="width: 100px; height: 100px;"></canvas> |
| | | <canvas canvas-id="qrcodeCanvas1" id="qrcodeCanvas1" style="width: 100px; height: 100px;"></canvas> |
| | | <image class="qrcode-image" :src="qrcodeImage" mode="widthFix"></image> |
| | | </view> |
| | | <text class="pickup-code">{{ currentOrder.memberVerifyCode||'' }}</text> |
| | | <text class="pickup-tip" @tap="copyCode">点击复制自提码</text> |
| | | <text class="pickup-code">{{ info.memberVerifyCode||'' }}</text> |
| | | <text class="pickup-tip" @tap="copyCode(info.memberVerifyCode||'')">点击复制自提码</text> |
| | | </view> |
| | | </view> |
| | | </u-popup> |
| | | </u-popup> --> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapState } from 'vuex' |
| | | import drawQrcode from 'weapp-qrcode' |
| | | var amapFile = require('@/utils/amap-wx.130.js') |
| | | |
| | | export default { |
| | | computed: { |
| | |
| | | data() { |
| | | return { |
| | | id:null, |
| | | height:180, |
| | | width:180, |
| | | info:{}, |
| | | showDone:false, |
| | | showCancel:false, |
| | | showDelete:false, |
| | | showQrcode:false, |
| | | showPay:false, |
| | | showPhone:false |
| | | showPhone:false, |
| | | linkItem:{title:'',linkname:'',linkphone:''}, |
| | | qrcodeImage:null, |
| | | mapLat: 0, |
| | | mapLng: 0, |
| | | mapScale: 10, |
| | | markers: [], |
| | | polyline: [] |
| | | } |
| | | }, |
| | | onShow() { |
| | | }, |
| | | onLoad(options) { |
| | | this.id = options.id |
| | | this.info={} |
| | | this.showDone=false |
| | | this.showCancel=false |
| | |
| | | this.showPay=false |
| | | this.showPhone=false |
| | | this.getUserDetail() |
| | | }, |
| | | onLoad(options) { |
| | | this.id = options.id |
| | | this.width = this.rpxToPx(360) |
| | | this.height = this.rpxToPx(360) |
| | | this.linkItem={title:'',linkname:'',linkphone:''} |
| | | }, |
| | | methods:{ |
| | | previewImage(images,index = 0) { |
| | |
| | | urls: images |
| | | }); |
| | | }, |
| | | rpxToPx(rpx) { |
| | | return rpx * wx.getSystemInfoSync().windowWidth / 750 |
| | | }, |
| | | payOrder(){ |
| | | var that = this; |
| | | uni.showLoading({ title: '发起支付中...', mask: true }) |
| | | this.$u.api.continuePayOrder({ |
| | | orderId: this.id |
| | | }).then(res => { |
| | | uni.hideLoading() |
| | | if (res.code === 200 && res.data) { |
| | | let paymentData = res.data.response |
| | | uni.requestPayment({ |
| | | provider: 'wxpay', |
| | | timeStamp: paymentData.timeStamp || '', |
| | | nonceStr: paymentData.nonceStr || '', |
| | | package: paymentData.package || '', |
| | | signType: paymentData.signType || 'MD5', |
| | | paySign: paymentData.paySign || '', |
| | | success: (res) => { |
| | | that.getUserDetail() |
| | | }, |
| | | fail: (err) => { |
| | | if (err.errMsg.includes('cancel')) { |
| | | uni.showToast({ title: '已取消支付', icon: 'none' }) |
| | | } else { |
| | | uni.showToast({ title: '支付失败', icon: 'none' }) |
| | | } |
| | | } |
| | | }) |
| | | } else { |
| | | uni.showToast({ title: res.msg || '支付失败', icon: 'none' }) |
| | | } |
| | | }).catch(err => { |
| | | uni.hideLoading() |
| | | uni.showToast({ title: '支付失败', icon: 'none' }) |
| | | }) |
| | | }, |
| | | payOrderFee(){ |
| | | var that = this; |
| | | uni.showLoading({ title: '发起支付中...', mask: true }) |
| | | this.$u.api.payOverdueFee({ |
| | | orderId: this.id |
| | | }).then(res => { |
| | | uni.hideLoading() |
| | |
| | | that.getUserDetail() |
| | | } |
| | | }, |
| | | contactPhone(){ |
| | | contactPhone(item,type){ |
| | | this.showPhone = !this.showPhone |
| | | this.linkItem = {title:'联系骑手',linkname:'',linkphone:''} |
| | | if(type == 0){ |
| | | this.linkItem = {title:'联系门店',linkname:this.info.depositShopName,linkphone:this.info.depositShopPhone} |
| | | }else if(type ==2){ |
| | | this.linkItem = {title:'联系骑手',linkname:this.info.driverName,linkphone:this.info.driverPhone} |
| | | }else if(type ==1){ |
| | | this.linkItem = {title:'联系门店',linkname:this.info.takeShopName,linkphone:this.info.takeShopPhone} |
| | | } |
| | | console.log("==================================",this.showPhone) |
| | | }, |
| | | contactPhoneDo(){ |
| | | if(this.info.linkphone !=null && this.info.linkphone!=''){ |
| | | if(this.linkItem.linkphone !=null && this.linkItem.linkphone!=''){ |
| | | uni.makePhoneCall({ |
| | | phoneNumber: this.info.linkphone |
| | | phoneNumber: this.linkItem.linkphone |
| | | }) |
| | | } |
| | | }, |
| | |
| | | if (res.code === 200 ) { |
| | | this.showCancel = false |
| | | uni.$emit('updateOrder',{info:this.info,delete:0}) |
| | | that.getUserDetail() |
| | | } |
| | | }, |
| | | async deleteOrderDo(){ |
| | |
| | | this.goBack() |
| | | } |
| | | }, |
| | | copyCode() { |
| | | if (!this.currentOrder || !this.info.memberVerifyCode) { |
| | | copyCode(txt) { |
| | | if (!txt) { |
| | | return |
| | | } |
| | | uni.setClipboardData({ |
| | | data: this.info.memberVerifyCode, |
| | | data: txt, |
| | | success: () => { |
| | | uni.showToast({ |
| | | title: '已复制自提码', |
| | | title: '已复制到粘贴板', |
| | | icon: 'none' |
| | | }) |
| | | } |
| | |
| | | if(!this.showQrcode){ |
| | | this.showQrcode =true |
| | | drawQrcode({ |
| | | canvasId: 'qrcodeCanvas', |
| | | canvasId: 'qrcodeCanvas1', |
| | | text: this.info.memberVerifyCode, |
| | | width: 100, |
| | | height: 100, |
| | | width: this.rpxToPx(360), |
| | | height: this.rpxToPx(360), |
| | | correctLevel: 2 |
| | | }) |
| | | setTimeout(() => { |
| | |
| | | }else{ |
| | | this.showQrcode = false |
| | | } |
| | | }, |
| | | 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 |
| | | } |
| | | this.qrcodeImage=null |
| | | var that =this |
| | | drawQrcode({ |
| | | canvasId: 'qrcodeCanvas', |
| | | text: this.info.memberVerifyCode, |
| | | width: this.rpxToPx(360), |
| | | height: this.rpxToPx(360), |
| | | correctLevel: 2 |
| | | }) |
| | | setTimeout(() => { |
| | | uni.canvasToTempFilePath({ |
| | | canvasId: 'qrcodeCanvas', |
| | | success: (res) => { |
| | | console.log("showQrcodeImg-------成功",res) |
| | | that.qrcodeImage = res.tempFilePath |
| | | }, |
| | | fail: (err) => { |
| | | console.log("showQrcodeImg-------失败",err) |
| | | } |
| | | }, this) |
| | | }, 100) |
| | | } |
| | | |
| | | }, |
| | | evaluateOrder(){ |
| | | uni.navigateTo({ |
| | |
| | | if (res.code === 200) { |
| | | this.info = res.data |
| | | uni.$emit('updateOrder',{info:this.info,delete:0}) |
| | | this.showQrcodeImg() |
| | | 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 |
| | | |
| | | if (!driverLat || !driverLng || !depositShopLat || !depositShopLng) { |
| | | 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) { |
| | | 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 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], |
| | | longitude: point[0] |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | |
| | | 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: '#10c27b', |
| | | width: 10, |
| | | arrowLine: true |
| | | }] |
| | | |
| | | that.markers = [ |
| | | { |
| | | id: 1, |
| | | latitude: driverLat, |
| | | longitude: driverLng, |
| | | iconPath: '/static/icon/start.png', |
| | | width: 35, |
| | | height: 40, |
| | | anchor: { x: 0.5, y: 1 } |
| | | }, |
| | | { |
| | | id: 2, |
| | | latitude: depositShopLat, |
| | | longitude: depositShopLng, |
| | | iconPath: '/static/icon/end.png', |
| | | width: 35, |
| | | height: 40, |
| | | anchor: { x: 0.5, y: 1 } |
| | | }, |
| | | { |
| | | id: 3, |
| | | latitude: driverLat, |
| | | longitude: driverLng, |
| | | iconPath: '/static/icon/dizhi.png', |
| | | width: 30, |
| | | 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: driverLat, |
| | | longitude: driverLng, |
| | | iconPath: '/static/icon/start.png', |
| | | width: 30, |
| | | height: 40, |
| | | anchor: { x: 0.5, y: 1 } |
| | | }, |
| | | { |
| | | id: 2, |
| | | latitude: depositShopLat, |
| | | longitude: depositShopLng, |
| | | iconPath: '/static/icon/end.png', |
| | | width: 30, |
| | | height: 40, |
| | | anchor: { x: 0.5, y: 1 } |
| | | } |
| | | ] |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | |
| | | box-sizing: border-box; |
| | | background: #FFE9E9; |
| | | position: fixed; |
| | | bottom: calc(100rpx + env(safe-area-inset-bottom)); |
| | | bottom: calc(30rpx + env(safe-area-inset-bottom)); |
| | | left: 0; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | z-index: 9; |
| | | z-index: 99999; |
| | | .head-nav { |
| | | width: 100%; |
| | | display: flex; |
| | |
| | | margin-right: 16rpx; |
| | | } |
| | | .nr-status-type { |
| | | width: 164rpx; |
| | | width: 154rpx; |
| | | height: 38rpx; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | color: #FA8010; |
| | | } |
| | | .nr-status-type1 { |
| | | width: 188rpx; |
| | | width: 158rpx; |
| | | height: 38rpx; |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | border-radius: 16rpx; |
| | | margin-top: 30rpx; |
| | | map { |
| | | width: 100%; |
| | | height: 362rpx; |
| | | border-radius: 16rpx; |
| | | } |
| | | .addr { |
| | |
| | | } |
| | | } |
| | | } |
| | | .comment{ |
| | | width: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .comment-top { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | text { |
| | | &:nth-child(1) { |
| | | font-weight: 600; |
| | | font-size: 30rpx; |
| | | color: #222222; |
| | | } |
| | | &:nth-child(2) { |
| | | font-weight: 500; |
| | | font-size: 36rpx; |
| | | color: #FE2C2E; |
| | | &:before { |
| | | content: "¥"; |
| | | font-weight: 500; |
| | | font-size: 24rpx; |
| | | color: #FE2C2E; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .comment-score{ |
| | | // font-weight: 600; |
| | | font-size: 28rpx; |
| | | color: #333333; |
| | | margin: 10rpx 0; |
| | | display: flex; |
| | | width: 100%; |
| | | .score-item{ |
| | | flex:1; |
| | | margin: 20rpx 0; |
| | | } |
| | | } |
| | | .comment-row{ |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | .comment-image { |
| | | margin: 10rpx; |
| | | width: 100rpx; |
| | | height: 100rpx; |
| | | border-radius: 8rpx; |
| | | border:1px solid #f2f2f2; |
| | | overflow: hidden; |
| | | image { |
| | | width: 100%; |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | | .tuikuan { |
| | | width: 100%; |
| | | display: flex; |
| | |
| | | image { |
| | | width: 360rpx; |
| | | height: 360rpx; |
| | | } |
| | | #qrcodeCanvas { |
| | | position: fixed; |
| | | top: -100%; |
| | | left: -100%; |
| | | opacity: 0; |
| | | } |
| | | text { |
| | | &:nth-child(2) { |
| | |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | gap: 20rpx; |
| | | .item-form-list-row { |
| | | width: 88rpx; |
| | | height: 88rpx; |