feat: 为弹窗添加统一底部操作按钮

为myCar、myFavorites和myOrders页面的弹窗添加底部操作按钮，包括取消和确认按钮统一按钮样式和行为，提升用户体验

feat: 为弹窗添加统一底部操作按钮
为myCar、myFavorites和myOrders页面的弹窗添加底部操作按钮，包括取消和确认按钮统一按钮样式和行为，提升用户体验
hookehuyr
Commit 6c2e3846ebc8aa5f160b9dc001dc52f1d18f2db9 6c2e3846 1 parent ffddb990
Showing 3 changed files with 74 additions and 7 deletions
src/pages/myCar/index.vue
src/pages/myFavorites/index.vue
src/pages/myOrders/index.vue
--- a/src/pages/myCar/index.vue
View file @6c2e384
+++ b/src/pages/myCar/index.vue
View file @6c2e384
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-18 15:48:40
+ * @LastEditTime: 2025-07-29 16:57:13
  * @FilePath: /jgdl/src/pages/myCar/index.vue
  * @Description: 文件描述
 -->
@@ -143,6 +143,16 @@
           <text style="font-size: 1rem;">{{ offlineDialogContent }}</text>
         </view>
       </template>
+      <template #footer>
+        <view class="flex gap-4 p-4">
+          <nut-button plain class="flex-1" size="small" @click="cancelOffline">
+            取消
+          </nut-button>
+          <nut-button type="warning" class="flex-1" size="small" color="orange" @click="confirmOffline">
+            确认
+          </nut-button>
+        </view>
+      </template>
     </nut-dialog>
   </view>
 </template>
--- a/src/pages/myFavorites/index.vue
View file @6c2e384
+++ b/src/pages/myFavorites/index.vue
View file @6c2e384
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-24 11:09:05
+ * @LastEditTime: 2025-07-29 16:52:58
  * @FilePath: /jgdl/src/pages/myFavorites/index.vue
  * @Description: 我的关注页面
 -->
@@ -96,6 +96,16 @@
                     <text style="font-size: 1rem;">确定要取消关注此车辆吗？</text>
                 </view>
             </template>
+            <template #footer>
+                <view class="flex gap-4 p-4">
+                    <nut-button plain class="flex-1" size="small" @click="showConfirmModal = false">
+                        取消
+                    </nut-button>
+                    <nut-button type="warning" class="flex-1" size="small" color="orange" @click="confirmUnfollow">
+                        确认
+                    </nut-button>
+                </view>
+            </template>
         </nut-dialog>
         <!-- 成功提示 -->
--- a/src/pages/myOrders/index.vue
View file @6c2e384
+++ b/src/pages/myOrders/index.vue
View file @6c2e384
 <!--
  * @Date: 2022-09-19 14:11:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-07-29 16:38:27
+ * @LastEditTime: 2025-07-29 17:02:07
  * @FilePath: /jgdl/src/pages/myOrders/index.vue
  * @Description: 订单管理页面
 -->
@@ -111,7 +111,7 @@
               <!-- 买车模式：待收货状态 -->
               <template v-if="viewMode === 'buy' && order.status === 9">
                 <nut-button type="default" size="small" @click="viewOrderDetail(order.id)">
-                  查看详情
+                  订单详情
                 </nut-button>
                 <nut-button type="primary" size="small" @click="handleConfirmReceive(order)" color="orange" class="ml-2"
                   :loading="receivingOrderId === order.id" :disabled="receivingOrderId === order.id">
@@ -122,7 +122,7 @@
               <!-- 卖车模式：待发货状态 -->
               <template v-if="viewMode === 'sell' && order.status === 5">
                 <nut-button type="default" size="small" @click="viewOrderDetail(order.id)">
-                  查看详情
+                  订单详情
                 </nut-button>
                 <nut-button type="primary" size="small" @click="handleConfirmShip(order)" color="orange" class="ml-2"
                   :loading="shippingOrderId === order.id" :disabled="shippingOrderId === order.id">
@@ -133,14 +133,21 @@
               <!-- 买车模式：待发货状态 -->
               <template v-if="viewMode === 'buy' && order.status === 5">
                 <nut-button type="default" size="small" @click="viewOrderDetail(order.id)">
-                  查看详情
+                  订单详情
+                </nut-button>
+              </template>
+
+              <!-- 卖车模式：已发货状态 -->
+              <template v-if="viewMode === 'sell' && order.status === 9">
+                <nut-button type="default" size="small" @click="viewOrderDetail(order.id)">
+                  订单详情
                 </nut-button>
               </template>
               <!-- 已完成状态 -->
               <template v-if="order.status === 11">
                 <nut-button type="default" size="small" @click="viewOrderDetail(order.id)">
-                  查看详情
+                  订单详情
                 </nut-button>
                 <!-- 只有买车订单才显示评价按钮，卖车订单不显示 -->
                 <nut-button v-if="viewMode === 'buy'" type="primary" size="small" @click="rateOrder(order.id)" class="ml-2" color="orange" plain>
@@ -339,6 +346,16 @@
           <text style="font-size: 1rem;">是否确认删除订单?</text>
         </view>
       </template>
+      <template #footer>
+        <view class="flex gap-4 p-4">
+          <nut-button plain class="flex-1" size="small" @click="showConfirmModal = false">
+            取消
+          </nut-button>
+          <nut-button type="warning" class="flex-1" size="small" color="orange" @click="performDeleteOrder(pendingDeleteOrderId)">
+            确认
+          </nut-button>
+        </view>
+      </template>
     </nut-dialog>
     <!-- Cancel Order Confirmation Modal -->
@@ -349,6 +366,16 @@
           <text style="font-size: 1rem;">是否确认取消订单?</text>
         </view>
       </template>
+      <template #footer>
+        <view class="flex gap-4 p-4">
+          <nut-button plain class="flex-1" size="small" @click="showCancelConfirmModal = false">
+            我再想想
+          </nut-button>
+          <nut-button type="warning" class="flex-1" size="small" color="orange" @click="performCancelOrder(pendingCancelOrderId)">
+            确定取消
+          </nut-button>
+        </view>
+      </template>
     </nut-dialog>
     <!-- 确认发货弹窗 -->
@@ -359,6 +386,16 @@
           <text style="font-size: 1rem;">确认已将车辆发货给买家？</text>
         </view>
       </template>
+      <template #footer>
+        <view class="flex gap-4 p-4">
+          <nut-button plain class="flex-1" size="small" @click="showShipConfirmModal = false">
+            取消
+          </nut-button>
+          <nut-button type="warning" class="flex-1" size="small" color="orange" @click="performConfirmShip(pendingShipOrderId)">
+            确认发货
+          </nut-button>
+        </view>
+      </template>
     </nut-dialog>
     <!-- 确认收货弹窗 -->
@@ -369,6 +406,16 @@
           <text style="font-size: 1rem;">确认已收到车辆？</text>
         </view>
       </template>
+      <template #footer>
+        <view class="flex gap-4 p-4">
+          <nut-button plain class="flex-1" size="small" @click="showReceiveConfirmModal = false">
+            取消
+          </nut-button>
+          <nut-button type="warning" class="flex-1" size="small" color="orange" @click="performConfirmReceive(pendingReceiveOrderId)">
+            确认收货
+          </nut-button>
+        </view>
+      </template>
     </nut-dialog>
   </view>
 </template>