From 9d661fa8ca84c9545c10bdf2a3b15de48f7f3b86 Mon Sep 17 00:00:00 2001
From: "1054425342@qq.com" <1054425342@qq.com>
Date: Fri, 8 Aug 2025 09:37:34 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E8=AE=A2=E5=8D=95=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 subPackages/orderQy/list.vue | 378 +++++++++++++++++++++++++----------
 1 file changed, 272 insertions(+), 106 deletions(-)

diff --git a/subPackages/orderQy/list.vue b/subPackages/orderQy/list.vue
index 88c5eae..3206e73 100644
--- a/subPackages/orderQy/list.vue
+++ b/subPackages/orderQy/list.vue
@@ -26,38 +26,52 @@
       <view class="order-item" v-for="order in orderList" :key="order.id">
         <!-- 订单头部 -->
         <view class="order-header">
-          <text class="order-number">订单号：{{ order.orderNo }}</text>
-          <text class="order-status" :class="[getStatusClass(order.status)]">{{
-            getStatusText(order.status)
-          }}</text>
+          <view class="order-left">
+            <view class="order-number-section">
+              <text class="order-label">订单号</text>
+              <text class="order-number">{{ order.orderNo }}</text>
+            </view>
+          </view>
+          <view class="order-status-wrapper">
+            <text class="order-status" :class="[getStatusClass(order.status)]">
+              {{ getStatusText(order.status) }}
+            </text>
+          </view>
         </view>
 
         <!-- 权益商品包名 -->
-        <view class="package-name">
-          <text>{{ order.packageName }}</text>
+        <view class="package-section">
+          <view class="package-icon">📦</view>
+          <text class="package-name">{{ order.packageName }}</text>
         </view>
 
         <!-- 商品列表 -->
-        <view class="goods-list">
-          <view
-            class="goods-item"
-            v-for="goods in order.goodsList"
-            :key="goods.id"
-          >
-            <image class="goods-image" :src="goods.image" mode="aspectFill" />
-            <view class="goods-info">
-              <text class="goods-name">{{ goods.name }}</text>
-              <text class="goods-type">{{ getGoodsTypeName(goods.type) }}</text>
-              <text class="goods-price">¥{{ goods.price }}</text>
-            </view>
-            <view class="goods-action">
-              <button
-                class="action-btn"
-                :class="[getActionBtnClass(goods.type)]"
-                @click="handleGoodsAction(goods)"
-              >
-                {{ getActionBtnText(goods.type) }}
-              </button>
+        <view class="goods-section">
+          <view class="goods-title">商品清单</view>
+          <view class="goods-list">
+            <view
+              class="goods-item"
+              v-for="goods in order.goodsList"
+              :key="goods.id"
+            >
+              <image class="goods-image" :src="goods.image" mode="aspectFill" />
+              <view class="goods-info">
+                <text class="goods-name">{{ goods.name }}</text>
+                <view class="goods-meta">
+                  <text class="goods-type">{{
+                    getGoodsTypeName(goods.type)
+                  }}</text>
+                </view>
+              </view>
+              <view class="goods-action">
+                <button
+                  class="action-btn"
+                  :class="[getActionBtnClass(goods.type)]"
+                  @click="handleGoodsAction(goods)"
+                >
+                  {{ getActionBtnText(goods.type) }}
+                </button>
+              </view>
             </view>
           </view>
         </view>
@@ -65,8 +79,14 @@
         <!-- 订单底部 -->
         <view class="order-footer">
           <view class="order-info">
-            <text class="order-time">{{ formatTime(order.createTime) }}</text>
-            <text class="order-total">总计：¥{{ order.totalAmount }}</text>
+            <view class="order-time-section">
+              <text class="time-label">下单时间</text>
+              <text class="order-time">{{ formatTime(order.createTime) }}</text>
+            </view>
+            <view class="order-total-section">
+              <text class="total-label">实付金额</text>
+              <text class="order-total">¥{{ order.totalAmount }}</text>
+            </view>
           </view>
           <view class="order-actions">
             <button
@@ -74,17 +94,18 @@
               @click="showEquityCode(order)"
               v-if="order.status !== 0"
             >
-              权益码
+              <text class="btn-icon">🎫</text>
+              <text>权益码</text>
             </button>
           </view>
         </view>
       </view>
 
       <!-- 空状态 -->
-      <view class="empty-state" v-if="orderList.length === 0 && !loading">
+      <view class="empty-state">
         <image
           class="empty-image"
-          src="/static/image/empty-order.png"
+          :src="showImg('/uploads/20250808/c16267f9cc2b7a68bf23713b5847987e.png')"
           mode="aspectFit"
         />
         <text class="empty-text">暂无订单</text>
@@ -414,29 +435,32 @@ export default {
 <style lang="scss" scoped>
 .order-list-container {
   min-height: 100vh;
-  background-color: #f5f5f5;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }
 
 // Tab样式
 .tab-container {
   display: flex;
-  background-color: #fff;
-  border-bottom: 1px solid #eee;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   position: sticky;
   top: 0;
   z-index: 10;
+  box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
 }
 
 .tab-item {
   flex: 1;
-  padding: 30rpx 0;
+  padding: 32rpx 0;
   text-align: center;
   position: relative;
+  transition: all 0.3s ease;
 
   &.active {
     .tab-text {
-      color: #007aff;
-      font-weight: bold;
+      color: #ffffff;
+      font-weight: 700;
+      transform: scale(1.05);
     }
 
     &::after {
@@ -445,110 +469,197 @@ export default {
       bottom: 0;
       left: 50%;
       transform: translateX(-50%);
-      width: 60rpx;
-      height: 4rpx;
-      background-color: #007aff;
-      border-radius: 2rpx;
+      width: 80rpx;
+      height: 6rpx;
+      background: linear-gradient(45deg, #ffffff, #f1f2f6);
+      border-radius: 3rpx;
+      box-shadow: 0 2rpx 8rpx rgba(255, 255, 255, 0.4);
+    }
+  }
+
+  &:not(.active) {
+    .tab-text {
+      opacity: 0.7;
     }
   }
 }
 
 .tab-text {
-  font-size: 28rpx;
-  color: #333;
+  font-size: 26rpx;
+  color: #ffffff;
+  font-weight: 600;
+  letter-spacing: 0.5rpx;
+  transition: all 0.3s ease;
 }
 
 // 订单列表样式
 .order-scroll {
   height: calc(100vh - 120rpx);
-  padding: 20rpx;
+  margin: 20rpx;
+  width: 710rpx;
 }
 
 .order-item {
   background-color: #fff;
-  border-radius: 16rpx;
-  margin-bottom: 20rpx;
+  border-radius: 24rpx;
+  margin-bottom: 24rpx;
   overflow: hidden;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-4rpx);
+    box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.12);
+  }
 }
 
 // 订单头部
 .order-header {
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  padding: 30rpx;
-  border-bottom: 1px solid #f0f0f0;
+  align-items: flex-start;
+  padding: 24rpx 30rpx;
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+  border-bottom: 1px solid #e9ecef;
+}
+
+.order-left {
+  flex: 1;
+}
+
+.order-number-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+}
+
+.order-label {
+  font-size: 22rpx;
+  color: #8e9aaf;
+  font-weight: 500;
 }
 
 .order-number {
-  font-size: 28rpx;
-  color: #333;
+  font-size: 26rpx;
+  color: #495057;
+  font-weight: 600;
+  font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
+}
+
+.order-status-wrapper {
+  display: flex;
+  align-items: center;
 }
 
 .order-status {
-  font-size: 26rpx;
-  padding: 8rpx 16rpx;
-  border-radius: 20rpx;
+  font-size: 24rpx;
+  padding: 10rpx 20rpx;
+  border-radius: 50rpx;
+  font-weight: 600;
+  letter-spacing: 0.5rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 
   &.status-pending {
-    background-color: #fff3cd;
+    background: linear-gradient(45deg, #fff3cd, #ffeaa7);
     color: #856404;
+    border: 1px solid #ffeaa7;
   }
 
   &.status-waiting {
-    background-color: #d4edda;
-    color: #155724;
+    background: linear-gradient(45deg, #d4edda, #00b894);
+    color: #ffffff;
+    border: 1px solid #00b894;
   }
 
   &.status-shipping {
-    background-color: #cce5ff;
-    color: #004085;
+    background: linear-gradient(45deg, #cce5ff, #0984e3);
+    color: #ffffff;
+    border: 1px solid #0984e3;
   }
 
   &.status-completed {
-    background-color: #e2e3e5;
-    color: #383d41;
+    background: linear-gradient(45deg, #e2e3e5, #636e72);
+    color: #ffffff;
+    border: 1px solid #636e72;
   }
 
   &.status-refund {
-    background-color: #f8d7da;
-    color: #721c24;
+    background: linear-gradient(45deg, #f8d7da, #e17055);
+    color: #ffffff;
+    border: 1px solid #e17055;
   }
 }
 
-// 权益商品包名
-.package-name {
+// 权益商品包
+.package-section {
+  display: flex;
+  align-items: center;
   padding: 20rpx 30rpx;
-  background-color: #f8f9fa;
-  border-bottom: 1px solid #f0f0f0;
+  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+  margin: 0 20rpx;
+  border-radius: 16rpx;
+  margin-top: -10rpx;
+  box-shadow: 0 4rpx 20rpx rgba(102, 126, 234, 0.3);
+}
 
-  text {
-    font-size: 26rpx;
-    color: #666;
-  }
+.package-icon {
+  font-size: 32rpx;
+  margin-right: 16rpx;
+}
+
+.package-name {
+  font-size: 28rpx;
+  color: #ffffff;
+  font-weight: 600;
+  letter-spacing: 0.5rpx;
+}
+
+// 商品部分
+.goods-section {
+  margin: 20rpx 0;
+}
+
+.goods-title {
+  font-size: 26rpx;
+  color: #495057;
+  font-weight: 600;
+  padding: 0 30rpx 16rpx;
+  border-bottom: 2rpx solid #e9ecef;
+  margin-bottom: 20rpx;
 }
 
-// 商品列表
 .goods-list {
-  padding: 0 30rpx;
+  padding: 0 20rpx;
 }
 
 .goods-item {
   display: flex;
   align-items: center;
-  padding: 30rpx 0;
-  border-bottom: 1px solid #f0f0f0;
+  padding: 24rpx 20rpx;
+  margin-bottom: 16rpx;
+  background: #ffffff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
+  border: 1px solid #f1f3f4;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-2rpx);
+    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12);
+  }
 
   &:last-child {
-    border-bottom: none;
+    margin-bottom: 0;
   }
 }
 
 .goods-image {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 12rpx;
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 16rpx;
   margin-right: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 }
 
 .goods-info {
@@ -558,46 +669,64 @@ export default {
 
 .goods-name {
   display: block;
-  font-size: 28rpx;
-  color: #333;
-  margin-bottom: 10rpx;
+  font-size: 26rpx;
+  color: #2d3748;
+  font-weight: 600;
+  margin-bottom: 12rpx;
+  line-height: 1.4;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.goods-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .goods-type {
-  display: block;
-  font-size: 24rpx;
-  color: #999;
-  margin-bottom: 10rpx;
+  font-size: 22rpx;
+  color: #718096;
+  background: #edf2f7;
+  padding: 6rpx 12rpx;
+  border-radius: 20rpx;
+  font-weight: 500;
 }
 
 .goods-price {
-  font-size: 28rpx;
-  color: #ff4757;
-  font-weight: bold;
+  font-size: 26rpx;
+  color: #e53e3e;
+  font-weight: 700;
+  font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
 }
 
 .goods-action {
   .action-btn {
-    padding: 12rpx 24rpx;
-    border-radius: 20rpx;
-    font-size: 24rpx;
+    padding: 2rpx 25rpx;
+    border-radius: 24rpx;
+    font-size: 22rpx;
+    font-weight: 600;
     border: none;
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
+    transition: all 0.3s ease;
+
+    &:active {
+      transform: scale(0.95);
+    }
 
     &.btn-view {
-      background-color: #007aff;
+      background: linear-gradient(45deg, #667eea, #764ba2);
       color: #fff;
     }
 
     &.btn-reserve {
-      background-color: #ff9500;
+      background: linear-gradient(45deg, #f093fb, #f5576c);
       color: #fff;
     }
 
     &.btn-use {
-      background-color: #34c759;
+      background: linear-gradient(45deg, #4facfe, #00f2fe);
       color: #fff;
     }
   }
@@ -608,35 +737,68 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 30rpx;
-  background-color: #f8f9fa;
+  padding: 24rpx 30rpx;
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  border-top: 1px solid #dee2e6;
+  margin-top: 20rpx;
 }
 
 .order-info {
   flex: 1;
+  display: flex;
+  gap: 40rpx;
+}
+
+.order-time-section,
+.order-total-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+}
+
+.time-label,
+.total-label {
+  font-size: 20rpx;
+  color: #8e9aaf;
+  font-weight: 500;
 }
 
 .order-time {
-  display: block;
   font-size: 24rpx;
-  color: #999;
-  margin-bottom: 10rpx;
+  color: #495057;
+  font-weight: 500;
+  font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
 }
 
 .order-total {
   font-size: 28rpx;
-  color: #333;
-  font-weight: bold;
+  color: #e53e3e;
+  font-weight: 700;
+  font-family: "SF Mono", "Monaco", "Cascadia Code", monospace;
 }
 
 .order-actions {
   .equity-code-btn {
-    padding: 16rpx 32rpx;
-    background-color: #007aff;
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+    padding: 0rpx 25rpx;
+    background: linear-gradient(45deg, #667eea, #764ba2);
     color: #fff;
-    border-radius: 24rpx;
-    font-size: 26rpx;
+    border-radius: 32rpx;
+    font-size: 24rpx;
+    font-weight: 600;
     border: none;
+    box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.4);
+    transition: all 0.3s ease;
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    .btn-icon {
+      font-size: 20rpx;
+    }
   }
 }
 
@@ -644,6 +806,10 @@ export default {
 .empty-state {
   text-align: center;
   padding: 200rpx 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
 
 .empty-image {