分类筛选商品

src/components/category.vue

@@ -5,7 +5,7 @@
       <li v-for="{ id, title } in items" :key="id" class="menuli">
         <div
           class="dalei"
-          :class="{ curr: currpIndex === id }"
+          :class="{ curr: currPid === id }"
           @click="() => setCurrIndex(id)"
         >
           <div />
@@ -13,16 +13,14 @@
           <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"
-              :class="{ curr: currIndex === sid }"
-              @click="() => setCurrIndex(sid, id)"
-            >
-              {{ st }}
-            </li>
-          </ul>
+          <div
+            v-for="{ id: sid, title: st } in getSub(id)"
+            :key="sid"
+            :class="{ item: true, curr: currSid === sid }"
+            @click="() => setCurrIndex(sid, id)"
+          >
+            {{ st }}
+          </div>
         </div>
       </li>
     </ul>
@@ -33,8 +31,8 @@ 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;
+  private currSid = 0;
+  private currPid = 0;
   @Prop(Boolean) private showHeader!: boolean;
   get items() {
     return menu.pList;
@@ -44,8 +42,8 @@ export default class extends Vue {
   }
   @Emit("change")
   setCurrIndex(id: number, pid = id) {
-    [this.currIndex, this.currpIndex] = [id, pid];
-    return id;
+    [this.currSid, this.currPid] = [id, pid];
+    return { id, pid };
   }
 }
 </script>
@@ -117,7 +115,7 @@ export default class extends Vue {
   }
   .menuCon {
     overflow: scroll;
-    width: 60rem;
+    // width: 60rem;
     // min-height: 38rem;
     background: #fff;
     padding: 1.6rem;
@@ -125,22 +123,20 @@ export default class extends Vue {
     position: absolute;
     top: 0;
     bottom: 0;
-    right: -60rem;
+    left: 100%;
     z-index: 99;
     display: none;
-    .menuConUl {
-      list-style: none;
-      overflow: hidden;
-      li {
-        float: left;
-        font-size: 1.2rem;
-        color: #333;
-        margin-right: 1rem;
-        cursor: pointer;
-        &.curr,
-        &:hover {
-          color: #fd5522;
-        }
+    width: 160px;
+    padding: 0 20px;
+    border: 1px solid #fd5522;
+    .item {
+      font-size: 1.2rem;
+      color: #333;
+      margin: 1rem 0;
+      cursor: pointer;
+      &.curr,
+      &:hover {
+        color: #fd5522;
       }
     }
   }

src/layout/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="layout">
     <y-header />
-    <keep-alive exclude="shopEnterAdd">
+    <keep-alive exclude="shopEnterAdd,infoList">
       <router-view class="main" />
     </keep-alive>
     <y-footer />

src/router/index.ts

@@ -26,8 +26,9 @@ export const nav: RouteConfig[] = [
     meta: { title: "shops" }
   },
   {
-    path: "/info",
+    path: "/info/:index?",
     component: () => import("../views/info/index.vue"),
+    props: true,
     meta: { title: "info" }
   }
 ];

src/views/home/index.vue

@@ -3,7 +3,7 @@
     <div class="container">
       <el-row class="mt2rem" :gutter="20">
         <el-col :span="4">
-          <category />
+          <category @change="e => $router.push({ path: `/mall`, query: e })" />
         </el-col>
         <el-col :span="14">
           <el-carousel class="bannerD marquee">
@@ -107,31 +107,30 @@
         </router-link>
       </div>
       <div class="partTitle ppsj">
-        <span class="orangeLine"></span>品牌商家<span class="more"
+        <span class="orangeLine"></span>品牌商家
+        <router-link to="/shops" class="more"
           >more<i class="el-icon-d-arrow-right"></i
-        ></span>
+        ></router-link>
       </div>
       <div class="ppsjList">
-        <div
+        <router-link
           class="item"
-          v-for="({ defaultImgUrl, primaryBusiness, companyName },
+          v-for="({ defaultImgUrl, primaryBusiness, companyName, id },
           index) in shops"
           :key="`ppsjList${index}`"
+          :to="`/shop/${id}`"
         >
           <div class="imgDiv2">
             <img :src="`${$basePath}${defaultImgUrl}`" alt />
           </div>
           <div class="name">{{ companyName }}</div>
           <div class="company">主营商品:{{ primaryBusiness }}</div>
-        </div>
+        </router-link>
       </div>
       <div class="partTitle"><span class="orangeLine"></span>需求供应</div>
-      <el-row :gutter="20" class="xqgy">
-        <el-col :span="4">
-          <category />
-        </el-col>
-        <el-col :span="10" v-for="(info, index) in infos" :key="`info${index}`">
-          <div class="xqDiv">
+      <div class="xqgy">
+        <template v-for="(info, index) in infos">
+          <div :key="`info${index}`" class="xqDiv">
             <div class="xqTitle">
               <img
                 :src="
@@ -139,7 +138,7 @@
                 "
                 alt
               />{{ index ? "供应商" : "需求" }}
-              <router-link :to="`/info?active=${index ? 'supply' : 'demand'}`">
+              <router-link :to="`/info/${index}`">
                 <span class="more"
                   >more<i class="el-icon-d-arrow-right"></i
                 ></span>
@@ -147,7 +146,7 @@
             </div>
 
             <router-link
-              :to="`/info/buyDetail?id=${item.id}`"
+              :to="`/info/${index ? 'sell' : 'buy'}/${item.id}`"
               v-for="item in info"
               :key="item.id"
             >
@@ -163,8 +162,9 @@
               </div>
             </router-link>
           </div>
-        </el-col>
-      </el-row>
+          <div class="t" :key="`info-t${index}`" v-if="index === 0"></div>
+        </template>
+      </div>
       <!-- 广告位 -->
       <div class=" mt2rem">
         <img src="@assets/home_ggw2.png" alt />
@@ -185,20 +185,19 @@
             </router-link>
           </div>
           <div class="hyzxDiv" v-if="item">
-            <router-link :to="`/newsDetail/${item.noticeId}`">
-              <div class="topDiv">
-                <div class="leftDiv">
-                  <div>
-                    <img :src="`${$basePath}${item.fmzFileUrl}`" alt />
-                  </div>
-                </div>
-                <div class="rightDiv">
-                  <div class="title">{{ item.noticeTitle }}</div>
-                  <div class="content" v-html="item.noticeContent"></div>
-                  <div class="date">
-                    {{ `${item.createTime}`.split(" ")[0] }}
-                  </div>
+            <router-link
+              :to="`/newsDetail/${item.noticeId}`"
+              class="noticeDetails"
+            >
+              <div class="img">
+                <img :src="`${$basePath}${item.fmzFileUrl}`" alt />
+              </div>
+              <div class="content">
+                <div class="tit">{{ item.noticeTitle }}</div>
+                <div class="desc">
+                  {{ item.noticeOutline }}
                 </div>
+                <div class="date">{{ `${item.createTime}`.split(" ")[0] }}</div>
               </div>
             </router-link>
             <ul class="bottomUl">
@@ -450,17 +449,29 @@ export default class extends Vue {
   }
 }
 .xqgy {
-  height: 39rem;
   overflow: hidden;
-  > div {
-    height: 100%;
+  // height: 430px;
+  background: #fff;
+  position: relative;
+  .t {
+    position: absolute;
+    top: 0;
+    left: 560px;
+    bottom: 0;
+    width: 20px;
+
+    background: #f5f5f5;
   }
   .xqDiv {
+    float: left;
+    width: 560px;
     height: 100%;
-
-    background: #fff;
-    padding: 2rem;
+    margin-left: 20px;
+    padding: 20px;
     box-sizing: border-box;
+    &:first-child {
+      margin-left: 0;
+    }
     .xqTitle {
       height: 3rem;
       line-height: 3rem;
@@ -509,49 +520,49 @@ export default class extends Vue {
   padding: 1.6rem;
   box-sizing: border-box;
   margin-bottom: 4rem;
-  .topDiv {
-    width: 100%;
-    display: table;
-    border: 0.1rem solid #e5e5e5;
-    .leftDiv {
-      display: table-cell;
-      width: 30%;
-      text-align: center;
-      vertical-align: top;
-      div {
+  .noticeDetails {
+    height: 100px;
+    display: inline-block;
+    overflow: hidden;
+    box-sizing: border-box;
+    .img {
+      border: 1px solid #e5e5e5;
+      width: 120px;
+      float: left;
+      height: 100%;
+      position: relative;
+      box-sizing: border-box;
+      img {
         width: 80%;
-        display: inline-block;
-        border: 0.1rem solid #e5e5e5;
-        line-height: 0;
-        img {
-          width: 100%;
-        }
+        max-height: 100%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
       }
     }
-    .rightDiv {
-      display: table-cell;
-      width: 70%;
-      padding-left: 1rem;
-      box-sizing: border-box;
-      vertical-align: top;
-      .title {
+    .content {
+      float: left;
+      margin-left: 20px;
+      width: 388px;
+      .tit {
         font-size: 1.6rem;
         color: #333;
-        height: 3rem;
-        line-height: 3rem;
-        overflow: hidden;
       }
-      .content {
-        height: 5rem;
-        line-height: 2.5rem;
+      .desc {
+        margin-top: 5px;
         font-size: 1.2rem;
         color: #666;
         overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
       }
       .date {
-        font-size: 1.2rem;
+        font-size: 12px;
         color: #666;
-        line-height: 2.4rem;
+        margin-top: 10px;
       }
     }
   }

src/views/info/details/sell.vue

@@ -44,9 +44,7 @@
       <div class="infoDiv">
         <div class="info">
           <div class="tit">供应详情:</div>
-          <div class="con">
-            {{ noticeSupply.supplyDetails }}
-          </div>
+          <div class="con" v-html="noticeSupply.supplyDetails"></div>
         </div>
       </div>
     </div>

src/views/info/index.vue

@@ -22,14 +22,14 @@
             :url="url"
             class="list"
             v-show="currIndex === index"
-            v-slot="{ item: { id, purchaseTitle, supplyTitle, updateTime } }"
+            v-slot="{ item: { id, purchaseTitle, supplyTitle, releaseTime } }"
           >
             <router-link
               class="info"
               :to="`/info/${index ? 'sell' : 'buy'}/${id}`"
             >
               <div class="name">{{ purchaseTitle || supplyTitle }}</div>
-              <div class="date">{{ updateTime }}发布</div>
+              <div class="date">{{ (releaseTime + "").split(" ")[0] }}发布</div>
             </router-link>
           </load-more>
         </el-col>
@@ -38,10 +38,16 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
-@Component
+import { Component, Vue, Watch, Prop } from "vue-property-decorator";
+@Component({ name: "infoList" })
 export default class extends Vue {
+  @Prop(String)
+  private index!: string;
   private currIndex = 0;
+  @Watch("index", { immediate: true })
+  indexChange() {
+    this.currIndex = Number(this.index) | 0;
+  }
   private urls = [
     "/demand/info/getDemandInfoAllList",
     "/supply/info/getSupplyInfoAllList"

src/views/mall/index.vue

@@ -12,10 +12,10 @@
           </div>
           <div class="items ">
             <div
-              v-for="({ id, title }, index) in items"
+              v-for="{ id, title } in items"
               :key="`items${id}`"
-              :class="`item fl ${currIndex === index ? 'curr' : ''}`"
-              @mouseover="currIndex = index"
+              :class="`item fl ${currPid === id ? 'curr' : ''}`"
+              @mouseover="currPid = id"
               @click="() => paramsChange({ typeId: id })"
             >
               {{ title }}
@@ -115,7 +115,7 @@ import { Component, Vue, Watch, Prop } from "vue-property-decorator";
 import menu from "@/store/modules/menu";
 @Component
 export default class extends Vue {
-  private currIndex = 0;
+  private currPid = 0;
   private params: IAny | null = null;
   private search = {
     name: "",
@@ -123,22 +123,29 @@ export default class extends Vue {
     endPrice: ""
   };
   @Prop(String) private kw!: string;
-  @Watch("kw", { immediate: true })
-  kwChange() {
-    this.params = { name: this.kw, orderByColumn: "", isAsc: "asc" };
+
+  activated() {
+    const { id, pid } = this.$route.query;
+    this.currPid = Number(pid) | 0;
+    this.params = {
+      name: this.kw,
+      orderByColumn: "",
+      isAsc: "asc",
+      typeId: Number(id) | 0
+    };
   }
   get items() {
     return [{ id: 0, title: "全部" }, ...menu.pList];
   }
   get subs() {
-    if (this.currIndex === 0)
+    if (this.currPid === 0)
       return this.items
         .filter(({ id }) => id)
         .map(({ id, title }) => ({
           title,
           arr: menu.subList(id)
         }));
-    const { id, title } = this.items[this.currIndex];
+    const { id, title } = this.items.find(({ id }) => id === this.currPid)!;
     return [{ title, arr: menu.subList(id) }];
   }
   paramsChange(x: IAny) {

src/views/news/index.vue

@@ -19,7 +19,7 @@
           <router-link class="conDiv" :to="`/newsDetail/${item.noticeId}`">
             <div class="tit">{{ item.noticeTitle }}</div>
             <div class="detail">
-              <div v-html="item.noticeContent"></div>
+              <div class="desc">{{ item.noticeOutline }}</div>
               <span class="xq">详情<i class="el-icon-d-arrow-right"></i></span>
             </div>
           </router-link>
@@ -85,7 +85,7 @@ export default class extends Vue {
     }
   }
   .conDiv {
-    width: 100%;
+    // width: 100%;
     display: block;
     height: 100%;
     padding: 0 1rem;

src/views/shops/details/products.vue

@@ -17,7 +17,7 @@
                 item: { id, name, companyId, price, cover, companyName }
               }"
             >
-              <div class="item">
+              <router-link class="item" :to="`/shop/${companyId}/${id}`">
                 <div class="img">
                   <img :src="`${$basePath}${cover}`" />
                 </div>
@@ -26,7 +26,7 @@
                   <span>¥ {{ price }}</span>
                   <router-link :to="`${id}`"> 立即购买 </router-link>
                 </div>
-              </div>
+              </router-link>
             </load-more>
           </div>
         </el-col>