Vue3前端项目——商城类--分类页面的实现

1. 分类页面效果图如下图所示

2. 代码书写

----- 依赖vant移动端组件库

2.1 实现点击左边一级列表切换右边二级列表数据

--- 1. 左边列表添加点击事件，传入id

--- 2.点击切换重新发送请求，渲染页面

代码：

<template>
  <div class="category">
  
    <!-- 吸顶搜索框 -->
    <van-sticky>
      <div class="search">
        <van-search
          shape="round"
          background="#ffffff"
          placeholder="搜索商品,共239款好物"
        />
      </div>
    </van-sticky>

    <div class="category-container">
    
      <!-- 一级分类 -->
      <div class="category-left">
        <ul>
          <li
            :class="current === index ? 'active' : ''"
            class="item"
            v-for="(item, index) in categoryData.categoryList"
            :key="index"
            @click="onChangeList(index, item.id)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      
      <!-- 二级分类 -->
      <div class="category-right">
        <div class="banner">
          <van-image :src="categoryData.currentOne.banner_url"></van-image>
        </div>
        <div class="title">{{ categoryData.currentOne.name }}分类</div>
        <ul class="currentOne-list">
          <li
            class="item"
            v-for="item in categoryData.currentOne.subList"
            :key="item.id"
          >
            <van-image class="pic" :src="item.wap_banner_url"></van-image>
            <p class="name">{{ item.name }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { indexaction, currentaction } from "@/api/category/index.js";
import { onMounted, reactive, ref } from "vue";
import { getAssetsImageUrl } from "@/utils";
const categoryData = reactive({
  categoryList: [],  // 一级分类数据
  currentOne: {},   // 二级分类数据
});
const current = ref(0);
// 获取一级数据
const getListData = async () => {
  const res = await indexaction();
  console.log(res, "一级分类数据");
  categoryData.categoryList = res.categoryList;
  getSubCategory(categoryData.categoryList[0].id);
};

// 获取二级数据
const getSubCategory = async (id) => {
  const result = await currentaction({ id });
  console.log(result, "二级分类数据");
  categoryData.currentOne = result.data.currentOne;
};

onMounted(() => {
  //调用一级列表数据
  getListData();
});

// 点击事件
const onChangeList = (index, id) => {
  current.value = index;
  getSubCategory(id);
};
</script>