home+info

.env.development

@@ -1,2 +1,2 @@
-VUE_APP_Target=http://182.92.160.141:9002/
+VUE_APP_Target=http://192.168.100.254:10002/
 VUE_APP_BASE_API=/api/

package.json

@@ -13,6 +13,7 @@
     "element-ui": "^2.13.0",
     "js-cookie": "^2.2.1",
     "js-md5": "^0.7.3",
+    "lodash": "^4.17.15",
     "vue": "^2.6.10",
     "vue-class-component": "^7.0.2",
     "vue-i18n": "^8.15.3",
@@ -24,6 +25,7 @@
   "devDependencies": {
     "@types/js-cookie": "^2.2.4",
     "@types/js-md5": "^0.4.2",
+    "@types/lodash": "^4.14.149",
     "@types/qs": "^6.9.0",
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-plugin-eslint": "^4.1.0",
@@ -42,4 +44,4 @@
     "typescript": "~3.5.3",
     "vue-template-compiler": "^2.6.10"
   }
-}
+}

src/components/index.ts

@@ -0,0 +1,22 @@
+import Vue from "vue";
+import { upperFirst, camelCase } from "lodash";
+
+const requireComponent = require.context("./", false, /\w+\.vue$/);
+
+requireComponent.keys().forEach(fileName => {
+  // 获取组件配置
+  const componentConfig = requireComponent(fileName);
+
+  // 获取组件的 PascalCase 命名
+  const componentName = upperFirst(
+    camelCase(
+      // 获取和目录深度无关的文件名
+      fileName
+        .split("/")
+        .pop()!
+        .replace(/\.\w+$/, "")
+    )
+  );
+  // 全局注册组件
+  Vue.component(componentName, componentConfig.default || componentConfig);
+});

src/components/loadMore.vue

@@ -39,8 +39,11 @@ interface IPageResult {
 export default class extends Vue {
   @Prop({ required: true })
   private readonly url!: string;
-  @Prop(Object)
-  params: object | undefined;
+  @Prop({
+    type: Object,
+    default: () => ({})
+  })
+  params!: IAny | null;
   @Prop({ default: 10 })
   private readonly rows!: number;
   @Prop(Boolean) private hideTip!: boolean;
@@ -80,6 +83,7 @@ export default class extends Vue {
   }
   .pagination {
     text-align: right;
+    margin-top: 2rem;
   }
   .noneData {
     padding-top: 5rem;

src/components/routerLink.vue

@@ -1,22 +0,0 @@
-<template>
-  <a v-if="!to.startsWith('/')" :href="to" :target="target">
-    <slot></slot>
-  </a>
-  <router-link v-else v-bind="vProps">
-    <slot></slot>
-  </router-link>
-</template>
-<script lang="ts">
-import { Component, Vue, Prop } from "vue-property-decorator";
-@Component
-export default class extends Vue {
-  @Prop({
-    required: true
-  })
-  private to!: string;
-  @Prop({ default: "_self" }) target!: string;
-  get vProps() {
-    return { ...this.$props, ...this.$attrs };
-  }
-}
-</script>

src/components/tab.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="tab">
     <span
-      v-for="({ title }, index) in Items"
-      :key="`tab-${index}`"
-      @click="e => click(e, index)"
-      :class="{ curr: aIndex === index }"
+      v-for="(item, i) in Items"
+      :key="`tab-${i}`"
+      @click="e => click(e, i)"
+      :class="{ curr: index === i }"
       ref="tab"
     >
-      {{ title }}
+      {{ item }}
     </span>
     <div
       class="bar"
@@ -16,53 +16,55 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Prop, Emit } from "vue-property-decorator";
+import {
+  Component,
+  Vue,
+  Prop,
+  Emit,
+  Model,
+  Watch,
+  PropSync
+} from "vue-property-decorator";
 @Component
 export default class extends Vue {
-  @Prop({
-    required: true
-  })
-  private arr!: any[];
-  private aIndex = 0;
+  @PropSync("currIndex")
+  private index!: number;
+  @Prop()
+  private titles!: any;
   private barLeft = 0;
   private barWidth = 0;
   mounted() {
-    (this.$refs.tab as HTMLElement[])[0].click();
+    (this.$refs.tab as HTMLElement[])[this.index].click();
   }
   get Items() {
-    if (this.arr instanceof Array) return this.arr;
-    if (typeof this.arr === "string")
-      return (this.arr as string).split(",").map(title => ({ title }));
+    if (this.titles instanceof Array) return this.titles;
+    if (typeof this.titles === "string")
+      return (this.titles as string).split(",");
     return [];
   }
-  @Emit("click")
   click({ target }: MouseEvent, index: number) {
-    this.aIndex = index;
-    const { offsetWidth, offsetLeft } = target as HTMLElement;
-    this.barLeft = offsetLeft;
-    this.barWidth = offsetWidth;
-    return {
-      index,
-      item: this.Items[index]
-    };
+    const {
+      offsetWidth: barWidth,
+      offsetLeft: barLeft
+    } = target as HTMLElement;
+    Object.assign(this, { barWidth, barLeft, index });
   }
 }
 </script>
 <style lang="scss" scoped>
 .tab {
   border-bottom: 1px solid #e4e7ed;
-  margin-bottom: 2rem;
-  padding: 0.5rem 0;
+  padding: 1rem;
   position: relative;
   span {
-    font-size: 2rem;
+    font-size: 1.6rem;
     font-weight: bolder;
     color: rgb(51, 51, 51);
     margin-right: 40px;
     cursor: pointer;
     &.hover,
     &.curr {
-      color: #c52829;
+      color: #fd5522;
     }
   }
   .bar {
@@ -70,7 +72,7 @@ export default class extends Vue {
     bottom: 0;
     left: 0;
     height: 0.2rem;
-    background: #c52829;
+    background: #fd5522;
     transition: all 0.5s;
   }
 }

src/layout/components/header.vue

@@ -72,7 +72,7 @@
 </template>
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
-import langSelect from "@/components/LangSelect.vue";
+import langSelect from "./LangSelect.vue";
 import { nav } from "@/router";
 import user from "@/store/modules/user";
 @Component({
@@ -82,7 +82,10 @@ export default class extends Vue {
   private homeSearchVal = "";
   private homeSearchOption = "1";
   get nav() {
-    return nav.map(({ path: url, meta: { title } }) => ({ url, title }));
+    return nav.map(({ path, meta: { title } }) => ({
+      url: path.replace(/\/:\w+\??$/, ""), //去除动态路由(尾部)
+      title
+    }));
   }
   get showHeader() {
     return !this.$route.matched.some(

src/main.ts

@@ -7,6 +7,7 @@ import "./styles/index.scss";
 import request from "./utils/request";
 import message from "./utils/message";
 import i18n from "@/lang";
+import "@/components";
 Vue.use(elementUI, {
   i18n: (key: string, value: string) => i18n.t(key, value)
 });

src/router/index.ts

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

src/styles/index.scss

@@ -79,6 +79,9 @@ html {
     .relative {
       position: relative;
     }
+    .mt2rem {
+      margin-top: 2rem;
+    }
     a {
       text-decoration: none;
       color: #333;

src/views/home/index.vue

@@ -3,18 +3,12 @@
     <div class="container">
       <el-row class="mt2rem" :gutter="20">
         <el-col :span="4">
-          <mymenu></mymenu>
+          <category />
         </el-col>
         <el-col :span="14">
-          <el-carousel class="bannerD marquee" :autoplay="false">
-            <el-carousel-item>
-              <img class="banner" src="@assets/lunbo1.png" att />
-            </el-carousel-item>
-            <el-carousel-item>
-              <img class="banner" src="@assets/lunbo2.png" att />
-            </el-carousel-item>
-            <el-carousel-item>
-              <img class="banner" src="@assets/lunbo3.png" att />
+          <el-carousel class="bannerD marquee">
+            <el-carousel-item v-for="x in 3" :key="`banner${x}`">
+              <img class="banner" :src="require(`@assets/lunbo${x}.png`)" />
             </el-carousel-item>
           </el-carousel>
         </el-col>
@@ -22,15 +16,11 @@
           <div class="loginDiv">
             <div class="txDiv">
               <img
-                v-if="loginAccount == ''"
-                src="@assets/touxiang01.png"
-                alt=""
+                :src="require(`@assets/touxiang0${userName ? '2' : '1'}.png`)"
               />
-              <img v-else src="@assets/touxiang02.png" alt="" />
             </div>
-            <div class="username" v-if="loginAccount == ''">您还未登录哦！</div>
-            <div class="username" v-else>{{ loginAccount }}</div>
-            <div class="btnDiv" v-if="loginAccount == ''">
+            <div class="username">{{ userName || "您还未登录哦！" }}</div>
+            <div class="btnDiv" v-if="!userName">
               <router-link to="/login">
                 <el-button class="leftBtn">登录</el-button>
               </router-link>
@@ -48,11 +38,7 @@
                 ></span>
               </router-link>
             </div>
-            <div
-              class="notice"
-              v-for="item in noticeListTzgg"
-              :key="item.noticeId"
-            >
+            <div class="notice" v-for="item in notices[0]" :key="item.noticeId">
               <router-link :to="`/news/newsDetail?noticeId=${item.noticeId}`">
                 {{ item.noticeTitle }}
               </router-link>
@@ -119,7 +105,7 @@
         <router-link
           :to="`/shop/${item.companyId}/${item.id}`"
           class="product"
-          v-for="item in hotlistArr"
+          v-for="item in products"
           :key="item.id"
         >
           <div class="rmspItem">
@@ -152,21 +138,27 @@
       <div class="partTitle"><span class="orangeLine"></span>需求供应</div>
       <el-row :gutter="20" class="xqgy">
         <el-col :span="4">
-          <mymenu></mymenu>
+          <category />
         </el-col>
-        <el-col :span="10">
+        <el-col :span="10" v-for="(info, index) in infos" :key="`info${index}`">
           <div class="xqDiv">
             <div class="xqTitle">
-              <img src="@assets/xuqiu.png" alt />需求
-              <router-link to="/info?active=demand">
+              <img
+                :src="
+                  require(`@assets/${index ? 'gongyingshang' : 'xuqiu'}.png`)
+                "
+                alt
+              />{{ index ? "供应商" : "需求" }}
+              <router-link :to="`/info?active=${index ? 'supply' : 'demand'}`">
                 <span class="more"
                   >more<i class="el-icon-d-arrow-right"></i
                 ></span>
               </router-link>
             </div>
+
             <router-link
               :to="`/info/buyDetail?id=${item.id}`"
-              v-for="item in demandList"
+              v-for="item in info"
               :key="item.id"
             >
               <div class="xq">
@@ -176,95 +168,41 @@
             </router-link>
           </div>
         </el-col>
-        <el-col :span="10">
-          <div class="xqDiv">
-            <div class="xqTitle">
-              <img src="@assets/gongyingshang.png" alt />供应商
-              <router-link to="/info?active=supply">
-                <span class="more"
-                  >more<i class="el-icon-d-arrow-right"></i
-                ></span>
-              </router-link>
-            </div>
-            <router-link
-              :to="`/info/supplyDetail?id=${item.id}`"
-              v-for="item in supplyList"
-              :key="item.id"
-            >
-              <div class="xq">
-                <div class="con">【供应】{{ item.supplyTitle }}</div>
-                <div class="date">{{ item.releaseTime }}</div>
-              </div>
-            </router-link>
-          </div>
-        </el-col>
       </el-row>
       <!-- 广告位 -->
       <div class="ggzw bg-88 mt2rem">智能家具保险柜广告占位</div>
       <el-row :gutter="20">
-        <el-col :span="12">
+        <el-col
+          :span="12"
+          v-for="([item, ...items], index) in notices.slice(1)"
+          :key="`notices${index}`"
+        >
           <div class="partTitle">
-            <span class="orangeLine"></span>行业资讯
+            <span class="orangeLine"></span
+            >{{ index ? "家具保养" : "行业资讯" }}
             <router-link to="/news?active=second">
               <span class="more"
                 >more<i class="el-icon-d-arrow-right"></i
               ></span>
             </router-link>
           </div>
-          <div class="hyzxDiv">
-            <router-link
-              :to="`/news/newsDetail?noticeId=${hyzxFirst.noticeId}`"
-            >
-              <div class="topDiv">
-                <div class="leftDiv">
-                  <div>
-                    <img :src="hyzxFirst.fmzFileUrl" alt />
-                  </div>
-                </div>
-                <div class="rightDiv">
-                  <div class="title">{{ hyzxFirst.noticeTitle }}</div>
-                  <div class="content" v-html="hyzxFirst.noticeContent"></div>
-                  <div class="date">{{ hyzxFirst.createTime }}</div>
-                </div>
-              </div>
-            </router-link>
-            <ul class="bottomUl">
-              <li v-for="item in hyzxOther" :key="item.noticeId">
-                <router-link :to="`/news/newsDetail?noticeId=${item.noticeId}`">
-                  {{ item.noticeTitle }}
-                </router-link>
-              </li>
-            </ul>
-          </div>
-        </el-col>
-        <el-col :span="12">
-          <div class="partTitle">
-            <span class="orangeLine"></span>家具保养
-            <router-link to="/news?active=third">
-              <span class="more"
-                >more<i class="el-icon-d-arrow-right"></i
-              ></span>
-            </router-link>
-          </div>
-          <div class="hyzxDiv">
-            <router-link
-              :to="`/news/newsDetail?noticeId=${jjbyFirst.noticeId}`"
-            >
+          <div class="hyzxDiv" v-if="item">
+            <router-link :to="`/news/newsDetail?noticeId=${item.noticeId}`">
               <div class="topDiv">
                 <div class="leftDiv">
                   <div>
-                    <img :src="hyzxFirst.fmzFileUrl" alt />
+                    <img :src="`${$basePath}${item.fmzFileUrl}`" alt />
                   </div>
                 </div>
                 <div class="rightDiv">
-                  <div class="title">{{ jjbyFirst.noticeTitle }}</div>
-                  <div class="content" v-html="jjbyFirst.noticeContent"></div>
-                  <div class="date">{{ jjbyFirst.createTime }}</div>
+                  <div class="title">{{ item.noticeTitle }}</div>
+                  <div class="content" v-html="item.noticeContent"></div>
+                  <div class="date">{{ item.createTime }}</div>
                 </div>
               </div>
             </router-link>
             <ul class="bottomUl">
-              <li v-for="item in hyzxOther" :key="item.noticeId">
+              <li v-for="item in items" :key="item.noticeId">
                 <router-link :to="`/news/newsDetail?noticeId=${item.noticeId}`">
                   {{ item.noticeTitle }}
                 </router-link>
@@ -276,107 +214,38 @@
     </div>
   </div>
 </template>
-<script>
-import { Component, Vue } from "vue-property-decorator";
-import mymenu from "@/components/menu.vue";
-export default {
-  name: "app",
-  components: {
-    mymenu
-  },
-  data() {
-    return {
-      shangpin: [],
-      demandList: [],
-      supplyList: [],
-      noticeListTzgg: [],
-      noticeListHyzx: [],
-      hyzxFirst: {},
-      hyzxOther: [],
-      noticeListJjby: [],
-      jjbyFirst: {},
-      jjbyOther: [],
-      loginAccount: "",
-      hotlistArr: []
-    };
-  },
-  methods: {
-    // 通知公告前5条 liuqiwen
-    noticeList(noticeType) {
-      var that = this;
-      that
-        .$post("/interface/notice/getNoticeListTop5", {
-          noticeType: noticeType
-        })
-        .then(function(res) {
-          if (!res[0]) {
-            for (let i = 0; i < res[1].list.length; i++) {
-              res[1].list[i].fmzFileUrl =
-                that.$basePath + res[1].list[i].fmzFileUrl;
-            }
-            if (noticeType == 1) {
-              that.noticeListTzgg = res[1].list;
-            } else if (noticeType == 2) {
-              that.noticeListHyzx = res[1].list;
-              that.hyzxFirst = that.noticeListHyzx[0];
-              that.hyzxOther = that.noticeListHyzx.splice(1, 4);
-            } else {
-              that.noticeListJjby = res[1].list;
-              that.jjbyFirst = that.noticeListJjby[0];
-              that.jjbyOther = that.noticeListJjby.splice(1, 4);
-            }
-          }
-        });
-    },
-    // 需求信息前十条数据  liuqiwen
-    demandInfoTenList() {
-      var that = this;
-      that.$post("/demand/info/getDemandInfoTenList").then(function(res) {
-        console.log(res);
-        if (!res[0]) {
-          that.demandList = res[1].demandList;
-        }
-      });
-    },
-    // 供应信息前10条 liuqiwen
-    supplyInfoTenLsit() {
-      var that = this;
-      that.$post("/supply/info/getSupplyInfoTenLsit").then(function(res) {
-        console.log(res);
-        if (!res[0]) {
-          that.supplyList = res[1].supplyList;
-        }
-      });
-    },
-    // 热门商品 liuqiwen
-    hotlist() {
-      var that = this;
-      that.$post("/goods/info/hotlist").then(function(res) {
-        console.log(res);
-        if (!res[0]) {
-          for (let i = 0; i < res[1].list.length; i++) {
-            res[1].list[i].cover = that.$basePath + res[1].list[i].cover;
-          }
-          that.hotlistArr = res[1].list;
-        }
-      });
-    }
-  },
-  activated() {
-    if (this.$store.state.user.UserInfo) {
-      this.loginAccount = this.$store.state.user.UserInfo.loginAccount;
-    }
-  },
-  mounted() {
-    this.noticeList(1);
-    this.noticeList(2);
-    this.noticeList(3);
-    this.demandInfoTenList();
-    this.supplyInfoTenLsit();
-    this.hotlist();
+<script lang="ts">
+import { Component, Vue, Watch, Prop } from "vue-property-decorator";
+import user from "@/store/modules/user";
+@Component
+export default class extends Vue {
+  private notices: IAny[] = [];
+  private infos: IAny[] = [];
+  private products: IAny[] = [];
+  get userName() {
+    return user.UserInfo && user.UserInfo.loginAccount;
   }
-};
+  async created() {
+    const [
+      [, { list: p }],
+      [, { demandList: d }],
+      [, { supplyList: s }],
+      ...n
+    ] = await Promise.all([
+      this.$post("/goods/info/hotlist"),
+      this.$post("/demand/info/getDemandInfoTenList"),
+      this.$post("/supply/info/getSupplyInfoTenLsit"),
+      this.$post("/interface/notice/getNoticeListTop5", { noticeType: 1 }),
+      this.$post("/interface/notice/getNoticeListTop5", { noticeType: 2 }),
+      this.$post("/interface/notice/getNoticeListTop5", { noticeType: 3 })
+    ]);
+    this.products = p;
+    this.infos = [d, s];
+    this.notices = n.map(([, { list }]) => list);
+  }
+}
 </script>
+
 <style lang="scss" scoped>
 .bannerD {
   height: 39rem;
@@ -714,7 +583,4 @@ export default {
 .mt15px {
   margin-top: 1.5rem;
 }
-.mt2rem {
-  margin-top: 2rem;
-}
 </style>

src/views/info/index.vue

@@ -3,36 +3,11 @@
     <div class="container">
       <el-row class="mt2rem" :gutter="20">
         <el-col :span="4">
-          <mymenu></mymenu>
+          <category />
         </el-col>
         <el-col :span="20">
-          <div class="infoTabDiv">
-            <el-tabs v-model="activeName" @tab-click="tabChange">
-              <el-tab-pane label="求购信息" name="demand">
-                <ul class="listUl">
-                  <li v-for="item in demandAllList" :key="item.id">
-                    <router-link :to="`/info/buyDetail?id=${item.id}`">
-                      <span class="name">{{ item.purchaseTitle }}</span
-                      ><span class="date"
-                        >{{ item.updateTime }}发布</span
-                      ></router-link
-                    >
-                  </li>
-                </ul>
-              </el-tab-pane>
-              <el-tab-pane label="供应信息" name="supply">
-                <ul class="listUl">
-                  <li v-for="item in supplyAllList" :key="item.id">
-                    <router-link :to="`/info/supplyDetail?id=${item.id}`">
-                      <span class="name">{{ item.supplyTitle }}</span
-                      ><span class="date"
-                        >{{ item.updateTime }}发布</span
-                      ></router-link
-                    >
-                  </li>
-                </ul>
-              </el-tab-pane>
-            </el-tabs>
+          <div class="tab">
+            <tab titles="求购信息,供应信息" :currIndex.sync="currIndex" />
             <div class="btnDiv">
               <router-link to="/info/buy">
                 <el-button class="buyBtn" size="mini">我要买</el-button>
@@ -40,28 +15,30 @@
               <el-button class="buyBtn" size="mini">我要卖</el-button>
             </div>
           </div>
-          <el-pagination
-            class="pageDiv"
-            background
-            @current-change="handleCurrentChange"
-            :page-size="pageSize"
-            :current-page="currentPage"
-            layout="prev, pager, next,total, jumper"
-            :total="total"
-          ></el-pagination>
+
+          <load-more
+            v-for="(url, index) in urls"
+            :key="url"
+            :url="url"
+            class="list"
+            v-show="currIndex === index"
+            v-slot="{ item: { id, purchaseTitle, supplyTitle, updateTime } }"
+          >
+            <router-link class="info" :to="`/info/buyDetail?id=${id}`">
+              <div class="name">{{ purchaseTitle || supplyTitle }}</div>
+              <div class="date">{{ updateTime }}发布</div>
+            </router-link>
+          </load-more>
         </el-col>
       </el-row>
     </div>
   </div>
 </template>
-<script>
-import { Component, Vue, Watch } from "vue-property-decorator";
-import mymenu from "@/components/menu.vue";
+<script lang="ts">
+/*
+
 export default {
   name: "app",
-  components: {
-    mymenu
-  },
   data() {
     return {
       activeName: "demand",
@@ -133,18 +110,28 @@ export default {
     this.demandInfoAllList();
   }
 };
+
+*/
+
+import { Component, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class extends Vue {
+  private currIndex = 1;
+  private urls = [
+    "/demand/info/getDemandInfoAllList",
+    "/supply/info/getSupplyInfoAllList"
+  ];
+}
 </script>
 <style lang="scss" scoped>
-.infoTabDiv {
-  position: relative;
+.tab {
   background: #fff;
-  border-radius: 0.4rem;
+  position: relative;
   .btnDiv {
-    height: 5rem;
-    line-height: 5rem;
     position: absolute;
     right: 1.6rem;
-    top: 0;
+    top: 50%;
+    transform: translateY(-50%);
     .buyBtn {
       background: #fd5522;
       color: #fff;
@@ -153,66 +140,29 @@ export default {
       border-radius: 0.4rem;
     }
   }
-  .listUl {
-    list-style: none;
-    width: 100%;
-    padding: 0 1.6rem 1.6rem;
-    box-sizing: border-box;
-    li {
-      height: 3.6rem;
-      line-height: 3.6rem;
-      overflow: hidden;
-      font-size: 1.4rem;
-      .name {
-        display: block;
-        width: 80%;
-        float: left;
-        overflow: hidden;
-        color: #333;
-      }
-      .date {
-        display: block;
-        width: 20%;
-        float: left;
-        text-align: right;
-        color: #666;
-      }
-    }
-  }
-}
-.pageDiv {
-  text-align: right;
-  margin-top: 0.5rem;
-  padding: 2rem 0;
 }
-.mt2rem {
-  margin-top: 2rem;
-}
-</style>
-<style lang="scss">
-.infoTabDiv {
-  .el-tabs__nav-scroll {
+.list {
+  margin-top: 2px;
+  .info {
+    height: 3.6rem;
+    line-height: 3.6rem;
+    overflow: hidden;
+    font-size: 1.4rem;
+    background: #fff;
+    display: block;
     padding: 0 1.6rem;
-    box-sizing: border-box;
-  }
-  .el-tabs__item {
-    height: 5rem;
-    line-height: 5rem;
-  }
-  .el-tabs__item:hover {
-    color: #fd5522;
-  }
-  .el-tabs__item.is-active {
-    color: #fd5522;
-  }
-  .el-tabs__active-bar {
-    background-color: #fd5522;
+    .name {
+      width: 80%;
+      float: left;
+      overflow: hidden;
+      color: #333;
+    }
+    .date {
+      width: 20%;
+      float: left;
+      text-align: right;
+      color: #666;
+    }
   }
 }
-.pageDiv.el-pagination.is-background .el-pager li:not(.disabled).active {
-  background: #fd5522;
-}
-.pageDiv.el-pagination.is-background .el-pager li:not(.disabled):hover {
-  color: #fd5522;
-}
 </style>

src/views/mall/index.vue

@@ -107,19 +107,20 @@
 <script lang="ts">
 import { Component, Vue, Watch, Prop } from "vue-property-decorator";
 import menu from "@/store/modules/menu";
-import loadMore from "@/components/loadMore.vue";
-@Component({
-  components: { loadMore }
-})
+@Component
 export default class extends Vue {
   private currIndex = 0;
-  private params = {};
+  private params: IAny | null = null;
   private search = {
     name: "",
     beginPrice: "",
     endPrice: ""
   };
   @Prop(String) private kw!: string;
+  @Watch("kw", { immediate: true })
+  kwChange() {
+    this.params = { name: this.kw };
+  }
   get items() {
     return [{ id: 0, title: "全部" }, ...menu.pList];
   }
@@ -135,7 +136,7 @@ export default class extends Vue {
     return [{ title, arr: menu.subList(id) }];
   }
   paramsChange(x: IAny) {
-    this.params = { ...this.params, ...x };
+    this.params = this.params && { ...this.params, ...x };
   }
 }
 </script>

src/views/shops/details/products.vue

@@ -6,7 +6,7 @@
     <div class="container">
       <el-row :gutter="20">
         <el-col :span="4">
-          <mymenu showHeader @change="typeId => (params.typeId = typeId)" />
+          <category showHeader @change="typeId => (params.typeId = typeId)" />
         </el-col>
         <el-col :span="20">
           <div class="items">
@@ -36,11 +36,7 @@
 </template>
 <script lang="ts">
 import { Component, Vue, Prop, Watch } from "vue-property-decorator";
-import mymenu from "@/components/menu.vue";
-import loadMore from "@/components/loadMore.vue";
-@Component({
-  components: { mymenu, loadMore }
-})
+@Component
 export default class extends Vue {
   private params: IAny | null = null;
   @Prop() private shopInfo!: IAny;