city-gather/src/subPack-xsb/coupon/index.vue

<script setup lang="ts">
import CouponItem from '../components/coupon/index.vue'

definePage({ name: 'xsb-coupon', islogin: true, style: { navigationBarTitleText: '优惠券列表' } })

const tabList = [
  { label: '待使用', useStatus: 2 },
  { label: '已使用', useStatus: 1 },
  { label: '已过期', useStatus: 5 },
  { label: '冻结', useStatus: 7 },
]

const activeTab = ref(0)

const { data: couponList, isLastPage, page, reload } = usePagination(
  (pageNum, pageSize) => Apis.xsb.memberCouponPage({
    data: {
      pageNum,
      pageSize,
      useStatus: tabList[activeTab.value].useStatus,
    },
  }),
  {
    immediate: true,
    pageNum: 1,
    pageSize: 10,
    initialData: [],
    data: res => res.data?.list ?? [],
    append: true,
  },
)

function switchTab(index: number) {
  if (activeTab.value === index)
    return
  activeTab.value = index
  couponList.value = []
  reload()
}

onReachBottom(() => {
  if (!isLastPage.value) {
    page.value++
  }
})
</script>

<template>
  <view class="min-h-screen bg-white">
    <!-- Tab 导航 -->
    <view class="sticky top-0 z-10 bg-white">
      <wd-tabs v-model="activeTab" @change="switchTab($event.index)">
        <wd-tab v-for="tab in tabList" :key="tab.useStatus" :title="tab.label" />
      </wd-tabs>
    </view>

    <!-- 列表 -->
    <view class="p-24rpx">
      <view v-for="item in couponList" :key="item.id" class="mb-20rpx">
        <CouponItem
          :itemcoupon="item"
          :show-use-btn="item.useStatus === 2"
        />
      </view>

      <!-- 空状态 -->
      <StatusTip v-if="couponList.length === 0" tip="暂无内容" />
      <!-- 底部占位 -->
      <view class="h-40rpx" />
    </view>
  </view>
</template>

<style lang="scss" scoped></style>