cfc/cfc-frontend/pages/profile/coupons.vue

<template>
  <view class="page">
    <view class="tab-bar">
      <view
        v-for="(tab, idx) in tabs"
        :key="idx"
        class="tab-item"
        :class="tabIndex === idx ? 'active' : ''"
        @click="switchTab(idx)"
      >
        <text>{{ tab.name }}</text>
      </view>
    </view>

    <scroll-view
      scroll-y
      class="coupon-scroll"
      @scrolltolower="onScrollToLower"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view v-if="loading" class="loading-wrap">
        <text class="loading-text">加载中...</text>
      </view>
      <view v-else-if="filteredList.length === 0" class="empty-state">
        <text class="empty-icon">🎫</text>
        <text class="empty-text">{{ tabIndex === 0 ? '暂无可用优惠券' : tabIndex === 1 ? '暂无已使用优惠券' : '暂无已过期优惠券' }}</text>
        <text class="empty-hint" v-if="tabIndex === 0">去领券中心看看有哪些优惠吧</text>
      </view>
      <view v-else class="coupon-list">
        <view
          v-for="coupon in filteredList"
          :key="coupon.id"
          class="coupon-card"
          :class="getStatusClass(coupon)"
        >
          <view class="card-left">
            <text class="card-value">{{ formatPriceWithSymbol(coupon.value) }}</text>
            <text class="card-type-label">{{ getTypeLabel(coupon.type) }}</text>
          </view>
          <view class="card-right">
            <view class="card-header">
              <text class="card-name">{{ coupon.name }}</text>
              <text v-if="getStatusLabel(coupon)" class="card-status-badge" :class="getStatusClass(coupon)">{{ getStatusLabel(coupon) }}</text>
            </view>
            <text class="card-condition">{{ getConditionText(coupon.minSpend) }}</text>
            <text class="card-scope">{{ getScopeText(coupon.applicableTo) }}</text>
            <text class="card-expiry">有效期至 {{ formatDate(coupon.validUntil) }}</text>
            <button
              v-if="canClaim(coupon)"
              class="claim-btn"
              @click="handleClaim(coupon)"
            >立即领取</button>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { getCouponList, claimCoupon } from '../../utils/api.js'

export default {
  data() {
    return {
      tabs: [
        { name: '可使用', status: 'AVAILABLE' },
        { name: '已使用', status: 'USED' },
        { name: '已过期', status: 'EXPIRED' }
      ],
      tabIndex: 0,
      coupons: [],
      loading: false,
      refreshing: false
    }
  },
  computed: {
    filteredList() {
      var self = this
      var currentStatus = this.tabs[this.tabIndex].status
      if (currentStatus === 'AVAILABLE') {
        return this.coupons.filter(function(c) {
          return c.status === 'AVAILABLE' || !c.status
        })
      }
      return this.coupons.filter(function(c) {
        return c.status === currentStatus
      })
    }
  },
  onShow() {
    this.loadCoupons()
  },
  onPullDownRefresh() {
    this.refreshing = true
    this.loadCoupons()
  },
  methods: {
    async loadCoupons() {
      this.loading = true
      try {
        var res = await getCouponList()
        this.coupons = res.data || []
      } catch (e) {
        console.error('加载优惠券失败', e)
      } finally {
        this.loading = false
        this.refreshing = false
        uni.stopPullDownRefresh()
      }
    },
    onRefresh() {
      this.refreshing = true
      this.loadCoupons()
    },
    onScrollToLower() {},
    switchTab(idx) {
      this.tabIndex = idx
    },
    canClaim(coupon) {
      return this.tabIndex === 0 && (!coupon.status || coupon.status === 'AVAILABLE')
    },
    async handleClaim(coupon) {
      try {
        var res = await claimCoupon(coupon.id)
        uni.showToast({ title: res.message || '领取成功', icon: 'success' })
        this.loadCoupons()
      } catch (e) {
        uni.showToast({ title: e.message || '领取失败', icon: 'none' })
      }
    },
    getConditionText(minSpend) {
      if (!minSpend || minSpend <= 0) return '无门槛'
      return '满' + (minSpend / 100).toFixed(2) + '元可用'
    },
    getScopeText(applicableTo) {
      if (applicableTo === 'ALL') return '全品类适用'
      if (applicableTo === 'MEMBERSHIP') return '仅限会员'
      return applicableTo || '全品类适用'
    },
    getTypeLabel(type) {
      if (type === 'FIXED') return '固定金额'
      if (type === 'PERCENT') return '折扣券'
      return type || ''
    },
    getStatusLabel(coupon) {
      if (coupon.status === 'USED') return '已使用'
      if (coupon.status === 'EXPIRED') return '已过期'
      return ''
    },
    getStatusClass(coupon) {
      if (coupon.status === 'USED') return 'status-used'
      if (coupon.status === 'EXPIRED') return 'status-expired'
      return ''
    },
    formatDate(date) {
      if (!date) return ''
      var d = new Date(date)
      var y = d.getFullYear()
      var m = String(d.getMonth() + 1).padStart(2, '0')
      var day = String(d.getDate()).padStart(2, '0')
      return y + '.' + m + '.' + day
    }
  }
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #f5f5f5;
}

.tab-bar {
  display: flex;
  background: #fff;
  border-bottom: 1rpx solid #eee;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 24rpx 0;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #F97316;
  font-weight: 600;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background: #F97316;
  border-radius: 2rpx;
}

.coupon-scroll {
  height: calc(100vh - 88rpx);
}

.loading-wrap {
  display: flex;
  justify-content: center;
  padding-top: 200rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}

.empty-icon {
  font-size: 80rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.empty-hint {
  font-size: 24rpx;
  color: #ccc;
  margin-top: 12rpx;
}

.coupon-list {
  padding: 20rpx;
}

.coupon-card {
  display: flex;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}

.coupon-card.status-used {
  opacity: 0.65;
}

.coupon-card.status-expired {
  opacity: 0.5;
}

.card-left {
  width: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #F97316, #FB923C);
  padding: 30rpx 12rpx;
  flex-shrink: 0;
}

.status-used .card-left {
  background: #b0b0b0;
}

.status-expired .card-left {
  background: #d0d0d0;
}

.card-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #fff;
}

.card-type-label {
  font-size: 20rpx;
  color: rgba(255,255,255,0.8);
  margin-top: 8rpx;
}

.card-right {
  flex: 1;
  padding: 24rpx 24rpx 20rpx;
  position: relative;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.card-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-status-badge {
  font-size: 20rpx;
  padding: 4rpx 14rpx;
  border-radius: 20rpx;
  flex-shrink: 0;
  margin-left: 12rpx;
}

.card-status-badge.status-used {
  background: #f0f0f0;
  color: #999;
}

.card-status-badge.status-expired {
  background: #fff1f0;
  color: #ff4d4f;
}

.card-condition {
  font-size: 24rpx;
  color: #F97316;
  display: block;
  margin-bottom: 6rpx;
}

.card-scope {
  font-size: 22rpx;
  color: #5B9BD5;
  background: #f0f7ff;
  display: inline-block;
  padding: 2rpx 12rpx;
  border-radius: 8rpx;
  margin-bottom: 6rpx;
}

.card-expiry {
  font-size: 22rpx;
  color: #bbb;
  display: block;
}

.claim-btn {
  position: absolute;
  right: 24rpx;
  bottom: 20rpx;
  background: linear-gradient(135deg, #F97316, #FB923C);
  color: #fff;
  font-size: 24rpx;
  padding: 10rpx 28rpx;
  border-radius: 28rpx;
  border: none;
  line-height: 1.4;
  height: auto;
}

.claim-btn::after {
  border: none;
}

.claim-btn:active {
  opacity: 0.85;
}
</style>