完成跳转

pages/goods/list/index.vue

@@ -13,9 +13,18 @@
         <p class="main__nav-crumbs">
           全部商品<i class="el-icon-arrow-right"></i>开发书籍
         </p>
-        <!-- <div class="main__nav-sort flex flex-middle">
+        <div class="main__nav-sort flex flex-middle" v-if="levelType == 1">
           <span class="main__nav-sort-txt">分类 :</span>
-        </div> -->
+          <span
+            class="main__nav-sort-btn"
+            :class="levelActive == index ? 'main__nav-sort-active' : ''"
+            @click="onLevelClick(index)"
+            v-for="(item, index) in categoryOneList"
+            :key="item.id"
+          >
+            {{ item.name }}
+          </span>
+        </div>
         <div class="main__nav-sort flex flex-middle">
           <span class="main__nav-sort-txt">排序 :</span>
           <span
@@ -58,18 +67,27 @@
   </div>
 </template>
 <script>
-import { ApiGetGoodsList } from "@/plugins/api/goods";
+import {
+  ApiGetGoodsList,
+  ApiGetCategoryOneList,
+  ApiGetCategoryTwoAndGoods,
+} from "@/plugins/api/goods";
 import Sort from "./module/SortItem.vue";
 import UiGoodsItem from "@/components/UiGoodsItem.vue";
 export default {
   components: { Sort, UiGoodsItem },
   data() {
     return {
+      isRecommend: false,
       navActive: 0,
+      levelActive: 0,
       listData: [],
       total: 0,
       // 0:综合,1:desc,2:asc,3:上新
       sortType: 0,
+      categoryOneList: [],
+      levelType: "",
+      levelId: "",
       params: {
         length: 20,
         pageIndex: 1,
@@ -80,10 +98,31 @@ export default {
     };
   },
   async created() {
-    this.params.name = this.$route.query.keyword;
-    this.getGoodsListData();
+    this.init();
   },
   methods: {
+    init() {
+      this.params.name = this.$route.query.keyword;
+      this.levelType = this.$route.query.levelType || "";
+      this.levelId = this.$route.query.id || "";
+      this.levelType == 2 ? (this.params.categoryId = this.levelId) : "";
+      this.isRecommend = this.levelId == "recommend" ? true : false;
+      if (this.levelType == 1) {
+        this.getCategoryTwoAndGoods();
+      } else {
+        this.getGoodsListData();
+      }
+    },
+    async getCategoryOneList() {
+      let res = await ApiGetCategoryOneList();
+      this.categoryOneList = res.result;
+    },
+    async getCategoryTwoAndGoods() {
+      let res = await ApiGetCategoryTwoAndGoods({ categoryId: this.levelId });
+      this.categoryOneList = res.result;
+      this.getGoodsListData();
+      console.log(res);
+    },
     onNavClick(i) {
       console.log(i);
       let vm = this;
@@ -91,6 +130,11 @@ export default {
       vm.navActive = i;
       vm.getGoodsListData();
     },
+    onLevelClick(i) {
+      let vm = this;
+      vm.levelActive = i;
+      vm.getGoodsListData();
+    },
     onSort() {
       let vm = this;
       vm.navActive = 1;
@@ -114,6 +158,9 @@ export default {
           vm.$set(vm.params, "order", "create_time");
           break;
       }
+      if (vm.levelType == 1) {
+        vm.params.categoryId = vm.categoryOneList[vm.levelActive].id;
+      }
       let res = await ApiGetGoodsList(vm.params);
       if (res.error) {
         vm.$message.error(res.error.message);
@@ -133,8 +180,7 @@ export default {
     //监听路由
     //监听路由的categoryId属性的数据变化
     "$route.query.keyword": function () {
-      this.params.name = this.$route.query.keyword;
-      this.getGoodsListData();
+      this.init();
     },
   },
 };