提交

MrShi

2026-05-19 ce06ca62a0dd65d4a8fb57126948449c804ad77e

 app/pages/order/order.vue

@@ -6,7 +6,14 @@
         </view>
      </view>

      <view class="order-page__tabs" :style="{ top: navHeight + 'px' }">
      <view class="order-page__search" :style="{ top: navHeight + 'px' }">
         <view class="order-page__search-box">
            <u-icon name="search" color="#999999" size="28"></u-icon>
            <input class="order-page__search-input" v-model="searchKeyword" placeholder="输入姓名、电话、订单编号搜索" placeholder-class="order-page__search-placeholder" @confirm="searchOrder" />
         </view>
      </view>

      <view class="order-page__tabs" :style="{ top: (navHeight + 44) + 'px' }">
         <view v-for="tab in displayTabs" :key="tab.value" class="order-page__tab" :class="{ 'order-page__tab--active': activeTab === tab.value }" @click="activeTab = tab.value">
            <text class="order-page__tab-text">{{ tab.label }}</text>
            <view v-if="activeTab === tab.value" class="order-page__tab-line"></view>
@@ -27,16 +34,16 @@
               <view class="order-card__route-item">
                  <view class="order-card__point order-card__point--pickup">取</view>
                  <view class="order-card__route-texts">
                     <text class="order-card__route-title">{{ item.takeName }}</text>
                     <text class="order-card__route-desc">{{ item.takeAddress }}</text>
                     <text class="order-card__route-title">{{ item.depositShopName }}</text>
                     <text class="order-card__route-desc">{{ item.depositShopAddress }}</text>
                  </view>
               </view>

               <view class="order-card__route-item order-card__route-item--delivery">
                  <view class="order-card__point order-card__point--delivery">送</view>
                  <view class="order-card__route-texts">
                     <text class="order-card__route-title">{{ item.depositShopName }}</text>
                     <text class="order-card__route-desc">{{ item.depositShopAddress }}</text>
                     <text class="order-card__route-title">{{ item.takeName }}</text>
                     <text class="order-card__route-desc">{{ item.takeAddress }}</text>
                  </view>
               </view>

@@ -151,6 +158,7 @@
            statusBarHeight: 0,
            navHeight: 0,
            activeTab: null,
            searchKeyword: '',
            tabs: [
               { label: '全部', value: null },
               { label: '待取货', value: 3 },
@@ -193,8 +201,8 @@

         bodyStyle() {
            return {
               marginTop: this.navHeight + uni.upx2px(88) + 'px',
               height: `calc(100vh - ${this.navHeight + uni.upx2px(88)}px)`
               marginTop: this.navHeight + uni.upx2px(88) + uni.upx2px(88) + 'px',
               height: `calc(100vh - ${this.navHeight + uni.upx2px(88) + uni.upx2px(72)}px)`
            }
         },
         photoPopupTitle() {
@@ -230,6 +238,12 @@
         }
      },
      methods: {
         searchOrder() {
            this.page = 1
            this.hasMore = true
            this.orders = []
            this.getOrderList()
         },
         getActiveOrderCount() {
            this.$u.api.activeOrderCount().then(res => {
               if (res.code === 200) {
@@ -249,7 +263,7 @@
               2: '待接单',
               3: '待取货',
               4: '配送中',
               5: '已完成',
               5: '已送达',
               7: '已完成',
               99: '已取消'
            }
@@ -282,11 +296,13 @@
               capacity: 10,
               page: this.page,
               model: {
                  status: this.activeTab
                  status: this.activeTab,
                  keyword: this.searchKeyword
               }
            }).then(res => {
               if (res.code === 200) {
                  const list = res.data.records || []
                  console.log(list)
                  if (this.page === 1) {
                     this.orders = list
                  } else {
@@ -345,18 +361,44 @@
            this.showQRPopup = true
         },
         handlePhotoPickup(item) {
            this.selectedOrder = item
            this.photoPopupMode = 'pickup'
            this.uploadedPhotos = []
            this.photoRemark = ''
            this.showPhotoPopup = true
            this.checkOperationRadius(item.id, 'pickup')
         },
         handlePhotoDeliver(item) {
            this.selectedOrder = item
            this.photoPopupMode = 'deliver'
            this.uploadedPhotos = []
            this.photoRemark = ''
            this.showPhotoPopup = true
            this.checkOperationRadius(item.id, 'deliver')
         },
         checkOperationRadius(orderId, mode) {
            uni.getLocation({
               type: 'gcj02',
               success: (res) => {
                  this.$u.api.checkDriverOperationRadius({
                     lat: res.latitude,
                     lng: res.longitude,
                     orderId: orderId
                  }).then(apiRes => {
                     if (apiRes.code === 200) {
                        console.log(apiRes.data)
                        if (apiRes.data === true) {
                           this.selectedOrder = { id: orderId }
                           this.photoPopupMode = mode
                           this.uploadedPhotos = []
                           this.photoRemark = ''
                           this.showPhotoPopup = true
                        } else {
                           uni.showToast({
                              title: '您当前位置与收货地址距离超出范围，请在地址附近重新拍照',
                              icon: 'none'
                           })
                        }
                     }
                  })
               },
               fail: () => {
                  uni.showToast({
                     title: '无法获取您的位置信息',
                     icon: 'none'
                  })
               }
            })
         },
         closePhotoPopup() {
            this.showPhotoPopup = false
@@ -383,15 +425,31 @@
               return
            }
            uni.showLoading({ title: '上传中...' })
            uni.getLocation({
               type: 'gcj02',
               success: (locationRes) => {
                  this.doUploadPhotos(locationRes.latitude, locationRes.longitude)
               },
               fail: () => {
                  this.doUploadPhotos(null, null)
               }
            })
         },

         doUploadPhotos(latitude, longitude) {
            const uploadTasks = this.uploadedPhotos.map(path => {
               return new Promise((resolve, reject) => {
                  const formData = { folder: 'orders' }
                  if (latitude && longitude) {
                     formData.latitude = latitude
                     formData.longitude = longitude
                  }
                  console.log('formData:', formData)
                  uni.uploadFile({
                     url: this.$baseUrl + 'web/public/upload',
                     filePath: path,
                     name: 'file',
                     formData: {
                        folder: 'order'
                     },
                     formData: formData,
                     success: (uploadRes) => {
                        const data = JSON.parse(uploadRes.data)
                        if (data.code === 200) {
@@ -413,6 +471,10 @@
                  images: images.map(img => img.imgaddr),
                  orderId: this.selectedOrder.id,
                  remark: this.photoRemark
               }
               if (latitude && longitude) {
                  params.latitude = latitude
                  params.longitude = longitude
               }
               return this.$u.api[api](params)
            }).then(res => {
@@ -460,6 +522,43 @@
         font-size: 38rpx;
         font-weight: 700;
         color: #ffffff;
      }

      &__search {
         position: fixed;
         left: 0;
         right: 0;
         z-index: 10;
         height: 88rpx;
         padding: 8rpx 30rpx;
         box-sizing: border-box;
         display: flex;
         align-items: center;
         background: #ffffff;
      }

      &__search-box {
         width: 100%;
         height: 72rpx;
         display: flex;
         align-items: center;
         padding: 0 24rpx;
         background: #EEEEEE;
         border-radius: 16rpx;
      }

      &__search-input {
         flex: 1;
         height: 72rpx;
         margin-left: 12rpx;
         color: #333333;
         font-weight: 400;
         font-size: 26rpx;
      }

      &__search-placeholder {
         font-size: 28rpx;
         color: #999999;
      }

      &__tabs {
@@ -768,7 +867,6 @@
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f5f7fb;
      border-radius: 16rpx;

      image {