From 80c1a21db08fbe9a3b9cd69a32ad6e97102ab945 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A0=BC=E8=B0=83main?= <czboosj@gmail.com>
Date: Sat, 21 Mar 2026 21:38:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E6=83=A0=E5=8D=B7=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                     |   7 +
 pages/detail/serviceDetail.vue | 363 ++++++-------------------------
 pages/profile/profile.vue      |  12 +
 pages/profileSub/myCoupons.vue | 387 +++++++++++++++++++++++++++++++++
 static/profile/my_icon.png     | Bin 0 -> 1216 bytes
 5 files changed, 467 insertions(+), 302 deletions(-)
 create mode 100644 pages/profileSub/myCoupons.vue
 create mode 100644 static/profile/my_icon.png

diff --git a/pages.json b/pages.json
index a14dafe..03ef47e 100644
--- a/pages.json
+++ b/pages.json
@@ -139,6 +139,13 @@
 						"navigationBarTitleText": "隐私政策",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "myCoupons",
+					"style": {
+						"navigationBarTitleText": "我的优惠卷",
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		}
diff --git a/pages/detail/serviceDetail.vue b/pages/detail/serviceDetail.vue
index b17beab..f6c4b13 100644
--- a/pages/detail/serviceDetail.vue
+++ b/pages/detail/serviceDetail.vue
@@ -101,29 +101,22 @@
 
     <!-- 底部结算栏（固定） -->
     <view class="checkout-footer">
-      <view class="footer-left">
-        <view class="price-section">
-          <view class="main-price">
-            <view class="price-left">
-              <text class="price-label">合计:</text>
-              <text class="price-symbol">¥</text>
-              <text class="price-num">{{ totalAmount.toFixed(2) }}</text>
-            </view>
-            <view class="member-benefit" v-if="hasMemberDiscount">
-              <image class="crown-icon" src="/static/service/crown-icon.png" mode="aspectFill"></image>
-              <text class="benefit-text">{{ memberLevelName }}优惠</text>
-            </view>
-          </view>
-          <view class="discount-section" @click="openCouponPopup">
-            <text class="discount-text">{{ selectedCoupon ? '已优惠 ¥' + (calculateCouponDiscount(selectedCoupon) / 100).toFixed(2) : '选择优惠卷' }}</text>
-            <uni-icons type="right" size="12" color="#d51c3c"></uni-icons>
-          </view>
+      <view class="total-info">
+        <text class="total-label">总金额¥</text>
+        <text class="total-amount">{{ totalAmount.toFixed(2) }}</text>
+        <view class="member-benefit">
+          <image
+            class="crown-icon"
+            src="/static/service/crown-icon.png"
+            mode="aspectFill"
+          ></image>
+          <text class="benefit-text">{{ memberLevelName }}优惠</text>
         </view>
       </view>
       <button
         class="checkout-btn"
-        :class="{ disabled: totalAmountBeforeDiscount <= 0 }"
-        :disabled="totalAmountBeforeDiscount <= 0"
+        :class="{ disabled: totalAmount <= 0 }"
+        :disabled="totalAmount <= 0"
         @click="handleCheckout"
       >
         去结算
@@ -138,8 +131,7 @@ import {
   getGuildStoreDetail,
   getGuildVoucher,
   getPaySign,
-  appBuy,
-  getLuCouponPage
+  appBuy
 } from "@/api/service";
 import NavHeader from "@/components/NavHeader/NavHeader.vue";
 
@@ -157,37 +149,26 @@ export default {
       userInfo: {},
       distance: null,
       paying: false,
-      coupons: [], // 用户优惠卷列表
-      selectedCoupon: null, // 已选中的优惠卷
     };
   },
   computed: {
     headerHeight() {
       return this.statusBarHeight + 44;
     },
-    // 计算折扣前总金额
-    totalAmountBeforeDiscount() {
+    // 计算总金额（只计算选中且数量大于0的商品）
+    totalAmount() {
       return this.menuList.reduce((total, item) => {
         if (item.selected && item.quantity > 0) {
+          // 价格是以分为单位，需要转换为元
           const price = (item.salePrice || 0) / 100;
           return total + price * item.quantity;
         }
         return total;
       }, 0);
     },
-    // 计算总金额（只计算选中且数量大于0的商品，并减去优惠金额）
-    totalAmount() {
-      let amount = this.totalAmountBeforeDiscount;
-      if (this.selectedCoupon) {
-        const discount = this.calculateCouponDiscount(this.selectedCoupon) / 100;
-        amount = Math.max(0, amount - discount);
-      }
-      return amount;
-    },
-    // 是否有会员优惠（现在改为：只要是会员就显示）
+    // 是否有会员优惠
     hasMemberDiscount() {
-      // 只要用户信息中存在 level 对象，或者 level 名称不为空，就认为是会员
-      return !!(this.userInfo && this.userInfo.level && this.userInfo.level.name);
+      return this.menuList.some((item) => item.selected && item.discount);
     },
     // 获取会员等级名称（安全访问）
     memberLevelName() {
@@ -197,15 +178,6 @@ export default {
       );
     },
   },
-  watch: {
-    // 监听菜单变化，自动匹配最佳优惠卷
-    menuList: {
-      handler() {
-        this.autoSelectBestCoupon();
-      },
-      deep: true
-    }
-  },
   onLoad(options) {
     const systemInfo = uni.getSystemInfoSync();
     this.statusBarHeight = systemInfo.statusBarHeight || 0;
@@ -263,11 +235,10 @@ export default {
     // 加载店铺数据
     async loadStoreData() {
       try {
-        // 并行加载店铺详情、菜单和优惠卷
+        // 并行加载店铺详情和菜单
         await Promise.all([
           this.loadStoreDetail(this.shopId),
           this.loadStoreMenu(this.shopId),
-          this.loadCoupons()
         ]);
       } catch (error) {
         console.error("加载店铺数据失败:", error);
@@ -310,153 +281,6 @@ export default {
       }
     },
 
-    // 加载用户优惠卷
-    async loadCoupons() {
-      try {
-        const res = await getLuCouponPage({ pageNo: 1, pageSize: 100, status: 0 });
-        if (res && res.list) {
-          this.coupons = res.list;
-          this.autoSelectBestCoupon();
-        }
-      } catch (error) {
-        console.error("加载优惠卷失败:", error);
-      }
-    },
-
-    // 检查优惠卷是否适用
-    // 这里会结合当前页面已选择的代金券商品（menuList 中 selected 为 true 且数量 > 0 的项）进行判断
-    isCouponApplicable(coupon) {
-      if (!coupon) return false;
-      
-      // 1. 检查金额是否满足条件
-      // 判断当前已选商品的总金额（未扣除优惠前）是否达到该优惠卷的使用门槛（usePrice）
-      const usePrice = coupon.usePrice || 0;
-      if (this.totalAmountBeforeDiscount * 100 < usePrice) {
-        return false;
-      }
-      
-      // 2. 检查商品是否匹配
-      // 获取当前购物车中已勾选且数量大于0的所有商品的 ID 列表
-      const selectedItemIds = this.menuList
-        .filter(item => item.selected && item.quantity > 0)
-        .map(item => item.id);
-        
-      // 如果没有选择任何商品，则所有优惠卷均不可用
-      if (selectedItemIds.length === 0) return false;
-      
-      // 3. 根据可用范围（productScope）进一步判断
-      // 如果可用范围是 1（全部代金券通用），且前面金额满足，则直接判定为可用
-      if (coupon.productScope === 1) {
-        return true;
-      }
-      
-      // 如果可用范围是 2（指定代金券可用），则需要判断接口返回的 voucherIds（该优惠卷适用的指定商品ID集合）
-      let vIds = coupon.voucherIds || [];
-      if (typeof vIds === 'string') {
-        vIds = vIds.split(',').map(id => Number(id));
-      }
-      
-      // 只要有一个已选中的商品 ID 存在于该优惠卷的适用商品 ID 列表（voucherIds）中，即视为匹配
-      if (vIds.length > 0) {
-         const hasMatch = selectedItemIds.some(id => vIds.includes(id) || vIds.includes(String(id)));
-         if (!hasMatch) return false;
-      } else if (coupon.productScope === 2) {
-         // 如果是指定商品可用，但后端没有返回适用的 voucherIds，保守起见判定为不可用
-         return false;
-      }
-      
-      return true;
-    },
-
-    // 自动选择最佳优惠卷
-    autoSelectBestCoupon() {
-      // 找出所有适用的优惠卷
-      const applicableCoupons = this.coupons.filter(c => this.isCouponApplicable(c));
-      
-      if (applicableCoupons.length === 0) {
-        this.selectedCoupon = null;
-        return;
-      }
-      
-      // 按优惠金额从大到小排序
-      applicableCoupons.sort((a, b) => {
-        const discountA = this.calculateCouponDiscount(a);
-        const discountB = this.calculateCouponDiscount(b);
-        return discountB - discountA;
-      });
-      
-      // 选出优惠最大的
-      this.selectedCoupon = applicableCoupons[0];
-    },
-
-    // 计算某个优惠卷能抵扣的金额（单位：分）
-    calculateCouponDiscount(coupon) {
-      if (!coupon) return 0;
-      // 1-金额类 或 兼容旧数据
-      if (coupon.type === 1 || !coupon.type) {
-        return coupon.discountAmount || coupon.discountPrice || coupon.price || 0;
-      }
-      // 2-折扣类
-      if (coupon.type === 2) {
-        let applicableAmount = 0; // 适用的商品总价（分）
-        
-        if (coupon.productScope === 1) {
-          // 全部通用，则适用总价为当前商品总价
-          applicableAmount = this.totalAmountBeforeDiscount * 100;
-        } else {
-          // 指定代金券可用，计算匹配商品的总价
-          let vIds = coupon.voucherIds || [];
-          if (typeof vIds === 'string') {
-            vIds = vIds.split(',').map(id => Number(id));
-          }
-          this.menuList.forEach(item => {
-            if (item.selected && item.quantity > 0) {
-              if (vIds.includes(item.id) || vIds.includes(String(item.id))) {
-                applicableAmount += (item.sellPrice || 0) * item.quantity;
-              }
-            }
-          });
-        }
-        
-        // 计算抵扣金额：适用金额 * (100 - 折扣百分比) / 100
-        // 例：80表示8折，即抵扣 20%
-        const percent = coupon.discountPercent || 100;
-        let discount = Math.floor(applicableAmount * (100 - percent) / 100);
-        
-        // 如果有最大抵扣限制
-        if (coupon.discountLimit && coupon.discountLimit > 0) {
-          discount = Math.min(discount, coupon.discountLimit);
-        }
-        
-        return discount;
-      }
-      return 0;
-    },
-
-    // 打开优惠卷页面
-    openCouponPopup() {
-      // 为优惠卷附加 isApplicable 属性
-      const couponsWithStatus = this.coupons.map(c => ({
-        ...c,
-        isApplicable: this.isCouponApplicable(c)
-      }));
-      
-      uni.navigateTo({
-        url: '/pages/detail/selectCoupon',
-        success: (res) => {
-          res.eventChannel.emit('acceptDataFromOpenerPage', {
-            coupons: couponsWithStatus,
-            selectedCouponId: this.selectedCoupon ? this.selectedCoupon.id : null
-          });
-        },
-        events: {
-          acceptDataFromOpenedPage: (data) => {
-            this.selectedCoupon = data.coupon;
-          }
-        }
-      });
-    },
-
     // 切换菜单项选择状态
     toggleMenuItem(index) {
       const item = this.menuList[index];
@@ -471,7 +295,6 @@ export default {
         // 选中时，如果当前数量为 0 或未设置，则默认数量为 1
         item.quantity = 1;
       }
-      this.autoSelectBestCoupon();
     },
 
     // 增加数量
@@ -487,7 +310,6 @@ export default {
       }
       // 增加数量
       item.quantity = (item.quantity || 0) + 1;
-      this.autoSelectBestCoupon();
     },
 
     // 减少数量
@@ -506,7 +328,6 @@ export default {
           item.selected = false;
         }
       }
-      this.autoSelectBestCoupon();
     },
 
     // 格式化价格：将分转换为元（除以100，保留两位小数）
@@ -549,19 +370,11 @@ export default {
 
       console.log("购买信息: " + voucherStr);
       console.log("金额:" + trxamt);
-      
-      const buyParams = {
+      const res = await appBuy({
         shopId: this.shopId,
         voucherData: voucherStr,
         payableAmount: trxamt,
-      };
-      
-      // 如果选择了优惠卷，传递优惠卷ID
-      if (this.selectedCoupon) {
-        buyParams.couponId = this.selectedCoupon.id;
-      }
-      
-      const res = await appBuy(buyParams);
+      });
       console.log(res);
       if (!res) {
         uni.showToast({
@@ -949,118 +762,64 @@ export default {
   left: 0;
   right: 0;
   background-color: #fff;
-  padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom));
+  padding: 25rpx 20rpx 25rpx 48rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
+  border-top: 1rpx solid #e2e8f1;
   z-index: 100;
 
-  .footer-left {
-    flex: 1;
+  .total-info {
     display: flex;
-    align-items: center;
+    align-items: baseline;
 
-    .price-section {
+    .total-label {
+      font-family: PingFang-SC, PingFang-SC;
+      font-weight: 500;
+      font-size: 30rpx;
+      color: #d51c3c;
+    }
+
+    .total-amount {
+      font-family: PingFang-SC, PingFang-SC;
+      font-weight: bold;
+      font-size: 50rpx;
+      color: #d51c3c;
+    }
+
+    .member-benefit {
       display: flex;
-      flex-direction: column;
+      align-items: center;
+      gap: 8rpx;
+      margin-left: 12rpx;
+      background: rgba(255, 107, 0, 0.1);
+      padding: 4rpx 12rpx;
+      border-radius: 8rpx;
 
-      .main-price {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 8rpx;
-
-        .price-left {
-          display: flex;
-          align-items: baseline;
-        }
-
-        .price-label {
-          font-size: 26rpx;
-          color: #333;
-          margin-right: 8rpx;
-        }
-
-        .price-symbol {
-          font-size: 28rpx;
-          color: #d51c3c;
-          font-weight: bold;
-        }
-
-        .price-num {
-          font-size: 44rpx;
-          color: #d51c3c;
-          font-weight: bold;
-          font-family: DINAlternate-Bold, DINAlternate;
-        }
-
-        .member-benefit {
-          display: inline-flex;
-          align-items: center;
-          gap: 6rpx;
-          margin-left: 12rpx;
-          background: rgba(255, 107, 0, 0.1);
-          padding: 4rpx 12rpx;
-          border-radius: 8rpx;
-          white-space: nowrap;
-          flex-shrink: 0;
-
-          .crown-icon {
-            width: 24rpx;
-            height: 24rpx;
-            display: block;
-            flex-shrink: 0;
-          }
-
-          .benefit-text {
-            font-weight: 500;
-            font-size: 20rpx;
-            color: #ff6b00;
-            line-height: 1;
-          }
-        }
+      .crown-icon {
+        width: 23rpx;
+        height: 20rpx;
       }
 
-      .discount-section {
-        display: inline-flex;
-        align-items: center;
-        margin-top: 4rpx;
-        padding: 4rpx 12rpx;
-        background-color: rgba(213, 28, 60, 0.08);
-        border-radius: 20rpx;
-        
-        .discount-text {
-          font-size: 22rpx;
-          color: #d51c3c;
-          margin-right: 4rpx;
-        }
+      .benefit-text {
+        font-family: PingFang-SC, PingFang-SC;
+        font-weight: 500;
+        font-size: 20rpx;
+        color: #ff6b00;
       }
     }
   }
 
   .checkout-btn {
-    width: 240rpx;
-    height: 80rpx;
-    line-height: 80rpx;
-    text-align: center;
-    background: #004294;
-    border-radius: 40rpx;
-    color: #fff;
-    font-size: 30rpx;
+    color: #ffffff;
+    font-family: PingFang-SC, PingFang-SC;
     font-weight: bold;
-    margin: 0;
-    padding: 0;
+    font-size: 28rpx;
     border: none;
-
-    &.disabled {
-      background: #ccc;
-      color: #fff;
-    }
-    
-    &::after {
-      border: none;
-    }
+    background: #004294;
+    border-radius: 35rpx;
+    position: absolute;
+    right: 20rpx;
   }
 }
 </style>
diff --git a/pages/profile/profile.vue b/pages/profile/profile.vue
index 71c7668..9a6980b 100644
--- a/pages/profile/profile.vue
+++ b/pages/profile/profile.vue
@@ -110,6 +110,13 @@
         <text class="menu-text">投诉建议</text>
         <text class="menu-arrow">›</text>
       </view>
+      <view class="menu-item" @tap="goToMyCoupons">
+        <view class="menu-icon"
+          ><image src="/static/profile/my_icon.png" mode="aspectFill"></image
+        ></view>
+        <text class="menu-text">我的优惠卷</text>
+        <text class="menu-arrow">›</text>
+      </view>
 <!--      <view class="menu-item" @tap="goToPostMessage">
         <view class="menu-icon"
           ><image
@@ -483,6 +490,11 @@ export default {
         url: "/pages/activities/complaints",
       });
     },
+    goToMyCoupons() {
+      uni.navigateTo({
+        url: "/pages/profileSub/myCoupons",
+      });
+    },
     goToPostMessage() {
       uni.navigateTo({
         url: "/pages/activities/postMessage",
diff --git a/pages/profileSub/myCoupons.vue b/pages/profileSub/myCoupons.vue
new file mode 100644
index 0000000..1651478
--- /dev/null
+++ b/pages/profileSub/myCoupons.vue
@@ -0,0 +1,387 @@
+<template>
+  <view class="my-coupons-page">
+    <view class="header-fixed-wrapper" :style="{ height: headerHeight + 'px' }">
+      <NavHeader title="我的优惠卷" />
+    </view>
+    <view class="main-wrap" :style="{ paddingTop: headerHeight + 'px' }">
+      <!-- Tab 切换 -->
+      <view class="tab-bar">
+        <view
+          class="tab-item"
+          :class="{ active: currentTab === '0' }"
+          @click="switchTab('0')"
+        >
+          <text class="tab-text">待使用</text>
+        </view>
+        <view
+          class="tab-item"
+          :class="{ active: currentTab === '1' }"
+          @click="switchTab('1')"
+        >
+          <text class="tab-text">已使用</text>
+        </view>
+        <view
+          class="tab-item"
+          :class="{ active: currentTab === '2' }"
+          @click="switchTab('2')"
+        >
+          <text class="tab-text">已过期</text>
+        </view>
+        <view
+          class="tab-item"
+          :class="{ active: currentTab === 'all' }"
+          @click="switchTab('all')"
+        >
+          <text class="tab-text">全部</text>
+        </view>
+      </view>
+
+      <!-- 列表内容 -->
+      <scroll-view
+        class="coupon-list"
+        scroll-y="true"
+        :refresher-enabled="true"
+        :refresher-triggered="refreshing"
+        @refresherrefresh="handleRefresh"
+        @scrolltolower="handleLoadMore"
+        :lower-threshold="100"
+      >
+        <!-- 空数据提示 -->
+        <view class="empty-state" v-if="!loading && coupons.length === 0">
+          <image
+            class="empty-icon"
+            src="/static/home/entry_icon.png"
+            mode="aspectFit"
+          ></image>
+          <text class="empty-text">暂无优惠卷</text>
+        </view>
+
+        <view
+          class="coupon-item"
+          v-for="(item, index) in coupons"
+          :key="index"
+          :class="{ disabled: isCouponDisabled(item) }"
+        >
+          <view class="coupon-left">
+            <!-- 折扣类 -->
+            <view class="coupon-price" v-if="item.type === 2">
+              <text class="amount">{{ (item.discountPercent / 10).toFixed(1).replace(/\.0$/, '') }}</text>
+              <text class="symbol" style="font-size: 24rpx; margin-left: 4rpx;">折</text>
+            </view>
+            <!-- 金额类 -->
+            <view class="coupon-price" v-else>
+              <text class="symbol">¥</text>
+              <text class="amount">{{ formatAmount(item.discountAmount || item.discountPrice || item.price || 0) }}</text>
+            </view>
+            
+            <view class="coupon-condition" v-if="item.usePrice">
+              满{{ formatAmount(item.usePrice) }}可用
+            </view>
+            <view class="coupon-condition" v-else>
+              无门槛
+            </view>
+          </view>
+          <view class="coupon-right">
+            <view class="coupon-name">{{ item.name }}</view>
+            <view class="coupon-time" v-if="item.type === 2 && item.discountLimit > 0" style="margin-bottom: 6rpx;">最多抵扣: ¥{{ formatAmount(item.discountLimit) }}</view>
+            <view class="coupon-time" v-if="item.validEndTime">有效期至: {{ formatTimeStr(item.validEndTime) }}</view>
+          </view>
+          <view class="coupon-status-stamp" v-if="item.status === 1">已使用</view>
+          <view class="coupon-status-stamp" v-else-if="item.status === 2">已过期</view>
+          <view class="coupon-status-stamp" v-else-if="item.status === 3">已作废</view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script>
+import NavHeader from "@/components/NavHeader/NavHeader.vue";
+import { getLuCouponPage } from "@/api/service.js";
+import { formatTime } from "@/utils/date.js";
+
+export default {
+  components: {
+    NavHeader,
+  },
+  data() {
+    return {
+      statusBarHeight: 0,
+      currentTab: '0', // 默认待使用
+      coupons: [],
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      loading: false,
+      refreshing: false,
+      hasMore: true,
+    };
+  },
+  computed: {
+    headerHeight() {
+      return this.statusBarHeight + 44;
+    },
+  },
+  onLoad() {
+    const systemInfo = uni.getSystemInfoSync();
+    this.statusBarHeight = systemInfo.statusBarHeight || 0;
+    this.loadData();
+  },
+  methods: {
+    switchTab(tab) {
+      if (this.currentTab === tab) return;
+      this.currentTab = tab;
+      this.refreshData();
+    },
+    async loadData() {
+      if (this.loading || !this.hasMore) return;
+      this.loading = true;
+      
+      try {
+        const params = {
+          pageNo: this.pageNo,
+          pageSize: this.pageSize
+        };
+        
+        if (this.currentTab !== 'all') {
+          params.status = Number(this.currentTab);
+        }
+        
+        const res = await getLuCouponPage(params);
+        if (res && res.list) {
+          if (this.pageNo === 1) {
+            this.coupons = res.list;
+          } else {
+            this.coupons = this.coupons.concat(res.list);
+          }
+          this.total = res.total || 0;
+          this.hasMore = this.coupons.length < this.total;
+          this.pageNo++;
+        } else {
+          this.hasMore = false;
+        }
+      } catch (error) {
+        console.error("加载优惠卷失败:", error);
+        uni.showToast({
+          title: "加载失败",
+          icon: "none"
+        });
+      } finally {
+        this.loading = false;
+        this.refreshing = false;
+      }
+    },
+    refreshData() {
+      this.pageNo = 1;
+      this.hasMore = true;
+      this.coupons = [];
+      this.loadData();
+    },
+    handleRefresh() {
+      if (this.refreshing) return;
+      this.refreshing = true;
+      this.pageNo = 1;
+      this.hasMore = true;
+      this.loadData();
+    },
+    handleLoadMore() {
+      this.loadData();
+    },
+    isCouponDisabled(item) {
+      return item.status === 1 || item.status === 2 || item.status === 3;
+    },
+    formatTimeStr(timestamp) {
+      if (!timestamp) return '';
+      return formatTime(timestamp, 'YYYY-MM-DD HH:mm:ss');
+    },
+    // 将分转换为元，并处理小数显示
+    formatAmount(amount) {
+      if (!amount) return '0';
+      const yuan = amount / 100;
+      return Number.isInteger(yuan) ? yuan.toString() : yuan.toFixed(2).replace(/\.?0+$/, '');
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.my-coupons-page {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.header-fixed-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+  background-color: #fff;
+}
+
+.main-wrap {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  box-sizing: border-box;
+}
+
+.tab-bar {
+  display: flex;
+  background-color: #fff;
+  height: 88rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+  
+  .tab-item {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    
+    .tab-text {
+      font-size: 28rpx;
+      color: #666;
+    }
+    
+    &.active {
+      .tab-text {
+        color: #d51c3c;
+        font-weight: 500;
+      }
+      
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 40rpx;
+        height: 6rpx;
+        background-color: #d51c3c;
+        border-radius: 4rpx;
+      }
+    }
+  }
+}
+
+.coupon-list {
+  flex: 1;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 200rpx;
+  
+  .empty-icon {
+    width: 200rpx;
+    height: 200rpx;
+    margin-bottom: 20rpx;
+    opacity: 0.5;
+  }
+  
+  .empty-text {
+    font-size: 28rpx;
+    color: #999;
+  }
+}
+
+.coupon-item {
+  position: relative;
+  display: flex;
+  background-color: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 20rpx;
+  padding: 30rpx;
+  align-items: center;
+  overflow: hidden;
+  
+  &.disabled {
+    opacity: 0.6;
+    background-color: #fafafa;
+    
+    .coupon-price {
+      color: #999 !important;
+    }
+    
+    .coupon-name {
+      color: #999 !important;
+    }
+  }
+  
+  .coupon-left {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 160rpx;
+    border-right: 2rpx dashed #eee;
+    padding-right: 20rpx;
+    
+    .coupon-price {
+      color: #d51c3c;
+      
+      .symbol {
+        font-size: 24rpx;
+        font-weight: bold;
+      }
+      
+      .amount {
+        font-size: 48rpx;
+        font-weight: bold;
+      }
+    }
+    
+    .coupon-condition {
+      font-size: 20rpx;
+      color: #666;
+      margin-top: 10rpx;
+    }
+  }
+  
+  .coupon-right {
+    flex: 1;
+    padding-left: 20rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    
+    .coupon-name {
+      font-size: 32rpx;
+      color: #333;
+      font-weight: 500;
+      margin-bottom: 16rpx;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+    }
+    
+    .coupon-time {
+      font-size: 22rpx;
+      color: #999;
+    }
+  }
+
+  .coupon-status-stamp {
+    position: absolute;
+    right: -20rpx;
+    top: 20rpx;
+    width: 120rpx;
+    height: 40rpx;
+    line-height: 40rpx;
+    text-align: center;
+    background-color: rgba(153, 153, 153, 0.1);
+    color: #999;
+    font-size: 20rpx;
+    transform: rotate(45deg);
+    transform-origin: center;
+    border: 1rpx solid #999;
+  }
+}
+</style>
diff --git a/static/profile/my_icon.png b/static/profile/my_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..e2df4704fbace70cc639c34cb2dae348ecd4aee8
GIT binary patch
literal 1216
zcmV;x1V8(UP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF000DaNkl<ZcmeEL
z-HY5*6hG%CLv?0Ku^^?O;72Qd(M6Qv%i5V_>L`8jy;6PAzO)roQ2zo2eW}!!MIXe9
z?+T@x+3c)+Q&8FZMJd>af@p<mZFc&#$?3UMLWi4Va<iS;O=c2u=H8S0yXT(syXPj8
z8v#>(lmtw90zjDoWd=++1LYE!@&qVvg5?q@m%x-WkZB1}qhVgP?ME)R8jU>4rFLV7
z^fAkvY7yYs)(0ys>$fYW==n%z1c+`P#q`D59{b3?{_O3wkLnOHlz_{#v-kE|%`PIm
z!^R#XfC`s+Kc$aPBGHjv%liFFqw&BnhecB3RZb_dsd9k;8%dbFUnhV^15=#yY<pYi
zt6C-!;QQ#P;G*g%=<6ikV+rtV>mvYs5GLgy*zL8fx8uTz5U|po-Hr%v#es`_4FNv9
z)NXH8V~7v{f%%jQ%C7V3%id}HJ?Q#Qb&v=F0pV^HlwD`Ovv(SM55pHb)IlNy7(jbe
z&{}m~N^9*pmVShko&lpAnR2=k24jq5fDicXAYjt#5dsWhe#Su`<H@_o<wTtZ!WlK7
z2mw{cIbT~?JnS2lokaLDcleQ|uqOfi%WMDRRYA{IJBwebfkX%h0bAzhFV<c6OIi)~
z0no|tdZ9|9PlWJi>YeTzTb%B9alR)K5Q6JVOMeBT@(Po1F1%KV65+L)+dWiuPMsg-
zZz=(@^Jd4nfGD(HFC~8C1?Os=#ZPto&>}z@s&-r^fc}y7+=~e2bbZt&KpN!#cfZOq
zQ5cZewoVQF^g3O0x<BX+mx+J?@TZ}MdGw*}>(IynEe{TpR%d(~<aRp}+;>~cZSC(Y
zo@F9{KchUJ#rQ^GISF@V8CRQt|808~2%bnc&Mq)89XB?_Ocu-91Q>$e(=#mZgi`d-
zV?b?Nv74{!+SMX}cURx%Nqte*Xo!=!5Z2eX#L*DYd;Yomy_Wqs2lDP(0@$!TKzN${
zKDp9vZ%^|(HUqBN_AYO4^Jowl%LsHJ%}5^G+3z;2-uT9|?fr3kfuYY40zAulbroqD
z36CJ)Jt44=C1(O69XI?NXT4VQ_<xr5uo_2%03nE9d{kJmbp+Uofcs4YUs5B95TF7k
zNhhMsYCKa#fEv8iO9CVdgF=A64C>kHq`*<pH&zuyf2tltGJp`iS3$Zu0`{Sj1}VIY
z)YtR!Lm>W8eTfiI2{6;^<e<S@K|`O0TU0=<4ig}qfK9G@8WB$A%JU4)41u1w%XQNU
zkOp`g`Au0)k_cfQii;<*1SF`xr9^a4)+a&u+rSHVJ5KDbb}RuhXx>tulO1Kf(83d0
zU+B&!#gIsV>>xXG>O92t6D)-~`}Z+H&&Y`!=J-$oWJj4g{HbgourXjZ0dS7rw3hNH
z0C0>S;|EN_8U75mr>3zxoJs&2?Vr+^WV5#59;_~On|TzTsKfQn;urEs)^}RtN1Ff*
zTZM#_1Qc@GM(A{z0V5={kfzEEDCD$_(CIP*Mo4BMO%*-^?v(YL00030|CJ}N6951J
e21!IgR09A-vj333S%)bA0000<MNUMnLSTZ!LOt>T

literal 0
HcmV?d00001