venue-miniapp/miniprogram/src/pages/comprehensive/membership/cards.vue

<template>
  <view class="cards-page">
    <view v-if="isLoading" class="load-more-tip">加载中...</view>

    <view v-else-if="cards.length" class="card-list">
      <view v-for="card in cards" :key="card.id" class="card item-card" @tap="goDetail(card.id)">
        <view class="card-header">
          <text class="plan-name">{{ card.plan_name }}</text>
          <text class="status-tag" :class="card.status">{{ card.status_label }}</text>
        </view>
        <view class="card-body">
          <view class="stat">
            <text class="stat-value">{{ card.remaining_count }}</text>
            <text class="stat-label">剩余</text>
          </view>
          <view class="stat-divider" />
          <view class="stat">
            <text class="stat-value muted">{{ card.total_count }}</text>
            <text class="stat-label">总数</text>
          </view>
        </view>
      </view>
      <view v-if="!hasMore && cards.length >= pageSize" class="load-more-tip">已加载全部</view>
    </view>

    <view v-else class="empty-state">暂无次卡</view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { membershipApi } from '@/modules/comprehensive/api/membership'

const cards = ref([])
const page = ref(1)
const pageSize = 20
const total = ref(0)
const isLoading = ref(false)
const isLoadingMore = ref(false)

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

const loadCards = async (reset) => {
  if (reset) {
    page.value = 1
    isLoading.value = true
  } else {
    isLoadingMore.value = true
  }
  try {
    const data = await membershipApi.getCards({ page: page.value, pageSize })
    const items = data.items.filter((c) => c.status === 'available')
    cards.value = reset ? items : [...cards.value, ...items]
    total.value = items.length
  } finally {
    isLoading.value = false
    isLoadingMore.value = false
  }
}

onPullDownRefresh(() => {
  loadCards(true).finally(() => uni.stopPullDownRefresh())
})

onReachBottom(() => {
  if (!hasMore.value || isLoadingMore.value) return
  page.value += 1
  loadCards(false)
})

loadCards(true)

const goDetail = (id) => {
  uni.navigateTo({ url: `/pages/comprehensive/membership/card-detail?id=${id}` })
}
</script>

<style lang="scss" scoped>
.cards-page {
  min-height: 100vh;
  background: $bg-color-soft;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: $spacing-md;
  padding: $spacing-md;
}

.item-card {
  display: flex;
  flex-direction: column;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: $spacing-sm;
}

.plan-name {
  flex: 1;
  color: $text-color-main;
  font-size: 30rpx;
  font-weight: 900;
}

.status-tag {
  padding: 4rpx 16rpx;
  border-radius: $border-radius-sm;
  font-size: 22rpx;
  font-weight: 800;
}

.status-tag.available {
  background: $color-success-light;
  color: $color-success;
}

.status-tag.exhausted {
  background: $color-warning-light;
  color: $color-warning;
}

.status-tag.expired {
  background: $bg-color-hover;
  color: $text-color-muted;
}

.card-body {
  margin-top: $spacing-md;
  display: flex;
  align-items: center;
  gap: $spacing-md;
}

.stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  color: $color-primary;
  font-size: 48rpx;
  font-weight: 900;
}

.stat-value.muted {
  color: $text-color-muted;
}

.stat-label {
  margin-top: 4rpx;
  color: $text-color-muted;
  font-size: 22rpx;
}

.stat-divider {
  width: 1rpx;
  height: 56rpx;
  background: $border-color;
}
</style>