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

<template>
  <view class="page">
    <!-- 顶部Tab -->
    <view class="tab-bar">
      <view
        v-for="tab in tabs"
        :key="tab.value"
        :class="['tab-pill', currentTab === tab.value ? 'tab-pill--active' : '']"
        @click="switchTab(tab.value)"
      >
        <text class="tab-pill-text">{{ tab.label }}</text>
      </view>
    </view>

    <!-- 优惠券列表 -->
    <view v-if="!loading && coupons.length > 0" class="coupon-list">
      <view
        v-for="(item, index) in coupons"
        :key="item.id"
        :class="['ticket', item.status === 0 ? '' : 'ticket--dim']"
      >
        <!-- 左侧：金额 -->
        <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">{{ formatValue(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>
          <text class="ticket-period">{{ formatTime(item.validStartTime) }} ~ {{ formatTime(item.validEndTime) }}</text>

          <!-- 状态水印 -->
          <view v-if="item.status !== 0" class="ticket-watermark">
            <text class="watermark-text">{{ item.status === 1 ? '已使用' : '已过期' }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view v-if="coupons.length > 0 && hasMore" class="load-more" @click="loadMore">
      <text class="load-more-text">{{ loadingMore ? '加载中...' : '点击加载更多' }}</text>
    </view>

    <!-- 空状态 -->
    <view v-if="!loading && coupons.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">{{ emptyText }}</text>
      <view v-if="currentTab === 0" class="empty-cta" @click="goToCouponCenter">
        <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 v-if="!loading && currentTab === 0 && coupons.length > 0" class="bottom-bar">
      <view class="bottom-btn" @click="goToCouponCenter">
        <text class="bottom-btn-label">领券中心</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { getMyCoupons } from '../../api/coupon';
import type { UserCouponInfo, PageResult } from '../../api/coupon';
import { checkAuth } from '../../utils/auth';
import { getCouponTypeLabel, getScopeLabel, formatTime } from '../../utils/coupon';
import { logger } from '../../utils/logger';

const tabs = [
  { label: '未使用', value: 0 },
  { label: '已使用', value: 1 },
  { label: '已过期', value: 2 }
];

const currentTab = ref(0);
const coupons = ref<UserCouponInfo[]>([]);
const loading = ref(false);
const loadingMore = ref(false);
const currentPage = ref(1);
const pageSize = 10;
const total = ref(0);

const hasMore = computed(() => coupons.value.length < total.value);

const emptyText = computed(() => {
  const map: Record<number, string> = {
    0: '暂无可用优惠券',
    1: '暂无已使用的优惠券',
    2: '暂无已过期的优惠券'
  };
  return map[currentTab.value] || '暂无优惠券';
});

const switchTab = (tab: number) => {
  if (currentTab.value === tab) return;
  currentTab.value = tab;
  coupons.value = [];
  currentPage.value = 1;
  loadCoupons();
};

const loadCoupons = async (isLoadMore = false) => {
  if (isLoadMore) {
    if (loadingMore.value) return;
    loadingMore.value = true;
  } else {
    if (loading.value) return;
    loading.value = true;
  }

  try {
    const result: PageResult<UserCouponInfo> = await getMyCoupons(currentTab.value, currentPage.value, pageSize);
    if (isLoadMore) {
      coupons.value = [...coupons.value, ...(result.list || [])];
    } else {
      coupons.value = result.list || [];
    }
    total.value = result.total;
  } catch (error) {
    logger.error('加载优惠券列表失败:', error);
  } finally {
    loading.value = false;
    loadingMore.value = false;
  }
};

const loadMore = () => {
  currentPage.value++;
  loadCoupons(true);
};

const formatValue = (item: UserCouponInfo): string => {
  if (item.couponType === 2) {
    const val = item.discountValue;
    return val ? `${val}折` : '折扣';
  }
  const val = item.discountValue;
  return val ? `${val}` : '--';
};

const goToCouponCenter = () => {
  uni.navigateTo({
    url: '/pages/couponCenter/couponCenter'
  });
};

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

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: linear-gradient(180deg, $color-primary-bg 0%, $color-bg-secondary 100%);
}

/* ========== Tab Bar ========== */
.tab-bar {
  display: flex;
  gap: 16rpx;
  padding: 20rpx 32rpx 12rpx;
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 10;
}

.tab-pill {
  padding: 12rpx 40rpx;
  border-radius: 32rpx;
  background: rgba(0, 0, 0, 0.04);

  &:active {
    transform: scale(0.95);
  }
}

.tab-pill--active {
  background: $color-primary;
  box-shadow: $shadow-sm;
}

.tab-pill-text {
  font-size: 26rpx;
  color: $color-text-secondary;
  font-weight: 500;
}

.tab-pill--active .tab-pill-text {
  color: #1A1A1A;
  font-weight: 600;
}

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

/* ========== Ticket Card ========== */
.ticket {
  display: flex;
  margin-bottom: 24rpx;
  border-radius: 20rpx;
  overflow: hidden;
  background: $color-bg-primary;
  box-shadow: $shadow-md;
  position: relative;

  &:active {
    transform: scale(0.98);
    box-shadow: $shadow-sm;
  }
}

.ticket--dim {
  opacity: 0.5;

  .ticket-face {
    background: linear-gradient(150deg, #B0B0B0, #C8C8C8);
  }

  .ticket-badge {
    color: $color-text-secondary;
    background: $color-bg-tertiary;
  }
}

/* --- 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;

  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1rpx;
    background: rgba(255, 255, 255, 0.2);
  }
}

.ticket-face--type1 {
  background: linear-gradient(150deg, #FF8A00, #FFA940);
}
.ticket-face--type2 {
  background: linear-gradient(150deg, $color-error, #FF7B6B);
}
.ticket-face--type3 {
  background: linear-gradient(150deg, #7B61FF, #A78BFA);
}
.ticket-face--type4 {
  background: linear-gradient(150deg, $color-info, #38BDF8);
}

.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: $color-bg-primary;
  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 $color-border;
  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: $color-text-primary;
  font-weight: 700;
  margin-bottom: 12rpx;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 80rpx;
}

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

.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: $color-text-secondary;
}

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

.ticket-period {
  font-size: 22rpx;
  color: $color-text-tertiary;
}

/* --- Watermark --- */
.ticket-watermark {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  border: 3rpx solid $color-text-tertiary;
  border-radius: 8rpx;
  padding: 2rpx 14rpx;
  transform: rotate(-12deg);
  opacity: 0.6;
}

.watermark-text {
  font-size: 22rpx;
  color: $color-text-tertiary;
  font-weight: 700;
}

/* ========== Load More ========== */
.load-more {
  text-align: center;
  padding: 16rpx 0 40rpx;
}

.load-more-text {
  font-size: 24rpx;
  color: $color-text-tertiary;
}

/* ========== 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: $color-border;
  border-radius: 16rpx;
}

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

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

  &::before {
    content: '¥';
    font-size: 44rpx;
    font-weight: 800;
    color: $color-text-tertiary;
    opacity: 0.4;
  }
}

.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: $color-bg-tertiary;
  border: 2rpx solid $color-border;
}

.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: 28rpx;
  color: $color-text-secondary;
  font-weight: 600;
  margin-bottom: 36rpx;
}

.empty-cta {
  padding: 18rpx 64rpx;
  background: $color-primary;
  border-radius: 44rpx;

  &:active {
    opacity: 0.85;
  }
}

.empty-cta-text {
  font-size: 28rpx;
  color: #1A1A1A;
  font-weight: 600;
}

/* ========== 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 $color-border;
  border-top-color: $color-primary;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.loading-label {
  font-size: 24rpx;
  color: $color-text-tertiary;
}

/* ========== Bottom CTA ========== */
.bottom-bar {
  padding: 20rpx 64rpx 56rpx;
  display: flex;
  justify-content: center;
}

.bottom-btn {
  padding: 22rpx 0;
  width: 100%;
  background: $color-primary;
  border-radius: 44rpx;
  text-align: center;

  &:active {
    opacity: 0.85;
  }
}

.bottom-btn-label {
  font-size: 28rpx;
  color: #1A1A1A;
  font-weight: 600;
}
</style>