mall-kw

src/layout/components/header.vue

@@ -28,7 +28,7 @@
           <div class="line"></div>
 
           <div class="spfb">
-            <a :href="managerUrl">
+            <a target="_blank" :href="managerUrl">
               <span class="font_family">&#xe603;</span>
               商品发布
             </a>
@@ -58,9 +58,12 @@
           >
             <i slot="prefix" class="el-input__icon el-icon-search"></i>
           </el-input>
-          <router-link class="searchBtn" :to="`${currTarget}/${searchVal}`">
+          <span class="searchBtn" @click="search">
             搜索
-          </router-link>
+          </span>
+          <!-- <router-link class="searchBtn" :to="`${currTarget}/${searchVal}`">
+            搜索
+          </router-link> -->
         </div>
       </div>
       <div class="navs">
@@ -103,6 +106,11 @@ export default class extends Vue {
   get managerUrl() {
     return process.env.VUE_APP_MANAGER_URL;
   }
+  search() {
+    const url = `${this.currTarget}/${this.searchVal}`;
+    if (this.$route.path !== url) return this.$router.push(url);
+    this.$emit("reload");
+  }
 }
 </script>
 
@@ -122,17 +130,18 @@ export default class extends Vue {
     .container {
       font-size: 1.2rem;
       .home {
-        margin: 0 5px;
+        margin-left: 10px;
         .font_family {
           color: #fd5522;
+          margin-right: 3px;
         }
       }
+      .userinfo,
       .login {
         a {
           color: #fd5522;
         }
-        margin-right: 2rem;
-        margin-left: 2rem;
+        margin: 0 15px;
         display: inline-block;
       }
       .register {
@@ -218,6 +227,7 @@ export default class extends Vue {
           color: #fff;
           border: 0;
           border-radius: 0;
+          cursor: pointer;
         }
       }
     }

src/layout/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="layout">
-    <y-header />
-    <keep-alive exclude="shopEnterAdd,infoList">
+    <y-header @reload="reload" />
+    <keep-alive exclude="shopEnterAdd,infoList" v-if="showView">
       <router-view class="main" />
     </keep-alive>
     <y-footer />
@@ -17,7 +17,15 @@ import yFooter from "./components/footer.vue";
     yFooter
   }
 })
-export default class extends Vue {}
+export default class extends Vue {
+  private showView = true;
+
+  reload() {
+    console.log("reload");
+    this.showView = false;
+    this.$nextTick(() => (this.showView = true));
+  }
+}
 </script>
 <style lang="scss" scoped>
 .layout {

src/router/index.ts

@@ -14,7 +14,7 @@ export const nav: RouteConfig[] = [
     meta: { title: "home" }
   },
   {
-    path: "/mall/:kw?",
+    path: "/mall/:q?",
     props: true,
     component: () => import("../views/mall/index.vue"),
     meta: { title: "mall" }

src/views/home/index.vue

@@ -3,7 +3,9 @@
     <div class="container">
       <el-row class="mt2rem" :gutter="20">
         <el-col :span="4">
-          <category @change="e => $router.push({ path: `/mall`, query: e })" />
+          <category
+            @change="({ id, pid }) => $router.push(`/mall/-${id}-${pid}`)"
+          />
         </el-col>
         <el-col :span="14">
           <el-carousel class="bannerD marquee">

src/views/mall/index.vue

@@ -123,18 +123,19 @@ export default class extends Vue {
     beginPrice: "",
     endPrice: ""
   };
-  @Prop(String) private kw!: string;
-
-  activated() {
-    const { id = 0, pid = 0 } = this.$route.query;
+  @Prop(String) private q!: string;
+  @Watch("q", { immediate: true })
+  qChange() {
+    const [kw, id = 0, pid = 0] = (this.q || "").split("-");
     this.currPid = Number(pid) | 0;
     this.params = {
-      name: this.kw,
+      name: this.search.name = kw,
       orderByColumn: "",
       isAsc: "asc",
       typeId: Number(id) | 0
     };
   }
+
   get items() {
     return [{ id: 0, title: "全部" }, ...menu.pList];
   }