WechatApp/pages/coupon/index.vue

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

    <!-- 券状态横向滚动 + 右侧固定「全部」（覆盖滚动内容） -->
    <view class="tabs-wrap">
      <view class="tabs-row">
        <scroll-view
          class="tabs-scroll"
          scroll-x
          :show-scrollbar="false"
          enable-flex
        >
          <view class="tabs-scroll-inner">
            <view
              v-for="(tab, index) in mainTabs"
              :key="'main-' + index"
              :class="['tab-item', { 'tab-item--active': currentTab === index }]"
              @click="handleTabChange(index)"
            >
              {{ tab }}
            </view>
          </view>
        </scroll-view>
        <view
          class="tabs-type-trigger"
          :class="{
            'tabs-type-trigger--open': typePanelOpen,
            'tabs-type-trigger--filtered': !typePanelOpen && typeFilter !== 'all'
          }"
          @click.stop="toggleTypePanel"
        >
          <view class="tabs-type-trigger__inner">
            <text class="tabs-type-trigger__text">{{ typeTriggerLabel }}</text>
            <view
              :class="['tabs-type-trigger__chevron', { 'tabs-type-trigger__chevron--open': typePanelOpen }]"
            />
          </view>
        </view>
      </view>
      <view v-if="typePanelOpen" class="type-filter-row">
        <view
          v-for="opt in typeFilterOptions"
          :key="opt.value"
          :class="['type-pill', { 'type-pill--active': typeFilter === opt.value }]"
          @click="selectTypeFilter(opt.value)"
        >
          {{ opt.label }}
        </view>
      </view>
    </view>

    <!-- 列表区域：展开类型筛选时盖半透明遮罩，点击关闭 -->
    <view class="page-body">
      <view v-if="typePanelOpen" class="type-mask" @tap="closeTypePanel" />
      <scroll-view
        class="content"
        scroll-y
        :class="{ 'content--dimmed': typePanelOpen }"
        :lower-threshold="100"
        @scrolltolower="handleCouponScrollToLower"
      >
      <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">{{ formatCouponExpireLine(coupon) }}</text>
              </view>
            </view>
          </view>

        </view>
      </view>

      <view v-if="couponList.length > 0 && (loadMoreLoading || !listHasMore)" class="coupon-page-footer">
        <text v-if="loadMoreLoading" class="coupon-page-footer__text">加载中...</text>
        <text v-else class="coupon-page-footer__text">没有更多了</text>
      </view>

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

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

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

// 状态 Tab：0未使用 1即将过期 2已使用 3已过期；右侧「全部」为券类型筛选入口
const mainTabs = ['未使用', '即将过期', '已使用', '已过期'];
const currentTab = ref(0);

/** 右侧：展开折扣券 / 满减券筛选（couponType 1 满减 2 折扣） */
const typePanelOpen = ref(false);
const typeFilter = ref('all');
const typeFilterOptions = [
  { value: 'all', label: '全部' },
  { value: 'discount', label: '折扣券' },
  { value: 'reduction', label: '满减券' }
];

/** 右上角文案与当前选中的券类型一致 */
const typeTriggerLabel = computed(() => {
  const hit = typeFilterOptions.find((o) => o.value === typeFilter.value);
  return hit?.label ?? '全部';
});

function toggleTypePanel() {
  typePanelOpen.value = !typePanelOpen.value;
}

function closeTypePanel() {
  typePanelOpen.value = false;
}

function selectTypeFilter(value) {
  typeFilter.value = value;
  typePanelOpen.value = false;
  // 类型为前端筛选；与列表请求共用队列，保证「切换类型」排在进行中的请求之后（后续 Tab/加载更多按序执行）
  enqueueListFetch(() => Promise.resolve());
}

// 弹窗控制
const showRulesModal = ref(false);
const selectedCoupon = ref({
  amount: 0,
  amountUnit: '元',
  minAmount: 0,
  name: '',
  expireDate: '',
  expirationTime: '',
  longTermValid: 0,
  specifiedDay: '',
  supplementaryInstruction: '',
  conditionText: '',
  qrCodeUrl: '',
  verificationCode: ''
});

// 优惠券数据（接口分页累加）
const couponList = ref([]);
const loading = ref(false);
const loadMoreLoading = ref(false);
const COUPON_PAGE_SIZE = 10;
const listHasMore = ref(true);
const lastCouponPageLoaded = ref(0);

/** 列表相关请求串行：上一请求结束（成功/失败）后再执行下一请求，避免切换状态/类型时竞态 */
let listFetchQueue = Promise.resolve();

function enqueueListFetch(task) {
  const next = listFetchQueue.then(() => task());
  listFetchQueue = next.catch(() => {});
  return next;
}

// 列表：主 Tab 数据 + 类型筛选（全部 / 折扣券 / 满减券）
const filteredCoupons = computed(() => {
  const list = couponList.value;
  const t = typeFilter.value;
  if (t === 'discount') return list.filter((c) => Number(c.couponType) === 2);
  if (t === 'reduction') return list.filter((c) => Number(c.couponType) === 1);
  return list;
});

// 切换标签页
const handleTabChange = (index) => {
  currentTab.value = index;
  typePanelOpen.value = false;
  enqueueListFetch(() => fetchCouponList({ reset: true, tabType: index }));
};

// 拉取优惠券列表（分页，每页 COUPON_PAGE_SIZE）
const fetchCouponList = async (options = {}) => {
  const { reset = true, tabType: tabTypeOpt } = options;
  const tabForRequest = tabTypeOpt != null ? tabTypeOpt : currentTab.value;
  const storeId = uni.getStorageSync('currentStoreId') || '';

  if (reset) {
    loading.value = true;
  } else {
    if (loadMoreLoading.value || loading.value || !listHasMore.value || typePanelOpen.value) return;
    loadMoreLoading.value = true;
  }

  const page = reset ? 1 : lastCouponPageLoaded.value + 1;

  try {
    const res = await diningApi.GetUserCouponList({
      storeId,
      tabType: tabForRequest,
      page,
      size: COUPON_PAGE_SIZE
    });
    const { list: rawList, total } = parseCouponListPage(res);
    const arr = Array.isArray(rawList) ? rawList : [];
    const normalized = arr.map((raw) => normalizeUserCouponListItem(raw, tabForRequest)).filter(Boolean);

    if (reset) {
      couponList.value = normalized;
    } else {
      couponList.value = mergeCouponListById(couponList.value, normalized);
    }
    lastCouponPageLoaded.value = page;

    const mergedLen = couponList.value.length;
    if (total > 0) {
      listHasMore.value = mergedLen < total;
    } else {
      listHasMore.value = normalized.length >= COUPON_PAGE_SIZE;
    }
  } catch (err) {
    console.error('获取优惠券列表失败:', err);
    if (reset) {
      uni.showToast({ title: '加载失败', icon: 'none' });
      couponList.value = [];
      listHasMore.value = false;
    } else {
      uni.showToast({ title: '加载更多失败', icon: 'none' });
    }
  } finally {
    if (reset) {
      loading.value = false;
    } else {
      loadMoreLoading.value = false;
    }
  }
};

function handleCouponScrollToLower() {
  if (typePanelOpen.value) return;
  enqueueListFetch(() => fetchCouponList({ reset: false }));
}

/** longTermValid=1 显示长期有效；=0 显示 expirationTime + 到期 */
function formatCouponExpireLine(coupon) {
  if (Number(coupon?.longTermValid) === 1) return '长期有效';
  const t = String(coupon?.expirationTime ?? coupon?.expireDate ?? '').trim();
  return t ? `${t}到期` : '';
}

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

// 查看使用规则
const handleShowRules = (coupon) => {
  selectedCoupon.value = { ...coupon };
  showRulesModal.value = true;
};

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

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

.tabs-wrap {
  flex-shrink: 0;
  background: #ffffff;
  position: relative;
  z-index: 20;
}

.page-body {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.type-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.45);
}

.tabs-row {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  min-height: 96rpx;
  box-sizing: border-box;
}

/* 券状态：横向滚动，内容可滑到「全部」下方被遮挡 */
.tabs-scroll {
  width: 100%;
  flex: 1;
  min-width: 0;
  height: 96rpx;
  white-space: nowrap;
}

.tabs-scroll-inner {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-end;
  flex-wrap: nowrap;
  column-gap: 28rpx;
  min-height: 96rpx;
  padding: 0 0 0 28rpx;
  /* 右侧留白：最后一项可向左滑出「全部」遮挡区，便于看清 */
  padding-right: 120rpx;
  box-sizing: border-box;
}

/* 右侧固定：白底盖在滚动层之上；与 .tab-item 相同上下内边距与行高，保证与券状态垂直对齐 */
.tabs-type-trigger {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  height: 96rpx;
  min-height: 96rpx;
  /* 与 .tab-item 一致：上 28rpx / 下 24rpx，文字行高 40rpx */
  padding: 28rpx 24rpx 24rpx 28rpx;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: -16rpx 0 20rpx -8rpx #ffffff;
}

.tabs-type-trigger__inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  height: 40rpx;
}

.tabs-type-trigger__text {
  font-size: 26rpx;
  line-height: 40rpx;
  height: 40rpx;
  color: #151515;
  white-space: nowrap;
}

.tabs-type-trigger--open .tabs-type-trigger__text,
.tabs-type-trigger--filtered .tabs-type-trigger__text {
  color: #f47d1f;
}

.tabs-type-trigger__chevron {
  flex-shrink: 0;
  width: 0;
  height: 0;
  margin-left: 8rpx;
  border-left: 7rpx solid transparent;
  border-right: 7rpx solid transparent;
  border-top: 9rpx solid #999999;
}

.tabs-type-trigger__chevron--open {
  border-top: none;
  border-bottom: 9rpx solid #f47d1f;
  border-left: 7rpx solid transparent;
  border-right: 7rpx solid transparent;
}

.tab-item {
  flex-shrink: 0;
  text-align: center;
  font-size: 26rpx;
  line-height: 40rpx;
  color: #666666;
  padding: 28rpx 8rpx 24rpx;
  margin: 0 25rpx;
  position: relative;
  transition: color 0.2s;
  box-sizing: border-box;
  white-space: nowrap;

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

    &::after {
      content: '';
      position: absolute;
      bottom: 16rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 40rpx;
      height: 6rpx;
      background: #ff8a00;
      border-radius: 3rpx;
    }
  }
}

.type-filter-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 16rpx;
  padding: 8rpx 30rpx 20rpx;
  box-sizing: border-box;
  background: #ffffff;
}

.type-pill {
  padding: 14rpx 32rpx;
  border-radius: 999rpx;
  font-size: 24rpx;
  color: #333333;
  background: #f2f3f5;
  line-height: 1.2;
}

.type-pill--active {
  background: #fff4e6;
  color: #f47d1f;
  font-weight: 500;
}

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

.content--dimmed {
  pointer-events: none;
}

.coupon-page-footer {
  padding: 24rpx 0 40rpx;
  text-align: center;
}

.coupon-page-footer__text {
  font-size: 24rpx;
  color: #999999;
}

.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;
        }
      }

    }

    // 已使用状态
    &--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>