WechatApp/pages/coupon/index.vue

<template>
  <!-- 优惠券页面 -->
  <view class="page">

    <!-- 标签页 -->
    <view class="tabs">
      <view v-for="(tab, index) in tabs" :key="index"
        :class="['tab-item', { 'tab-item--active': currentTab === index }]" @click="handleTabChange(index)">
        {{ tab }}
      </view>
    </view>

    <!-- 优惠券列表 -->
    <scroll-view class="content" scroll-y>
      <view class="coupon-list" v-if="filteredCoupons.length > 0">
        <view v-for="(coupon, index) in filteredCoupons" :key="coupon.id || index"
          :class="['coupon-card', getCouponCardClass(coupon)]">
          <image :src="getFileUrl('img/personal/coupon.png')" mode="widthFix" class="coupon-card-bg"></image>
          <image :src="getFileUrl('img/personal/couponLeft.png')" mode="heightFix" class="coupon-card-bgLeft"></image>
          <view class="coupon-card-content">
            <!-- 左侧金额区域 -->
            <view class="coupon-card__left">
              <view class="amount-wrapper">
                <text class="amount-number">{{ coupon.amount }}</text>
                <text class="amount-unit">{{ coupon.amountUnit || '元' }}</text>
              </view>
              <text class="condition-text">{{ coupon.conditionText || (coupon.minAmount > 0 ? '满' + coupon.minAmount + '可用' : '无门槛') }}</text>
            </view>

            <!-- 右侧信息区域 -->
            <view class="coupon-card__right">
              <view class="coupon-info">
                <text class="coupon-name">{{ coupon.name }}</text>
                <view class="coupon-rules" @click="handleShowRules(coupon)">
                  使用规则
                  <text class="arrow">›</text>
                </view>
                <text class="coupon-expire">{{ coupon.expireDate ? coupon.expireDate + '到期' : '' }}</text>
              </view>

              <!-- 状态展示 -->
              <view class="coupon-action">
                <view v-if="coupon.status === 0" class="status-text status-text--unused">未使用</view>
                <view v-else-if="coupon.status === 1" class="status-text status-text--expiring">即将过期</view>
                <view v-else-if="coupon.status === 2" class="status-text status-text--used">已使用</view>
                <view v-else class="status-text status-text--expired">已过期</view>
              </view>
            </view>
          </view>

        </view>
      </view>

      <!-- 空状态 -->
      <view class="empty-state" v-else>
        <image :src="getFileUrl('img/icon/noCoupon.png')" mode="widthFix" class="empty-icon"></image>
        <text class="empty-text">暂无优惠券</text>
      </view>
    </scroll-view>

    <!-- 使用规则弹窗 -->
    <RulesModal v-model:open="showRulesModal" :couponData="selectedCoupon" @use="handleUseCoupon" />
  </view>
</template>

<script setup>
import { onShow } from "@dcloudio/uni-app";
import { ref, computed } from "vue";
import { go } from "@/utils/utils.js";
import { getFileUrl } from "@/utils/file.js";
import RulesModal from "./components/RulesModal.vue";
import * as diningApi from "@/api/dining.js";

// 标签页数据
const tabs = ['未使用', '即将过期', '已使用', '已过期'];
const currentTab = ref(0);

// 弹窗控制
const showRulesModal = ref(false);
const selectedCoupon = ref({
  amount: 0,
  minAmount: 0,
  name: '',
  expireDate: '',
  validDays: 90,
  description: '周一、周五不可用'
});

// 优惠券数据（接口返回）
const couponList = ref([]);
const loading = ref(false);

// 规范化接口返回的优惠券项
function normalizeCouponItem(raw) {
  if (!raw || typeof raw !== 'object') return null;
  const couponType = Number(raw.couponType) ?? 1;
  const nominalValue = Number(raw.nominalValue ?? raw.amount ?? 0) || 0;
  const discountRate = Number(raw.discountRate ?? 0) || 0;
  const minAmount = Number(raw.minimumSpendingAmount ?? raw.minAmount ?? 0) || 0;
  let amount = nominalValue;
  let amountUnit = '元';
  let conditionText = minAmount > 0 ? `满${minAmount}可用` : '无门槛';
  if (couponType === 2 && discountRate > 0) {
    amount = discountRate;
    amountUnit = '折';
    conditionText = minAmount > 0 ? `满${minAmount}可用` : '无门槛';
  }
  return {
    id: raw.id ?? raw.userCouponId ?? raw.couponId ?? '',
    amount,
    amountUnit,
    minAmount,
    name: raw.name ?? raw.title ?? raw.couponName ?? '',
    expireDate: raw.expirationTime ?? raw.endGetDate ?? raw.expireDate ?? '',
    status: currentTab.value,
    couponType,
    nominalValue,
    discountRate,
    conditionText
  };
}

// 根据当前标签页展示的优惠券（接口按 tabType 分页返回，直接使用）
const filteredCoupons = computed(() => couponList.value);

// 切换标签页
const handleTabChange = (index) => {
  currentTab.value = index;
  fetchCouponList();
};

// 拉取优惠券列表
const fetchCouponList = async () => {
  loading.value = true;
  try {
    const res = await diningApi.GetUserCouponList({
      tabType: currentTab.value, // 0未使用 1即将过期 2已使用 3已过期
      page: 1,
      size: 20
    });
    const raw = res?.data ?? res ?? {};
    const list = raw?.records ?? raw?.list ?? (Array.isArray(res) ? res : []);
    const arr = Array.isArray(list) ? list : [];
    couponList.value = arr.map(normalizeCouponItem).filter(Boolean);
  } catch (err) {
    console.error('获取优惠券列表失败:', err);
    uni.showToast({ title: '加载失败', icon: 'none' });
    couponList.value = [];
  } finally {
    loading.value = false;
  }
};

// 获取优惠券卡片样式类
const getCouponCardClass = (coupon) => {
  if (coupon.status === 2) return 'coupon-card--used';
  if (coupon.status === 3) return 'coupon-card--expired';
  return '';
};

// 使用优惠券
const handleUseCoupon = (coupon) => {
  console.log('使用优惠券:', coupon);
  // 跳转到点餐页面
  go('/pages/orderFood/index');
};

// 查看使用规则
const handleShowRules = (coupon) => {
  selectedCoupon.value = {
    ...coupon,
    validDays: 90,
    description: '周一、周五不可用'
  };
  showRulesModal.value = true;
};

// 使用 onShow 拉取数据（onLoad 在 uni-app Vue3 组合式 API 下可能不触发，onShow 更可靠）
onShow(() => {
  fetchCouponList();
});
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  min-height: 100vh;
  background: #F5F5F5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.header {
  background: #FFFFFF;
  padding: 20rpx 30rpx;
  padding-top: calc(20rpx + env(safe-area-inset-top));

  .header-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #151515;
    text-align: center;
  }
}

.tabs {
  flex-shrink: 0;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 0 30rpx;

  .tab-item {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    color: #666666;
    padding: 28rpx 0;
    position: relative;
    transition: all 0.3s;

    &--active {
      color: #151515;
      font-weight: bold;

      &::after {
        content: '';
        position: absolute;
        bottom: 20rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 6rpx;
        background: linear-gradient(90deg, #FF8A57 0%, #F47D1F 100%);
        border-radius: 3rpx;
      }
    }
  }
}

.content {
  flex: 1;
  min-height: 0;
  padding: 24rpx 30rpx;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

.coupon-list {
  position: relative;

  .coupon-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .coupon-card-bgLeft {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 190rpx;
    z-index: 1;
  }

  .coupon-card-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
  }

  .coupon-card {
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    position: relative;
    z-index: 3;

    &:last-child {
      margin-bottom: 0;
    }

    &__left {
      width: 200rpx;
      padding: 32rpx 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .amount-wrapper {
        display: flex;
        align-items: baseline;
        margin-bottom: 8rpx;

        .amount-number {
          font-size: 64rpx;
          font-weight: bold;
          color: #F47D1F;
          line-height: 1;
        }

        .amount-unit {
          font-size: 28rpx;
          color: #F47D1F;
          margin-left: 4rpx;
        }
      }

      .condition-text {
        font-size: 22rpx;
        color: #F47D1F;
      }
    }

    &__divider {
      width: 2rpx;
      height: 100%;
      position: relative;

      .dash-line {
        width: 2rpx;
        height: 100%;
        // background-image: linear-gradient(to bottom, #FFD9C2 0%, #FFD9C2 50%, transparent 50%, transparent 100%);
        background-size: 2rpx 12rpx;
        background-repeat: repeat-y;
      }
    }

    &__right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx 24rpx;

      .coupon-info {
        flex: 1;
        display: flex;
        flex-direction: column;

        .coupon-name {
          font-size: 28rpx;
          font-weight: bold;
          color: #151515;
          margin-bottom: 12rpx;
        }

        .coupon-rules {
          font-size: 22rpx;
          color: #999999;
          margin-bottom: 12rpx;
          display: flex;
          align-items: center;

          .arrow {
            font-size: 28rpx;
            margin-left: 4rpx;
          }
        }

        .coupon-expire {
          font-size: 22rpx;
          color: #999999;
        }
      }

      .coupon-action {
        margin-left: 20rpx;

        .action-btn {
          width: 120rpx;
          height: 56rpx;
          border-radius: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 26rpx;
          font-weight: 500;

          &--use {
            // background: linear-gradient(135deg, #FF8A57 0%, #F47D1F 100%);
            background: #F47D1F;
            color: #FFFFFF;
            // box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(255, 107, 53, 0.3);
          }
        }

        .status-text {
          font-size: 24rpx;
          padding: 8rpx 16rpx;

          &--unused,
          &--expiring {
            color: #999999;
          }

          &--used {
            color: #999999;
          }

          &--expired {
            color: #CCCCCC;
          }
        }
      }
    }

    // 已使用状态
    &--used {
      background: #F8F8F8;

      .coupon-card__left {

        .amount-number,
        .amount-unit,
        .condition-text {
          color: #CCCCCC;
        }
      }

      .coupon-card__right {
        .coupon-info {

          .coupon-name,
          .coupon-rules,
          .coupon-expire {
            color: #CCCCCC;
          }
        }
      }
    }

    // 已过期状态
    &--expired {
      background: #F8F8F8;

      .coupon-card__left {

        .amount-number,
        .amount-unit,
        .condition-text {
          color: #CCCCCC;
        }
      }

      .coupon-card__right {
        .coupon-info {

          .coupon-name,
          .coupon-rules,
          .coupon-expire {
            color: #CCCCCC;
          }
        }
      }
    }
  }
}

.hover-active {
  opacity: 0.8;
  transform: scale(0.98);
}

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

  .empty-icon {
    width: 300rpx;
    height: 280rpx;
    margin-bottom: 40rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #AAAAAA;
  }
}
</style>