From 17e2c6c9068534fa043c3a2e092ce5f726460ed2 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 22:15:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=84=E7=90=86=E4=BC=98=E6=83=A0=E5=8D=B7?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/service.js                    |   9 +
 pages.json                        |   7 +
 pages/profileSub/couponDetail.vue | 403 ++++++++++++++++++++++++++++++
 pages/profileSub/myCoupons.vue    |   6 +
 4 files changed, 425 insertions(+)
 create mode 100644 pages/profileSub/couponDetail.vue

diff --git a/api/service.js b/api/service.js
index 70e5022..9cc8a30 100644
--- a/api/service.js
+++ b/api/service.js
@@ -192,4 +192,13 @@ export function getLuCouponPage(params = {}) {
 	})
 }
 
+// 获得优惠卷详情
+export function getLuCouponDetail(id) {
+	return request({
+		url: '/app-api/member/lu-coupon/get',
+		method: 'GET',
+		data: { id },
+	})
+}
+
 
diff --git a/pages.json b/pages.json
index 03ef47e..19ae823 100644
--- a/pages.json
+++ b/pages.json
@@ -146,6 +146,13 @@
 						"navigationBarTitleText": "我的优惠卷",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path": "couponDetail",
+					"style": {
+						"navigationBarTitleText": "优惠卷详情",
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		}
diff --git a/pages/profileSub/couponDetail.vue b/pages/profileSub/couponDetail.vue
new file mode 100644
index 0000000..c73ce8c
--- /dev/null
+++ b/pages/profileSub/couponDetail.vue
@@ -0,0 +1,403 @@
+<template>
+  <view class="coupon-detail-page">
+    <view class="header-fixed-wrapper" :style="{ height: headerHeight + 'px' }">
+      <NavHeader title="优惠卷详情" />
+    </view>
+    <view class="main-wrap" :style="{ paddingTop: headerHeight + 'px' }">
+      <view v-if="!loading && detail" class="content">
+        <!-- 优惠卷基础信息卡片 -->
+        <view class="coupon-card">
+          <view class="coupon-left">
+            <view class="coupon-price" v-if="detail.type === 2">
+              <text class="amount">{{ (detail.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(detail.discountAmount || detail.discountPrice || detail.price || 0) }}</text>
+            </view>
+            <view class="coupon-condition" v-if="detail.usePrice">满{{ formatAmount(detail.usePrice) }}可用</view>
+            <view class="coupon-condition" v-else>无门槛</view>
+          </view>
+          <view class="coupon-right">
+            <view class="coupon-name">{{ detail.name }}</view>
+            <view class="coupon-time" v-if="detail.type === 2 && detail.discountLimit > 0">最多抵扣: ¥{{ formatAmount(detail.discountLimit) }}</view>
+            <view class="coupon-time" v-if="detail.validEndTime">有效期至: {{ formatTimeStr(detail.validEndTime) }}</view>
+          </view>
+          <view class="coupon-status-stamp" v-if="detail.status === 1">已使用</view>
+          <view class="coupon-status-stamp" v-else-if="detail.status === 2">已过期</view>
+          <view class="coupon-status-stamp" v-else-if="detail.status === 3">已作废</view>
+        </view>
+
+        <!-- 详细信息 -->
+        <view class="info-section">
+          <view class="info-title">使用说明</view>
+          <view class="info-item">
+            <text class="label">可用范围：</text>
+            <text class="value">{{ detail.productScope === 1 ? '全部代金券通用' : '指定代金券可用' }}</text>
+          </view>
+          <view class="info-item" v-if="detail.validStartTime && detail.validEndTime">
+            <text class="label">有效期限：</text>
+            <text class="value">{{ formatTimeStr(detail.validStartTime) }} 至 {{ formatTimeStr(detail.validEndTime) }}</text>
+          </view>
+        </view>
+
+        <!-- 适用商品列表 -->
+        <view class="goods-section" v-if="detail.productScope === 2 && detail.voucherList && detail.voucherList.length > 0">
+          <view class="section-title">可用代金卷</view>
+          <view class="goods-list">
+            <view class="goods-item" v-for="(item, index) in detail.voucherList" :key="index">
+              <image class="goods-img" :src="item.coverUrl || item.picUrl || '/static/home/entry_icon.png'" mode="aspectFill"></image>
+              <view class="goods-info">
+                <view class="goods-name">{{ item.name }}</view>
+                <view class="goods-shop-name" v-if="item.shopName">门店: {{ item.shopName }}</view>
+                <view class="goods-meta-list">
+                  <view class="goods-meta-item" v-if="item.stock !== undefined">
+                    <text class="meta-label">库存：</text>
+                    <text class="meta-value">{{ item.stock }}份</text>
+                  </view>
+                  <view class="goods-meta-item" v-if="item.useRule">
+                    <text class="meta-label">使用规则：</text>
+                    <text class="meta-value">{{ item.useRule }}</text>
+                  </view>
+                  <view class="goods-meta-item" v-if="item.validDays">
+                    <text class="meta-label">有效天数：</text>
+                    <text class="meta-value">{{ item.validDays }}天</text>
+                  </view>
+                </view>
+                <view class="goods-price-row">
+                  <text class="goods-price">¥{{ formatAmount(item.salePrice || item.sellPrice) }}</text>
+                  <text class="goods-original-price" v-if="item.originalPrice">¥{{ formatAmount(item.originalPrice) }}</text>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view v-if="loading" class="loading-state">
+        <text>加载中...</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import NavHeader from "@/components/NavHeader/NavHeader.vue";
+import { getLuCouponDetail } from "@/api/service.js";
+import { formatTime } from "@/utils/date.js";
+
+export default {
+  components: {
+    NavHeader,
+  },
+  data() {
+    return {
+      statusBarHeight: 0,
+      couponId: null,
+      detail: null,
+      loading: true,
+    };
+  },
+  computed: {
+    headerHeight() {
+      return this.statusBarHeight + 44;
+    },
+  },
+  onLoad(options) {
+    const systemInfo = uni.getSystemInfoSync();
+    this.statusBarHeight = systemInfo.statusBarHeight || 0;
+    
+    if (options.id) {
+      this.couponId = options.id;
+      this.loadDetail();
+    } else {
+      uni.showToast({
+        title: '参数错误',
+        icon: 'none'
+      });
+      setTimeout(() => {
+        uni.navigateBack();
+      }, 1500);
+    }
+  },
+  methods: {
+    async loadDetail() {
+      this.loading = true;
+      try {
+        const res = await getLuCouponDetail(this.couponId);
+        if (res) {
+          this.detail = res;
+        } else {
+          uni.showToast({
+            title: '获取详情失败',
+            icon: 'none'
+          });
+        }
+      } catch (error) {
+        console.error("加载优惠卷详情失败:", error);
+        uni.showToast({
+          title: '加载失败',
+          icon: 'none'
+        });
+      } finally {
+        this.loading = false;
+      }
+    },
+    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>
+.coupon-detail-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 {
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+
+.loading-state {
+  display: flex;
+  justify-content: center;
+  padding-top: 100rpx;
+  color: #999;
+  font-size: 28rpx;
+}
+
+.coupon-card {
+  position: relative;
+  display: flex;
+  background-color: #fff;
+  border-radius: 16rpx;
+  margin-bottom: 30rpx;
+  padding: 40rpx 30rpx;
+  align-items: center;
+  overflow: hidden;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+  
+  .coupon-left {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 180rpx;
+    border-right: 2rpx dashed #eee;
+    padding-right: 20rpx;
+    
+    .coupon-price {
+      color: #d51c3c;
+      
+      .symbol {
+        font-size: 28rpx;
+        font-weight: bold;
+      }
+      
+      .amount {
+        font-size: 56rpx;
+        font-weight: bold;
+      }
+    }
+    
+    .coupon-condition {
+      font-size: 22rpx;
+      color: #666;
+      margin-top: 10rpx;
+    }
+  }
+  
+  .coupon-right {
+    flex: 1;
+    padding-left: 30rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    
+    .coupon-name {
+      font-size: 34rpx;
+      color: #333;
+      font-weight: bold;
+      margin-bottom: 20rpx;
+    }
+    
+    .coupon-time {
+      font-size: 24rpx;
+      color: #999;
+      margin-bottom: 6rpx;
+    }
+  }
+
+  .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;
+  }
+}
+
+.info-section {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  margin-bottom: 30rpx;
+  
+  .info-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 24rpx;
+    padding-bottom: 20rpx;
+    border-bottom: 1rpx solid #eee;
+  }
+  
+  .info-item {
+    display: flex;
+    margin-bottom: 16rpx;
+    font-size: 28rpx;
+    line-height: 1.5;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+    
+    .label {
+      color: #666;
+      width: 140rpx;
+      flex-shrink: 0;
+    }
+    
+    .value {
+      color: #333;
+      flex: 1;
+    }
+  }
+}
+
+.goods-section {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  
+  .section-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 24rpx;
+    padding-bottom: 20rpx;
+    border-bottom: 1rpx solid #eee;
+  }
+  
+  .goods-list {
+    .goods-item {
+      display: flex;
+      padding: 20rpx 0;
+      border-bottom: 1rpx solid #f5f5f5;
+      
+      &:last-child {
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+      
+      .goods-img {
+        width: 160rpx;
+        height: 160rpx;
+        border-radius: 12rpx;
+        margin-right: 20rpx;
+        background-color: #f5f5f5;
+        flex-shrink: 0;
+      }
+      
+      .goods-info {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        
+        .goods-name {
+          font-size: 28rpx;
+          color: #333;
+          font-weight: bold;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+          margin-bottom: 8rpx;
+        }
+
+        .goods-shop-name {
+          font-size: 24rpx;
+          color: #666;
+          margin-bottom: 8rpx;
+        }
+
+        .goods-meta-list {
+          display: flex;
+          flex-direction: column;
+          margin-bottom: 12rpx;
+          
+          .goods-meta-item {
+            font-size: 22rpx;
+            color: #999;
+            margin-bottom: 4rpx;
+            
+            .meta-label {
+              color: #999;
+            }
+            .meta-value {
+              color: #666;
+            }
+          }
+        }
+        
+        .goods-price-row {
+          display: flex;
+          align-items: baseline;
+          margin-top: auto;
+        }
+        
+        .goods-price {
+          font-size: 32rpx;
+          color: #d51c3c;
+          font-weight: bold;
+          margin-right: 12rpx;
+        }
+        
+        .goods-original-price {
+          font-size: 24rpx;
+          color: #999;
+          text-decoration: line-through;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/profileSub/myCoupons.vue b/pages/profileSub/myCoupons.vue
index 1651478..29e3685 100644
--- a/pages/profileSub/myCoupons.vue
+++ b/pages/profileSub/myCoupons.vue
@@ -61,6 +61,7 @@
           v-for="(item, index) in coupons"
           :key="index"
           :class="{ disabled: isCouponDisabled(item) }"
+          @click="goToDetail(item)"
         >
           <view class="coupon-left">
             <!-- 折扣类 -->
@@ -187,6 +188,11 @@ export default {
     handleLoadMore() {
       this.loadData();
     },
+    goToDetail(item) {
+      uni.navigateTo({
+        url: `/pages/profileSub/couponDetail?id=${item.id}`
+      });
+    },
     isCouponDisabled(item) {
       return item.status === 1 || item.status === 2 || item.status === 3;
     },