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

- 将删除订单确认弹窗改为统一风格 - 添加订单删除成功提示组件 - 优化切换按钮和标签页的动画效果 - 为订单卡片添加悬停效果和进入动画 - 移除评分显示文本改用纯图标展示

feat(订单页面): 改进订单页面交互和样式
- 将删除订单确认弹窗改为统一风格 - 添加订单删除成功提示组件 - 优化切换按钮和标签页的动画效果 - 为订单卡片添加悬停效果和进入动画 - 移除评分显示文本改用纯图标展示
hookehuyr
Commit 6a84d17f3306009079704d6f0e195cf5680f870c 6a84d17f 1 parent 78efa02c
Showing 3 changed files with 126 additions and 29 deletions
src/pages/myFavorites/index.vue
src/pages/myOrders/index.less
src/pages/myOrders/index.vue
--- a/src/pages/myFavorites/index.vue
View file @6a84d17
+++ b/src/pages/myFavorites/index.vue
View file @6a84d17
 <!--
  * @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="确认"
--- a/src/pages/myOrders/index.less
View file @6a84d17
+++ b/src/pages/myOrders/index.less
View file @6a84d17
@@ -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 {
--- a/src/pages/myOrders/index.vue
View file @6a84d17
+++ b/src/pages/myOrders/index.vue
View file @6a84d17
 <!--
  * @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({
+    // 保存待删除的订单ID
-      title: '确认删除',
+    pendingDeleteOrderId.value = orderId
-      content: '确定要删除这个订单吗？删除后无法恢复。',
+    showConfirmModal.value = true
-      confirmText: '删除',
-      cancelText: '取消'
-    })
-
-    if (result.confirm) {
-      await performDeleteOrder(orderId)
-    }
   } 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({
+      showToast('订单删除成功', 'success')
-        title: '订单删除成功',
-        icon: 'success',
-        duration: 2000
-      })
     } else {
       throw new Error('订单不存在')
     }
@@ -946,14 +982,12 @@ const performDeleteOrder = async (orderId) => {
   } catch (error) {
     // console.error('删除订单失败:', error)
-    Taro.showToast({
+    showToast('删除订单失败', 'error')
-      title: error.message || '删除失败，请重试',
-      icon: 'error',
-      duration: 2000
-    })
   } finally {
     // 清除删除状态
     deletingOrderId.value = ''
+    // 清除待删除订单ID
+    pendingDeleteOrderId.value = ''
   }
 }