163 lines
2.9 KiB
Vue
163 lines
2.9 KiB
Vue
<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>
|