search product

src/components/loadMore.vue

@@ -10,7 +10,7 @@
         layout="prev, pager, next,total, jumper"
         :total="count"
         :page-size="rows"
-        @current-change="currentChange"
+        @current-change="page => load(page)"
       />
     </template>
     <template v-else-if="count === 0 && !hideTip">
@@ -47,37 +47,27 @@ export default class extends Vue {
   @PropSync("total") totalSync!: number;
 
   private count: number | null = null;
-  private page = 0;
   private items: any[] = [];
   @Watch("params", { immediate: true, deep: true })
   reload() {
-    if (this.page === 1) return this.load();
-    this.page = 1;
+    if (!this.params) return;
+    return this.load(1);
   }
-  @Watch("count", { immediate: true })
+  @Watch("count")
   totalChange() {
     this.totalSync = this.count || 0;
   }
-  @Watch("page", { immediate: true })
-  async load() {
+  @Emit("getItems")
+  async load(pageNum: number) {
     const [err, { rows = [], total = 0 }] = await this.$post<IPageResult>(
       this.url,
       Object.assign({}, this.params, {
-        pageNum: this.page,
+        pageNum,
         pageSize: this.rows
       })
     );
-    if (err) console.error("列表加载失败");
-    // if (err) this.$message.error("列表加载失败"); //throw Error("loadMore fail");
     this.count = total;
-    this.setItems(rows);
-  }
-  currentChange(page: number) {
-    this.page = page;
-  }
-  @Emit("getItems")
-  private setItems(items: any[]) {
-    return (this.items = items);
+    return (this.items = rows);
   }
 }
 </script>

src/components/menu.vue

@@ -3,14 +3,23 @@
     <h3 v-if="showHeader">商品分类</h3>
     <ul class="menuUl">
       <li v-for="{ id, title } in items" :key="id" class="menuli">
-        <div class="dalei">
-          <span class="menuLine"></span>{{ title }}
+        <div
+          class="dalei"
+          :class="{ curr: currpIndex === id }"
+          @click="() => setCurrIndex(id)"
+        >
+          <div />
+          {{ title }}
           <i class="el-icon-arrow-right"></i>
         </div>
-
         <div class="menuCon">
           <ul class="menuConUl">
-            <li v-for="{ id: sid, title: st } in getSub(id)" :key="sid">
+            <li
+              v-for="{ id: sid, title: st } in getSub(id)"
+              :key="sid"
+              :class="{ curr: currIndex === sid }"
+              @click="() => setCurrIndex(sid, id)"
+            >
               {{ st }}
             </li>
           </ul>
@@ -20,10 +29,12 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
+import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
 import menu from "@/store/modules/menu";
 @Component
 export default class extends Vue {
+  private currIndex = 0;
+  private currpIndex = 0;
   @Prop(Boolean) private showHeader!: boolean;
   get items() {
     return menu.pList;
@@ -31,6 +42,11 @@ export default class extends Vue {
   getSub(pid: number) {
     return menu.subList(pid);
   }
+  @Emit("change")
+  setCurrIndex(id: number, pid = id) {
+    [this.currIndex, this.currpIndex] = [id, pid];
+    return id;
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -55,36 +71,36 @@ export default class extends Vue {
       font-size: 1.4rem;
       color: #333;
       border-bottom: 0.1rem solid #e5e5e5;
-      padding-right: 1.6rem;
+
       box-sizing: border-box;
+
       &:hover {
-        background: #ffddd3;
-        a {
-          color: #fd5522;
-        }
-        i {
-          color: #fd5522;
-        }
-        .menuLine {
-          background: #fd5522;
-        }
         .menuCon {
           display: block;
         }
       }
       .dalei {
         cursor: pointer;
-      }
-      .menuLine {
-        display: inline-block;
-        height: 1.4rem;
-        width: 0.2rem;
-        background: #fff;
-        margin-right: 1.6rem;
-      }
-      i {
-        float: right;
-        margin-top: 2rem;
+        padding-right: 1.6rem;
+        &.curr,
+        &:hover {
+          background: #ffddd3;
+          color: #fd5522;
+          div {
+            background: #fd5522;
+          }
+        }
+        div {
+          display: inline-block;
+          height: 1.4rem;
+          width: 0.2rem;
+          background: #fff;
+          margin-right: 1.6rem;
+        }
+        i {
+          float: right;
+          margin-top: 2rem;
+        }
       }
     }
   }
@@ -110,6 +126,7 @@ export default class extends Vue {
         color: #333;
         margin-right: 1rem;
         cursor: pointer;
+        &.curr,
         &:hover {
           color: #fd5522;
         }

src/router/index.ts

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

src/views/mall/index.vue

@@ -105,7 +105,7 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
+import { Component, Vue, Watch, Prop } from "vue-property-decorator";
 import menu from "@/store/modules/menu";
 import loadMore from "@/components/loadMore.vue";
 @Component({
@@ -113,16 +113,13 @@ import loadMore from "@/components/loadMore.vue";
 })
 export default class extends Vue {
   private currIndex = 0;
-  private params = {
-    typeId: 0,
-    // orderByColumn: "zhpx",
-    isAsc: "" //asc desc
-  };
+  private params = {};
   private search = {
     name: "",
     beginPrice: "",
     endPrice: ""
   };
+  @Prop(String) private kw!: string;
   get items() {
     return [{ id: 0, title: "全部" }, ...menu.pList];
   }
@@ -138,7 +135,7 @@ export default class extends Vue {
     return [{ title, arr: menu.subList(id) }];
   }
   paramsChange(x: IAny) {
-    Object.assign(this.params, x);
+    this.params = { ...this.params, ...x };
   }
 }
 </script>
@@ -199,6 +196,7 @@ export default class extends Vue {
           .item {
             padding: 0.2rem 1.5rem;
             margin-left: 3rem;
+            cursor: pointer;
             &.curr {
               background: rgb(253, 85, 34);
               border-radius: 20px;

src/views/shops/details/index.vue

@@ -15,9 +15,12 @@
           class="input"
           placeholder="请输入关键词"
           prefix-icon="el-icon-search"
+          v-model="searchVal"
         />
-        <div class="fr qz">搜全站</div>
-        <div class="fr bd">搜本店</div>
+        <router-link class="fr qz" :to="`/mall/${searchVal}`"
+          >搜全站</router-link
+        >
+        <div class="fr bd" @click="search">搜本店</div>
       </div>
     </div>
     <div class="navs ">
@@ -33,7 +36,9 @@
         </router-link>
       </div>
     </div>
-    <router-view :shopInfo="shopInfo" />
+    <keep-alive>
+      <router-view :shopInfo="shopInfo" :keyWord="keyWord" />
+    </keep-alive>
   </div>
 </template>
 <script lang="ts">
@@ -41,14 +46,21 @@ import { Component, Vue, Watch, Prop } from "vue-property-decorator";
 @Component
 export default class extends Vue {
   private shopInfo: IAny = {};
+  private searchVal = "";
+  private keyWord = "";
   @Prop(String)
   private sid!: string;
   @Watch("sid", { immediate: true })
   async load(id: number) {
+    this.searchVal = this.keyWord = "";
     const [err, data] = await this.$post("/company/details", { id });
     if (err) return;
     this.shopInfo = data;
   }
+  search() {
+    this.keyWord = this.searchVal;
+    this.$router.push(`/shop/${this.shopInfo.id}`);
+  }
   async gz() {
     const [err, data] = await this.$post("/member/follow/addMemberFollow", {
       companyId: this.sid
@@ -100,12 +112,13 @@ export default class extends Vue {
         width: 440px;
         height: 40px;
       }
-      div {
+      .fr {
         width: 90px;
         height: 40px;
         line-height: 40px;
         text-align: center;
         border-radius: 4px;
+        cursor: pointer;
         &.bd {
           background: rgb(253, 85, 34);
           color: #fff;

src/views/shops/details/products.vue

@@ -6,22 +6,28 @@
     <div class="container">
       <el-row :gutter="20">
         <el-col :span="4">
-          <mymenu showHeader />
+          <mymenu showHeader @change="typeId => (params.typeId = typeId)" />
         </el-col>
         <el-col :span="20">
           <div class="items">
-            <div class="item" v-for="x in 8" :key="x">
-              <div class="img">
-                <img src="@assets/shangpin.png" alt="" />
+            <load-more
+              url="/goods/info/page"
+              :params="params"
+              v-slot="{
+                item: { id, name, companyId, price, cover, companyName }
+              }"
+            >
+              <div class="item">
+                <div class="img">
+                  <img :src="`${$basePath}${cover}`" />
+                </div>
+                <span>{{ name }}</span>
+                <div class="pay">
+                  <span>¥ {{ price }}</span>
+                  <router-link :to="`${id}`"> 立即购买 </router-link>
+                </div>
               </div>
-              <span>多功能钢制文件柜</span>
-              <div class="pay">
-                <span>¥ 1800</span>
-                <router-link to="2">
-                  立即购买
-                </router-link>
-              </div>
-            </div>
+            </load-more>
           </div>
         </el-col>
       </el-row>
@@ -29,12 +35,26 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
+import { Component, Vue, Prop, Watch } from "vue-property-decorator";
 import mymenu from "@/components/menu.vue";
+import loadMore from "@/components/loadMore.vue";
 @Component({
-  components: { mymenu }
+  components: { mymenu, loadMore }
 })
-export default class extends Vue {}
+export default class extends Vue {
+  private params: IAny | null = null;
+  @Prop() private shopInfo!: IAny;
+  @Prop(String) private keyWord!: string;
+  @Watch("shopInfo", { immediate: true })
+  shopChange({ id: companyId }: IAny) {
+    if (!companyId) return;
+    this.params = { companyId, typeId: 0, name: this.keyWord };
+  }
+  @Watch("keyWord")
+  search(name: string) {
+    this.params = { ...this.params, name };
+  }
+}
 </script>
 <style lang="scss" scoped>
 .products {
@@ -47,6 +67,10 @@ export default class extends Vue {}
     font-weight: bold;
     text-align: center;
     background: rgb(220, 220, 220);
+    img {
+      width: 100%;
+      height: 100%;
+    }
   }
   .container {
     padding: 20px 0;

src/views/shops/details/profile.vue

@@ -46,9 +46,10 @@ export default class extends Vue {
   @Prop() private shopInfo!: IAny;
 
   get companyType() {
-    return dict.companyType.find(
+    const x = dict.companyType.find(
       ({ value }) => value === this.shopInfo.companyType
-    )!.key;
+    );
+    return x && x.key;
   }
 }
 </script>