MrShi
2026-05-08 8a899e63502939dbf034b90ba46741e0faa9023c
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.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
@@ -482,6 +524,43 @@
         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 {
         position: fixed;
         left: 0;