94 lines
2.8 KiB
Vue
94 lines
2.8 KiB
Vue
<template>
|
|
<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="loading" class="loading"><text>加载中...</text></view>
|
|
<view v-else-if="cardList.length === 0">
|
|
<empty-state icon="🎫" text="暂无符合条件的年卡" />
|
|
</view>
|
|
<view v-else>
|
|
<card-item v-for="card in 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 { getCardList } from '../../../../api/card'
|
|
import CardItem from '../../../../components/card-item.vue'
|
|
import EmptyState from '../../../../components/empty-state.vue'
|
|
import type { CardInfo } from '../../../../api/types'
|
|
|
|
const cardList = ref<CardInfo[]>([])
|
|
const loading = ref(false)
|
|
const keyword = ref('')
|
|
const currentCategory = ref('')
|
|
|
|
/** 分类选项 */
|
|
const categories = [
|
|
{ label: '全部', value: '' },
|
|
{ label: '旅游年卡', value: 'travel' },
|
|
{ label: '亲子年卡', value: 'family' },
|
|
{ label: '情侣年卡', value: 'couple' }
|
|
]
|
|
|
|
/** 获取年卡列表 */
|
|
async function fetchCardList(params?: { keyword?: string; category?: string }) {
|
|
loading.value = true
|
|
try {
|
|
cardList.value = await getCardList(params)
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
/** 页面加载时获取年卡列表 */
|
|
onLoad(() => {
|
|
fetchCardList()
|
|
})
|
|
|
|
/** 执行搜索 */
|
|
function handleSearch() {
|
|
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>
|