| | |
| | | <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.type === 0 && info.exceptionStatus === 1">异常转存</view> |
| | | </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"> |
| | |
| | | <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> |
| | | <view class="qrcode-box" style="width: 360rpx; height: 360rpx;"> |
| | | <canvas v-if="!qrcodeImage" canvas-id="qrcodeCanvas" id="qrcodeCanvas" :style="'width: '+width+'px; height:'+height+'px;'+'opacity: 0;'"></canvas> |
| | | <image v-else class="qrcode-image" :src="qrcodeImage" mode="widthFix"></image> |
| | | </view> |
| | | <text>{{info.memberVerifyCode || ''}}</text> |
| | | <text @tap="copyCode(info.memberVerifyCode||'')">核销码</text> |
| | |
| | | <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"> |
| | |
| | | <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> |
| | | <view class="item-form-val price" style="color: #FE2C2E; font-size: 36rpx;">{{((info.actualPayAmount || 0)/100).toFixed(2)}}</view> |
| | | </view> |
| | |
| | | <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="openTrackPopup">订单轨迹</view> |
| | | <view class="btn kong" v-if="[0,1].includes(info.status) && info.exceptionStatus !== 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" @click="payOrderFee(info)" v-if="info.status ===5 && info.overdueStatus===3 ">立即支付</view> |
| | | </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) && info.takeShopId">联系门店</view> |
| | | <view class="btn kong" @click="openTrackPopup">订单轨迹</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 kong" v-if="[0].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> |
| | | <!-- <view class="btn you" v-if="info.status ===1 || (info.takeShopId && info.status ===5)" @click="openQrcode(info)" >核销码</view> |
| | | <view class="btn you" @click="cancelOrder(info)" v-if="info.exceptionStatus === 0 && [1,2].includes(info.status)">申请退款</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> |
| | | <view style="width: 100%; height: 30rpx;"></view> |
| | | </view> |
| | | </u-popup> |
| | | <u-popup :show="showTrackPopup" mode="bottom" round="24" :safeAreaInsetBottom="true" :closeOnClickOverlay="true" @close="closeTrackPopup"> |
| | | <view class="track-popup"> |
| | | <view class="track-popup__header"> |
| | | <text class="track-popup__title">订单轨迹</text> |
| | | <view class="track-popup__close" @click="closeTrackPopup">×</view> |
| | | </view> |
| | | <scroll-view scroll-y class="track-popup__body"> |
| | | <view class="track-empty" v-if="!trackList.length">暂无轨迹信息</view> |
| | | <view class="track-list" v-else> |
| | | <view class="track-item" v-for="(track, index) in trackList" :key="track.key || index"> |
| | | <view class="track-item__content"> |
| | | <view class="track-item__rail"> |
| | | <image v-if="index === 0" class="track-item__dot track-item__dot--active" src="/static/icon/dian.png" mode="aspectFit"></image> |
| | | <view v-else class="track-item__dot"></view> |
| | | <view class="track-item__line" v-if="index !== trackList.length - 1"></view> |
| | | </view> |
| | | <view class="track-item__body"> |
| | | <text class="track-item__time">{{ track.time }}</text> |
| | | <text class="track-item__desc">{{ track.title }}</text> |
| | | <view class="track-item__images" v-if="track.images && track.images.length"> |
| | | <image |
| | | v-for="(img, imgIndex) in track.images" |
| | | :key="track.key + '-' + imgIndex" |
| | | :src="img" |
| | | mode="aspectFill" |
| | | @tap="previewImage(trackList[index].images, imgIndex)" |
| | | ></image> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </scroll-view> |
| | | </view> |
| | | </u-popup> |
| | | <!-- 确认收货 --> |
| | |
| | | </view> |
| | | </view> |
| | | </u-popup> |
| | | <!-- <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="qrcodeCanvas1" id="qrcodeCanvas1" style="width: 100px; height: 100px;"></canvas> |
| | | <image class="qrcode-image" :src="qrcodeImage" mode="widthFix"></image> |
| | | </view> |
| | | <text class="pickup-code">{{ info.memberVerifyCode||'' }}</text> |
| | | <text class="pickup-tip" @tap="copyCode(info.memberVerifyCode||'')">点击复制自提码</text> |
| | | </view> |
| | | </view> |
| | | </u-popup> --> |
| | | </view> |
| | | </template> |
| | | |
| | |
| | | showQrcode:false, |
| | | showPay:false, |
| | | showPhone:false, |
| | | showTrackPopup:false, |
| | | trackList: [], |
| | | linkItem:{title:'',linkname:'',linkphone:''}, |
| | | qrcodeImage:null, |
| | | mapLat: 0, |
| | | mapLng: 0, |
| | | mapScale: 10, |
| | | markers: [], |
| | | polyline: [] |
| | | polyline: [], |
| | | currentOrder: null |
| | | } |
| | | }, |
| | | onShow() { |
| | |
| | | this.showQrcode=false |
| | | this.showPay=false |
| | | this.showPhone=false |
| | | this.showTrackPopup=false |
| | | this.trackList = [] |
| | | this.getUserDetail() |
| | | this.width = this.rpxToPx(360) |
| | | this.height = this.rpxToPx(360) |
| | | this.linkItem={title:'',linkname:'',linkphone:''} |
| | | }, |
| | | methods:{ |
| | | previewImage(images, current) { |
| | | uni.previewImage({ |
| | | urls: images, |
| | | current: current |
| | | }) |
| | | }, |
| | | async openTrackPopup() { |
| | | uni.showLoading({ |
| | | title: '加载中...', |
| | | mask: true |
| | | }) |
| | | let success = false |
| | | try { |
| | | success = await this.getOrderTimeline() |
| | | } finally { |
| | | uni.hideLoading() |
| | | } |
| | | if (success) { |
| | | this.showTrackPopup = true |
| | | } |
| | | }, |
| | | closeTrackPopup() { |
| | | this.showTrackPopup = false |
| | | }, |
| | | async getOrderTimeline() { |
| | | if (!this.id) { |
| | | this.trackList = [] |
| | | return false |
| | | } |
| | | try { |
| | | let res = await this.$u.api.timeline(this.id) |
| | | if (res.code === 200) { |
| | | let list = Array.isArray(res.data) ? res.data : [] |
| | | this.trackList = list.map((item, index) => ({ |
| | | key: item.id || item.time || index, |
| | | title: item.title || '', |
| | | time: item.time || '--', |
| | | images: this.normalizeTrackImages(item.images) |
| | | })) |
| | | return true |
| | | } |
| | | this.trackList = [] |
| | | uni.showToast({ |
| | | title: res.msg || '获取轨迹失败', |
| | | icon: 'none' |
| | | }) |
| | | return false |
| | | } catch (e) { |
| | | this.trackList = [] |
| | | uni.showToast({ |
| | | title: '获取轨迹失败', |
| | | icon: 'none' |
| | | }) |
| | | return false |
| | | } |
| | | }, |
| | | normalizeTrackImages(images) { |
| | | if (!Array.isArray(images)) { |
| | | return [] |
| | | } |
| | | return images.filter(item => !!item) |
| | | }, |
| | | previewImage(images,index = 0) { |
| | | uni.previewImage({ |
| | | current: index, |
| | |
| | | } |
| | | }, |
| | | cancelOrder(item){ |
| | | this.currentOrder = item || this.info |
| | | this.showCancel = !this.showCancel |
| | | }, |
| | | deleteOrder(item){ |
| | | this.currentOrder = item || this.info |
| | | this.showDelete = !this.showDelete |
| | | }, |
| | | async cancelOrderDo(){ |
| | |
| | | } |
| | | }) |
| | | }, |
| | | async openQrcode(){ |
| | | this.qrcodeImage=null |
| | | var that =this |
| | | if(!this.showQrcode){ |
| | | this.showQrcode =true |
| | | drawQrcode({ |
| | | canvasId: 'qrcodeCanvas1', |
| | | text: this.info.memberVerifyCode, |
| | | width: this.rpxToPx(360), |
| | | height: this.rpxToPx(360), |
| | | correctLevel: 2 |
| | | }) |
| | | setTimeout(() => { |
| | | uni.canvasToTempFilePath({ |
| | | canvasId: 'qrcodeCanvas', |
| | | success: (res) => { |
| | | that.qrcodeImage = res.tempFilePath |
| | | } |
| | | }, this) |
| | | }, 100) |
| | | }else{ |
| | | this.showQrcode = false |
| | | } |
| | | }, |
| | | async showQrcodeImg(){ |
| | | console.log("showQrcodeImg") |
| | | if((this.info.type ===0 && this.info.status >=1 &&this.info.status <7) |
| | |
| | | } |
| | | 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({ |
| | | this.$nextTick(() => { |
| | | drawQrcode({ |
| | | canvasId: 'qrcodeCanvas', |
| | | success: (res) => { |
| | | console.log("showQrcodeImg-------成功",res) |
| | | that.qrcodeImage = res.tempFilePath |
| | | }, |
| | | fail: (err) => { |
| | | console.log("showQrcodeImg-------失败",err) |
| | | } |
| | | }, this) |
| | | }, 100) |
| | | text: this.info.memberVerifyCode, |
| | | width: this.rpxToPx(360), |
| | | height: this.rpxToPx(360), |
| | | correctLevel: 2 |
| | | }) |
| | | setTimeout(() => { |
| | | uni.canvasToTempFilePath({ |
| | | canvasId: 'qrcodeCanvas', |
| | | x: 0, |
| | | y: 0, |
| | | width: that.width, |
| | | height: that.height, |
| | | destWidth: that.width, |
| | | destHeight: that.height, |
| | | success: (res) => { |
| | | console.log("showQrcodeImg-------成功",res) |
| | | that.qrcodeImage = res.tempFilePath |
| | | }, |
| | | fail: (err) => { |
| | | console.log("showQrcodeImg-------失败",err) |
| | | // 如果失败,使用 canvas 直接显示 |
| | | that.qrcodeImage = '' |
| | | } |
| | | }, that) |
| | | }, 300) |
| | | }) |
| | | } |
| | | |
| | | }, |
| | |
| | | borderRadius: 4, |
| | | padding: 8, |
| | | display: 'ALWAYS', |
| | | bgColor: 'rgba(255, 255, 255, 0.95)' |
| | | bgColor: '#FFFFFF' |
| | | } |
| | | } |
| | | ] |
| | |
| | | .head1{ |
| | | background: #E4730B; |
| | | } |
| | | .track-popup { |
| | | background: #FFFFFF; |
| | | border-radius: 24rpx 24rpx 0 0; |
| | | padding: 24rpx 24rpx calc(24rpx + env(safe-area-inset-bottom)); |
| | | box-sizing: border-box; |
| | | .track-popup__header { |
| | | height: 88rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | position: relative; |
| | | } |
| | | .track-popup__title { |
| | | font-weight: 600; |
| | | font-size: 32rpx; |
| | | color: #222222; |
| | | } |
| | | .track-popup__close { |
| | | position: absolute; |
| | | right: 0; |
| | | top: 50%; |
| | | transform: translateY(-50%); |
| | | width: 56rpx; |
| | | height: 56rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | font-size: 56rpx; |
| | | line-height: 1; |
| | | color: #A5A7AD; |
| | | } |
| | | .track-popup__body { |
| | | height: 50vh; |
| | | } |
| | | .track-empty { |
| | | line-height: 50vh; |
| | | text-align: center; |
| | | font-size: 28rpx; |
| | | color: #999999; |
| | | } |
| | | .track-list { |
| | | padding: 12rpx 0 0; |
| | | } |
| | | .track-item { |
| | | position: relative; |
| | | } |
| | | .track-item__rail { |
| | | width: 34rpx; |
| | | flex-shrink: 0; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | align-self: stretch; |
| | | position: relative; |
| | | } |
| | | .track-item__dot { |
| | | width: 16rpx; |
| | | height: 16rpx; |
| | | flex-shrink: 0; |
| | | position: relative; |
| | | z-index: 1; |
| | | border-radius: 50%; |
| | | background: #CCCCCC; |
| | | margin-top: 12rpx; |
| | | } |
| | | .track-item__dot--active { |
| | | width: 32rpx; |
| | | height: 32rpx; |
| | | flex-shrink: 0; |
| | | display: block; |
| | | position: relative; |
| | | z-index: 1; |
| | | margin-top: 4rpx; |
| | | background: transparent; |
| | | } |
| | | .track-item__line { |
| | | width: 2rpx; |
| | | position: absolute; |
| | | left: 50%; |
| | | top: 28rpx; |
| | | bottom: -30rpx; |
| | | transform: translateX(-50%); |
| | | background: #E6EAF0; |
| | | } |
| | | .track-item__content { |
| | | display: flex; |
| | | align-items: flex-start; |
| | | column-gap: 22rpx; |
| | | padding: 0 0 20rpx; |
| | | } |
| | | .track-item__body { |
| | | flex: 1; |
| | | min-width: 0; |
| | | } |
| | | .track-item__time { |
| | | display: block; |
| | | font-weight: 400; |
| | | font-size: 26rpx; |
| | | color: #666666; |
| | | line-height: 1.4; |
| | | } |
| | | .track-item__desc { |
| | | display: block; |
| | | margin-top: 22rpx; |
| | | font-weight: 500; |
| | | font-size: 30rpx; |
| | | color: #666666; |
| | | } |
| | | .track-item__images { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 18rpx; |
| | | margin-top: 24rpx; |
| | | image { |
| | | width: 130rpx; |
| | | height: 130rpx; |
| | | border-radius: 12rpx; |
| | | background: #F3F5F8; |
| | | } |
| | | } |
| | | } |
| | | .head { |
| | | width: 100%; |
| | | padding: 0 30rpx; |
| | |
| | | font-weight: 400; |
| | | 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; |
| | |
| | | width: 360rpx; |
| | | height: 360rpx; |
| | | } |
| | | #qrcodeCanvas { |
| | | position: fixed; |
| | | top: -100%; |
| | | left: -100%; |
| | | opacity: 0; |
| | | .qrcode-box { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | overflow: hidden; |
| | | canvas { |
| | | width: 360rpx; |
| | | height: 360rpx; |
| | | } |
| | | } |
| | | text { |
| | | &:nth-child(2) { |