优惠卷列表完成

pages.json

@@ -139,6 +139,13 @@
 						"navigationBarTitleText": "隐私政策",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "myCoupons",
+					"style": {
+						"navigationBarTitleText": "我的优惠卷",
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		}

pages/detail/serviceDetail.vue

@@ -101,29 +101,22 @@
 
     <!-- 底部结算栏（固定） -->
     <view class="checkout-footer">
-      <view class="footer-left">
+      <view class="total-info">
-        <view class="price-section">
+        <text class="total-label">总金额¥</text>
-          <view class="main-price">
+        <text class="total-amount">{{ totalAmount.toFixed(2) }}</text>
-            <view class="price-left">
+        <view class="member-benefit">
-              <text class="price-label">合计:</text>
+          <image
-              <text class="price-symbol">¥</text>
+            class="crown-icon"
-              <text class="price-num">{{ totalAmount.toFixed(2) }}</text>
+            src="/static/service/crown-icon.png"
-            </view>
+            mode="aspectFill"
-            <view class="member-benefit" v-if="hasMemberDiscount">
+          ></image>
-              <image class="crown-icon" src="/static/service/crown-icon.png" mode="aspectFill"></image>
+          <text class="benefit-text">{{ memberLevelName }}优惠</text>
-              <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>
       </view>
       <button
         class="checkout-btn"
-        :class="{ disabled: totalAmountBeforeDiscount <= 0 }"
+        :class="{ disabled: totalAmount <= 0 }"
-        :disabled="totalAmountBeforeDiscount <= 0"
+        :disabled="totalAmount <= 0"
         @click="handleCheckout"
       >
         去结算
@@ -138,8 +131,7 @@ import {
   getGuildStoreDetail,
   getGuildVoucher,
   getPaySign,
-  appBuy,
+  appBuy
-  getLuCouponPage
 } 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;
     },
-    // 计算折扣前总金额
+    // 计算总金额（只计算选中且数量大于0的商品）
-    totalAmountBeforeDiscount() {
+    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.menuList.some((item) => item.selected && item.discount);
-      return !!(this.userInfo && this.userInfo.level && this.userInfo.level.name);
     },
     // 获取会员等级名称（安全访问）
     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 res = await appBuy({
-      const buyParams = {
         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 {
+  .total-info {
-    flex: 1;
     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 {
+      .crown-icon {
-        display: flex;
+        width: 23rpx;
-        align-items: center;
+        height: 20rpx;
-        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;
-          }
-        }
       }
 
-      .discount-section {
+      .benefit-text {
-        display: inline-flex;
+        font-family: PingFang-SC, PingFang-SC;
-        align-items: center;
+        font-weight: 500;
-        margin-top: 4rpx;
+        font-size: 20rpx;
-        padding: 4rpx 12rpx;
+        color: #ff6b00;
-        background-color: rgba(213, 28, 60, 0.08);
-        border-radius: 20rpx;
-        
-        .discount-text {
-          font-size: 22rpx;
-          color: #d51c3c;
-          margin-right: 4rpx;
-        }
       }
     }
   }
 
   .checkout-btn {
-    width: 240rpx;
+    color: #ffffff;
-    height: 80rpx;
+    font-family: PingFang-SC, PingFang-SC;
-    line-height: 80rpx;
-    text-align: center;
-    background: #004294;
-    border-radius: 40rpx;
-    color: #fff;
-    font-size: 30rpx;
     font-weight: bold;
-    margin: 0;
+    font-size: 28rpx;
-    padding: 0;
     border: none;
-
+    background: #004294;
-    &.disabled {
+    border-radius: 35rpx;
-      background: #ccc;
+    position: absolute;
-      color: #fff;
+    right: 20rpx;
-    }
-    
-    &::after {
-      border: none;
-    }
   }
 }
 </style>

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",

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>