haha/haha-mp/src/pages/couponCenter/couponCenter.vue

<template>
  <view class="page">
    <!-- 头部提示 -->
    <view class="header">
      <text class="header-title">领取优惠券</text>
      <text class="header-desc">每日更新 · 限量发放</text>
    </view>

    <!-- 优惠券列表 -->
    <scroll-view
      v-if="!loading && templates.length > 0"
      class="coupon-scroll"
      scroll-y
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="coupon-list">
        <view
          v-for="item in templates"
          :key="item.id"
          class="ticket"
        >
          <!-- 左侧：金额 -->
          <view :class="['ticket-face', item.couponType ? 'ticket-face--type' + item.couponType : 'ticket-face--type1']">
            <view class="ticket-amount">
              <text class="ticket-currency">{{ item.couponType === 2 ? '' : '¥' }}</text>
              <text class="ticket-figure">{{ formatDiscountValue(item) }}</text>
            </view>
            <text class="ticket-threshold">
              {{ item.minAmount && item.minAmount > 0 ? '满' + item.minAmount + '可用' : '无门槛' }}
            </text>
          </view>

          <!-- 锯齿分割 -->
          <view class="ticket-serration">
            <view class="serration-gap serration-gap--top"></view>
            <view class="serration-rail"></view>
            <view class="serration-gap serration-gap--bottom"></view>
          </view>

          <!-- 右侧：信息 -->
          <view class="ticket-body">
            <text class="ticket-title">{{ item.couponName || '优惠券' }}</text>
            <view class="ticket-meta">
              <view class="ticket-badge">{{ getCouponTypeLabel(item.couponType) }}</view>
              <text class="ticket-scope">{{ getScopeLabel(item.applyScope) }}</text>
            </view>
            <text v-if="item.couponDesc" class="ticket-desc">{{ item.couponDesc }}</text>
            
            <!-- 库存和领取信息 -->
            <view class="ticket-stock-row">
              <text class="ticket-stock">
                剩余 <text class="stock-num">{{ item.remainCount }}</text> / {{ item.totalCount }}
              </text>
              <text v-if="item.receiveLimit > 0" class="ticket-limit">
                每人限领{{ item.receiveLimit }}张
              </text>
            </view>
            
            <!-- 有效期 -->
            <text class="ticket-period">
              <text v-if="item.validType === 1">{{ formatTime(item.validStartTime) }} ~ {{ formatTime(item.validEndTime) }}</text>
              <text v-else>领取后{{ item.validDays }}天内有效</text>
            </text>

            <!-- 领取按钮 -->
            <view
              :class="['ticket-grab', canReceive(item) ? '' : (item.alreadyReceived ? 'ticket-grab--received' : 'ticket-grab--out')]"
              @click="handleReceive(item)"
            >
              <text class="ticket-grab-text">
                {{ receiving[item.id] ? '领取中...' : (item.alreadyReceived ? '已领取' : (canReceive(item) ? '立即领取' : '已抢光')) }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 空状态 -->
    <view v-if="!loading && templates.length === 0" class="empty">
      <view class="empty-visual">
        <view class="empty-ticket-shadow"></view>
        <view class="empty-ticket-body">
          <view class="empty-ticket-left"></view>
          <view class="empty-ticket-dots">
            <view class="empty-dot"></view>
            <view class="empty-dot"></view>
          </view>
          <view class="empty-ticket-right">
            <view class="empty-line empty-line--long"></view>
            <view class="empty-line empty-line--short"></view>
          </view>
        </view>
      </view>
      <text class="empty-title">暂无可领取的优惠券</text>
      <text class="empty-desc">过段时间再来看看吧</text>
      <view class="empty-cta" @click="goToMyCoupons">
        <text class="empty-cta-text">查看我的优惠券</text>
      </view>
    </view>

    <!-- 加载中 -->
    <view v-if="loading" class="loading">
      <view class="loading-spinner"></view>
      <text class="loading-label">加载中</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { getAvailableCoupons, receiveCoupon } from '../../api/coupon';
import type { CouponTemplateInfo } from '../../api/coupon';
import { checkAuth } from '../../utils/auth';

// 扩展接口，添加前端需要的字段
interface CouponTemplateInfoExtended extends CouponTemplateInfo {
  alreadyReceived?: boolean;
}

const templates = ref<CouponTemplateInfoExtended[]>([]);
const loading = ref(false);
const refreshing = ref(false);
const receiving = reactive<Record<string, boolean>>({});

/**
 * 格式化优惠值
 */
const formatDiscountValue = (item: CouponTemplateInfoExtended): string => {
  if (item.couponType === 2) {
    return item.discountValue ? `${item.discountValue}折` : '0';
  }
  return item.discountValue ? `${item.discountValue}` : '0';
};

/**
 * 获取优惠券类型标签
 */
const getCouponTypeLabel = (type: number): string => {
  const map: Record<number, string> = {
    1: '满减',
    2: '折扣',
    3: '抵扣',
    4: '兑换'
  };
  return map[type] || '优惠';
};

/**
 * 获取适用范围标签
 */
const getScopeLabel = (scope: number): string => {
  const map: Record<number, string> = {
    1: '全场通用',
    2: '指定品类',
    3: '指定商品'
  };
  return map[scope] || '';
};

/**
 * 格式化时间
 */
const formatTime = (timeStr: string): string => {
  if (!timeStr) return '';
  return timeStr.substring(0, 10);
};

/**
 * 判断是否可领取
 */
const canReceive = (item: CouponTemplateInfoExtended): boolean => {
  return item.remainCount > 0 && item.status === 1 && !item.alreadyReceived;
};

/**
 * 领取优惠券
 */
const handleReceive = async (item: CouponTemplateInfoExtended) => {
  if (!canReceive(item) || receiving[item.id]) return;

  receiving[item.id] = true;
  try {
    await receiveCoupon(item.id);
    uni.showToast({
      title: '领取成功',
      icon: 'success'
    });
    // 更新剩余数量
    item.remainCount = Math.max(0, item.remainCount - 1);
    item.alreadyReceived = true;
  } catch (error: any) {
    console.error('领取优惠券失败:', error);
    // 错误信息已在 request 工具中展示
  } finally {
    receiving[item.id] = false;
  }
};

/**
 * 下拉刷新
 */
const onRefresh = async () => {
  refreshing.value = true;
  try {
    await loadTemplates();
  } finally {
    refreshing.value = false;
  }
};

/**
 * 跳转到我的优惠券
 */
const goToMyCoupons = () => {
  uni.navigateTo({
    url: '/pages/coupons/coupons'
  });
};

/**
 * 加载可领取优惠券列表
 */
const loadTemplates = async () => {
  try {
    const result = await getAvailableCoupons();
    templates.value = result.map(item => ({
      ...item,
      alreadyReceived: false // 初始化为未领取
    }));
  } catch (error) {
    console.error('加载可领取优惠券失败:', error);
  }
};

onMounted(() => {
  if (!checkAuth('/pages/couponCenter/couponCenter')) {
    return;
  }
  loadTemplates();
});
</script>

<style>
.page {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF1F0 0%, #F5F5F5 30%);
}

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

/* ========== Header ========== */
.header {
  padding: 28rpx 36rpx 16rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 800;
  color: #1A1A1A;
  display: block;
}

.header-desc {
  font-size: 24rpx;
  color: #BBBBBB;
  margin-top: 4rpx;
  display: block;
}

/* ========== Coupon List ========== */
.coupon-list {
  padding: 8rpx 28rpx 40rpx;
}

/* ========== Ticket Card ========== */
.ticket {
  display: flex;
  margin-bottom: 24rpx;
  border-radius: 20rpx;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05), 0 1rpx 4rpx rgba(0, 0, 0, 0.03);
}

/* --- Left: Amount Face --- */
.ticket-face {
  width: 210rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36rpx 12rpx;
  flex-shrink: 0;
  position: relative;
}

.ticket-face::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1rpx;
  background: rgba(255, 255, 255, 0.25);
}

/* 类型色系 */
.ticket-face--type1 {
  background: linear-gradient(150deg, #FF8A00 0%, #FFA940 100%);
}
.ticket-face--type2 {
  background: linear-gradient(150deg, #E8533E 0%, #FF7B6B 100%);
}
.ticket-face--type3 {
  background: linear-gradient(150deg, #7B61FF 0%, #A78BFA 100%);
}
.ticket-face--type4 {
  background: linear-gradient(150deg, #0EA5E9 0%, #38BDF8 100%);
}

.ticket-amount {
  display: flex;
  align-items: baseline;
}

.ticket-currency {
  font-size: 26rpx;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-right: 2rpx;
}

.ticket-figure {
  font-size: 56rpx;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -2rpx;
}

.ticket-threshold {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 12rpx;
  padding: 4rpx 16rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20rpx;
}

/* --- Serration Divider --- */
.ticket-serration {
  width: 36rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}

.serration-gap {
  width: 36rpx;
  height: 18rpx;
  background: #ffffff;
  position: absolute;
  z-index: 2;
}

.serration-gap--top {
  top: 0;
  border-radius: 0 0 50% 50%;
}

.serration-gap--bottom {
  bottom: 0;
  border-radius: 50% 50% 0 0;
}

.serration-rail {
  flex: 1;
  border-left: 2rpx dashed #E0E0E0;
  margin: 18rpx 0;
}

/* --- Right: Body Info --- */
.ticket-body {
  flex: 1;
  padding: 28rpx 28rpx 28rpx 8rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  position: relative;
}

.ticket-title {
  font-size: 28rpx;
  color: #1A1A1A;
  font-weight: 700;
  margin-bottom: 12rpx;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 120rpx;
}

.ticket-meta {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 12rpx;
}

.ticket-badge {
  font-size: 18rpx;
  color: #FF8A00;
  background: #FFF4E0;
  padding: 4rpx 14rpx;
  border-radius: 6rpx;
  font-weight: 600;
  flex-shrink: 0;
}

.ticket-scope {
  font-size: 20rpx;
  color: #999999;
}

.ticket-desc {
  font-size: 22rpx;
  color: #999999;
  margin-bottom: 10rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 库存行 */
.ticket-stock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.ticket-stock {
  font-size: 20rpx;
  color: #999999;
}

.stock-num {
  color: #E8533E;
  font-weight: 600;
}

.ticket-limit {
  font-size: 20rpx;
  color: #BBBBBB;
}

.ticket-period {
  font-size: 22rpx;
  color: #BBBBBB;
}

/* --- Grab Button --- */
.ticket-grab {
  position: absolute;
  top: 28rpx;
  right: 28rpx;
  padding: 10rpx 28rpx;
  background: #1A1A1A;
  border-radius: 28rpx;
}

.ticket-grab-text {
  font-size: 24rpx;
  color: #FFD700;
  font-weight: 700;
}

.ticket-grab--out {
  background: #F0F0F0;
}

.ticket-grab--out .ticket-grab-text {
  color: #CCCCCC;
}

.ticket-grab--received {
  background: #F0F0F0;
}

.ticket-grab--received .ticket-grab-text {
  color: #999999;
}

/* ========== Empty State ========== */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 55vh;
  padding: 40rpx;
}

.empty-visual {
  margin-bottom: 40rpx;
  position: relative;
}

.empty-ticket-shadow {
  position: absolute;
  top: 8rpx;
  left: 4rpx;
  right: 4rpx;
  bottom: -8rpx;
  background: #E0E0E0;
  border-radius: 16rpx;
}

.empty-ticket-body {
  display: flex;
  width: 320rpx;
  height: 140rpx;
  background: #F5F5F5;
  border-radius: 16rpx;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.empty-ticket-left {
  width: 110rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-ticket-left::before {
  content: '¥';
  font-size: 44rpx;
  font-weight: 800;
  color: #DCDCDC;
}

.empty-ticket-dots {
  width: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
}

.empty-dot {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background: #F5F5F5;
  border: 2rpx solid #E0E0E0;
}

.empty-ticket-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24rpx 20rpx;
  gap: 14rpx;
}

.empty-line {
  height: 10rpx;
  border-radius: 5rpx;
  background: #E8E8E8;
}

.empty-line--long {
  width: 100%;
}

.empty-line--short {
  width: 60%;
}

.empty-title {
  font-size: 30rpx;
  color: #999999;
  font-weight: 600;
  margin-bottom: 12rpx;
}

.empty-desc {
  font-size: 24rpx;
  color: #BBBBBB;
  margin-bottom: 36rpx;
}

.empty-cta {
  padding: 18rpx 64rpx;
  background: #1A1A1A;
  border-radius: 44rpx;
}

.empty-cta-text {
  font-size: 28rpx;
  color: #FFD700;
  font-weight: 700;
}

/* ========== Loading ========== */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 55vh;
  gap: 20rpx;
}

.loading-spinner {
  width: 48rpx;
  height: 48rpx;
  border: 4rpx solid #E0E0E0;
  border-top-color: #FFD700;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-label {
  font-size: 24rpx;
  color: #CCCCCC;
}
</style>