存档点

pages/category/category.vue

@@ -0,0 +1,162 @@
+<template>
+	<view class="container">
+		<view v-if="loading" class="loading">
+			<text class="loading-text">加载中...</text>
+		</view>
+		<view v-else-if="categories.length > 0" class="category-list">
+			<view 
+				v-for="item in categories" 
+				:key="item.sn" 
+				class="category-item"
+				@click="handleCategory(item)"
+			>
+				<view class="category-icon">{{ getCategoryIcon(item.category) }}</view>
+				<text class="category-name">{{ item.category }}</text>
+				<text class="arrow">›</text>
+			</view>
+		</view>
+		<view v-else class="empty-state">
+			<text class="empty-text">暂无类目</text>
+			<button class="refresh-btn" @click="loadCategories">刷新</button>
+		</view>
+	</view>
+</template>
+
+<script>
+import api from '../../utils/api.js'
+
+export default {
+	data() {
+		return {
+			categories: [],
+			loading: false
+		}
+	},
+	
+	onLoad() {
+		this.loadCategories()
+	},
+	
+	methods: {
+		async loadCategories() {
+			this.loading = true
+			try {
+				const res = await api.getAllCategory()
+				if (res.data && res.data.categories) {
+					this.categories = res.data.categories
+				}
+			} catch (error) {
+				console.error('获取类目列表失败:', error)
+				uni.showToast({
+					title: '获取类目失败',
+					icon: 'none'
+				})
+			} finally {
+				this.loading = false
+			}
+		},
+		
+		getCategoryIcon(category) {
+			const iconMap = {
+				'传统文化': '🏮',
+				'动物世界': '🦁',
+				'地理自然': '🌍',
+				'文学历史': '📜',
+				'文学成语': '📖',
+				'生活常识': '🏠',
+				'科技常识': '🔬',
+				'美食文化': '🍜',
+				'自然科学': '🧬'
+			}
+			return iconMap[category] || '📚'
+		},
+		
+		handleCategory(item) {
+			uni.navigateTo({
+				url: `/pages/category-question/category-question?categorySn=${item.sn}&categoryName=${item.category}`
+			})
+		}
+	}
+}
+</script>
+
+<style scoped>
+.container {
+	padding: 40rpx;
+}
+
+.loading {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 60vh;
+}
+
+.loading-text {
+	font-size: 32rpx;
+	color: #999;
+}
+
+.category-list {
+	display: flex;
+	flex-direction: column;
+	gap: 30rpx;
+}
+
+.category-item {
+	display: flex;
+	align-items: center;
+	background: #ffffff;
+	border-radius: 20rpx;
+	padding: 40rpx;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+	transition: all 0.3s;
+}
+
+.category-item:active {
+	transform: scale(0.98);
+	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
+}
+
+.category-icon {
+	font-size: 60rpx;
+	margin-right: 30rpx;
+}
+
+.category-name {
+	flex: 1;
+	font-size: 32rpx;
+	font-weight: bold;
+	color: #333;
+}
+
+.arrow {
+	font-size: 50rpx;
+	color: #ccc;
+	font-weight: bold;
+}
+
+.empty-state {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 60vh;
+}
+
+.empty-text {
+	font-size: 32rpx;
+	color: #999;
+	margin-bottom: 40rpx;
+}
+
+.refresh-btn {
+	width: 200rpx;
+	height: 70rpx;
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	color: #ffffff;
+	font-size: 28rpx;
+	border-radius: 35rpx;
+	border: none;
+}
+</style>