hookehuyr

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

为myCar、myFavorites和myOrders页面的弹窗添加底部操作按钮,包括取消和确认按钮
统一按钮样式和行为,提升用户体验
<!--
* @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>
......
<!--
* @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: 我的关注页面
-->
......@@ -92,10 +92,20 @@
@ok="confirmUnfollow"
>
<template #default>
<view>
<text style="font-size: 1rem;">确定要取消关注此车辆吗?</text>
</view>
</template>
<view>
<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>
<!-- 成功提示 -->
......
<!--
* @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>
......