feat: 页码

src/api/product/goodsApi.ts

@@ -7,6 +7,7 @@
 import { defHttp } from '/@/utils/http/axios';
 import { ApiResponse } from '../model/baseModel';
 import { Goods, GoodsParams, GoodsPageResult, GoodsPageResponse, GoodsResponse } from '../model/goods';
+import { GoodsList } from '/@/views/store/goodsList/type';
 
 const baseApi = '/v1/product/goods';
 
@@ -67,3 +68,9 @@ export const batchUpdate = (entityList: Array<Goods>) =>
  * 查询数量
  */
 export const count = (params?: GoodsParams) => defHttp.get<Number>({ url: `${baseApi}/count`, params });
+
+/**
+ * 查询商品分类下所有商品
+ */
+export const goodsList = (params?: GoodsParams) =>
+  defHttp.get<GoodsList>({ url: `${baseApi}/line/goods/list`, params });

src/views/product/goods-category/type.ts

 export interface DataItem {
-  children?: DataItem[];
+  children: DataItem[];
   name: string;
   id: number;
   disabled?: boolean;

src/views/store/components/pagination.vue

+<template>
+  <a-pagination
+    v-model:current="pageNum"
+    v-model:pageSize="pageSize"
+    :total="total"
+    showQuickJumper
+    :pageSizeOptions="[10, 50, 100]"
+    size="small"
+    :showTotal="(total) => `共 ${total} 条数据`"
+    @change="handleChange"
+    @showSizeChange="handleSizeChange"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { emit } from 'process';
+  import { ref, defineProps, defineEmits } from 'vue';
+  const props = defineProps(['pageNum', 'pageSize', 'total']);
+  const emits = defineEmits(['update:pageNum', 'update:pageSize']);
+  const handleChange = (page, pageSize) => {
+    emits('update:pageNum', page);
+  };
+  const handleSizeChange = (current, size) => {
+    emits('update:pageNum', 1);
+    emits('update:pageSize', size);
+  };
+</script>
+
+<style lang="less" scoped>
+  .ant-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+</style>

src/views/store/goodsList/index.vue

@@ -11,7 +11,7 @@
       <div class="classify">
         <div class="title">全部分类</div>
         <div class="classifyWrap">
-          <ul class="classifyList">
+          <ul class="classifyList borderBottom">
             <li class="item" @click="handleChangeLevelFour('all')" :class="{ active: levelFourActiveKey === 'all' }"
               >全部</li
             >
@@ -39,6 +39,17 @@
           </ul>
         </div>
       </div>
+      <div class="goodsWrap">
+        <ul class="goodsList">
+          <li class="goods" v-for="item in goodsList" :key="item.id">
+            <div class="img">
+              <img :src="item.pic" alt="" />
+            </div>
+            <p class="title">{{ item.name }}</p>
+          </li>
+        </ul>
+        <Pagination v-model:pageNum="pageNum" v-model:pageSize="pageSize" v-model:total="total" @handleChange="" />
+      </div>
     </div>
   </div>
 </template>
@@ -52,11 +63,15 @@
   import { toNumber } from 'lodash';
   import { useUserStore } from '/@/store/modules/user';
   import { useNavTree } from '/@/hooks/myhooks/index';
+  import Pagination from '../components/pagination.vue';
   import { DataItem } from '/@/views/product/goods-category/type';
+  import { Goods } from '/@/views/store/goodsList/type';
+  import * as GoodsApi from '/@/api/product/goodsApi';
 
   const go = useGo();
   const route = useRoute();
   const navTree = useNavTree();
+  const userStore = useUserStore();
 
   const query = route.query;
   const navId = toNumber(query.nav); // 一级选择id
@@ -70,9 +85,15 @@
   const levelFiveActiveKey = ref<string | number>('all');
   const title = ref('');
 
-  const userStore = useUserStore();
   navList.value = userStore.getNavList;
 
+  const goodsList = ref<Goods[]>([]);
+  const pageNum = ref(1);
+  const pageSize = ref(10);
+  const total = ref(500);
+  const formQuery = { isAll: true, goodsCategoryId: tabItemId };
+
+  // 获取四五级分类列表
   const getGrandsonList = (arr: DataItem[]) => {
     arr.some((item) => {
       if (item.id === navId || item.id === tabId) {
@@ -92,20 +113,40 @@
   const handleChangeLevelFour = (item: DataItem | string) => {
     if (typeof item === 'string') {
       levelFourActiveKey.value = 'all';
+      levelFiveActiveKey.value = 'all';
+      levelFiveTree.value = [];
+      formQuery.goodsCategoryId = tabItemId;
+      getGoodsList();
     } else {
       levelFiveTree.value = item.children;
       levelFourActiveKey.value = item.id;
+      formQuery.goodsCategoryId = item.id;
+      getGoodsList();
     }
   };
 
   const handleChangeLevelFive = (item: DataItem | string) => {
     if (typeof item === 'string') {
       levelFiveActiveKey.value = 'all';
+      if (typeof levelFourActiveKey.value === 'number') {
+        formQuery.goodsCategoryId = levelFourActiveKey.value;
+        getGoodsList();
+      }
     } else {
       levelFiveActiveKey.value = item.id;
+      formQuery.goodsCategoryId = item.id;
+      getGoodsList();
     }
   };
 
+  // 获取商品分类下的商品
+  const getGoodsList = () => {
+    GoodsApi.goodsList(Object.assign({ pageSize: pageSize.value, pageNum: pageNum.value }, formQuery)).then((res) => {
+      total.value = res.total;
+      goodsList.value = res.records;
+    });
+  };
+
   watch(
     () => navActiveKey.value,
     (n) => {
@@ -115,6 +156,7 @@
 
   onMounted(() => {
     navTree(navList, getGrandsonList, 'getGrandsonList');
+    getGoodsList();
   });
 </script>
 
@@ -122,12 +164,19 @@
   .active {
     color: #1890ff;
   }
+
+  ul {
+    padding: 0;
+    margin: 0;
+  }
   .containe {
     padding: 30px;
     .contentWrap {
       padding: 30px;
       background: #fff;
       border-radius: 10px;
+      max-width: 1400px;
+      margin: 0 auto;
 
       .top {
         display: flex;
@@ -168,20 +217,54 @@
         .classifyWrap {
           flex: 1;
           .classifyList {
-            border-bottom: 1px solid rgb(214, 214, 214);
+            height: 50px;
+            line-height: 50px;
             padding-bottom: 10px;
             display: flex;
             justify-content: flex-start;
 
             .item {
-              margin-right: 10px;
+              font-size: 16px;
+              margin-right: 15px;
               cursor: pointer;
 
               &:hover {
-                color: rgb(129, 129, 129);
+                color: #1890ff;
               }
             }
           }
+
+          .borderBottom {
+            border-bottom: 1px solid rgb(214, 214, 214);
+          }
+        }
+      }
+
+      .goodsWrap {
+        .goodsList {
+          display: flex;
+          justify-content: flex-start;
+          flex-wrap: wrap;
+          .goods {
+            width: 25%;
+            padding: 20px 20px 5px 20px;
+            border: 1px solid rgb(214, 214, 214);
+
+            &:hover {
+              background: #eee;
+              cursor: pointer;
+            }
+
+            .img {
+              height: 285px;
+            }
+
+            .title {
+              text-align: center;
+              font-size: 17px;
+              margin-top: 20px;
+            }
+          }
         }
       }
     }

src/views/store/goodsList/type.ts

+export interface GoodsList {
+  current: number;
+  pages: number;
+  records: Goods[];
+  size: number;
+  total: number;
+}
+
+export interface Goods {
+  id: number;
+  pic: string;
+  name: string;
+}