<template>
? <view class="wallpaper-category">
? ? <custom-nav-bar title="分類列表"></custom-nav-bar>

? ? <!-- 分類展示 -->
? ? <scroll-view scroll-y class="category-scroll-view">
? ? ? <view class="category-grid">
? ? ? ? <view class="category-item"
? ? ? ? ? ? ? v-for="item in categoryList"
? ? ? ? ? ? ? :key="item._id"
? ? ? ? ? ? ? @click="goCategoryDetail(item)">
? ? ? ? ? <image class="category-image" :src="item.picurl" mode="aspectFill"></image>
? ? ? ? ? <text class="category-name">{{ item.name }}</text>
? ? ? ? </view>
? ? ? </view>
? ? </scroll-view>
? </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const categoryList = ref([])

// API配置
const API_CONFIG = {
? baseUrl: 'https://tea.qingnian8.com/api/bizhi',
? accessKey: '123921' // 請替換為您的實際access-key
}

// 請求封裝
const request = async (url, params = {}) => {
? try {
? ? const res = await uni.request({
? ? ? url: `${API_CONFIG.baseUrl}/${url}`,
? ? ? data: params,
? ? ? header: { 'access-key': API_CONFIG.accessKey },
? ? ? timeout: 8000
? ? })
? ? const response = res[1]?.data || res.data
? ? return response?.errCode === 0 ? response.data || [] : []
? } catch (e) {
? ? console.error(`請求${url}失敗`, e)
? ? return []
? }
}

const fetchCategories = async () => {
? const data = await request('classify')
? categoryList.value = data
}

const goCategoryDetail = (item) => {
? uni.navigateTo({
? ? url: `/pages/category/detail?id=${item._id}&name=${encodeURIComponent(item.name)}`
? })
}

onMounted(() => {
? fetchCategories()
})
</script>

<style scoped lang="scss">
.wallpaper-category {
? background-color: #f8f8f8;
? height: 100vh;
? display: flex;
? flex-direction: column;

? .category-scroll-view {
? ? flex: 1;
? ? padding: 20rpx 15rpx;
? }

? .category-grid {
? ? display: grid;
? ? grid-template-columns: repeat(2, 1fr);
? ? gap: 20rpx;

? ? .category-item {
? ? ? background: #fff;
? ? ? border-radius: 16rpx;
? ? ? overflow: hidden;
? ? ? box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
? ? ? text-align: center;

? ? ? .category-image {
? ? ? ? width: 100%;
? ? ? ? height: 200rpx;
? ? ? }

? ? ? .category-name {
? ? ? ? font-size: 28rpx;
? ? ? ? padding: 20rpx 0;
? ? ? ? color: #333;
? ? ? ? white-space: nowrap;
? ? ? ? overflow: hidden;
? ? ? ? text-overflow: ellipsis;
? ? ? }
? ? }
? }
}
</style>