店铺详情页，品牌中心

components/mobile/MobileHeader.vue

@@ -129,6 +129,9 @@
         let title = '优软商城'
         if (val.startsWith('/mobile/brand/componentDetail/')) {
           title = this.component.code
+        } else if (val.startsWith('/mobile/brand/brandCenter')) {
+          title = '品牌墙'
+          this.rightIcon = 'share'
         } else if (val.startsWith('/mobile/brand/')) {
           if (this.brandDetail.nameCn) {
             if (this.brandDetail.nameCn !== this.brandDetail.nameEn) {
@@ -144,12 +147,12 @@
             }
           }
           this.rightIcon = 'share'
+        } else if (val.startsWith('/mobile/shop/')) {
+          title = this.store.storeName
+          this.rightIcon = 'phone'
         } else if (val.startsWith('/mobile/shop')) {
           title = '店铺列表'
           this.rightIcon = 'phone'
-        } else if (val.startsWith('/mobile/merchantDescription/')) {
-          title = '商家简介'
-          this.rightIcon = 'phone'
         } else if (val.startsWith('/mobile/user')) {
           title = '我的收藏'
           this.rightIcon = 'phone'
@@ -164,7 +167,7 @@
       },
       showLink: function () {
         this.showStoreInfo = true
-        if (this.title === '商家简介') {
+        if (this.$route.path.startsWith('/mobile/shop/')) {
           this.showDefaultAddr = false
         } else {
           this.showDefaultAddr = true

components/mobile/brand/BrandCenter.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>{{brandList}}</div>
+</template>
+<script>
+  function sortList (letter) {
+    return function (a, b) {
+      var value1 = a[letter]
+      var value2 = b[letter]
+      if (value1 > value2) {
+        return 1
+      } else if (value1 < value2) {
+        return -1
+      } else {
+        return 0
+      }
+    }
+  }
+  export default {
+    name: 'brandList',
+    computed: {
+      brandList () {
+        let brandsList = this.$store.state.product.brand.brandList.data
+        if (brandsList) {
+          for (let i in brandsList) {
+            brandsList[i] = brandsList[i].sort(sortList('nameEn'))
+          }
+        }
+        let temp = {}
+        let keys = []
+        for (let key in brandsList) {
+          keys.push(key)
+        }
+        keys = keys.sort()
+        for (let i = 0; i < keys.length; i++) {
+          temp[keys[i]] = brandsList[keys[i]]
+        }
+        return temp
+      }
+    }
+  }
+</script>
+<style>
+
+</style>

components/mobile/store/StoreDetail.vue

@@ -0,0 +1,267 @@
+<template>
+  <div class="store-detail">
+    <div class="store-logo">
+      <div class="store-logo-box">
+        <img :src="store.logoUrl || '/images/component/default.png'"/>
+      </div>
+    </div>
+    <div class="store-switch-item">
+      <span :class="activeType=='detail'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='detail'">介绍</span>
+      <span :class="activeType=='product'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='product'">产品</span>
+    </div>
+    <div class="store-description" v-if="activeType=='detail'">
+      <p>
+        {{store.description}}
+      </p>
+    </div>
+    <div class="product-store" v-if="activeType == 'product'">
+      <table v-if="commodities.content&&commodities.content.length > 0">
+        <thead>
+        <tr>
+          <th>型号/品牌</th>
+          <th>包装</th>
+          <th>数量</th>
+          <th>单价</th>
+          <th>交期(天)</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="commodity in commodities.content" @click="goProductDetail(commodity.uuid)">
+          <td class="store-name">
+            <div>{{commodity.kindNameCn}}</div>
+            <div>{{commodity.brandNameCn}}</div>
+          </td>
+          <td>
+            <div v-if="!commodity.packaging && !commodity.breakUp && !commodity.produceDate">-</div>
+            <div>{{commodity.packaging}}</div>
+            <div>{{commodity.breakUp?'可拆卖':'不可拆卖'}}</div>
+            <div>{{commodity.produceDate}}</div>
+          </td>
+          <td>
+            <div v-if="!commodity.prices || commodity.prices.length == 0">-</div>
+            <div v-for="price in commodity.prices">{{price.start}}+</div>
+          </td>
+          <td>
+            <div v-if="!commodity.prices || commodity.prices.length == 0">
+              <span>—</span>
+            </div>
+            <div v-for="price in commodity.prices" class="price-level">
+              <span v-if="commodity.currencyName.indexOf('RMB')!==-1">￥{{price.rMBPrice | currency}}</span>
+              <span v-if="commodity.currencyName.indexOf('USD')!==-1">${{price.uSDPrice | currency}}</span>
+            </div>
+          </td>
+          <td>
+            <div v-if="commodity.b2cMinDelivery">
+              <span>交期：</span>
+              <span>{{commodity.b2cMinDelivery}}</span>
+              <span v-if="commodity.b2cMaxDelivery && commodity.b2cMaxDelivery !== commodity.b2cMinDelivery">-</span>
+              <span v-if="commodity.b2cMaxDelivery && commodity.b2cMaxDelivery !== commodity.b2cMinDelivery">{{commodity.b2cMaxDelivery}}</span>
+            </div>
+            <div v-if="commodity.minBuyQty"><span class="order-tag">订</span>{{commodity.minBuyQty}}起订</div>
+            <div v-if="!commodity.b2cMinDelivery">
+              <span>—</span>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+      <!--<div v-if="!storeList.content || storeList.content.length == 0" class="no-store">-->
+        <!--<img src="/images/mobile/@2x/car@2x.png" alt="">-->
+        <!--<div>抱歉，暂无商家出售此型号！</div>-->
+        <!--<div>您可前往<strong>www.usoftmall.com</strong>网页版进行<strong>“发布求购”</strong>或<strong>“产品上架”</strong>操作！</div>-->
+      <!--</div>-->
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        activeType: 'product'
+      }
+    },
+    filters: {
+      currency: function (num) {
+        if (typeof num === 'number') {
+          if (num <= 0.000001) {
+            num = 0.000001
+          } else {
+            if (num.toString().indexOf('.') === -1) {
+              num += '.00'
+            } else {
+              let inputStr = num.toString()
+              let arr = inputStr.split('.')
+              let floatNum = arr[1]
+              if (floatNum.length > 6) {
+                num = inputStr.substring(0, arr[0].length + 7)
+                if (Number(floatNum.charAt(6)) > 4) {
+                  num = (Number(num) * 1000000 + 1) / 1000000
+                }
+              } else if (floatNum.length === 1) {
+                num = num + '0'
+              }
+            }
+          }
+        }
+        return num
+      }
+    },
+    computed: {
+      store () {
+        return this.$store.state.shop.storeInfo.store.data
+      },
+      commodities () {
+        return this.$store.state.shop.storeInfo.storeCommodity.data
+      }
+    },
+    methods: {
+      goProductDetail: function (uuid) {
+        this.$router.push('/mobile/brand/componentDetail/' + uuid)
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .store-detail {
+    margin: 0 auto;
+    margin-bottom: 1.2rem;
+    text-align: center;
+    background: #f7f7f7;
+    height: 100%;
+    .store-logo {
+      height: 3.17rem;
+      width: 6.96rem;
+      display: inline-block;
+      margin: .38rem auto .18rem;
+      line-height: 2.13rem;
+      background: #fff;
+      text-align: center;
+      border-radius: .1rem;
+      background: url('/images/mobile/@2x/brand-bg.png') no-repeat;
+      background-size: cover;
+      .store-logo-box {
+        border: .01rem solid #c7e5fd;
+        border-radius: .1rem;
+        height: 2.21rem;
+        width: 3.73rem;
+        margin: .5rem auto 0;
+        background: #fff;
+        img {
+          max-height: 2.13rem;
+          max-width: 3.7rem;
+        }
+      }
+    }
+    .store-switch-item {
+      text-align: center;
+      background: #fff;
+      .mobile-switch-btn {
+        background: #fff;
+        color: #666;
+        display: inline-block;
+        height: .64rem;
+        font-size: .34rem;
+        line-height: .64rem;
+        width: 1.4rem;
+        &:first-child {
+          margin-right: 1.78rem;
+        }
+        &.active {
+          color: #fc5708;
+          border-bottom: .01rem solid #fc5708;
+        }
+      }
+    }
+    .store-description {
+      background: #f7f7f7;
+      p {
+        background: #fff;
+        margin: .2rem .5rem;
+        padding: .4rem .2rem;
+        font-size: .28rem;
+        color: #666;
+        text-align: left;
+      }
+    }
+    .product-store {
+      margin: .2rem 0;
+      table {
+        width: 100%;
+        font-size: .28rem;
+        thead {
+          background: #d5e5fb;
+          tr {
+            th {
+              font-weight: bold;
+              text-align: center;
+              height: .78rem;
+              line-height: .78rem;
+            }
+          }
+        }
+        tbody {
+          tr {
+            background: #fff;
+            border-top: .01rem solid rgb(174,175,176);
+            td {
+              padding: .2rem .1rem;
+              text-align: left;
+              div {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                margin-bottom: .2rem;
+                max-width: 1.58rem;
+                &:last-child {
+                  margin-bottom: 0;
+                }
+              }
+              .price-level:last-child {
+                color: #fc5708;
+              }
+              .order-tag {
+                display: inline-block;
+                font-size: .18rem;
+                color: #fff;
+                font-weight: bold;
+                background: #ee1717;
+                height: .27rem;
+                width: .27rem;
+                line-height: .27rem;
+                text-align: center;
+                border-radius: .05rem;
+                position: relative;
+                top: -.03rem;
+              }
+            }
+            &:active {
+              background: #e1e1e1;
+            }
+          }
+        }
+      }
+      .no-store {
+        background: #fff;
+        padding-top: 1rem;
+        img {
+          display: block;
+          text-align: center;
+          margin: 0 auto;
+          margin-bottom: .45rem;
+          width: 3.31rem;
+          height: 2.13rem;
+        }
+        div {
+          width: 5.27rem;
+          margin: 0 auto;
+          text-align: center;
+          line-height: .4rem;
+          color: #999;
+          .link-url {
+            color: #01a44e;
+          }
+        }
+      }
+    }
+  }
+</style>

pages/mobile/brand/brandCenter/_initial.vue

@@ -0,0 +1,20 @@
+<template>
+  <brand-center></brand-center>
+</template>
+<script>
+  import BrandCenter from '~components/mobile/brand/BrandCenter.vue'
+  export default {
+    layout: 'main',
+    components: {
+      BrandCenter
+    },
+    fetch ({store, route}) {
+      return Promise.all([
+        store.dispatch('product/loadBrands', {'keyword': route.params.initial})
+      ])
+    }
+  }
+</script>
+<style>
+
+</style>

pages/mobile/shop/_uuid.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <store-detail></store-detail>
+  </div>
+</template>
+<script>
+  import StoreDetail from '~components/mobile/store/StoreDetail.vue'
+  export default {
+    layout: 'main',
+    fetch ({ store, params }) {
+      return Promise.all([
+        store.dispatch('shop/findStoreInfoFromUuid', params),
+        store.dispatch('shop/pageCommoditiesOfStore', params.uuid, { page: 1, count: 10 })
+      ])
+    },
+    computed: {
+      description () {
+        return this.$store.state.shop.storeInfo.store.data
+      }
+    },
+    components: {
+      StoreDetail
+    }
+  }
+</script>
+<style scoped>
+</style>

pages/mobile/shop/index.vue

@@ -10,7 +10,7 @@
         <li @click="onDown('DISTRIBUTION')">经销</li>
       </ul>
     </div>
-    <div class="shop-list" v-for="item in list.content">
+    <div class="shop-list" v-for="item in list.content" @click="goStoreDetail(item.uuid)">
       <h3>{{item.storeName}}</h3>
       <div class="list-item">
         <div class="item-img">
@@ -20,7 +20,7 @@
         <div class="list-item-phone">
           <p>电话：<span>{{item.enterprise.enTel}}</span></p>
           <p>传真：<span>{{item.enterprise.enFax}}</span></p>
-          <p>商家介绍： <nuxt-link :to="'/mobile/merchantDescription/'+item.uuid">点击查看</nuxt-link></p>
+          <!--<p>商家介绍： <nuxt-link :to="'/mobile/merchantDescription/'+item.uuid">点击查看</nuxt-link></p>-->
           <i class="iconfont icon-shoucang" :style="item.isFocus=='true'?'color:#ff7800':'color:#bbb'" @click="focusStore(item)"></i>
         </div>
       </div>
@@ -108,6 +108,9 @@
               this.timeoutCount++
             })
         }
+      },
+      goStoreDetail: function (uuid) {
+        this.$router.push('/mobile/shop/' + uuid)
       }
     }
   }
@@ -218,6 +221,9 @@
         }
       }
     }
+    &:hover {
+      background: #e1e1e1;
+    }
     }
   }