代码生成

rk

2026-05-22 552238172036acf08ccf36134282a06b5e21b936

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

@@ -8,50 +8,52 @@
            :class="{ active: currentTab === tab.value }"
            @tap="currentTab = tab.value"
         >
            <text>{{ tab.label }}</text>
            <text>{{ tab.label }}<text v-if="tab.value === 0 && waitClaim > 0">({{ waitClaim }})</text><text v-if="tab.value === 1 && waitUse > 0">({{ waitUse }})</text></text>
            <view class="tab-line"></view>
         </view>
      </view>

      <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" v-if="item.couponType === 0">平台满减券</view>
               <view class="coupon-time" v-if="currentTab === 0">有效期{{ formatDate(item.createDate) }}~{{ formatDate(item.validDate) }}</view>
               <view class="coupon-time" v-else>有效期{{ formatDate(item.startDate) }}~{{ formatDate(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>
@@ -66,14 +68,16 @@
            currentTab: 0,
            tabs: [
               { label: '待领取', value: 0 },
               { label: '已领取', value: 1 },
               { label: '待使用', value: 1 },
               { label: '已使用', value: 2 },
               { label: '已失效', value: 99 }
            ],
            coupons: [],
            page: 1,
            capacity: 10,
            isRequest: true
            isRequest: true,
            waitClaim: 0,
            waitUse: 0
         }
      },
      watch: {
@@ -86,46 +90,70 @@
      },
      onLoad() {
         this.getCouponList()
         this.getPendingCount()
      },
      onReachBottom() {
         this.getCouponList()
      },
      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
               }
         async getPendingCount() {
            const res = await this.$u.api.pendingCount({})
            console.log(res)
            if (res.code === 200 && res.data) {
               this.waitClaim = res.data.waitClaim || 0
               this.waitUse = res.data.waitUse || 0
            }
         },
         formatDate(dateStr) {
            if (!dateStr) return ''
            const date = new Date(dateStr)
            const year = String(date.getFullYear()).slice(2)
            const month = String(date.getMonth() + 1).padStart(2, '0')
            const day = String(date.getDate()).padStart(2, '0')
            const hours = String(date.getHours()).padStart(2, '0')
            const minutes = String(date.getMinutes()).padStart(2, '0')
            return `${year}.${month}.${day} ${hours}:${minutes}`
         },
         async getCouponList() {
         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 {
               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()
                  this.getPendingCount()
               }
            })
            }
         },
         toggleRule(id) {
            this.coupons = this.coupons.map((item) => {
@@ -317,6 +345,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;