shopInfo

src/api/dict.ts

@@ -0,0 +1,14 @@
+import { post } from "@/utils/request";
+import dict from "@/store/modules/dict";
+
+export const getDict = (dictType: string) => {
+  post("/common/dict", { dictType }).then(([err, data]) => {
+    if (err) return;
+    const v = data.list.map((x: any) => ({
+      key: x.dictLabel,
+      value: x.dictValue
+    })) as IDict[];
+    dict.add({ k: dictType, v });
+  });
+  return [] as IDict[];
+};

src/components/menu.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="menuDiv">
+    <h3 v-if="showHeader">商品分类</h3>
     <ul class="menuUl">
       <li v-for="{ id, title } in items" :key="id" class="menuli">
-        <router-link to="home">
+        <div class="dalei">
           <span class="menuLine"></span>{{ title }}
           <i class="el-icon-arrow-right"></i>
-        </router-link>
+        </div>
 
         <div class="menuCon">
           <ul class="menuConUl">
@@ -19,10 +20,11 @@
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Prop } from "vue-property-decorator";
 import menu from "@/store/modules/menu";
 @Component
 export default class extends Vue {
+  @Prop(Boolean) private showHeader!: boolean;
   get items() {
     return menu.pList;
   }
@@ -34,11 +36,19 @@ export default class extends Vue {
 <style lang="scss" scoped>
 .menuDiv {
   width: 100%;
+  position: relative;
+  h3 {
+    background: #fd5522;
+    color: #fff;
+    height: 35px;
+    line-height: 35px;
+    padding-left: 20px;
+  }
   .menuUl {
     list-style: none;
     width: 100%;
     background: #fff;
-    position: relative;
+
     li.menuli {
       height: 5.6rem;
       line-height: 5.6rem;
@@ -62,6 +72,9 @@ export default class extends Vue {
           display: block;
         }
       }
+      .dalei {
+        cursor: pointer;
+      }
       .menuLine {
         display: inline-block;
         height: 1.4rem;
@@ -76,13 +89,15 @@ export default class extends Vue {
     }
   }
   .menuCon {
+    overflow: scroll;
     width: 60rem;
-    min-height: 38rem;
+    // min-height: 38rem;
     background: #fff;
     padding: 1.6rem;
     box-sizing: border-box;
     position: absolute;
     top: 0;
+    bottom: 0;
     right: -60rem;
     z-index: 99;
     display: none;
@@ -94,6 +109,10 @@ export default class extends Vue {
         font-size: 1.2rem;
         color: #333;
         margin-right: 1rem;
+        cursor: pointer;
+        &:hover {
+          color: #fd5522;
+        }
       }
     }
   }

src/store/modules/dict.ts

@@ -0,0 +1,25 @@
+import {
+  VuexModule,
+  Module,
+  getModule,
+  Mutation,
+  Action
+} from "vuex-module-decorators";
+interface IAdd {
+  k: string;
+  v: IDict[];
+}
+import store from "../index";
+import { getDict } from "@/api/dict";
+@Module({ dynamic: true, store, name: "dict" })
+class Dict extends VuexModule {
+  public companyType = getDict("company_type");
+  @Mutation
+  public add({ k, v }: IAdd) {
+    switch (k) {
+      case "company_type":
+        return (this.companyType = v);
+    }
+  }
+}
+export default getModule(Dict);

src/types/global.d.ts

@@ -42,3 +42,7 @@ interface IMenu {
   pId: number;
   title: string;
 }
+interface IDict {
+  key: string;
+  value: number;
+}

src/views/shops/details/index.vue

@@ -1,12 +1,14 @@
 <template>
   <div class="shopDetails">
     <div class="header container">
-      <img class="logo fl" src="@assets/shopLogo.png" />
+      <img class="logo fl" :src="`${$basePath}${shopInfo.defaultImgUrl}`" />
       <div class="desc fl">
-        <h3>洛阳钢制家具有限公司</h3>
+        <h3>{{ shopInfo.companyName }}</h3>
         <span class="rz">已认证</span>
-        <img src="@assets/guanzhu.png" />
-        <span class="gz">关注商家</span>
+        <div @click="gz">
+          <img src="@assets/guanzhu.png" />
+          <span class="gz">关注商家</span>
+        </div>
       </div>
       <div class="fr search">
         <el-input
@@ -31,18 +33,26 @@
         </router-link>
       </div>
     </div>
-    <router-view />
+    <router-view :shopInfo="shopInfo" />
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Watch, Prop } from "vue-property-decorator";
 @Component
 export default class extends Vue {
+  private shopInfo: IAny = {};
   @Prop(String)
   private sid!: string;
   @Watch("sid", { immediate: true })
   async load(id: number) {
     const [err, data] = await this.$post("/company/details", { id });
+    if (err) return;
+    this.shopInfo = data;
+  }
+  async gz() {
+    const [err, data] = await this.$post("/member/follow/addMemberFollow", {
+      companyId: this.sid
+    });
     console.log(data);
   }
 }
@@ -79,6 +89,10 @@ export default class extends Vue {
         font-size: 12px;
         color: rgb(51, 51, 51);
       }
+      div {
+        display: inline-block;
+        cursor: pointer;
+      }
     }
     .search {
       margin-top: 20px;

src/views/shops/details/product.vue

@@ -43,48 +43,37 @@
             </div>
           </div>
         </div>
-        <div class="row">
-          <div class="tit">单重 :</div>
-          <div class="items">
-            <div class="item curr">
-              10KG
-            </div>
-            <div class="item">
-              20KG
-            </div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="tit">安装 :</div>
-          <div class="items">
-            <div class="item curr">
-              组装
-            </div>
-          </div>
-        </div>
-        <div class="pay">
+
+        <div class="pay" @click="showPhone = true">
           联系商家
         </div>
+        <transition name="slide-fade">
+          <span v-if="showPhone" class="phone">138 388 8888</span>
+        </transition>
       </div>
     </div>
     <div class="x-title">商品详情</div>
     <div class="details">
-      <div class="row">
-        <span>商品名称：全钢制保险柜</span>
-        <span>商品材质：钢制</span>
-        <span>商品单重：20KG</span>
-      </div>
-      <div class="row">
-        <span>商品颜色：黑、白、灰。。</span>
-        <span>商品规格：一斗一门、两斗两门。。。</span>
-        <span>配送方式：厂家直邮</span>
-      </div>
-      <div class="row">
-        <span>生产日期：2019-12-10</span>
-        <span>生产地点：洛阳市伊滨区庞村镇</span>
-        <span>供货仓库地址：洛阳市伊滨区庞村镇</span>
+      <div class="items">
+        <div class="item">商品名称：{{ product.name }}</div>
+        <div class="item">商品材质：</div>
+        <div class="item">商品单重：{{ product.weight }}</div>
+        <div class="item">商品颜色：{{ colors }}</div>
+        <div class="item">商品规格：{{ sizes }}{{ sizes }}</div>
+        <div class="item">配送方式：{{ product.delivery }}</div>
+        <div class="item">生产日期：{{ product.producedTime }}</div>
+        <div class="item">生产地点：{{ product.producedAddress }}</div>
+        <div class="item">供货仓库地址：{{ product.warehouseAddress }}</div>
+        <div
+          class="item"
+          v-for="({ attributeName: k, value: v },
+          index) in product.goodsAttributes"
+          :key="`goodsAttributes${index}`"
+        >
+          {{ `${k}：${v}` }}
+        </div>
       </div>
-      <img src="@assets/productDetails.jpg" alt="" />
+      <div v-html="product.des" />
     </div>
   </div>
 </template>
@@ -93,6 +82,7 @@ import { Component, Vue, Watch, Prop } from "vue-property-decorator";
 @Component
 export default class extends Vue {
   private currImgIndex = 0;
+  private showPhone = false;
   private form = {
     goodsSizes: "",
     goodsColors: ""
@@ -111,6 +101,12 @@ export default class extends Vue {
       .split(",")
       .map(x => this.$basePath + x);
   }
+  get colors() {
+    return (this.product.goodsColors || []).map((x: any) => x.color).join();
+  }
+  get sizes() {
+    return (this.product.goodsSizes || []).map((x: any) => x.size).join();
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -190,19 +186,41 @@ export default class extends Vue {
         color: #fff;
         background: rgb(253, 85, 34);
         cursor: pointer;
+        display: inline-block;
+      }
+      .phone {
+        margin-left: 20px;
+        vertical-align: bottom;
+        letter-spacing: 2px;
+        color: rgb(253, 85, 34);
+        display: inline-block;
       }
     }
   }
   .details {
     padding: 30px 20px;
-
-    .row {
-      margin-bottom: 20px;
-      span {
+    .items {
+      overflow: hidden;
+      .item {
         width: 33.33%;
-        display: inline-block;
+        margin-bottom: 20px;
+        float: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        padding-right: 30px;
+        box-sizing: border-box;
       }
     }
   }
 }
+
+.slide-fade-enter-active {
+  transition: all 0.5s ease;
+}
+
+.slide-fade-enter {
+  transform: translateX(20px);
+  opacity: 0;
+}
 </style>

src/views/shops/details/products.vue

@@ -2,38 +2,36 @@
   <div class="products bg-F5">
     <div class="banner">在线商城banner</div>
     <div class="container">
-      <div class="menu">
-        <h3>商品分类</h3>
-        <ul>
-          <li v-for="x in 7" :key="x">
-            文件柜
-            <i class="el-icon-arrow-right"></i>
-          </li>
-        </ul>
-        <div class="sub" v-show="false">
-          子类选项
-        </div>
-      </div>
-      <div class="items">
-        <div class="item" v-for="x in 8" :key="x">
-          <div class="img">
-            <img src="@assets/shangpin.png" alt="" />
+      <el-row :gutter="20">
+        <el-col :span="4">
+          <mymenu showHeader />
+        </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="" />
+              </div>
+              <span>多功能钢制文件柜</span>
+              <div class="pay">
+                <span>¥ 1800</span>
+                <router-link to="2">
+                  立即购买
+                </router-link>
+              </div>
+            </div>
           </div>
-          <span>多功能钢制文件柜</span>
-          <div class="pay">
-            <span>¥ 1800</span>
-            <router-link to="2">
-              立即购买
-            </router-link>
-          </div>
-        </div>
-      </div>
+        </el-col>
+      </el-row>
     </div>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
-@Component
+import mymenu from "@/components/menu.vue";
+@Component({
+  components: { mymenu }
+})
 export default class extends Vue {}
 </script>
 <style lang="scss" scoped>
@@ -52,13 +50,13 @@ export default class extends Vue {}
     padding: 20px 0;
     .menu {
       width: 190px;
-      background: #fff;
+      // background: #fff;
       display: inline-block;
-      vertical-align: top;
-      margin-right: 20px;
-      border-radius: 4px;
+      // vertical-align: top;
+      // margin-right: 20px;
+      // border-radius: 4px;
 
-      position: relative;
+      // position: relative;
       h3 {
         background: #fd5522;
         color: #fff;
@@ -66,28 +64,6 @@ export default class extends Vue {}
         line-height: 35px;
         padding-left: 20px;
       }
-      ul li {
-        height: 56px;
-        line-height: 56px;
-        padding-left: 20px;
-        position: relative;
-        color: rgb(102, 102, 102);
-        border-bottom: 1px solid #e5e5e5;
-        i {
-          position: absolute;
-          top: 50%;
-          right: 20px;
-          transform: translateY(-50%);
-        }
-      }
-      .sub {
-        width: 600px;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        right: -600px;
-        background: #fff;
-      }
     }
     .items {
       overflow: hidden;