| | |
| | | <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.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"></map> |
| | | <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"> |
| | |
| | | </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> --> |
| | | <view style="width: 360rpx; height: 360rpx;"> |
| | | <canvas canvas-id="qrcodeCanvas" id="qrcodeCanvas" style="width: 180px; height: 180px;"></canvas> |
| | | <text style="font-size: 36rpx;font-weight: 600;margin-bottom: 20rpx;">行李编号:{{info.sortnum || ''}}</text> |
| | | <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> |
| | | <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> |
| | |
| | | </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" 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> |
| | | <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="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].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> |
| | | |
| | | <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, |
| | |
| | | showQrcode:false, |
| | | showPay:false, |
| | | showPhone:false, |
| | | showTrackPopup:false, |
| | | trackList: [], |
| | | linkItem:{title:'',linkname:'',linkphone:''}, |
| | | qrcodeImage:null |
| | | qrcodeImage:null, |
| | | mapLat: 0, |
| | | mapLng: 0, |
| | | mapScale: 10, |
| | | markers: [], |
| | | 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, |
| | | urls: images |
| | | }); |
| | | }, |
| | | rpxToPx(rpx) { |
| | | return rpx * wx.getSystemInfoSync().windowWidth / 750 |
| | | }, |
| | | payOrder(){ |
| | | var that = this; |
| | |
| | | } |
| | | }, |
| | | 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: 100, |
| | | height: 100, |
| | | 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.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: 180, |
| | | height: 180, |
| | | correctLevel: 2 |
| | | }) |
| | | setTimeout(() => { |
| | | uni.canvasToTempFilePath({ |
| | | this.$nextTick(() => { |
| | | drawQrcode({ |
| | | canvasId: 'qrcodeCanvas', |
| | | success: (res) => { |
| | | that.qrcodeImage = res.tempFilePath |
| | | } |
| | | }, 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) |
| | | }) |
| | | } |
| | | |
| | | }, |
| | |
| | | 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: '#FFFFFF' |
| | | } |
| | | } |
| | | ] |
| | | |
| | | 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 } |
| | | } |
| | | ] |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | |
| | | <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> |
| | |
| | | .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; |
| | |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | z-index: 9; |
| | | z-index: 99999; |
| | | .head-nav { |
| | | width: 100%; |
| | | display: flex; |
| | |
| | | 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; |
| | |
| | | border-radius: 16rpx; |
| | | margin-top: 30rpx; |
| | | map { |
| | | width: 100%; |
| | | height: 362rpx; |
| | | border-radius: 16rpx; |
| | | } |
| | | .addr { |
| | |
| | | width: 360rpx; |
| | | height: 360rpx; |
| | | } |
| | | .qrcode-box { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | overflow: hidden; |
| | | canvas { |
| | | width: 360rpx; |
| | | height: 360rpx; |
| | | } |
| | | } |
| | | text { |
| | | &:nth-child(2) { |
| | | font-weight: 600; |
| | |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | gap: 20rpx; |
| | | .item-form-list-row { |
| | | width: 88rpx; |
| | | height: 88rpx; |