feat: add membership card course booking flow

2026-07-12 20:58:06 +08:00
parent 1cc96633ad
commit 4b11447875
8 changed files with 1346 additions and 8 deletions
@@ -0,0 +1,189 @@
+<template>
+  <view class="cards-page">
+    <UnauthLoginPanel
+      v-if="!session.isLoggedIn"
+      @login="login"
+    />
+
+    <block v-else>
+      <view class="list">
+        <view v-for="card in cards" :key="card.id" class="card membership-card" @tap="goDetail(card.id)">
+          <view class="card-top">
+            <text class="plan-name">{{ card.plan_name }}</text>
+            <text class="badge" :class="statusBadgeClass(card.status)">{{ card.status_label }}</text>
+          </view>
+          <view class="count-row">
+            <view class="count-block">
+              <text class="count-value">{{ card.remaining_count }}</text>
+              <text class="count-label">剩余次数</text>
+            </view>
+            <view class="count-divider" />
+            <view class="count-block">
+              <text class="count-value muted">{{ card.total_count }}</text>
+              <text class="count-label">总次数</text>
+            </view>
+          </view>
+        </view>
+
+        <view v-if="isLoading" class="load-more-tip">加载中...</view>
+        <view v-else-if="cards.length === 0" class="empty-state">暂无次卡</view>
+        <view v-else-if="!hasMore" class="load-more-tip">已加载全部</view>
+        <view v-if="isLoadingMore" class="load-more-tip">加载中...</view>
+      </view>
+    </block>
+  </view>
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
+import { membershipApi } from '@/modules/comprehensive/api/membership'
+import { useComprehensiveSessionStore } from '@/modules/comprehensive/stores/session'
+import UnauthLoginPanel from '@/components/UnauthLoginPanel.vue'
+
+const session = useComprehensiveSessionStore()
+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)
+
+onMounted(async () => {
+  await session.init()
+  if (session.isLoggedIn) loadCards(true)
+})
+
+onPullDownRefresh(() => {
+  loadCards(true).finally(() => uni.stopPullDownRefresh())
+})
+
+onReachBottom(() => {
+  if (!hasMore.value || isLoadingMore.value) return
+  page.value += 1
+  loadCards(false)
+})
+
+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 })
+    cards.value = reset ? data.items : [...cards.value, ...data.items]
+    total.value = data.total
+  } finally {
+    isLoading.value = false
+    isLoadingMore.value = false
+  }
+}
+
+const login = async () => {
+  await session.login()
+  loadCards(true)
+}
+
+const goDetail = (id) => {
+  uni.navigateTo({ url: `/pages/comprehensive/membership/card-detail?id=${id}` })
+}
+
+const statusBadgeClass = (status) => {
+  if (status === 'active') return 'success'
+  if (status === 'exhausted') return 'warning'
+  if (status === 'expired') return 'muted'
+  return 'muted'
+}
+</script>
+
+<style lang="scss" scoped>
+.cards-page {
+  min-height: 100vh;
+  background: $bg-color-soft;
+}
+
+.list {
+  padding: $spacing-md;
+}
+
+.membership-card {
+  margin-bottom: $spacing-md;
+}
+
+.card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: $spacing-md;
+}
+
+.plan-name {
+  flex: 1;
+  color: $text-color-main;
+  font-size: 30rpx;
+  font-weight: 900;
+  line-height: 1.35;
+}
+
+.badge {
+  padding: 4rpx 16rpx;
+  border-radius: $border-radius-sm;
+  font-size: 22rpx;
+  font-weight: 800;
+}
+
+.badge.success {
+  background: $color-success-light;
+  color: $color-success;
+}
+
+.badge.warning {
+  background: $color-warning-light;
+  color: $color-warning;
+}
+
+.badge.muted {
+  background: $bg-color-hover;
+  color: $text-color-muted;
+}
+
+.count-row {
+  margin-top: $spacing-md;
+  display: flex;
+  align-items: center;
+  gap: $spacing-md;
+}
+
+.count-block {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.count-value {
+  color: $color-primary;
+  font-size: 44rpx;
+  font-weight: 900;
+}
+
+.count-value.muted {
+  color: $text-color-muted;
+}
+
+.count-label {
+  margin-top: 4rpx;
+  color: $text-color-muted;
+  font-size: 22rpx;
+}
+
+.count-divider {
+  width: 1rpx;
+  height: 56rpx;
+  background: $border-color;
+}
+</style>