Merge remote-tracking branch 'origin/feature/yc-mobile-1020' into feature/wangcz-mobile-1020

components/mobile/brand/BrandDetail.vue

@@ -1,12 +1,44 @@
 <template>
-  <div class="brandDetail">
-      <div class="brand-logo">
-        <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
+  <div class="brand-detail">
+    <div class="brand-logo">
+      <img :src="brandDetail.logoUrl || '/images/component/default.png'" :alt="brandDetail.nameEn"/>
+    </div>
+    <div class="brand-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="brand-param-list" v-if="activeType=='detail'">
+      <div class="brand-param-item" v-if="brandDetail.series">
+        <span class="remind-tag">| </span>
+        <span>主营产品</span>
+        <div class="main-sell">{{brandDetail.series}}</div>
       </div>
-      <div class="brand-switch-item">
-        <span class="mobile-switch-btn">品牌</span>
-        <span class="mobile-switch-btn">产品</span>
+      <div class="brand-param-item" v-if="applications.length>0">
+        <span class="remind-tag">| </span>
+        <span>应用领域</span>
+        <div class="main-sell">
+          <span v-for="(item, index) in applications"><span>{{item}}</span><span v-show="index+1 < applications.length">|</span></span>
+        </div>
       </div>
+      <div class="brand-param-item" v-if="brandDetail.brief">
+        <span class="remind-tag">| </span>
+        <span>品牌介绍</span>
+        <div class="main-sell">{{brandDetail.brief}}</div>
+      </div>
+      <div class="brand-param-item" v-if="brandDetail.url">
+        <span class="remind-tag">| </span>
+        <span>官网地址</span>
+        <a class="brand-url" v-text="brandDetail.url"></a>
+      </div>
+    </div>
+    <div class="brand-product-list" v-if="activeType=='product'">
+      <ul>
+        <li v-for="product in productList.content">
+          <nuxt-link class="text-left" :to="'/mobile/brand/componentDetail/' + product.uuid">{{product.code}}</nuxt-link>
+          <a class="text-right">规格书</a>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 <script>
@@ -14,27 +46,36 @@
     name: 'MobileBrandsDetail',
     data () {
       return {
-        applications: []
+        applications: [],
+        activeType: 'product'
       }
     },
     computed: {
-      list () {
+      brandDetail () {
         let list = this.$store.state.brandDetail.detail.data
         if (list.application && list.application !== '') {
           this.applications = list.application.split(',')
         }
         return list
+      },
+      productList () {
+        return this.$store.state.brandComponent.component.data || []
       }
     }
   }
 </script>
 <style lang="scss" scoped>
-  .brandDetail {
+  .brand-detail {
+    margin: 0 auto;
+    text-align: center;
     .brand-logo {
       text-align: center;
       height: 2.21rem;
       line-height: 2.21rem;
       width: 3.73rem;
+      display: inline-block;
+      border: .01rem solid #e75610;
+      margin: .38rem auto;
       img {
         max-height: 2.21rem;
       }
@@ -46,7 +87,144 @@
         color: #fff;
         display: inline-block;
         height: .68rem;
-        line-height: .68rem;
+        font-size: .28rem;
+        padding: .19rem .53rem;
+        position: relative;
+        &:first-child {
+          background: #fff;
+          color: #e75610;
+          border: .01rem solid #e75610;
+          border-left: none;
+          padding-left: .30rem;
+        }
+        &:first-child.active {
+          background: #e75610;
+          color: #fff;
+          border: .01rem solid #e75610;
+          padding-left: .30rem;
+        }
+        &:last-child {
+          background: #fff;
+          color: #e75610;
+          border: .01rem solid #e75610;
+          border-right: none;
+          padding-right: .35rem;
+        }
+        &:last-child.active {
+          background: #e75610;
+          color: #fff;
+          border: .01rem solid #e75610;
+          border-right: none;
+          padding-right: .35rem;
+        }
+        &:first-child:before {
+          content: '';
+          background: #fff;
+          border: .01rem solid #e75610;
+          width: .64rem;
+          height: .68rem;
+          border-radius: 100%;
+          position: absolute;
+          left: -.33rem;
+          top: -.01rem;
+          z-index: -5;
+        }
+        &:first-child.active:before {
+          content: '';
+          background: #e75610;
+          border: .01rem solid #e75610;
+          width: .64rem;
+          height: .68rem;
+          border-radius: 100%;
+          position: absolute;
+          left: -.33rem;
+          top: -.01rem;
+        }
+        &:last-child:before {
+          content: '';
+          background: #fff;
+          width: .64rem;
+          height: .68rem;
+          border-radius: 100%;
+          position: absolute;
+          border: .01rem solid #e75610;
+          left: 1.04rem;
+          z-index: -5;
+          top: -.01rem;
+        }
+        &:last-child.active:before {
+          content: '';
+          background: #e75610;
+          width: .64rem;
+          height: .68rem;
+          border-radius: 100%;
+          position: absolute;
+          border: .01rem solid #e75610;
+          left: 1.04rem;
+          z-index: -5;
+          top: -.01rem;
+        }
+      }
+    }
+    .brand-param-list {
+      text-align: left;
+      padding: 0 .44rem;
+      margin-top: .28rem;
+      .brand-param-item {
+        font-size: .28rem;
+        margin-bottom: .48rem;
+        .remind-tag {
+          color: rgb(4,198,96);
+          font-size: .24rem;
+          position: relative;
+          bottom: .03rem;
+        }
+        .main-sell {
+          color: #666;
+          margin-top: .19rem;
+          line-height: .4rem;
+          max-height: 1.2rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
+        }
+        .brand-url {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: #01a44e;
+          margin-left: .28rem;
+        }
+      }
+    }
+    .brand-product-list {
+      margin-top: .28rem;
+      font-size: .28rem;
+      ul {
+        text-align: center;
+        li {
+          display: inline-block;
+          width: 6.66rem;
+          height: .66rem;
+          line-height: .66rem;
+          border: {
+            top: 1px solid rgb(230,228,228);
+            bottom: 1px solid rgb(230,228,228);
+          }
+          &:nth-child(even) {
+            background: #f9f9f9;
+          }
+          .text-left {
+            float: left;
+            color: #333;
+          }
+          .text-right {
+            float: right;
+            color: #333;
+          }
+        }
       }
     }
   }

components/mobile/brand/ComponentDetail.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="component-detail">
+    <div class="base-detail">
+      <div class="base-detail-item">
+        <span>类目：</span>
+        <span>{{component.kind.nameCn}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    computed: {
+      component () {
+        return this.$store.state.componentDetail.detail.data
+      }
+    }
+  }
+</script>
+<style>
+
+</style>

pages/mobile/brand/componentDetail/_uuid.vue

@@ -0,0 +1,17 @@
+<template>
+  <component-detail></component-detail>
+</template>
+<script>
+  import ComponentDetail from '~components/mobile/brand/ComponentDetail.vue'
+  export default {
+    layout: 'main',
+    components: {
+      ComponentDetail
+    },
+    fetch ({ store, params }) {
+      return Promise.all([
+        store.dispatch('loadComponentDetail', {id: params.uuid})
+      ])
+    }
+  }
+</script>