app

MrShi

2026-04-25 80c0aa2a864071ad77d6c7de7c508348b2eb2fee

 app/pages/order-detail/order-detail.vue

@@ -2,7 +2,7 @@
   <view class="order-detail-page">
      <view v-if="!showMapStatus" class="order-detail-page__simple-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
         <view class="order-detail-page__simple-nav-inner">
            <text class="order-detail-page__simple-nav-title">{{ detailStatus === 'rated' ? '订单已评价' : '订单已完成' }}</text>
            <text class="order-detail-page__simple-nav-title">{{ statusTextMap[orderDetail.status] || '订单详情' }}</text>
         </view>
      </view>

@@ -27,11 +27,11 @@
         <view class="order-detail-page__status-bar">
            <view class="order-detail-page__status-left">
               <view class="order-detail-page__status-dot"></view>
               <text class="order-detail-page__status-title">{{ statusTextMap[detailStatus] || '待取货' }}</text>
               <text class="order-detail-page__status-title">{{ statusTextMap[orderDetail.status] || '待取货' }}</text>
            </view>
            <view class="order-detail-page__status-right">
               <text v-if="detailStatus === 'pickup'" class="order-detail-page__status-cancel">取消订单</text>
               <text class="order-detail-page__status-no">#1</text>
               <text v-if="orderDetail.status === 3" class="order-detail-page__status-cancel">取消订单</text>
               <text class="order-detail-page__status-no">#{{ orderIndex }}</text>
            </view>
         </view>
      </view>
@@ -42,50 +42,51 @@
               <view v-if="showMapStatus" class="order-detail-page__summary">
                  <view class="order-detail-page__summary-left">
                     <view class="order-detail-page__head-left">
                        <text class="order-detail-page__time">35分钟内</text>
                        <text class="order-detail-page__time-sub">送达</text>
                        <text class="order-detail-page__time">{{ orderDetail.remainMinutes }}</text>
                        <text class="order-detail-page__time-sub">分钟</text>
                     </view>

                     <view class="order-detail-page__tags">
                        <image class="order-detail-page__tag-icon" src="/static/image/ic_biaosuda@2x.png" mode="widthFix"></image>
                        <text class="order-detail-page__tag-text">贵重物品</text>
                        <image v-if="orderDetail.isUrgent === 1" class="order-detail-page__tag-icon" src="/static/image/ic_jisuda@2x.png" mode="widthFix"></image>
                        <image v-else class="order-detail-page__tag-icon" src="/static/image/ic_biaosuda@2x.png" mode="widthFix"></image>
                        <text v-if="orderDetail.isValuable" class="order-detail-page__tag-text">贵重物品</text>
                     </view>
                  </view>

                  <view class="order-detail-page__summary-right">
                     <text class="order-detail-page__price">¥20.5</text>
                     <text class="order-detail-page__extra">含加急¥3.0</text>
                     <text class="order-detail-page__price">¥{{ (orderDetail.driverFee / 100).toFixed(1) }}</text>
                     <text v-if="orderDetail.urgentAmount" class="order-detail-page__extra">含加急¥{{ orderDetail.urgentAmount / 100 }}</text>
                  </view>
               </view>

               <view v-else class="order-detail-page__done-summary">
                  <view class="order-detail-page__done-summary-left">
                     <text class="order-detail-page__done-title">{{ detailStatus === 'rated' ? '订单已评价' : '订单已完成' }}</text>
                     <text class="order-detail-page__done-title">{{ statusTextMap[orderDetail.status] }}</text>
                     <view class="order-detail-page__tags order-detail-page__tags--done">
                        <image class="order-detail-page__tag-icon" src="/static/image/ic_biaosuda@2x.png" mode="widthFix"></image>
                        <text class="order-detail-page__tag-text">贵重物品</text>
                        <image v-if="orderDetail.isUrgent === 1" class="order-detail-page__tag-icon" src="/static/image/ic_jisuda@2x.png" mode="widthFix"></image>
                        <image v-else class="order-detail-page__tag-icon" src="/static/image/ic_biaosuda@2x.png" mode="widthFix"></image>
                        <text v-if="orderDetail.isValuable" class="order-detail-page__tag-text">贵重物品</text>
                     </view>
                  </view>
                  <view class="order-detail-page__done-summary-right">
                     <view class="order-detail-page__done-price-row">
                        <text v-if="detailStatus === 'rated'" class="order-detail-page__settled-tag">已结算</text>
                        <text class="order-detail-page__price">¥20.5</text>
                        <text class="order-detail-page__price">¥{{ (orderDetail.driverFee / 100).toFixed(1) }}</text>
                     </view>
                     <text class="order-detail-page__extra">含加急¥3.0</text>
                     <text v-if="orderDetail.urgentAmount" class="order-detail-page__extra">含加急¥{{ orderDetail.urgentAmount / 100 }}</text>
                  </view>
               </view>

               <view class="order-detail-page__route-list">
                  <view class="order-detail-page__route-item">
                     <view class="order-detail-page__route-left">
                        <text class="order-detail-page__distance-top">349</text>
                        <text class="order-detail-page__distance-top">{{ orderDetail.takeDistance }}</text>
                        <text class="order-detail-page__distance-unit">m</text>
                        <view class="order-detail-page__route-divider"></view>
                     </view>
                     <view class="order-detail-page__route-main">
                        <view class="order-detail-page__route-texts">
                           <text class="order-detail-page__route-title">中铁快运南站旗舰店</text>
                           <text class="order-detail-page__route-desc">莲花路200号莲花产业园F栋401</text>
                           <text class="order-detail-page__route-title">{{ orderDetail.takeName }}</text>
                           <text class="order-detail-page__route-desc">{{ orderDetail.depositShopAddress }}</text>
                        </view>
                        <view class="order-detail-page__route-actions">
                           <image class="order-detail-page__route-icon" src="/static/image/ic_c1all@2x.png" mode="aspectFit"></image>
@@ -98,13 +99,13 @@
                     <view class="order-detail-page__route-left">
                        <view class="order-detail-page__route-pin"></view>
                        <view class="order-detail-page__route-divider order-detail-page__route-divider--light"></view>
                        <text class="order-detail-page__distance-top">12.5</text>
                        <text class="order-detail-page__distance-unit">km</text>
                        <text class="order-detail-page__distance-top">{{ orderDetail.depositDistance }}</text>
                        <text class="order-detail-page__distance-unit"></text>
                     </view>
                     <view class="order-detail-page__route-main">
                        <view class="order-detail-page__route-texts">
                           <text class="order-detail-page__route-title">佳苑巴黎都市3期10栋301室</text>
                           <text class="order-detail-page__route-desc">洞庭湖路与湖北路交叉口西150米</text>
                           <text class="order-detail-page__route-title">{{ orderDetail.depositShopName }}</text>
                           <text class="order-detail-page__route-desc">{{ orderDetail.depositShopAddress }}</text>
                        </view>
                        <view class="order-detail-page__route-actions">
                           <image class="order-detail-page__route-icon" src="/static/image/ic_c1all@2x.png" mode="aspectFit"></image>
@@ -114,11 +115,11 @@
                  </view>
               </view>

               <view v-if="showMapStatus" class="order-detail-page__qrcode-wrap">
               <view v-if="orderDetail.status === 4 && orderDetail.takeShopId" class="order-detail-page__qrcode-wrap">
                  <view class="order-detail-page__qrcode-box">
                     <image class="order-detail-page__qrcode-image" src="/static/logo.png" mode="aspectFit"></image>
                     <image class="order-detail-page__qrcode-image" :src="'https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=' + orderDetail.driverVerifyCode" mode="aspectFit"></image>
                  </view>
                  <text class="order-detail-page__qrcode-value">767889</text>
                  <text class="order-detail-page__qrcode-value">{{ orderDetail.driverVerifyCode }}</text>
                  <text class="order-detail-page__qrcode-label">取货码</text>
               </view>
            </view>
@@ -126,10 +127,10 @@
            <view class="order-detail-page__section">
               <text class="order-detail-page__section-title">客户信息</text>
               <view class="order-detail-page__row-info">
                  <text class="order-detail-page__row-text">刘先生（手机号2878）</text>
                  <image class="order-detail-page__row-icon" src="/static/image/ic_call@2x.png" mode="aspectFit"></image>
                  <text class="order-detail-page__row-text">{{ orderDetail.contactPhone }}</text>
                  <image class="order-detail-page__row-icon" src="/static/image/ic_call@2x.png" mode="aspectFit" @click="makePhoneCall"></image>
               </view>
               <view v-if="detailStatus === 'rated'" class="order-detail-page__comment-card">
               <view v-if="orderDetail.status === 7" class="order-detail-page__comment-card">
                  <text class="order-detail-page__comment-title">客户已评价：</text>
                  <view class="order-detail-page__comment-score">
                     <text class="order-detail-page__comment-star">★</text>
@@ -141,11 +142,11 @@
            </view>

            <view class="order-detail-page__section">
               <text class="order-detail-page__section-title">物品清单（共8件）</text>
               <text class="order-detail-page__section-title">物品清单（共{{ goodsList.length }}件）</text>
               <view class="order-detail-page__goods-list">
                  <view v-for="item in goodsList" :key="item.name" class="order-detail-page__goods-item">
                     <text class="order-detail-page__goods-name">{{ item.name }}</text>
                     <text class="order-detail-page__goods-count">x{{ item.count }}</text>
                     <text class="order-detail-page__goods-name" :style="item.isOversized === 1 ? 'color: #FF0020;' : ''">{{ item.name }}</text>
                     <text class="order-detail-page__goods-count">x{{ item.quantity }}</text>
                  </view>
               </view>
            </view>
@@ -163,19 +164,19 @@
               <view class="order-detail-page__detail-list">
                  <view class="order-detail-page__detail-item">
                     <text class="order-detail-page__detail-label">订单编号：</text>
                     <text class="order-detail-page__detail-value">202107131749250001</text>
                     <text class="order-detail-page__detail-value">{{ orderDetail.code }}</text>
                  </view>
                  <view class="order-detail-page__detail-item">
                  <view v-if="orderDetail.createTime" class="order-detail-page__detail-item">
                     <text class="order-detail-page__detail-label">下单时间：</text>
                     <text class="order-detail-page__detail-value">2026-04-12 12:00:00</text>
                     <text class="order-detail-page__detail-value">{{ orderDetail.createTime }}</text>
                  </view>
                  <view class="order-detail-page__detail-item">
                  <view v-if="orderDetail.acceptTime" class="order-detail-page__detail-item">
                     <text class="order-detail-page__detail-label">接单时间：</text>
                     <text class="order-detail-page__detail-value">2026-04-12 12:00:00</text>
                     <text class="order-detail-page__detail-value">{{ orderDetail.acceptTime }}</text>
                  </view>
                  <view class="order-detail-page__detail-item">
                     <text class="order-detail-page__detail-label">订单备注：</text>
                     <text class="order-detail-page__detail-value">-</text>
                     <text class="order-detail-page__detail-value">{{ orderDetail.remark || '-' }}</text>
                  </view>
               </view>
            </view>
@@ -211,16 +212,15 @@
               </view>

               <view class="photo-popup__photos">
                  <view class="photo-popup__upload-card">
                     <image class="photo-popup__upload-icon" src="/static/image/ic_photo@2x.png" mode="aspectFit"></image>
                     <text class="photo-popup__upload-text">点击拍照</text>
                  </view>

                  <view class="photo-popup__preview-card">
                     <image class="photo-popup__preview-image" src="/static/logo.png" mode="aspectFill"></image>
                     <view class="photo-popup__preview-mask">
                  <view v-for="(photo, index) in uploadedPhotos" :key="index" class="photo-popup__preview-card">
                     <image class="photo-popup__preview-image" :src="photo" mode="aspectFill"></image>
                     <view class="photo-popup__preview-mask" @click="deletePhoto(index)">
                        <text class="photo-popup__preview-delete">删除</text>
                     </view>
                  </view>

                  <view v-if="uploadedPhotos.length < 3" class="photo-popup__upload-card" @click="chooseImage">
                     <image class="photo-popup__upload-icon" src="/static/image/btn_upload2@2x.png" mode="aspectFit"></image>
                  </view>
               </view>
            </view>
@@ -240,31 +240,29 @@
   export default {
      data() {
         return {
            detailStatus: 'pickup',
            orderId: null,
            orderIndex: null,
            orderDetail: {},
            statusBarHeight: 0,
            topFixedHeight: 0,
            showPhotoPopup: false,
            photoPopupMode: '',
            photoRemark: '',
            uploadedPhotos: [],
            statusTextMap: {
               pickup: '待取货',
               delivering: '配送中',
               finished: '已完成',
               rated: '已评价',
               cancelled: '已取消'
               2: '待接单',
               3: '待取货',
               4: '配送中',
               7: '已完成',
               99: '已取消'
            },
            goodsList: [
               { name: '大件行李', count: 1 },
               { name: '中件行李', count: 2 },
               { name: '小件行李', count: 3 },
               { name: '背包', count: 2 }
            ],
            photos: ['/static/logo.png', '/static/logo.png', '/static/logo.png']
            goodsList: [],
            photos: []
         }
      },
      computed: {
         showMapStatus() {
            return this.detailStatus === 'pickup' || this.detailStatus === 'delivering'
            return this.orderDetail.status === 2 || this.orderDetail.status === 3 || this.orderDetail.status === 4
         },
         mapData() {
            const startPoint = { latitude: 31.829512, longitude: 117.239211 }
@@ -300,54 +298,206 @@
            }
         },
         footerButtons() {
            const buttonMap = {
               pickup: [
                  { text: '取消订单', primary: false },
                  { text: '拍照取货', primary: true }
               ],
               delivering: [
                  { text: '拍照送达', primary: true }
               ],
               finished: [],
               rated: [],
               cancelled: []
            const status = this.orderDetail.status
            const takeShopId = this.orderDetail.takeShopId

            if (status === 2) {
               return [{ text: '立即抢单', primary: true, action: 'grab' }]
            }

            return buttonMap[this.detailStatus] || []
            if (status === 3) {
               return [
                  { text: '取消订单', primary: false, action: 'cancel' },
                  { text: '拍照取货', primary: true, action: 'pickup' }
               ]
            }

            if (status === 4) {
               if (!takeShopId) {
                  return [{ text: '拍照送达', primary: true, action: 'deliver' }]
               }
               return []
            }

            return []
         },
         photoPopupTitle() {
            return this.photoPopupMode === 'delivering' ? '拍照送达' : '拍照取货'
            return this.photoPopupMode === 'deliver' ? '拍照送达' : '拍照取货'
         },
         photoPopupLabel() {
            return this.photoPopupMode === 'delivering' ? '拍摄送达照片' : '拍摄取货照片'
            return this.photoPopupMode === 'deliver' ? '拍摄送达照片' : '拍摄取货照片'
         },
         photoPopupSubmitText() {
            return this.photoPopupMode === 'delivering' ? '确认送达' : '确认取货'
            return this.photoPopupMode === 'deliver' ? '确认送达' : '确认取货'
         }
      },
      onLoad() {
      onLoad(options) {
         const pages = getCurrentPages()
         const currentPage = pages[pages.length - 1]
         const options = currentPage && currentPage.options ? currentPage.options : {}
         const pageOptions = currentPage && currentPage.options ? currentPage.options : {}
         const systemInfo = uni.getSystemInfoSync()
         this.statusBarHeight = systemInfo.statusBarHeight || 0
         this.detailStatus = options.status || 'pickup'
         this.orderId = options.id || pageOptions.id
         this.orderIndex = options.index || pageOptions.index
         this.topFixedHeight = uni.upx2px(500 + 92)
         if (this.orderId) {
            this.getOrderDetail()
         }
      },
      methods: {
         getOrderDetail() {
            console.log('getOrderDetail', this.orderId)
            this.$u.api.orderDetail({ orderId: this.orderId }).then(res => {
               console.log(res)
               if (res.code === 200) {
                  this.orderDetail = res.data
                  console.log(this.orderDetail)
                  this.goodsList = res.data.items || []
                  this.photos = res.data.photos || []
               }
            }).catch(err => {
               console.log('err', err)
            })
         },

         makePhoneCall() {
            if (this.orderDetail.contactPhone) {
               uni.makePhoneCall({
                  phoneNumber: this.orderDetail.contactPhone
               })
            }
         },

         handleFooterAction(button) {
            if (!button.primary) {
            const action = button.action

            if (action === 'cancel') {
               this.handleCancelOrder()
               return
            }

            this.photoPopupMode = this.detailStatus === 'delivering' ? 'delivering' : 'pickup'
            this.showPhotoPopup = true
            if (action === 'pickup' || action === 'deliver') {
               this.uploadedPhotos = []
               this.photoRemark = ''
               this.photoPopupMode = action
               this.showPhotoPopup = true
               return
            }

            if (action === 'grab') {
               this.handleGrabOrder()
               return
            }
         },
         handleCancelOrder() {
            uni.showModal({
               title: '温馨提示',
               content: '确定要取消订单吗？',
               confirmColor: '#0055FF',
               cancelColor: '#666666',
               success: (res) => {
                  if (res.confirm) {
                     this.$u.api.cancelOrder({ orderId: this.orderId }).then(res => {
                        if (res.code === 200) {
                           uni.showToast({ title: '取消成功', icon: 'success' })
                           this.getOrderDetail()
                        } else {
                           uni.showToast({ title: res.msg || '取消失败', icon: 'none' })
                        }
                     })
                  }
               }
            })
         },
         handleGrabOrder() {
            uni.showModal({
               title: '温馨提示',
               content: '是否确认接单？',
               confirmColor: '#0055FF',
               cancelColor: '#666666',
               success: (res) => {
                  if (res.confirm) {
                     this.$u.api.grabOrder({ orderId: this.orderId }).then(res => {
                        if (res.code === 200) {
                           uni.showToast({ title: '接单成功', icon: 'success' })
                           uni.navigateBack()
                        } else {
                           uni.showToast({ title: res.msg || '接单失败', icon: 'none' })
                        }
                     })
                  }
               }
            })
         },
         closePhotoPopup() {
            this.showPhotoPopup = false
         },
         chooseImage() {
            const count = 3 - this.uploadedPhotos.length
            uni.chooseImage({
               count: count,
               sourceType: ['camera', 'album'],
               success: (res) => {
                  const tempFilePaths = res.tempFilePaths
                  this.uploadedPhotos = this.uploadedPhotos.concat(tempFilePaths)
               }
            })
         },
         deletePhoto(index) {
            this.uploadedPhotos.splice(index, 1)
         },
         submitPhotoPopup() {
            this.showPhotoPopup = false
            if (this.uploadedPhotos.length === 0) {
               uni.showToast({ title: '请上传照片', icon: 'none' })
               return
            }
            uni.showLoading({ title: '上传中...' })
            const uploadTasks = this.uploadedPhotos.map(path => {
               return new Promise((resolve, reject) => {
                  uni.uploadFile({
                     url: this.$baseUrl + 'web/public/upload',
                     filePath: path,
                     name: 'file',
                     formData: {
                        folder: 'order'
                     },
                     success: (uploadRes) => {
                        const data = JSON.parse(uploadRes.data)
                        if (data.code === 200) {
                           resolve(data.data)
                        } else {
                           reject(new Error(data.msg))
                        }
                     },
                     fail: (err) => {
                        reject(err)
                     }
                  })
               })
            })

            Promise.all(uploadTasks).then(images => {
               console.log(images)
               const api = this.photoPopupMode === 'deliver' ? 'confirmDeliver' : 'confirmPickup'
               const params = {
                  images: images.map(img => img.imgaddr),
                  orderId: this.orderId,
                  remark: this.photoRemark
               }
               return this.$u.api[api](params)
            }).then(res => {
               uni.hideLoading()
               if (res.code === 200) {
                  uni.showToast({ title: '提交成功', icon: 'success' })
                  this.showPhotoPopup = false
                  this.getOrderDetail()
               } else {
                  uni.showToast({ title: res.msg || '提交失败', icon: 'none' })
               }
            }).catch(err => {
               uni.hideLoading()
               uni.showToast({ title: err.message || '上传失败', icon: 'none' })
            })
         }
      }
   }
@@ -969,9 +1119,9 @@
      }

      &__upload-icon {
         width: 48rpx;
         height: 48rpx;
         opacity: 0.55;
         width: 160rpx;
         height: 160rpx;
         // opacity: 0.55;
      }

      &__upload-text {