提交

MrShi

2026-05-19 ce06ca62a0dd65d4a8fb57126948449c804ad77e

 small-program/shop/pages/coupon-center/coupon-center.vue

@@ -15,43 +15,45 @@

      <view class="coupon-list">
         <view
            v-for="item in coupons"
            :key="item.id"
            class="coupon-card"
         >
            <view class="coupon-main">
               <view class="coupon-info">
                  <view class="coupon-title">{{ item.name }}</view>
                  <view class="coupon-time">有效期{{ item.startDate }}~{{ item.endDate }}</view>
               </view>
               <view class="coupon-price" :class="item.status">
                  <text class="price-value">{{ ((item.price || 0) / 100).toFixed(2) }}</text>
                  <text class="price-desc">{{ item.couponType === 0 ? '满减' : '' }}</text>
               </view>
               v-for="item in coupons"
               :key="item.id"
               class="coupon-card"
               :class="{ 'used': currentTab === 2 || currentTab === 99 }"
            >
               <view class="coupon-main">
            <view class="coupon-info">
               <view class="coupon-title">{{ item.name }}</view>
               <view class="coupon-time" v-if="currentTab === 0">有效期{{ item.createDate }}~{{ item.validDate }}</view>
               <view class="coupon-time" v-else>有效期{{ item.startDate }}~{{ item.endDate }}</view>
            </view>

            <view class="coupon-divider"></view>

            <view class="coupon-footer">
               <view class="coupon-meta" @tap="toggleRule(item.id)">
                  <text class="meta-text">本优惠券不可转让</text>
                  <u-icon
                     class="meta-arrow"
                     :name="item.expanded ? 'arrow-up' : 'arrow-down'"
                     size="12"
                     color="#9d9d9d"
                  ></u-icon>
               </view>
               <view
                  class="receive-btn"
                  :class="{ 'receive-btn-disabled': [2, 99].includes(currentTab) }"
                  @click="handleReceive(item)"
               >
                  {{ currentTab === 1 ? '去使用' : '立即领取' }}
               </view>
            <view class="coupon-price" :class="item.status">
               <text class="price-value">{{ ((item.price || 0) / 100).toFixed(2) }}</text>
               <text class="price-desc" v-if="item.couponType === 0">满{{((item.limitPrice || 0) / 100).toFixed(2)}}可用</text>
            </view>
         </view>

            <view v-if="item.info" class="coupon-rule">
         <view class="coupon-divider"></view>

         <view class="coupon-footer">
            <view class="coupon-meta" @tap="toggleRule(item.id)">
               <text class="meta-text">使用说明</text>
               <u-icon
                  class="meta-arrow"
                  :name="item.expanded ? 'arrow-up' : 'arrow-down'"
                  size="12"
                  color="#9d9d9d"
               ></u-icon>
            </view>
            <view
               class="receive-btn"
               :class="{ 'receive-btn-disabled': [2, 99].includes(currentTab) }"
               @click="handleReceive(item)"
            >
               {{ currentTab === 2 ? '已使用' : (currentTab === 99 ? '已失效' : (currentTab === 1 ? '去使用' : '立即领取')) }}
            </view>
         </view>

         <view v-if="item.expanded && item.info" class="coupon-rule">
               {{ item.info }}
            </view>
         </view>
@@ -92,40 +94,54 @@
      },
      methods: {
         async getCouponList() {
            if (!this.isRequest) return
            const res = await this.$u.api.findPage({
               capacity: this.capacity,
               page: this.page,
               model: {
                  status: this.currentTab
               }
            })
            if (res.code === 200) {
               const list = res.records || []
               this.coupons = [...this.coupons, ...list]
               this.page++
               if (res.total <= this.coupons.length) {
                  this.isRequest = false
               }
         if (!this.isRequest) return
         const res = await this.$u.api.findPage({
            capacity: this.capacity,
            page: this.page,
            model: {
               status: this.currentTab
            }
         },
         })
         console.log(res)
         if (res.code === 200) {
            const list = res.data.records || []
            // 为每个优惠券添加expanded属性，默认关闭
            const couponsWithExpanded = list.map(item => ({
               ...item,
               expanded: false
            }))
            this.coupons = [...this.coupons, ...couponsWithExpanded]
            this.page++
            if (res.data.total <= this.coupons.length) {
               this.isRequest = false
            }
         }
      },
         async handleReceive(item) {
            uni.showModal({
               title: '提示',
               content: '确定要领取该优惠券吗？',
               success: async (res) => {
                  if (res.confirm) {
                     const result = await this.$u.api.claimCoupon({ couponId: item.id })
                     if (result.code === 200) {
                        uni.showToast({ title: '领取成功', icon: 'success' })
                        this.page = 1
                        this.coupons = []
                        this.isRequest = true
                        this.getCouponList()
            if (this.currentTab === 1) {
               // 已领取标签下，点击去使用跳转到行李寄存页面
               uni.navigateTo({
                  url: '/pages/luggage-storage/luggage-storage'
               })
            } else {
               // 其他标签下，执行领取操作
               uni.showModal({
                  title: '提示',
                  content: '确定要领取该优惠券吗？',
                  success: async (res) => {
                     if (res.confirm) {
                        const result = await this.$u.api.claimCoupon({ couponId: item.id })
                        if (result.code === 200) {
                           uni.showToast({ title: '领取成功', icon: 'success' })
                           this.page = 1
                           this.coupons = []
                           this.isRequest = true
                           this.getCouponList()
                        }
                     }
                  }
               }
            })
               })
            }
         },
         toggleRule(id) {
            this.coupons = this.coupons.map((item) => {
@@ -317,6 +333,17 @@
      color: #ffffff;
   }

   /* 已使用优惠券样式 */
   .coupon-card.used {
      background: #EFEFEF;
   }

   .coupon-card.used .coupon-title,
   .coupon-card.used .coupon-price,
   .coupon-card.used .price-desc {
      color: #999999;
   }

   .coupon-rule {
      margin-top: 16rpx;
      font-size: 28rpx;