category

src/components/category.vue

@@ -31,18 +31,29 @@ import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
 import menu from "@/store/modules/menu";
 @Component
 export default class extends Vue {
-  private currSid = 0;
-  private currPid = 0;
+  @Prop(Number)
+  private currId!: number;
   @Prop(Boolean) private showHeader!: boolean;
   get items() {
     return menu.pList;
   }
+  get info() {
+    return menu.info(this.currId);
+  }
+  get currPid() {
+    if (!this.info) return 0;
+    return this.info.pId || this.info.id;
+  }
+  get currSid() {
+    if (!this.info) return 0;
+    return this.info.id;
+  }
+
   getSub(pid: number) {
     return menu.subList(pid);
   }
   @Emit("change")
   setCurrIndex(id: number, pid = id) {
-    [this.currSid, this.currPid] = [id, pid];
     return { id, pid };
   }
 }

src/store/modules/menu.ts

@@ -21,5 +21,9 @@ class Menu extends VuexModule {
   get subList() {
     return (pid: number) => this.list.filter(({ pId }) => pId === pid);
   }
+
+  get info() {
+    return (id: number) => this.list.find(x => x.id === id);
+  }
 }
 export default getModule(Menu);

src/views/shops/details/products.vue

@@ -3,10 +3,14 @@
     <div class="banner">
       <img src="@assets/cjxq-banner.png" alt="" />
     </div>
-    <div class="container">
+    <div class="container" v-if="params">
       <el-row :gutter="20">
         <el-col :span="4">
-          <category showHeader @change="({ id }) => (params.typeId = id)" />
+          <category
+            showHeader
+            :currId="params.typeId"
+            @change="({ id }) => (params.typeId = id)"
+          />
         </el-col>
         <el-col :span="20">
           <div class="items">