Merge remote-tracking branch 'origin/master'

.env.production

@@ -1,2 +1,2 @@
-VUE_APP_Target=http://192.168.100.254:9300/
+VUE_APP_Target=/
 VUE_APP_BASE_API=/

src/components/LangSelect.vue

@@ -31,7 +31,7 @@ export default class extends Vue {
     setLocale(lang);
     setPageTitle(this.$route.meta.title);
     this.$message({
-      message: "Switch Language Success",
+      message: `${this.$i18n.t("SLS")}`,
       type: "success"
     });
   }

src/components/loadMore.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="loadMore">
     <template v-if="count">
-      <slot v-for="(item, index) in items" :index="index" :item="item" />
+      <div class="list">
+        <slot v-for="(item, index) in items" :index="index" :item="item" />
+      </div>
       <el-pagination
         class="pagination"
-        v-if="count > rows"
         background
         layout="prev, pager, next,total, jumper"
         :total="count"
@@ -31,7 +32,7 @@ import {
   Emit
 } from "vue-property-decorator";
 interface IPageResult {
-  items: any[];
+  rows: any[];
   total: number;
 }
 @Component
@@ -60,15 +61,17 @@ export default class extends Vue {
   }
   @Watch("page", { immediate: true })
   async load() {
-    const { page, rows } = this;
-    const [err, { items = [], total = 0 }] = await this.post<IPageResult>(
+    const [err, { rows = [], total = 0 }] = await this.post<IPageResult>(
       this.url,
-      Object.assign({}, this.params, { page, rows })
+      Object.assign({}, this.params, {
+        pageNum: this.page,
+        pageSize: this.rows
+      })
     );
     if (err) console.error("列表加载失败");
     // if (err) this.$message.error("列表加载失败"); //throw Error("loadMore fail");
     this.count = total;
-    this.setItems(items);
+    this.setItems(rows);
   }
   currentChange(page: number) {
     this.page = page;
@@ -86,6 +89,9 @@ export default class extends Vue {
 .loadMore {
   width: 100%;
   overflow: hidden;
+  .list {
+    overflow: hidden;
+  }
   .pagination {
     text-align: right;
   }

src/lang/en.ts

@@ -1,5 +1,6 @@
 export default {
   title: "Title",
+  SLS: "Switch Language Success",
   route: {
     home: "home",
     mall: "mall",
@@ -20,5 +21,9 @@ export default {
     infoSell: "infoSell",
     infoAdd: "infoAdd",
     news: "news"
+  },
+  errCode: {
+    "-1": "Network request failed",
+    500: "system error"
   }
 };

src/lang/zh.ts

@@ -1,5 +1,6 @@
 export default {
   title: "中国钢制家具产业聚集网",
+  SLS: "切换语言成功",
   route: {
     home: "首页",
     mall: "在线商城",
@@ -20,5 +21,9 @@ export default {
     infoSell: "供应信息详情",
     infoAdd: "我要买",
     news: "新闻内容"
+  },
+  errCode: {
+    "-1": "网络请求失败",
+    "500": "系统错误"
   }
 };

src/types/global.d.ts

@@ -10,7 +10,7 @@ interface IAny {
   [index: string]: any;
 }
 interface IError {
-  msg: string;
+  // msg: string; 因为做中英文切换 所以msg根据code从语言包中查询
   code: number;
 }
 interface IBaseResult<T = any> extends IError {

src/utils/index.ts

@@ -28,3 +28,8 @@ export const setPageTitle = (key: string) => {
     i18n.te(`route.${key}`) ? i18n.t(`route.${key}`) + " - " : ""
   }${title}`;
 };
+export const getErrMsg = (errCode: number) => {
+  return i18n.te(`errCode.${errCode}`)
+    ? `${i18n.t(`errCode.${errCode}`)}`
+    : "system error".toUpperCase();
+};

src/utils/request.ts

@@ -3,6 +3,7 @@ import axios from "axios";
 import user from "@/store/modules/user";
 import { Message } from "@/utils/message";
 import md5 from "js-md5";
+import { getErrMsg } from "@/utils";
 const instance = axios.create({
   baseURL: process.env.VUE_APP_BASE_API,
   timeout: 3000
@@ -34,19 +35,17 @@ instance.interceptors.response.use(
   err => ({
     data: {
       code: -1,
-      msg: "网络请求失败",
       data: err
     }
   })
 );
 const getResult: <T>(x: IBaseResult) => IResult<T> = <T>({
   data,
-  msg,
   code
 }: IBaseResult<T>) => {
   if (code === 0) return [null, data];
-  Message.error(msg || "发生未知错误");
-  return [{ msg, code }, (data || {}) as T];
+  Message.error(getErrMsg(code));
+  return [{ code }, (data || {}) as T];
 };
 export const post: IRequest = async <T>(url: string, params: any) => {
   const { data } = await instance.post<IBaseResult<T>>(url, params);

src/views/mall/index.vue

@@ -9,74 +9,137 @@
             <div class="t"></div>
           </div>
           <div class="items ">
-            <div class="item fl  curr">
-              全部
-            </div>
-            <div class="item fl ">
-              文件柜
-            </div>
-            <div class="item fl ">
-              保险柜
+            <div
+              v-for="({ id, title }, index) in items"
+              :key="`items${id}`"
+              :class="`item fl ${currIndex === index ? 'curr' : ''}`"
+              @mouseover="currIndex = index"
+              @click="() => paramsChange({ typeId: id })"
+            >
+              {{ title }}
             </div>
           </div>
         </div>
         <div class="xiaolei">
-          <div class="block fl" v-for="x in 5" :key="x">
-            <span>文件柜</span>
+          <div
+            class="block fl"
+            v-for="({ title, arr }, index) in subs"
+            :key="`subs${index}`"
+          >
+            <span>{{ title }}</span>
             <div class="items fr">
-              <div class="item fl">
-                五斗音箱柜
-              </div>
-              <div class="item fl">
-                五斗音箱柜
-              </div>
-              <div class="item fl">
-                五斗音箱柜
-              </div>
-              <div class="item fl">
-                五斗音箱柜
+              <div
+                :class="`item fl ${params.typeId === id ? 'curr' : ''}`"
+                v-for="({ id, title: st }, i) in arr"
+                :key="`sitem${i}`"
+                @click="() => paramsChange({ typeId: id })"
+              >
+                {{ st }}
               </div>
             </div>
           </div>
         </div>
       </div>
       <div class="filter">
-        <div class="sort fl">综合排序</div>
-        <div class="sort fl">新品</div>
-        <div class="sort fl">
-          <span>价格</span>
-          <input placeholder="最低价" /> - <input placeholder="最高价" />
+        <div
+          :class="`sort fl ${params.orderByColumn === 'zhpx' ? 'curr' : ''}`"
+          @click="() => paramsChange({ orderByColumn: 'zhpx' })"
+        >
+          <span> 综合排序</span>
+        </div>
+        <div
+          :class="`sort fl ${params.orderByColumn === 'xp' ? 'curr' : ''}`"
+          @click="() => paramsChange({ orderByColumn: 'xp' })"
+        >
+          <span> 新品</span>
+        </div>
+        <div :class="`sort fl ${params.orderByColumn === 'jg' ? 'curr' : ''}`">
+          <span
+            :class="`price ${params.isAsc}`"
+            @click="
+              () =>
+                paramsChange({
+                  orderByColumn: `jg`,
+                  isAsc:
+                    params.orderByColumn === `jg` && params.isAsc === `asc`
+                      ? `desc`
+                      : `asc`
+                })
+            "
+            >价格</span
+          >
+          <input
+            v-model="search.beginPrice"
+            placeholder="最低价"
+            type="number"
+          />
+          -
+          <input v-model="search.endPrice" placeholder="最高价" type="number" />
         </div>
         <div class="search fr">
-          <input placeholder="商品名称/企业名称" />
-          <span>搜索</span>
+          <input placeholder="商品名称/企业名称" v-model="search.name" />
+          <span @click="() => paramsChange(search)">搜索</span>
         </div>
       </div>
       <div class="products">
-        <router-link to="/shop/1/2" class="product" v-for="x in 10" :key="x">
-          <div class="img">
-            <img src="@assets/shangpin.png" alt="" />
-          </div>
-          <div class="amount"><span>¥</span>1800</div>
-          <div class="name">文件柜20-J</div>
-          <div class="shop">洛阳花都家具有限公司</div>
-        </router-link>
+        <load-more
+          url="/goods/info/page"
+          :params="params"
+          v-slot="{
+            item: { id, name, companyId, price, cover, companyName }
+          }"
+        >
+          <router-link :to="`/shop/${companyId}/${id}`" class="product">
+            <div class="img">
+              <img :src="`${target}${cover}`" />
+            </div>
+            <div class="amount"><span>¥</span>{{ price }}</div>
+            <div class="name">{{ name }}</div>
+            <div class="shop">{{ companyName }}</div>
+          </router-link>
+        </load-more>
       </div>
-      <!-- 仅作为前期静态页面显示用 后期会集成到loadmore组件内 -->
-      <el-pagination
-        class="fr"
-        background
-        layout="prev, pager, next,total, jumper"
-        :total="100"
-        :page-size="10"
-      />
     </div>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
-@Component
-export default class extends Vue {}
+import menu from "@/store/modules/menu";
+import loadMore from "@/components/loadMore.vue";
+@Component({
+  components: { loadMore }
+})
+export default class extends Vue {
+  private target = `${process.env.VUE_APP_Target}`.replace(/\/$/, "");
+  private currIndex = 0;
+  private params = {
+    typeId: 0,
+    orderByColumn: "zhpx",
+    isAsc: "" //asc desc
+  };
+  private search = {
+    name: "",
+    beginPrice: "",
+    endPrice: ""
+  };
+  get items() {
+    return [{ id: 0, title: "全部" }, ...menu.pList];
+  }
+  get subs() {
+    if (this.currIndex === 0)
+      return this.items
+        .filter(({ id }) => id)
+        .map(({ id, title }) => ({
+          title,
+          arr: menu.subList(id)
+        }));
+    const { id, title } = this.items[this.currIndex];
+    return [{ title, arr: menu.subList(id) }];
+  }
+  paramsChange(x: IAny) {
+    Object.assign(this.params, x);
+  }
+}
 </script>
 <style lang="scss" scoped>
 .mall {
@@ -141,7 +204,7 @@ export default class extends Vue {}
       }
       .xiaolei {
         height: 160px;
-        overflow: hidden;
+        overflow: scroll;
         .block {
           width: 337px;
           height: 80px;
@@ -163,6 +226,10 @@ export default class extends Vue {}
               margin-bottom: 1rem;
               font-size: 1.2rem;
               color: rgb(102, 102, 102);
+              cursor: pointer;
+              &.curr {
+                color: rgb(253, 85, 34);
+              }
             }
           }
         }
@@ -184,7 +251,19 @@ export default class extends Vue {}
       }
       .sort {
         margin-right: 40px;
-        span {
+        cursor: pointer;
+        &.curr {
+          span {
+            color: rgb(253, 85, 34);
+          }
+          .price.asc::before {
+            border-bottom-color: rgb(253, 85, 34);
+          }
+          .price.desc::after {
+            border-top-color: rgb(253, 85, 34);
+          }
+        }
+        .price {
           position: relative;
           margin-right: 20px;
           &::before {
@@ -197,7 +276,7 @@ export default class extends Vue {}
             border-right-color: transparent;
             border-width: 5px;
             border-style: solid;
-            top: 0;
+            top: -2px;
             right: -10px;
           }
           &::after {
@@ -210,7 +289,7 @@ export default class extends Vue {}
             border-right-color: transparent;
             border-width: 5px;
             border-style: solid;
-            bottom: 0;
+            bottom: -2px;
             right: -10px;
           }
         }