汽车网站建设可行性分析网站整站优化公司
书接上回，我们来设计分类页，右键左侧项目管理器中的pages，在右键菜单选择新建页面
根据下面的图，设置相关内容
在左侧项目管理中，就会看到多出了category目录，目录下多出了category.uvue文件
修改category.uuvue文件
<template><view class="category"><!-- 一级分类 --><scroll-view class="category-level1" scroll-y><view class="category-level1-item" v-for="(item, index) in categoryLevel1List" :key="index":class="{ active: activeLevel1Index === index }" @click="handleLevel1Click(index)"><text>{{ item.name }}</text></view></scroll-view><!-- 二级分类 + 商品列表 --><view class="category-content"><!-- 二级分类 --><view class="category-level2"><view class="category-level2-item" v-for="(item, index) in categoryLevel2List" :key="index":class="{ active: activeLevel2Index === index }" @click="handleLevel2Click(index)"><text>{{ item.name }}</text></view></view><!-- 商品列表 --><view class="goods-list"><view class="goods-item" v-for="(item, index) in goodsList" :key="index"><image :src="item.imageUrl" mode="aspectFill" /><text class="goods-item-name">{{ item.name }}</text><text class="goods-item-price">￥{{ item.price }}</text></view></view></view></view>
</template><script>export default {data() {return {// 一级分类数据categoryLevel1List: [{ id: 1, name: '手机' },{ id: 2, name: '电脑' },{ id: 3, name: '家电' },{ id: 4, name: '服饰' }],// 当前选中一级分类索引activeLevel1Index: 0,// 二级分类数据categoryLevel2List: [],// 当前选中二级分类索引activeLevel2Index: 0,// 商品列表数据goodsList: []};},methods: {// 一级分类点击事件handleLevel1Click(index) {this.activeLevel1Index = index;// 根据一级分类 id 获取二级分类数据this.getCategoryLevel2List(this.categoryLevel1List[index].id);},// 二级分类点击事件handleLevel2Click(index) {this.activeLevel2Index = index;// 根据二级分类 id 获取商品列表数据this.getGoodsList(this.categoryLevel2List[index].id);},// 模拟获取二级分类数据async getCategoryLevel2List(level1Id) {// 模拟接口请求const mockData = {1: [{ id: 11, name: '智能手机' },{ id: 12, name: '老人手机' },{ id: 13, name: '游戏手机' },],2: [{ id: 21, name: '笔记本' },{ id: 22, name: '台式机' },{ id: 23, name: '平板电脑' }],3: [{ id: 31, name: '冰箱' },{ id: 32, name: '洗衣机' },{ id: 33, name: '空调' }],4: [{ id: 41, name: '男装' },{ id: 42, name: '女装' },{ id: 43, name: '童装' }]};this.categoryLevel2List = mockData[level1Id] || [];// 默认选中第一个二级分类this.handleLevel2Click(0);},// 模拟获取商品列表数据async getGoodsList(level2Id) {// 模拟接口请求const mockData = {11: [{ id: 111, name: 'iPhone 14', price: 5999, imageUrl: '