热卖推荐、品牌详情、器件详情页面

components/home/Nav.vue

@@ -16,7 +16,7 @@
       <nuxt-link to="/providers" class="item">
         <span>代理经销</span>
       </nuxt-link>
-      <nuxt-link to="/product" class="item">
+      <nuxt-link to="/product/original" class="item">
         <span>热卖推荐</span>
       </nuxt-link>
       <nuxt-link to="/product" class="item">

components/main/Nav.vue

@@ -16,7 +16,7 @@
       <nuxt-link to="/providers" class="item">
         <span>代理经销</span>
       </nuxt-link>
-      <nuxt-link to="/product" class="item">
+      <nuxt-link to="/product/original" class="item">
         <span>热卖推荐</span>
       </nuxt-link>
       <nuxt-link to="/product" class="item">

components/product/brand/BrandComponent.vue

@@ -0,0 +1,142 @@
+<template>
+  <div class="component-list container">
+    <div class="type-list">型号列表</div>
+    <div class="input-group">
+      <input  type="text" class="input-sm form-control" placeholder="请输入型号"/>
+      <span class="input-group-btn">
+					<button class="search btn btn-default" type="button">搜索器件</button>
+			</span>
+    </div>
+    <table class="table">
+      <thead>
+        <tr class="bgf7">
+          <th width="500">型号</th>
+          <th width="300">数据手册</th>
+          <th width="200">操作</th>
+        </tr>
+      </thead>
+      <tbody>
+        <!--<tr class="text-center">-->
+          <!--<td><a href=""><span>xxx</span></a></td>-->
+          <!--<td><a href=""><button class="btn btn-default">Datasheet手册</button></a></td>-->
+          <!--<td>-->
+            <!--<button class="btn btn-default disabledbtn">申请样片</button>-->
+          <!--</td>-->
+        <!--</tr>-->
+        <tr>
+          <td colspan="10" class="text-center">
+            <div class="empty">
+              <div class="empty-img">
+                <img src="/images/brandList/empty-cart.png">
+              </div>
+              <div class="empty-info">
+                <p class="grey f16"> 暂无器件信息 </p>
+                <i class="fa fa-mail-reply fa-xs"></i>&nbsp;<a href="javascript:history.go(-1)">返回上一页</a>
+              </div>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'BrandComponent'
+  }
+</script>
+<style scoped>
+  .component-list {
+    float: left;
+    margin-left: 20px;
+    width: 970px;
+  }
+  .component-list .type-list{
+    height: 34px;
+    width: 150px;
+    border: 1px solid #5078cb;
+    background-color: #5078CB;
+    float: left;
+    color: #fff;
+    line-height: 34px;
+    text-align: center;
+    font-size: 14px;
+  }
+  .component-list .input-group {
+    width: 300px;
+    float: right;
+    border-radius: 3px;
+  }
+  .input-group .form-control{
+    border-radius: 3px;
+  }
+  .component-list .input-group-btn .search{
+    background: #5078cb;
+    color: #fff;
+    height: 34px;
+    border-radius: 3px;
+  }
+  .component-list table {
+    margin-top: 10px;
+    width: 970px;
+    border: 1px solid #e8e8e8;
+  }
+  .component-list table>thead {
+    height: 40px;
+  }
+  .component-list table>thead>th {
+    text-align: center;
+  }
+  .component-list table tbody tr{
+    text-align: center;
+  }
+  .component-list .btn-default {
+    color: #214797;
+    font-size: 12px;
+    line-height: 12px;
+    height: 30px;
+  }
+  .component-list .disabledbtn {
+    color: #A0A0A0;
+  }
+  .component-list td.text-center{
+    padding: 30px 0;
+    font-size: 20px;
+    line-height: 40px;
+  }
+  .bgf7{
+    height: 40px;
+  }
+  .bgf7 th{
+    background: #f7f7f7;
+    border-bottom: none !important;
+    font-size: 14px;
+  }
+  .component-list .empty{
+    overflow: hidden;
+    text-align: center;
+    margin: 0 auto;
+  }
+  .component-list .empty-img{
+    float: left;
+    margin-left: 335px;
+  }
+  .component-list .empty-info{
+    float: left;
+    line-height: 10px;
+    width: 143px;
+    margin-top: 30px;
+  }
+  .empty-info .grey{
+    color: #999;
+    font-size: 14px;
+  }
+  .component-list .empty-info a{
+    font-size: 14px;
+    color: #5078cb;
+  }
+  .component-list .empty-info i{
+    font-size: 14px;
+    color: #5078cb;
+  }
+</style>

components/product/brand/BrandDetail.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="brandDetail container">
+    <div class="menu-com row">
+      <div class="menu-title col-md-12">
+        <a href="product/brandList">品牌中心</a> > <span>{{list.nameEn}}</span></div>
+    </div>
+    <div id="brand">
+      <div class="brand-logo">
+        <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
+      </div>
+      <div class="brand-message">
+        <div class="brand-name"><span>{{list.nameEn}}</span><span v-if="list.nameCn && list.nameEn!=list.nameCn">(<span>{{list.nameCn}}</span>)</span></div>
+        <div class="brand-main" v-show="list.series">主营产品：<span>{{list.series}}</span></div>
+        <div class="apply-area" v-show="applications.length>0">
+          应用领域：<span v-for="(item, index) in applications"><span>{{item}}</span><span v-show="index+1 < applications.length">|</span></span>
+        </div>
+        <div class="brand-description" v-show="list.brief">品牌介绍：<div class="txt-description">{{list.brief}}</div></div>
+        <div style="margin-top: 5px;color:#666;" v-show="list.url">官网地址：<a class="office-address" :href="list.url">{{list.url}}</a></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'BrandsDetail',
+    data () {
+      return {
+        applications: []
+      }
+    },
+    computed: {
+      list () {
+        let list = this.$store.state.brandDetail.detail.data
+        if (list.application && list.application !== '') {
+          this.applications = list.application.split(',')
+        }
+        return list
+      }
+    }
+  }
+</script>
+<style scoped>
+  .brandDetail {
+    margin-bottom: 60px;
+    width: 1190px;
+    padding: 0;
+    overflow: hidden;
+  }
+  .menu-com{
+    margin: 0;
+  }
+  .menu-title{
+    line-height: 40px;
+    font-size: 14px;
+  }
+  .menu-title a{
+    color: #5078cb;
+    font-size: 14px;
+  }
+  i{
+    margin-right: 5px;
+  }
+  .menu-title{
+    padding-left: 0;
+  }
+  .brand-main{
+    font-size: 14px;
+    color: #5078cb;
+    line-height: 20px;
+  }
+  .apply-area{
+    font-size: 14px;
+    color: #5078cb;
+    margin-top: 8px;
+  }
+  .apply-area span{
+    margin-right: 5px;
+  }
+  .office-address{
+    margin-top: 10px;
+  }
+  .office-address{
+    color: #666;
+  }
+  .office-address:hover{
+    color: #5078cb;
+    cursor: pointer;
+  }
+  .brand-description{
+    margin-top: 6px;
+    font-size: 14px;
+    color: #666;
+  }
+  .brand-description .txt-description{
+    font-size: 14px;
+    color: #666;
+  }
+  .brandDetail .brand-logo{
+    float: left;
+    width: 200px;
+    height: 108px;
+    text-align: center;
+    line-height: 100px;
+    border: 1px solid #ccc;
+    background-color: #c1c1c1;
+  }
+  .brandDetail .brand-logo img {
+    max-width: 198px;
+    max-height: 106px;
+    vertical-align: middle;
+  }
+  .brandDetail .brand-message {
+    float: left;
+    margin-left: 20px;
+    margin-bottom: 60px;
+    width: 970px;
+  }
+  .brandDetail .brand-message .brand-name {
+    font-size: 18px;
+    font-weight: 700;
+    margin-bottom: 14px;
+  }
+  .brandDetail .brand-message .brand-description {
+    font-size: 14px;
+    line-height: 20px;
+  }
+</style>

components/product/brand/CategoriesList.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="categories-list container">
+    <div class="categories-list-header">产品分类</div>
+    <div class="categories-list-body" id="kinds">
+      <!--<ul class="list-unstyled">-->
+        <!--<li>-->
+          <!--<i class="fa fa-angle-right" aria-hidden="true"></i>-->
+          <!--<i class="fa fa-angle-down" aria-hidden="true"></i>-->
+          <!--<a>器件详情</a>-->
+          <!--<ul class="list-unstyled" style="margin-left: 10px;">-->
+            <!--<li>-->
+              <!--<i class="fa fa-angle-right" aria-hidden="true"></i>-->
+              <!--<i class="fa fa-angle-down" aria-hidden="true"></i>-->
+              <!--<a>sad</a>-->
+              <!--<ul class="list-unstyled" style="margin-left: 15px;">-->
+                <!--<li>-->
+                  <!--<i class="fa fa-angle-right" aria-hidden="true"></i>-->
+                  <!--<i class="fa fa-angle-down" aria-hidden="true"></i>-->
+                  <!--<a>萨达速度向</a>-->
+                <!--</li>-->
+              <!--</ul>-->
+            <!--</li>-->
+          <!--</ul>-->
+        <!--</li>-->
+      <!--</ul>-->
+      <div class="no-record">
+        暂无类目信息
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'CategoriesList',
+    date: {
+
+    },
+    computed: {
+      lists () {
+        return this.$store.state.brandCategories.categories
+      },
+      list () {
+        return this.lists.data
+      }
+    }
+  }
+</script>
+<style scoped>
+  .no-record{
+    font-size: 14px;
+    color: #999;
+    text-align: center;
+    line-height: 172px;
+  }
+  .categories-list {
+    clear: both;
+    float: left;
+    width: 200px;
+    border: 1px solid #e8e8e8;
+  }
+  .categories-list .categories-list-header {
+    height: 34px;
+    text-align: center;
+    color: #fff;
+    background-color: #5078cb;
+    font-size: 14px;
+    padding: 7px;
+  }
+  .categories-list ul>li {
+    list-style: none;
+    padding: 10px 0;
+  }
+  .categories-list ul>li>a {
+    cursor: pointer;
+    color: #323232;
+  }
+  .categories-list .categories-list-body ul>li .kind-active {
+    color: #5078CB;
+    font-size: 14px;
+  }
+  .categories-list .categories-list-body>ul {
+    padding: 0;
+    font-size: 14px;
+  }
+  .categories-list .categories-list-body>ul>li {
+    list-style: none;
+    padding: 10px;
+  }
+</style>

components/product/component/ComponentDetail.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="componentDetail">
+    <div class="container">
+      <div class="menu">
+        <component-menu/>
+      </div>
+      <div class="detail">
+        <div class="component-img">
+          <img :src="list.img || '/images/component/default.png'"/>
+        </div>
+        <div class="component-message">
+          <div class="message-code">
+            <span>{{list.code}}</span>
+          </div>
+          <div class="hr-grey"></div>
+          <div class="row">
+            <div class="form-group row" v-if="list.brand">
+              <div class="message-item">类目</div>
+              <div class="colon">:</div>
+              <div><a class="message-body blue" target="_blank">{{list.brand.nameCn}}</a></div>
+            </div>
+            <div class="form-group row" v-if="list.kind">
+              <div class="message-item">品牌</div>
+              <div class="colon">:</div>
+              <div><a class="message-body blue" target="_blank">{{list.kind.nameCn}}</a></div>
+            </div>
+            <div class="form-group row">
+              <div class="message-item">总库存量</div>
+              <div class="colon">:</div>
+              <div class="message-body">{{list.reserve || '暂无库存'}}</div>
+            </div>
+            <div class="form-group row">
+              <div class="message-item">封装</div>
+              <div class="colon">:</div>
+              <div class="message-body">{{list.encapsulation || '暂无信息'}}</div>
+            </div>
+            <div class="form-group row">
+              <div class="message-item">下载</div>
+              <div class="colon">:</div>
+              <div class="message-body"><a :href="list.attach" v-if="list.attach">规格书</a><span v-if="!list.attach">暂无规格书</span></div>
+            </div>
+            <div class="form-group">
+              <button class="btn btn-default btn-stroe">加入收藏</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import { ComponentMenu } from '~components/product'
+  export default {
+    name: 'ComponentDetail',
+    computed: {
+      lists () {
+        return this.$store.state.componentDetail.detail
+      },
+      list () {
+        console.log(this.lists.data.kind.level)
+        return this.lists.data
+      }
+    },
+    fetch ({ store }) {
+      return Promise.all([
+        store.dispatch('loadComponentMenu', {id: store.state.componentDetail.detail.data.kind.level})
+      ])
+    },
+    components: {
+      ComponentMenu
+    }
+  }
+</script>
+<style scoped>
+  .componentDetail .container {
+    width: 1190px;
+    padding: 0;
+  }
+  .detail{
+    margin-bottom: 20px;
+  }
+  .componentDetail .container .component-img {
+    width: 260px;
+    height: 260px;
+    display: table-cell;
+    border:1px solid #ccc;
+    text-align: center;
+    vertical-align: middle;
+  }
+  .componentDetail .container .component-img a {
+    display: table-cell;
+    width: 258px;
+    height: 258px;
+    text-align: center;
+    vertical-align: middle;
+  }
+  .componentDetail .container .component-img img {
+    max-width: 258px;
+    max-height: 258px;
+  }
+  .componentDetail .blue {
+    color: #214797;
+  }
+  .componentDetail .container .component-message {
+    width: 910px;
+    display: table-cell;
+    padding-left: 20px;
+    margin-left: 10px;
+  }
+  .componentDetail .container .component-message .message-code {
+    font-size: 24px;
+    color: rgb(50,50,50);
+    font-weight: 700;
+    line-height: 40px;
+  }
+  .componentDetail .container .component-message .hr-grey {
+    height: 1px;
+    width: 100%;
+    background-color: #ccc;
+  }
+  .componentDetail .container .component-message .row {
+    margin: 12px 0;
+    width: 890px;
+    height: 16px;
+  }
+  .componentDetail .container .component-message .message-item {
+    float:left;
+    width:60px;
+    text-align: justify;
+    text-align-last: justify;
+    font-size: 14px;
+  }
+  .componentDetail .container .component-message .colon {
+    float:left;
+    margin: 0 10px;
+  }
+  .componentDetail .container .component-message .message-body {
+    float: left;
+    font-size: 14px;
+  }
+  .componentDetail .message-item:first-child {
+    padding-left: 0;
+  }
+  .componentDetail .container .storeIns{
+    margin-top: 20px;
+    width: 1190px;
+    height: 48px;
+    line-height: 48px;
+  }
+  .componentDetail .container .storeIns .sign {
+    display: table-cell;
+    vertical-align: middle;
+    font-size: 14px;
+  }
+  .componentDetail .container .storeIns .storeInList {
+    display: table-cell;
+  }
+  .componentDetail .container .storeIn {
+    width: 98px;
+    height: 49px;
+    line-height: 30px;
+    float: left;
+    border: 1px solid #ccc;
+    text-align: center;
+    vertical-align: middle;
+    margin-right: 15px;
+    cursor: pointer;
+  }
+  .componentDetail .container .storeIn-active {
+    width: 98px;
+    float: left;
+    border: 1px solid #5078cb;
+    text-align: center;
+    vertical-align: middle;
+    margin-right: 15px;
+    cursor: pointer;
+  }
+  .componentDetail .container .storeIn a,.componentDetail .storeIn-active a {
+    display: table-cell;
+    height: 46px;
+    width: 98px;
+    text-align: center;
+    vertical-align: middle;
+  }
+  .componentDetail .storeIn a>img,.componentDetail .storeIn-active a>img {
+    max-width: 95px;
+    max-height: 46px;
+  }
+</style>

components/product/component/ComponentMenu.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="componentMenu container">
+    <div class="menu-com row">
+      <div class="menu-title col-md-12">
+        <a>器件选型</a> >
+        <span v-for="item in list">
+					<a><span>{{item.nameCn}}</span></a>
+          <span> > </span>
+				  </span>
+        <span>器件详情</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'ComponentMenu',
+    computed: {
+      lists () {
+        return this.$store.state.componentMenu.menu
+      },
+      list () {
+        console.log(this.lists)
+        return this.lists.data
+      }
+    }
+  }
+</script>
+<style scoped>
+  .componentMenu{
+    width: 1190px;
+    margin: 0 auto;
+  }
+  .menu-com{
+    margin: 0;
+  }
+  .menu-title{
+    line-height: 40px;
+    font-size: 14px;
+  }
+  .menu-title a{
+    color: #5078cb;
+    font-size: 14px;
+  }
+  i{
+    margin-right: 5px;
+  }
+  .menu-title{
+    padding-left: 0;
+  }
+</style>

components/product/component/StoreInfo.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="storeInfo container">
+    <div class="form-group">
+      <div class="storeIns">
+        <div class="sign">选择商家：</div>
+        <div class="storeInList">
+          <!--<div>-->
+          <!--<a>-->
+          <!--&lt;!&ndash;<img ng-src="{{storeIn.logoUrl || 'static/img/all/default.png'}}" alt="storeIn.storeName" title="{{storeIn.storeName}}">&ndash;&gt;-->
+          <!--<img  src="/images/component/store.jpg" alt="" title=""/>-->
+          <!--</a>-->
+          <!--</div>-->
+        </div>
+        <!--<div class="storeInList" ng-if="storeIns.length == 0" style="font-size: 14px">-->
+        <div class="storeInList" style="font-size: 14px">
+          暂无商家信息
+        </div>
+      </div>
+    </div>
+    <div class="form-group" style="margin-bottom: 40px;">
+      <div>
+        <div style="font-size: 14px">
+          <span>产品匹配：</span>
+
+          <!--<input type="checkbox" ng-checked="!ignoreUMall" ng-click="toggleUMall()" ng-if="Storeexist && Umallexist">-->
+          <!--<span ng-if="Umallexist">&nbsp;库存寄售</span>-->
+          <!--<input type="checkbox" ng-checked="!ignoreStore" ng-click="toggleStore()" ng-if="Storeexist && Umallexist">-->
+          <!--<span ng-if="Storeexist">&nbsp;店铺自营</span>-->
+          <!--<span ng-if="storeIns.length==0">暂无可匹配的信息</span>-->
+          <span>暂无可匹配的信息</span>
+        </div>
+      </div>
+    </div>
+    <div class="goodsList">
+      <div class="goods-item">按商家列表</div>
+      <table class="table">
+        <thead>
+          <tr class="height54">
+            <th class="text-center" width="100">制造商型号</th>
+            <th class="text-center" width="120">生产日期</th>
+            <th class="text-center" width="80">包装方式</th>
+            <th class="text-center" width="150">库存</th>
+            <th class="text-center" width="80">数量</th>
+            <th class="text-center" width="100">香港交货<span style="font-size: 12px;">($)</span></th>
+            <th class="text-center" width="130">大陆交货<span style="font-size: 12px;">(￥)</span></th>
+            <th class="text-center" width="120">交期</span></th>
+            <th class="text-center" width="150">操作</th>
+          </tr>
+        </thead>
+        <tbody class="text-center">
+          <tr style="cursor: pointer;">
+            <td>RT0805BRB0718K2L</td>
+            <td>2017-4-17</td>
+            <td>暂无包装方式</td>
+            <td style="text-align: left;padding-left: 25px;">
+              <div>
+                <span>库存：</span>
+                <span>xxx</span>
+              </div>
+              <div>
+                <span>起拍：</span>
+                <span>xxx</span>
+              </div>
+              <div>
+                <span>倍数：</span>
+                <span>xxx</span>
+              </div>
+            </td>
+            <td>
+              <div>
+                <span>xxx</span>+
+              </div>
+            </td>
+            <td>
+              <div>
+                <span>xxx</span>
+              </div>
+            </td>
+            <td>
+              <div>
+                <span>xxx</span>
+              </div>
+            </td>
+            <td>
+              <div>
+                <span>香港：</span>
+                <span>xxx</span>-<span>xxx</span>
+              </div>
+            </td>
+            <td>
+              <button class="btn btn-buyNow">立即购买</button>
+              <button class="btn btn-default">加入购物车</button>
+            </td>
+          </tr>
+          <!--<tr>-->
+            <!--<td colspan="10" class="text-center" style="line-height: 40px; font-size: 14px;"><i class="fa fa-smile-o fa-lg"></i> 暂无现货</td>-->
+          <!--</tr>-->
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'StoreInfo',
+    computed: {
+      stores () {
+        return this.$store.state.componentStore.Store
+      },
+      store () {
+        console.log(this.stores.data)
+        return this.stores.data
+      }
+    }
+  }
+</script>
+<style scoped>
+  .container .storeIns{
+    margin-top: 20px;
+    width: 1190px;
+    height: 48px;
+    line-height: 48px;
+  }
+  .container .storeIns .sign {
+    display: table-cell;
+    vertical-align: middle;
+    font-size: 14px;
+  }
+  .container .storeIns .storeInList {
+    display: table-cell;
+  }
+  .container .storeIn {
+    width: 98px;
+    height: 49px;
+    line-height: 30px;
+    float: left;
+    border: 1px solid #ccc;
+    text-align: center;
+    vertical-align: middle;
+    margin-right: 15px;
+    cursor: pointer;
+  }
+  .container .storeIn-active {
+    width: 98px;
+    float: left;
+    border: 1px solid #5078cb;
+    text-align: center;
+    vertical-align: middle;
+    margin-right: 15px;
+    cursor: pointer;
+  }
+  .container .storeIn a,.componentDetail .storeIn-active a {
+    display: table-cell;
+    height: 46px;
+    width: 98px;
+    text-align: center;
+    vertical-align: middle;
+  }
+  .storeIn a>img,.storeIn-active a>img {
+    max-width: 95px;
+    max-height: 46px;
+  }
+  .container .goodsList {
+    clear: both;
+    font-size: 14px;
+  }
+  .container .goodsList .goods-item {
+    height: 30px;
+    width: 120px;
+    background-color: #5078cb;
+    color: #fff;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 30px;
+  }
+  .container .goodsList thead {
+    background-color: #F7F7F7;
+  }
+  .container .goodsList tbody tr td{
+    vertical-align: middle;
+    text-align: center;
+  }
+  .container .goodsList .btn{
+    border-radius: 4px;
+    width: 80px;
+    height: 30px;
+    color: #214797;
+    font-size: 14px;
+    line-height: 14px;
+    text-align: center;
+    margin: 5px 0;
+    padding: 0;
+    user-select: none;
+    background-image: none;
+    border: 1px solid transparent;
+    font-weight: 400;
+  }
+  .container .goodsList .btn-buyNow {
+    color: #fff;
+    background-color: #5078cb;
+  }
+  .container .goodsList .btn-default{
+    background-color: #fff;
+    border-color: #ccc;
+  }
+  .container .form-group input{
+    vertical-align: sub;
+  }
+  .container .height54{
+    height: 54px;
+  }
+  .container .height54 th{
+    line-height: 54px;
+    border-bottom: none;
+    padding: 0;
+  }
+  .container .table tbody td{
+    border-bottom: #ddd 1px solid;
+    border-top: none;
+  }
+  .container .table tbody{
+    border-left: #ddd 1px solid;
+    border-right: #ddd 1px solid;
+  }
+  .container .table tbody td div{
+    text-align: left;
+    margin-left: 10%;
+  }
+  .container .table tbody tr:hover{
+    background: #f5f5f5;
+  }
+  .container .table tbody tr:hover{
+    background: #f5f5f5;
+  }
+</style>

components/product/index.js

@@ -0,0 +1,9 @@
+import ComponentDetail from './component/ComponentDetail.vue'
+import ComponentMenu from './component/ComponentMenu.vue'
+import StoreInfo from './component/StoreInfo.vue'
+import BrandDetail from './brand/BrandDetail.vue'
+import CategoriesList from './brand/CategoriesList.vue'
+import BrandComponent from './brand/BrandComponent.vue'
+import OriginalDetail from './original/OriginalDetail.vue'
+console.log(1)
+export { ComponentDetail, ComponentMenu, StoreInfo, BrandDetail, CategoriesList, BrandComponent, OriginalDetail }

components/product/original/OriginalDetail.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="container original">
+    <div class="hot-banner">
+      <a><img src="/images/original/hot-banner.png" alt=""/></a>
+    </div>
+    <div class="hot-content">
+      <div class="warp">
+        <div class="hot-head"><img src="/images/original/hot.png">热销专区</div>
+        <div class="hot-center clearfix">
+          <div class="hot-center-1 clearfix">
+            <div class="hot-pro" v-for="item in list1">
+              <a title="">
+                <p><img :src="item.img" alt=""></p>
+                <span><em>{{item.code}}</em></span>
+              </a>
+            </div>
+          </div>
+          <div class="hot-center-2 clearfix">
+            <ul>
+              <li v-for="item in list2">
+                <a>
+                  <p><img :src="item.img" alt=""></p>
+                  <span><em>{{item.code}}</em></span>
+                </a>
+              </li>
+            </ul>
+          </div>
+          <div class="bg01 hot-head"><img src="/images/original/hot-new.png">人气新品</div>
+          <div class="hot-center clearfix pad-b10">
+            <div class="hot-center-1 clearfix">
+              <div class="hot-pro" v-for="item in list3">
+                <a title="">
+                  <p><img :src="item.img" alt=""></p>
+                  <span><em>{{item.code}}</em></span>
+                </a>
+              </div>
+            </div>
+            <div class="hot-center-2 clearfix">
+              <ul>
+                <li v-for="item in list4">
+                  <nuxt-link title="" :to="'/product/component/:uuid?'+item.code">
+                    <p><img :src="item.img" alt=""></p>
+                    <span><em>{{item.code}}</em></span>
+                  </nuxt-link>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'OriginalDetail',
+    computed: {
+      lists () {
+        return this.$store.state.original.hot
+      },
+      list1 () {
+        console.log(this.lists.data)
+        return this.lists.data.slice(0, 3)
+      },
+      list2 () {
+        return this.lists.data.slice(3, 8)
+      },
+      list3 () {
+        return this.lists.data.slice(8, 11)
+      },
+      list4 () {
+        return this.lists.data.slice(11, 16)
+      }
+    }
+  }
+</script>
+<style scoped>
+  .original {box-sizing: border-box;padding: 0;margin:0;}
+  .original {-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
+  .original {font-size: 12px;background: #fff;color: #323232;}
+  .original ol,table,tr,td,ul,li,dt,dd,dl,h1,h2,h3,h4,h5,h6,form,input,select,textarea,p,em,i,b,strong,span{font-size: 12px;font-weight: normal;list-style-type:none;font-style: inherit;}
+  .original a{text-decoration: none; color: #323232;}
+  .original a:hover{text-decoration: none;}
+  .original img{border: none;}
+  .original input,button,select,textarea{outline:none}
+  .original .clearfix:before,.clearfix:after{display:table;content:'';line-height:0;}
+  .original .clearfix:after{clear:both;}
+  .original .clear{clear:both;}
+  .original .fl{float: left;}
+  .original .fr{float: right;}
+  .original .textmore{display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
+  .original .no-space{display: flex;}
+  /*热卖产品*/
+  .original {width:100%;margin:0 auto;}
+  .original .hot-banner{width: 100%;height: 336px;background: #ce1a39;text-align: center;line-height: 336px;/* margin-bottom: 16px;*/}
+  .original .hot-banner img{vertical-align: middle; width: 1190px;height: 336px;}
+  .original .hot-content{width: 100%;margin: 0 auto;}
+  .original .hot-content .warp{width: 100%; margin: 0 auto;}
+  .original .hot-content .hot-head{width: 100%;margin: 0 auto;height: 76px;line-height:90px;background: url("/images/original/hot-headbg.png") no-repeat center center;text-align: center;color: #ffc600;font-size: 28px;}
+  .original .hot-center{width: 1190px;margin: 0 auto;background: #d1e0fe;padding-top: 10px;}
+  .original .hot-center-1{width:1176px;margin: 0 auto;}
+  .original .hot-center-1 .hot-pro, .hot-center-1 .hot-pro a{width: 386px;height: 408px;float: left;display: inline-block;background: #fff;}
+  .original .hot-center-1 .hot-pro p{width: 100%;height: 344px;margin: 0;text-align: center;line-height: 344px;overflow: hidden;}
+  .original .hot-center-1 .hot-pro p img{vertical-align: middle; max-width: 300px;max-height: 300px;}
+  .original .hot-center-1 .hot-pro span{width: 386px;height: 64px;display: inline-block;text-align: center;background: #f2f1f2;overflow: hidden;}
+  .original .hot-center-1 .hot-pro span em{width: 90%;height: 64px;font-size: 18px;margin: 0 auto;line-height: 64px;color: #787878;display: inline-block;}
+  .original .hot-center-1 .hot-pro span em.line01{line-height: 64px;margin-top: 0;}
+  .original .hot-center-1 .hot-pro a:hover p{border: #5078cb 1px solid;}
+  .original .hot-center-1 .hot-pro a:hover img{transform: scale(1.1); transition: transform 0.1s ease-in;}
+  .original .hot-center-1 .hot-pro a:hover span{background: #5078cb; transition: background .1s ease-out;}
+  .original .hot-center-1 .hot-pro a:hover span em{color: #fff;}
+  .original .hot-center-1 .hot-pro{margin-right: 8px;}
+  .original .hot-center-1 .hot-pro:last-child{margin-right: 0 !important;}
+  .original .hot-center-2{width:1176px;margin: 0 auto;margin-top: 16px;background: #fff;}
+  .original .hot-center-2 ul{width: 100%;margin: 0 auto;padding: 0;}
+  .original .hot-center-2 ul li{width: 20%;float: left;text-align: center;height:352px;}
+  .original .hot-center-2 ul li a{width: 100%;height: 100%;display: inline-block;}
+  .original .hot-center-2 ul li p{width: 100%;height: 260px;display: inline-block;text-align: center;line-height: 250px;overflow: hidden;}
+  .original .hot-center-2 ul li p img{vertical-align: middle; max-width: 132px;}
+  .original .hot-center-2 ul li span{width: 100%;height:92px;display: inline-block;text-align: center;overflow: hidden;}
+  .original .hot-center-2 ul li span em{width: 90%;font-size: 18px;margin: 0 auto;line-height: 25px;color: #787878;display: inline-block;margin-top: 20px;}
+  .original .hot-center-2 ul li a:hover p img{transform: scale(1.1);}
+  .original .hot-center-2 ul li a:hover span em{color: #5078cb;}
+  .original .hot-center-2 ul li a:hover{border: #5078cb 1px solid;}
+  .original .hot-center-2 ul li a span em.line02{line-height: 92px;margin-top: 0;}
+  .original .pad-b10{ padding-bottom: 10px;}
+</style>

pages/product/brand/_code.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="details">
+    <div class="information">
+      <brand-detail/>
+      <div class="comm-list">
+        <categories-list/>
+        <brand-component/>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import { BrandDetail, CategoriesList, BrandComponent } from '~components/product'
+  export default {
+    layout: 'main',
+    components: {
+      BrandDetail,
+      CategoriesList,
+      BrandComponent
+    },
+    fetch ({ store, route }) {
+      return Promise.all([
+        store.dispatch('loadBrandDetail', {id: route.params.code}),
+        store.dispatch('loadBrandCategories', {id: route.params.code.id})
+      ])
+    }
+  }
+</script>
+<style scoped>
+  .comm-list{
+    width: 1190px;
+    margin: 0 auto;
+    overflow: hidden;
+  }
+</style>

pages/product/component/_uuid.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="detail">
+    <component-menu/>
+    <component-detail/>
+    <store-info/>
+  </div>
+</template>
+<script>
+  import { ComponentMenu, ComponentDetail, StoreInfo } from '~components/product'
+  export default {
+    layout: 'main',
+    components: {
+      ComponentMenu,
+      ComponentDetail,
+      StoreInfo
+    },
+    fetch ({ store, route }) {
+      console.log(route.params.uuid)
+      return Promise.all([
+        store.dispatch('loadComponentDetail', {id: route.params.uuid})
+//        store.dispatch('loadComponentMenu', {id: store.state.componentDetail.detail.data.kind.level.id})
+      ])
+    },
+    created () {
+      console.log(this.$route.params.uuid)
+    }
+  }
+</script>

pages/product/original.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="originalDetail">
+    <original-detail/>
+  </div>
+</template>
+<script>
+  import { OriginalDetail } from '~components/product'
+  export default {
+    layout: 'main',
+    components: {
+      OriginalDetail
+    },
+    fetch ({ store }) {
+      return Promise.all([
+        store.dispatch('loadProductHot', {length: 17})
+      ])
+    }
+  }
+</script>
+<style  scoped>
+
+</style>

store/brandCategories.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+  categories: {
+    fetching: false,
+    data: []
+  }
+})
+export const mutations = {
+  REQUEST_CATEGORIES (state) {
+    state.categories.fetching = true
+  },
+  GET_CATEGORIES_FAILURE (state) {
+    state.categories.fetching = false
+  },
+  GET_CATEGORIES_SUCCESS (state, result) {
+    state.categories.fetching = false
+    state.categories.data = result
+  }
+}

store/brandDetail.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+  detail: {
+    fetching: false,
+    data: []
+  }
+})
+export const mutations = {
+  REQUEST_DETAIL (state) {
+    state.detail.fetching = true
+  },
+  GET_DETAIL_FAILURE (state) {
+    state.detail.fetching = false
+  },
+  GET_DETAIL_SUCCESS (state, result) {
+    state.detail.fetching = false
+    state.detail.data = result
+  }
+}

store/componentDetail.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+  detail: {
+    fetching: false,
+    data: []
+  }
+})
+export const mutations = {
+  REQUEST_DETAIL (state) {
+    state.detail.fetching = true
+  },
+  GET_DETAIL_FAILURE (state) {
+    state.detail.fetching = false
+  },
+  GET_DETAIL_SUCCESS (state, result) {
+    state.detail.fetching = false
+    state.detail.data = result
+  }
+}

store/componentMenu.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+  menu: {
+    fetching: false,
+    data: []
+  }
+})
+export const mutations = {
+  REQUEST_Menu (state) {
+    state.menu.fetching = true
+  },
+  GET_Menu_FAILURE (state) {
+    state.menu.fetching = false
+  },
+  GET_Menu_SUCCESS (state, result) {
+    state.menu.fetching = false
+    state.menu.data = result
+  }
+}

store/componentStore.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+  store: {
+    fetching: false,
+    data: []
+  }
+})
+export const mutations = {
+  REQUEST_STORE (state) {
+    state.store.fetching = true
+  },
+  GET_STORE_FAILURE (state) {
+    state.store.fetching = false
+  },
+  GET_STORE_SUCCESS (state, result) {
+    state.store.fetching = false
+    state.store.data = result
+  }
+}

store/index.js

@@ -104,5 +104,80 @@ export const actions = {
   },
   resetSearchKeywords ({ commit }) {
     commit('search/RESET_KEYWORDS')
+  },
+  // 热卖推荐页面
+  loadProductHot ({commit}, params = {}) {
+    commit('original/REQUEST_HOT')
+    return axios.get('/api/commodity/latest', {params})
+      .then(response => {
+        commit('original/GET_HOT_SUCCESS', response.data)
+      }, err => {
+        commit('original/GET_HOT_FAILURE', err)
+      })
+  },
+  // 器件详情页面
+  // 获得器件详情信息
+  loadComponentDetail ({commit}, params = {}) {
+    let id = params.id
+    console.log(id)
+    commit('componentDetail/REQUEST_DETAIL', params)
+    return axios.get(`/api/product/component/${id}`)
+      .then(response => {
+        console.log('response', response.data)
+        commit('componentDetail/GET_DETAIL_SUCCESS', response.data)
+      }, err => {
+        commit('componentDetail/GET_DETAIL_FAILURE', err)
+      })
+  },
+  // 获取器件详情页面包屑导航
+  loadComponentMenu ({commit}, params = {}) {
+    let pid = params.id
+    console.log(pid)
+    commit('componentMenu/REQUEST_MENU', params)
+    return axios.get(`/api/product/kind/structing/${pid}`)
+      .then(response => {
+        console.log('response', response.data)
+        commit('componentMenu/GET_MENU_SUCCESS', response.data)
+      }, err => {
+        commit('componentMenu/GET_MENU_FAILURE', err)
+      })
+  },
+  // 器件详情页选择商家
+  loadComponentStore ({commit}, params = {}) {
+    let sid = params.id
+    commit('componentStore/REQUEST_STORE', params)
+    return axios.get(`/api/store-service/stores/uuid/${sid}`)
+      .then(response => {
+        console.log('response', response.data)
+        commit('componentStore/GET_STORE_SUCCESS', response.data)
+      }, err => {
+        commit('componentStore/GET_STORE_FAILURE', err)
+      })
+  },
+  // 品牌详情页面
+  // 获得品牌详情信息
+  loadBrandDetail ({commit}, params = {}) {
+    let id = params.id
+    console.log(id)
+    commit('brandDetail/REQUEST_DETAIL', params)
+    return axios.get(`/api/product/brand/${id}`)
+      .then(response => {
+        console.log('response', response.data)
+        commit('brandDetail/GET_DETAIL_SUCCESS', response.data)
+      }, err => {
+        commit('brandDetail/GET_DETAIL_FAILURE', err)
+      })
+  },
+  // 获取品牌详情产品分类信息
+  loadBrandCategories ({commit}, params = {}) {
+    let id = params.id
+    commit('brandCategories/REQUEST_CATEGORIES', params)
+    return axios.get(`/api/product/brand/${id}/kinds`)
+      .then(response => {
+        console.log('response', response.data)
+        commit('brandCategories/GET_CATEGORIES_SUCCESS', response.data)
+      }, err => {
+        commit('brandCategories/GET_CATEGORIES_FAILURE', err)
+      })
   }
 }

store/original.js

@@ -0,0 +1,18 @@
+export const state = () => ({
+  hot: {
+    fetching: false,
+    data: []
+  }
+})
+export const mutations = {
+  REQUEST_HOT (state) {
+    state.hot.fetching = true
+  },
+  GET_HOT_FAILURE (state) {
+    state.hot.fetching = false
+  },
+  GET_HOT_SUCCESS (state, result) {
+    state.hot.fetching = false
+    state.hot.data = result
+  }
+}