添加对应逻辑并修改样式

pages/mall/delivery/order-detail.uvue

@@ -12,6 +12,11 @@
     <!-- 订单状态 -->
     <view class="order-status">
       <view class="status-progress">
+        <view class="progress-item" :class="{ active: order.status >= 1 }">
+          <view class="progress-dot"></view>
+          <text class="progress-text">待接单</text>
+        </view>
+        <view class="progress-line" :class="{ active: order.status >= 2 }"></view>
         <view class="progress-item" :class="{ active: order.status >= 2 }">
           <view class="progress-dot"></view>
           <text class="progress-text">已接单</text>
@@ -154,13 +159,20 @@
 
     <!-- 底部操作 -->
     <view class="bottom-actions">
-      <!-- 只在已接单状态且订单未完成时显示订单操作按钮 -->
-      <button v-if="order.status === 2 && order.status < 5" class="action-btn accept" @click="acceptOrder">接受订单</button>
-      <button v-if="order.status === 2 && order.status < 5" class="action-btn reject" @click="rejectOrder">拒绝订单</button>
-      <!-- 只在取货中状态且订单未完成时显示导航按钮 -->
-      <button v-if="order.status === 3 && order.status < 5" class="action-btn navigate" @click="startNavigation">开始导航</button>
-      <!-- 只在已取货状态且订单未完成时显示完成按钮 -->
-      <button v-if="order.status === 4 && order.status < 5" class="action-btn complete" @click="completeDelivery">完成配送</button>
+      <!-- 只在待接单状态且订单未完成时显示接受/拒绝订单按钮 -->
+      <button v-if="order.status === 1" class="action-btn accept" @click="acceptOrder">接受订单</button>
+      <button v-if="order.status === 1" class="action-btn reject" @click="rejectOrder">拒绝订单</button>
+
+      <!-- 只在已接单状态且订单未完成时显示“前往取货”和“正在取货”按钮 -->
+      <button v-if="order.status === 2" class="action-btn navigate" @click="startNavigation">前往取货</button>
+      <button v-if="order.status === 2" class="action-btn complete" @click="confirmArrivedAtPickup">正在取货</button>
+
+      <!-- 只在取货中状态且订单未完成时显示“确认取货”按钮 -->
+      <button v-if="order.status === 3" class="action-btn complete" @click="confirmPickup">确认取货</button>
+
+      <!-- 只在已取货状态且订单未完成时显示“确认送达”按钮 -->
+      <button v-if="order.status === 4" class="action-btn complete" @click="confirmDelivery">确认送达</button>
+
       <!-- 始终显示联系客服按钮 -->
       <button class="action-btn contact" @click="contactService">联系客服</button>
     </view>
@@ -224,6 +236,7 @@ export default {
       deliveryNote: '', // 配送备注
     }
   },
+
   onLoad(options: any) {
     const orderId = options.id as string
     // 👇 从 URL 参数获取 status
@@ -236,6 +249,7 @@ export default {
       this.loadOrderDetail(orderId)
     }
   },
+
   methods: {
     // 返回上一页
     goBack() {
@@ -319,6 +333,8 @@ export default {
         return '配送员正在前往取货'
       } else if (this.order.status === 2) {
         return '订单已接取'
+      } else if (this.order.status === 1) {
+        return '等待配送员接单'
       } else {
         return '订单状态未知'
       }
@@ -333,6 +349,27 @@ export default {
       return Object.keys(specifications).map(key => `${key}: ${specifications[key]}`).join(', ')
     },
     
+    // ✅ 新增：点击“正在取货”按钮
+    confirmArrivedAtPickup() {
+      // 仅在订单未完成时执行
+      if (this.order.status < 5) {
+        uni.showModal({
+          title: '正在取货',
+          content: '确认已到达商家，开始取货？',
+          success: (res) => {
+            if (res.confirm) {
+              this.order.status = 3 // 更新状态为取货中
+              uni.showToast({
+                title: '已进入取货流程',
+                icon: 'success'
+              })
+            }
+          }
+        })
+      }
+    },
+    
+    // ✅ 保留：点击“确认取货”按钮
     confirmPickup() {
       // 仅在订单未完成时执行
       if (this.order.status < 5) {
@@ -353,6 +390,7 @@ export default {
       }
     },
     
+    // ✅ 保留：点击“确认送达”按钮
     confirmDelivery() {
       // 仅在订单未完成时执行
       if (this.order.status < 5) {
@@ -373,6 +411,7 @@ export default {
       }
     },
     
+    // ✅ 保留：接受订单
     acceptOrder() {
       // 仅在订单未完成时执行
       if (this.order.status < 5) {
@@ -381,7 +420,7 @@ export default {
           content: '确定接受这个配送订单吗？',
           success: (res) => {
             if (res.confirm) {
-              this.order.status = 3 // 更新状态为取货中
+              this.order.status = 2 // 更新状态为已接单
               uni.showToast({
                 title: '订单接受成功',
                 icon: 'success'
@@ -392,6 +431,7 @@ export default {
       }
     },
     
+    // ✅ 保留：拒绝订单
     rejectOrder() {
       // 仅在订单未完成时执行
       if (this.order.status < 5) {
@@ -411,6 +451,7 @@ export default {
       }
     },
     
+    // ✅ 保留：启动导航（用于“前往取货”按钮）
     startNavigation() {
       // 仅在订单未完成时执行
       if (this.order.status < 5) {
@@ -428,21 +469,6 @@ export default {
       }
     },
     
-    completeDelivery() {
-      // 仅在订单未完成时执行
-      if (this.order.status < 5) {
-        if (!this.deliveryNote.trim()) {
-          uni.showToast({
-            title: '请填写配送备注',
-            icon: 'none'
-          })
-          return
-        }
-        
-        this.confirmDelivery()
-      }
-    },
-    
     callCustomer() {
       const phone = this.getDeliveryAddress().phone
       uni.makePhoneCall({
@@ -840,14 +866,18 @@ export default {
   box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
   display: flex;
   gap: 15rpx;
+  flex-wrap: wrap; /* 允许按钮换行 */
 }
 
 .action-btn {
   flex: 1;
+  min-width: 120rpx; /* 设置最小宽度 */
   height: 70rpx;
   border-radius: 35rpx;
   font-size: 26rpx;
   border: none;
+  margin: 5rpx; /* 添加外边距 */
+  box-sizing: border-box; /* 确保宽高包含边距 */
 }
 
 .action-btn.accept, .action-btn.complete {