Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6a84d17f 1 parent 78efa02c

feat(订单页面): 改进订单页面交互和样式 

- 将删除订单确认弹窗改为统一风格
- 添加订单删除成功提示组件
- 优化切换按钮和标签页的动画效果
- 为订单卡片添加悬停效果和进入动画
- 移除评分显示文本改用纯图标展示
Inline Side-by-side
Showing 3 changed files with 126 additions and 29 deletions
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-03 13:25:46
* @LastEditTime: 2025-07-03 21:32:33
* @FilePath: /jgdl/src/pages/myFavorites/index.vue
* @Description: 我的关注页面
-->
......@@ -85,7 +85,7 @@
<!-- Confirmation Modal -->
<nut-dialog
v-model:visible="showConfirmModal"
title="确认取消关注"
title="温馨提示"
content="确定要取消关注此车辆吗？"
cancel-text="取消"
ok-text="确认"
......
......@@ -43,6 +43,8 @@
padding: 8rpx;
border-radius: 50rpx;
display: flex;
position: relative;
overflow: hidden;
}
.toggle-option {
......@@ -52,13 +54,21 @@
text-align: center;
font-size: 32rpx; /* 增大字体 */
color: #6b7280;
transition: all 0.2s;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
position: relative;
z-index: 2;
transform: translateX(0);
&.active {
background: white;
color: #111827;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
transform: scale(1.02);
}
&:hover {
transform: translateX(0) scale(1.01);
}
}
......@@ -68,6 +78,14 @@
padding: 20rpx 35rpx; /* 增加内边距 */
border-bottom: 1rpx solid #e5e7eb;
display: flex;
position: relative;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}
.tab-item {
......@@ -77,11 +95,15 @@
color: #6b7280;
position: relative;
cursor: pointer;
transition: color 0.2s;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
flex-shrink: 0;
transform: translateX(0);
&.active {
color: #f97316;
font-weight: 500;
transform: translateY(-2rpx);
&::after {
content: '';
......@@ -90,16 +112,34 @@
left: 0;
right: 0;
height: 4rpx;
background: #f97316;
background: linear-gradient(90deg, #f97316, #fb923c);
border-radius: 2rpx;
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
}
&:hover {
color: #f97316;
transform: translateY(-1rpx);
}
&:last-child {
margin-right: 0;
}
}
/* 滑入动画 */
@keyframes slideIn {
0% {
transform: scaleX(0);
opacity: 0;
}
100% {
transform: scaleX(1);
opacity: 1;
}
}
/* 订单列表 */
.order-list {
flex: 1;
......@@ -139,6 +179,29 @@
padding: 32rpx;
border-radius: 16rpx; /* 增加圆角 */
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); /* 添加阴影 */
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(0);
opacity: 1;
&:hover {
transform: translateY(-4rpx);
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
}
/* 卡片进入动画 */
animation: cardSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 卡片滑入动画 */
@keyframes cardSlideIn {
0% {
transform: translateX(100rpx);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.order-header {
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-03 21:14:00
* @LastEditTime: 2025-07-03 21:34:36
* @FilePath: /jgdl/src/pages/myOrders/index.vue
* @Description: 订单管理页面
-->
......@@ -147,7 +147,7 @@
<text class="score-label">{{ isReadOnlyMode ? '评分' : '请给商品评分' }}</text>
<nut-rate v-model="rateScore" :readonly="isReadOnlyMode" :size="isReadOnlyMode ? '20' : '24'"
active-color="#ff6b35" void-color="#e5e5e5" class="rate-stars" />
<text v-if="isReadOnlyMode" class="score-text">{{ rateScore }}/5分</text>
<!-- <text v-if="isReadOnlyMode" class="score-text">{{ rateScore }}/5分</text> -->
</view>
<!-- 评价输入框 -->
......@@ -245,7 +245,7 @@
<text class="rating-label">评分：</text>
<nut-rate :model-value="currentOrderDetail?.review?.rating" readonly size="20" active-color="#ff6b35"
void-color="#e5e5e5" />
<text class="rating-text">{{ currentOrderDetail?.review?.rating }}/5分</text>
<!-- <text class="rating-text">{{ currentOrderDetail?.review?.rating }}/5分</text> -->
</view>
<view class="review-content">
<text class="content-label">评价内容：</text>
......@@ -266,6 +266,24 @@
</view>
</view>
</nut-popup>
<!-- Confirmation Modal -->
<nut-dialog
v-model:visible="showConfirmModal"
title="温馨提示"
content="确定要删除订单吗？"
cancel-text="取消"
ok-text="确认"
@cancel="showConfirmModal = false"
@ok="performDeleteOrder(pendingDeleteOrderId)"
/>
<!-- 成功提示 -->
<nut-toast
v-model:visible="toastVisible"
:msg="toastMessage"
:type="toastType"
/>
</view>
</template>
......@@ -880,25 +898,44 @@ const submitRate = async () => {
const deletingOrderId = ref('')
/**
* 确认弹窗显示状态
*/
const showConfirmModal = ref(false)
/**
* 待删除的订单ID
*/
const pendingDeleteOrderId = ref('')
/**
* Toast提示
*/
const toastVisible = ref(false)
const toastMessage = ref('')
const toastType = ref('success')
/**
* 显示提示信息
*/
const showToast = (message, type = 'success') => {
toastMessage.value = message
toastType.value = type
toastVisible.value = true
}
/**
* 删除订单
* @param {string} orderId - 订单ID
*/
const deleteOrder = async (orderId) => {
try {
const result = await Taro.showModal({
title: '确认删除',
content: '确定要删除这个订单吗？删除后无法恢复。',
confirmText: '删除',
cancelText: '取消'
})
if (result.confirm) {
await performDeleteOrder(orderId)
}
// 保存待删除的订单ID
pendingDeleteOrderId.value = orderId
showConfirmModal.value = true
} catch (error) {
// 用户取消删除或其他错误
// console.log('删除操作被取消或出错:', error)
}
}
}
/**
......@@ -906,6 +943,9 @@ const deleteOrder = async (orderId) => {
* @param {string} orderId - 订单ID
*/
const performDeleteOrder = async (orderId) => {
// 关闭确认弹窗
showConfirmModal.value = false
// 设置删除状态，用于显示加载效果
deletingOrderId.value = orderId
......@@ -934,11 +974,7 @@ const performDeleteOrder = async (orderId) => {
if (orderIndex !== -1) {
orders.value.splice(orderIndex, 1)
Taro.showToast({
title: '订单删除成功',
icon: 'success',
duration: 2000
})
showToast('订单删除成功', 'success')
} else {
throw new Error('订单不存在')
}
......@@ -946,14 +982,12 @@ const performDeleteOrder = async (orderId) => {
} catch (error) {
// console.error('删除订单失败:', error)
Taro.showToast({
title: error.message || '删除失败，请重试',
icon: 'error',
duration: 2000
})
showToast('删除订单失败', 'error')
} finally {
// 清除删除状态
deletingOrderId.value = ''
// 清除待删除订单ID
pendingDeleteOrderId.value = ''
}
}
......