feat: 年卡相关页面（列表/详情/购买/激活/入园码/绑定）

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/packages/user/pages/card/list.vue

@@ -1,3 +1,82 @@
 <template>
-  <view><text>页面占位 - 后续任务实现</text></view>
+  <view class="page">
+    <!-- 搜索栏 -->
+    <view class="search-bar">
+      <uni-search-bar v-model="keyword" placeholder="搜索年卡" @confirm="handleSearch" @clear="handleSearch" />
+    </view>
+    <!-- 分类筛选 -->
+    <view class="filter-bar">
+      <view
+        v-for="cat in categories"
+        :key="cat.value"
+        class="filter-tag"
+        :class="{ active: currentCategory === cat.value }"
+        @click="selectCategory(cat.value)"
+      >
+        <text>{{ cat.label }}</text>
+      </view>
+    </view>
+    <!-- 年卡列表 -->
+    <view class="card-list">
+      <view v-if="cardStore.loading" class="loading"><text>加载中...</text></view>
+      <view v-else-if="cardStore.cardList.length === 0">
+        <empty-state icon="🎫" text="暂无符合条件的年卡" />
+      </view>
+      <view v-else>
+        <card-item v-for="card in cardStore.cardList" :key="card.id" :card="card" @click="goDetail" />
+      </view>
+    </view>
+  </view>
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { useCardStore } from '../../../../store/card'
+import CardItem from '../../../../components/card-item.vue'
+import EmptyState from '../../../../components/empty-state.vue'
+import type { CardInfo } from '../../../../api/types'
+
+const cardStore = useCardStore()
+const keyword = ref('')
+const currentCategory = ref('')
+
+/** 分类选项 */
+const categories = [
+  { label: '全部', value: '' },
+  { label: '旅游年卡', value: 'travel' },
+  { label: '亲子年卡', value: 'family' },
+  { label: '情侣年卡', value: 'couple' }
+]
+
+/** 页面加载时获取年卡列表 */
+onLoad(() => {
+  cardStore.fetchCardList()
+})
+
+/** 执行搜索 */
+function handleSearch() {
+  cardStore.fetchCardList({ keyword: keyword.value, category: currentCategory.value })
+}
+
+/** 选择分类 */
+function selectCategory(value: string) {
+  currentCategory.value = value
+  handleSearch()
+}
+
+/** 跳转年卡详情 */
+function goDetail(card: CardInfo) {
+  uni.navigateTo({ url: `/packages/user/pages/card/detail?id=${card.id}` })
+}
+</script>
+
+<style scoped>
+.page { min-height: 100vh; background: #f5f5f5; }
+.search-bar { background: #fff; padding: 12rpx 20rpx; }
+.filter-bar { display: flex; gap: 16rpx; padding: 16rpx 20rpx; background: #fff; border-bottom: 1rpx solid #f0f0f0; }
+.filter-tag { padding: 10rpx 24rpx; border-radius: 30rpx; font-size: 24rpx; color: #666; background: #f5f5f5; }
+.filter-tag.active { background: #4A90D9; color: #fff; }
+.card-list { padding: 20rpx; }
+.loading { text-align: center; padding: 60rpx; color: #999; font-size: 28rpx; }
+</style>