Merge remote-tracking branch 'origin/master'

# Conflicts:
#	components/product/index.js
#	pages/product/brand/_code.vue

.gitignore

@@ -11,3 +11,4 @@ npm-debug.log
 dist
 
 .idea
+*.iml

assets/font/iconfont.css

@@ -44,3 +44,4 @@
 
 .icon-arrow-right:before { content: "\e621"; }
 
+.icon-chuyidong:before { content: "\e617"; }

assets/scss/common.scss

@@ -248,5 +248,36 @@
 .aside-enter, .aside-leave-active {
   opacity: 0
 }
+// 轮播
+.swiper-pagination-bullet{
+  width: 12px !important;
+  height: 12px !important;
+  opacity: 1 !important;
+  background: none !important;
+  border: #fff 1px solid;
+}
+.swiper-pagination-bullet.swiper-pagination-bullet-active{
+  background: #fff !important;
+}
+.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
+  bottom: 20px !important;
+}
+.swiper-button-prev i,.swiper-button-next i{
+  font-size: 40px;
+  color: #fff;
+  opacity: 1;
+  font-weight: 900;
+  text-shadow: 2px 0px 5px #333;
+}
 
-
+.swiper-button-prev,.swiper-button-next{
+  background: none !important;
+  width: 40px !important;
+  height: 80px !important;
+  line-height: 80px;
+  margin-top: -45px !important;
+  opacity: .6;
+}
+.swiper-button-prev:hover,.swiper-button-next:hover{
+  opacity: 1;
+}

assets/scss/help.css

@@ -0,0 +1,249 @@
+/* main */
+#main>.container .left {
+  width: 200px;
+  float: left;
+  background-color: #fff;
+  margin-top: 16px;
+}
+
+#main>.container .right {
+  width: 975px;
+  float: right;
+  font-size: 12px;
+  margin-top: 16px;
+  background: #fff;
+  border: #e8e8e8 1px solid;
+  margin-bottom: 20px;
+}
+.help-list{
+  width: 200px;
+  background: #fff;
+  border: #e8e8e8 1px solid;
+}
+.help-list h2{
+  background: #5078cb;
+  line-height: 34px;
+  height: 34px;
+  color: #fff;
+  font-size: 14px;
+  text-align: center;
+  margin: 0;
+}
+.help-list ul{
+  width: 200px;
+  display: inline-block;
+}
+.help-list li {
+  line-height: 33px;
+  font-size: 14px;
+  color: #333;
+  float: left;
+  width: 100%;
+  padding-left: 10px;
+}
+
+.help-list li a {
+  display: block;
+  padding-left: 15px;
+  text-decoration: none;
+  color: #333;
+  background:url("/images/help/openblack.png") no-repeat left;
+}
+
+.help-list li a:hover{
+  color: #5078cb;
+  cursor: pointer;
+}
+.help-list ul.list-body {
+  /*display: none;*/
+  color: #666;
+}
+
+.help-list ul.list-body.active {
+  display: block;
+}
+.help-list ul.list-body li {
+  float: none;
+  background-image: none;
+  min-height: 26px;
+  line-height: 26px;
+  font-size: 12px;
+}
+
+.help-list ul.list-body li a {
+  padding-left: 15px;
+  display: block;
+  color: rgb(50,50,50);
+  background: none;
+}
+
+.help-list ul.list-body li a:hover {
+  color: #5078cb;
+  cursor: pointer;
+}
+.help-list ul.list-body li a.cur,.help-list ul li a.cur{
+  text-decoration: none;
+  font-size: 14px;
+  background:url("/images/help/openblackR.png") no-repeat left;
+}
+
+/*
+帮助中心中心内容*/
+.help-center{
+  width: 100%;
+  padding-bottom: 20px;
+}
+.help-center .help-head{
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  border-bottom: #dcdcdc 1px dotted;
+}
+.help-center .help-head img{
+  margin-left: 30px;
+  vertical-align: middle;
+}
+.help-center-title{
+  width: 100%;
+  height: 50px;
+  line-height: 50px;
+  padding-left: 30px;
+  margin-bottom: 10px;
+}
+.help-center-title a{
+  font-size: 16px;
+  color: #646464;
+  margin-right: 6px;
+  vertical-align: middle;
+}
+.help-center-title a.box{
+  color: #646464;
+  border: #ccc 1px solid;
+  padding: 1px 10px;
+  margin-right: 8px;
+  line-height: 23px;
+}
+.help-center-title a:hover{
+  color: #5078cb;
+}
+.help-center-title a.box:hover{
+  border: #5078cb 1px solid;
+}
+.help-center-title a.box i{
+  font-size: 8px;
+  font-weight: inherit;
+}
+.help-center-title a i{
+  margin-left: 10px;
+}
+.help-center-home{
+  width: 910px;
+  margin: 0 auto;
+  border: #e8e8e8 1px solid;
+  padding: 0 15px 15px 15px;
+  padding-top: 10px;
+}
+.help-center-home h4{
+  height: 40px;
+  line-height: 40px;
+  font-size: 16px;
+  padding-left: 20px;
+  margin: 0;
+  font-weight: bold;
+}
+.help-center-home .row{
+  line-height: 30px;
+  max-width: 400px;
+  margin-left: 18px;
+  margin-bottom: 30px;
+}
+.help-center-home .row em{
+  margin-right: 6px;
+  width: 3px;
+  height: 3px;
+  display: inline-block;
+  background: #323232;
+  border-radius: 100%;
+  float: left;
+  position: relative;
+  top: 12px;
+}
+.help-center-home .row div{
+  width: 33.3333%;
+  float: left;
+}
+.help-center-home .row div:hover a{
+  color: #5078cb;
+  text-decoration: underline;
+}
+.help-center-home .row div:hover em{
+  background: #5078cb;
+}
+.help-center-home .row a{
+  font-size: 12px;
+  color: #323232;
+}
+
+.help-center-list,.help-center-details{
+  width: 910px;
+  margin: 0 auto;
+  border: #e8e8e8 1px solid;
+  padding: 0 15px 15px 15px;
+  padding-top: 10px;
+}
+.help-center-list h4{
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  padding-left: 20px;
+  margin: 0;
+}
+.help-center-list ul{
+  width: 100%;
+  margin-left: 20px;
+}
+.help-center-list ul li{
+  display: block;
+  line-height: 25px;
+}
+.help-center-list ul li a{
+  color: #323232;
+  font-size: 14px;
+}
+.help-center-list ul li em{
+  margin-right: 6px;
+  width: 3px;
+  height: 3px;
+  display: inline-block;
+  background: #323232;
+  border-radius: 100%;
+  float: left;
+  position: relative;
+  top: 12px;
+}
+.help-center-list ul li:hover a{
+  color: #5078cb;
+  text-decoration: underline;
+}
+.help-center-list ul li:hover em{
+  background: #5078cb;
+}
+.help-center-details{
+  padding: 15px 20px 20px 20px;
+}
+.help-center-details .title {
+  font-size: 16px;
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+.dot{
+  font-size: 16px;
+  margin-right: 6px;
+  position: relative;
+  top: 2px;
+  margin-left: 2px;
+}
+.help-center-title a.box i{
+  position: relative;
+  top: -2px;
+}

assets/scss/reset.scss

@@ -17,7 +17,9 @@ body {
 article,aside,dialog,footer,header,section,footer,nav,figure,menu {
   display: block
 }
-
+.container{
+  padding: 0;
+}
 h1,
 h2,
 h3,
@@ -28,7 +30,9 @@ h6 {
   font-family: inherit;
   line-height: inherit;
 }
-
+a:focus{
+  text-decoration: none !important;
+}
 h1 {
   font-size: $font-size-h1;
   font-weight: 500;

components/common/page/pageComponent.vue

@@ -0,0 +1,79 @@
+<template>
+  <page :total="total" :page-size="pageSize" :current="current"
+        show-elevator v-on:on-change="listenPage"></page>
+</template>
+
+<script>
+  import Page from 'iview/src/components/page'
+  import 'iview/dist/styles/iview.css'
+  export default {
+    props: {
+      current: {
+        default: 1
+      },
+      total: {
+        default: 100
+      },
+      pageSize: {
+        default: 10
+      },
+      showType: {
+        default: 'show-elevator'
+      }
+    },
+    methods: {
+      listenPage: function (changedPage) {
+        this.$emit('childEvent', changedPage)
+      }
+    },
+    components: {
+      Page
+    }
+  }
+</script>
+
+<style>
+  .ivu-page{
+    display: inline-block;
+    padding-left: 0;
+    margin: 20px 0;
+    border-radius: 4px;
+    float: right;
+  }
+  .ivu-page >li{
+    margin: 0!important;
+  }
+  .ivu-page >li:hover{
+    color: #23527c;
+    background-color: #eee;
+  }
+
+  .ivu-page-item-jump-next, .ivu-page-item, .ivu-page-item-jump-prev, .ivu-page-next, .ivu-page-prev {
+    width: 33.64px;
+    height: 30.8px!important;
+    font-family: normal!important;
+    border: 1px solid #ddd!important;
+    border-radius: 0px!important;
+  }
+  .ivu-page >li >a{
+    color: #337ab7;
+    font-size: 12px;
+  }
+
+  .ivu-page-item-active{
+    background-color: #5078cb!important;
+    border-color: #5078cb!important;
+    cursor: default!important;
+  }
+  .ivu-page-item-active >a{
+    color: #fff!important;
+    cursor: default!important;
+  }
+  .ivu-page-options-elevator input {
+    width: 33.64px!important;
+    height: 30.8px!important;
+    text-align: center;
+
+  }
+
+</style>

components/default/Footer.vue

@@ -89,6 +89,10 @@
 </script>
 <style lang="scss" scoped>
   @import '~assets/scss/variables';
+  .footer-guide h5{
+    font-size: 16px;
+    margin-bottom: 10px;
+  }
   .footer {
     font-size: $font-size-small;
     background-color: $grey-bg;

components/default/Header.vue

@@ -37,7 +37,7 @@
             <a class="item" href="http://account.ubtob.com/sso/register">注册</a>
             <nuxt-link class="item" :to="'/'">商城首页</nuxt-link>
           </template>
-          <nuxt-link class="item" to="/help">帮助中心</nuxt-link>
+          <nuxt-link class="item" to="/help/home">帮助中心</nuxt-link>
         </div>
       </div>
     </nav>
@@ -88,6 +88,10 @@
   }
 </script>
 <style lang="scss" scoped>
+  .header .navbar{
+    min-height: inherit;
+    border-radius: 0;
+  }
   @import '~assets/scss/mixins';
   @import '~assets/scss/variables';
 
@@ -123,7 +127,7 @@
           float: left;
 
           .navbar-logo {
-            margin-bottom: -2px;
+            margin-bottom: 2px;
           }
 
           .navbar-slogan {

components/default/RightBar.vue

@@ -2,32 +2,42 @@
   <div class="right-bar">
     <ul class="right-bar-center">
       <li class="right-bar-item">
-        <nuxt-link to="/user/cart">
+        <nuxt-link to="/user/cart" class="title">
           <i class="iconfont icon-shopping-cart icon-xlg"></i>
         </nuxt-link>
-
+        <div class="sidebar-menu"><a href="" title="我的购物车" target="_blank">我的购物车<em><span>(<span>10</span>)</span></em></a></div>
       </li>
       <li class="right-bar-item">
-        <a @click="onLeaveMessageClick()">
+        <a @click="onLeaveMessageClick()" class="title">
           <i class="iconfont icon-liuyan icon-xlg"></i>
         </a>
+        <div class="sidebar-menu"><a href="" title="留言板" target="_blank">留言板</a></div>
       </li>
       <li class="right-bar-item contact-menu">
-        <a href="http://wpa.qq.com/msgrd?v=3&uin=3432892085&site=www.ubtoc.com&menu=yes" target="_blank">
+        <a href="http://wpa.qq.com/msgrd?v=3&uin=3432892085&site=www.ubtoc.com&menu=yes" target="_blank" class="title">
           <i class="iconfont icon-kefu icon-xlg"></i>
         </a>
+        <div class="contact-us sidebar-menu">
+          <p>在线客服：<img src="/images/all/songguo.png" /><a href="http://wpa.qq.com/msgrd?v=3&uin=3432892085&site=www.ubtoc.com&menu=yes" class="contact-btn" target="_blank">联系客服</a></p>
+          <p>服务电话：400-830-1818</p>
+          <p>服务邮箱：yrsc@usoftchina.com</p>
+          <p>工作时间：</p>
+          <p>周一至周五 9:00-18:00</p>
+        </div>
       </li>
     </ul>
     <ul class="right-bar-bottom">
       <li class="right-bar-item">
-        <nuxt-link to="/user/browsingHistory">
+        <nuxt-link to="/user/browsingHistory" class="title">
           <i class="iconfont icon-zuji icon-xlg"></i>
         </nuxt-link>
+        <div class="sidebar-menu"><a href="" title="浏览记录" target="_blank">浏览记录</a></div>
       </li>
       <li class="right-bar-item">
-        <a @click="toTop()">
+        <a @click="toTop()" class="title">
           <i class="iconfont icon-arrow-up icon-xlg"></i>
         </a>
+        <div class="sidebar-menu"><a @click="toTop()" title="返回顶部" target="_blank">返回顶部</a></div>
       </li>
     </ul>
   </div>
@@ -52,6 +62,87 @@
   }
 </script>
 <style lang="scss" scoped>
+  em,i{
+    font-style: inherit;
+  }
+  .right-bar ul li{
+    position: relative;
+  }
+  .right-bar ul li .sidebar-menu {
+    position: absolute;
+    display: block;
+    right: -100%;
+    top: 0px;
+    bottom: 0;
+    width: 120px;
+    line-height: 38px;
+    height: 38px;
+    color: #ffffff;
+    background: #555;
+    -webkit-transform: translateX(100%);
+    -moz-transform: translateX(100%);
+    -ms-transform: translateX(100%);
+    -o-transform: translateX(100%);
+    transform: translateX(100%);
+    -webkit-transition: transform .5s;
+    -moz-transition: transform .5s;
+    -ms-transition: transform .5s;
+    -o-transition: transform .5s;
+    transition: transform .5s;
+    z-index: 19;
+  }
+  .right-bar ul li .sidebar-menu a{
+    background-color: #555555;
+  }
+  .right-bar ul li:hover a{
+    background-color: #555555;
+  }
+  .right-bar ul li:hover .sidebar-menu {
+    display: block;
+    -webkit-transform: translateX(-72px);
+    -moz-transform: translateX(-72px);
+    -ms-transform: translateX(-72px);
+    -o-transform: translateX(-72px);
+    transform: translateX(-72px);
+  }
+  .right-bar ul li .contact-us{
+    /*right: 200px;*/
+    height: 180px;
+    padding-top: 10px;
+    width: 210px;
+    top: -76px;
+  }
+  .right-bar ul li .contact-us p{
+    line-height: 33px;
+    text-align: left;
+    padding-left: 10px;
+    margin-bottom: 0;
+    white-space: nowrap;
+    font-size: 12px;
+  }
+  .right-bar ul li .contact-us .contact-btn{
+    width: 62px;
+    height: 18px;
+    line-height: 18px;
+    background: #ef7f03;
+    display: inline-block;
+    text-align: center;
+    color: #fff;
+    font-size: 12px;
+    border-radius: 5px;
+    padding: 0;
+  }
+  .right-bar-item{
+    width: 36px;
+    height: 38px;
+  }
+  .right-bar .right-bar-item a.title{
+    display: inline-block;
+    width: 36px;
+    height: 38px;
+    line-height: 38px;
+    padding: 0;
+  }
   .right-bar {
     position: fixed;
     z-index: 1000;
@@ -80,7 +171,6 @@
       a {
         position: relative;
         display: block;
-        padding: 5px 0;
         width: 100%;
         color: #fff;
         background-color: #5078CB;
@@ -91,6 +181,7 @@
         -o-transition: background-color ease 0.5s;
         transition: background-color ease 0.5s;
         z-index: 20;
+        font-size: 12px;
       }
     }
   }

components/help/helpHeader.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="user_center">
+    <div class="wrap">
+      <div class="wid1190">
+        <div class="fl">
+          <nuxt-link :to="'/'"><img src="/images/help/logo.png"/></nuxt-link>
+          <!--<span>我的商城<a ng-href="{{homeUrl}}">返回商城首页</a> </span>-->
+        </div>
+        <!--<div class="nav">
+            <ul>
+                <li ng-class="{'active' : active == 'home'}"><a href="#home" class="active">首页</a></li>
+                <li ng-class="{'active' : active == 'message'}" ><a href="#message">消息（0）</a></li>
+                <li ng-class="{'active' : active == 'browsing-history'}" s><a href="#browsing-history">浏览历史</a></li>
+            </ul>
+        </div>-->
+        <!--<div id="mall-search" class="search-right fr" ng-controller="SearchCtrl">
+            <input type="text" ng-model="keyword" ng-change="onChange()" ng-search="search()" ng-focus="onFocus()" ng-blur="onBlur()" ng-keyup="onKeyup()"placeholder="型号/类别/品牌" />
+            <a class="seek" ng-click="search()">搜索</a>
+            <ul class="association" ng-show="associate || associateEnter" ng-mouseenter="onAssociateEnter()" ng-mouseleave="onAssociateLeave()">
+                <li ng-repeat="as in associates" ng-bind="as" ng-class="{'active': $index==selectIndex}"
+                    ng-click="onAssociateClick(as)"></li>
+            </ul>
+        </div>-->
+        <span class="help-title">帮助中心</span>
+      </div>
+      </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'helpHeader'
+  }
+</script>
+<style>
+  .user_center {
+    width: 100%;
+    margin: 0px auto;
+    height: 80px;
+    background: #5078cb;
+  }
+  .wid1190{
+    width: 100%;
+    display: inline-block;
+  }
+  .user_center .fl {
+    width: 230px;
+    position: relative;
+  }
+
+  .user_center .fl a img {
+    float: left;
+    margin-top: 15px;
+  }
+
+  .user_center .fl span {
+    font-size: 18px;
+    color: #fff;
+    position: relative;
+    top: 15px;
+    left: 10px;
+  }
+
+  .user_center .fl span a {
+    width: 86px;
+    height: 20px;
+    display: inline-block;
+    text-align: center;
+    color: #fff;
+    font-size: 11px;
+    border: #fff 1px solid;
+    border-radius: 10px;
+    line-height: 20px;
+  }
+
+  .user_center .fl span a:hover {
+    background: #d2272d;
+    color: #fff;
+  }
+
+  .user_center .nav {
+    background: none;
+    width: 500px;
+    float: left;
+    margin-left: 20px;
+    line-height: 80px;
+    margin-bottom: 0px;
+  }
+
+  .user_center .nav ul {
+    width: 100%;
+    margin: 0px auto;
+  }
+
+  .user_center .nav ul li {
+    font-size: 18px;
+    width: 120px;
+    float: left;
+    text-align: center;
+    position: relative;
+  }
+
+  .user_center .nav ul li a {
+    color: #fff;
+    height: 30px;
+    display: inline-block;
+    line-height: 30px;
+    font-size: 14px;
+    width: 100%;
+    display: inline-block;
+  }
+  .user_center .wrap{
+    width: 1190px;
+    margin: 0 auto;
+  }
+  .help-title{
+    float: right;
+    line-height: 80px;
+    font-size: 24px;
+    color: #fff;
+    margin-right: 20px;
+  }
+</style>

components/help/index.js

@@ -0,0 +1,4 @@
+import left from './left.vue'
+import helpHeader from './helpHeader.vue'
+
+export { left, helpHeader }

components/help/left.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="help-list">
+    <h2>帮助中心</h2>
+    <ul class="list-unstyled" style="margin-top: 10px;">
+      <li v-for="nav01 in helps">
+        <a :class="{'cur': nav01.isHide}" @click="toggleNav(nav01)"><span>{{nav01.item}}</span></a>
+        <ul class="list-unstyled list-body" v-if="!nav01.isHide">
+          <li v-for="nav02 in nav01.children">
+            <nuxt-link :to="`/help/helpList/${nav02.id}`"><span v-text="nav02.item"></span></nuxt-link>
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'left',
+    data () {
+      return {
+        navShow: { 122: false }
+      }
+    },
+    computed: {
+      helps () {
+        return this.$store.state.help.snapsho.data
+      }
+    },
+    methods: {
+      toggleNav (nav) {
+        nav.isHide = !nav.isHide
+      }
+    }
+  }
+</script>
+<style>
+  .help-list{
+    width: 200px;
+    background: #fff;
+    border: #e8e8e8 1px solid;
+  }
+  .help-list h2{
+    background: #5078cb;
+    line-height: 34px;
+    height: 34px;
+    color: #fff;
+    font-size: 14px;
+    text-align: center;
+    margin: 0;
+  }
+  .help-list ul{
+    width: 200px;
+    display: inline-block;
+  }
+  .help-list li {
+    position: relative;
+    line-height: 33px;
+    font-size: 14px;
+    color: #333;
+    float: left;
+    width: 100%;
+    padding-left: 10px;
+  }
+
+  .help-list li a {
+    display: block;
+    padding-left: 15px;
+    text-decoration: none;
+    color: #333;
+  }
+
+  .help-list li a:hover{
+    color: #5078cb;
+    cursor: pointer;
+  }
+  .help-list ul.list-body {
+    /*display: none;*/
+    color: #666;
+  }
+
+  .help-list ul.list-body.active {
+    display: block;
+  }
+  .help-list ul.list-body li {
+    float: none;
+    background-image: none;
+    min-height: 26px;
+    line-height: 26px;
+    font-size: 12px;
+  }
+
+  .help-list ul.list-body li a {
+    padding-left: 15px;
+    display: block;
+    color: rgb(50,50,50);
+    background: none;
+  }
+
+  .help-list ul.list-body li a:hover {
+    color: #5078cb;
+    cursor: pointer;
+  }
+  .help-list ul.list-body li a.cur,.help-list ul li a.cur{
+    text-decoration: none;
+    font-size: 14px;
+  }
+  .help-list .operate-icon {
+    position: absolute;
+    right: 20px;
+    top: 1px;
+  }
+  .help-list li>ul>li>ul>li {
+    padding-left: 30px;
+  }
+</style>

components/home/Advert.vue

@@ -64,7 +64,7 @@
 
   .advert-slide {
     text-align: center;
-    margin-bottom: $xlg-pad;
+    /*margin-bottom: $xlg-pad;*/
 
     .swiper-container {
       height: 100px;

components/home/Carousel.vue

@@ -12,6 +12,8 @@
             </div>
           </div>
           <div class="swiper-pagination swiper-pagination-bullets"></div>
+          <div class="swiper-button-prev"><i class="iconfont icon-arrow-left"></i></div>
+          <div class="swiper-button-next"><i class="iconfont icon-arrow-right"></i></div>
         </div>
       </div>
     </div>
@@ -30,6 +32,8 @@
           mousewheelControl: true,
           effect: 'fade',
           lazyLoading: true,
+          prevButton: '.swiper-button-prev',
+          nextButton: '.swiper-button-next',
           onTransitionStart: (swiper) => {
             // 不要通过vue刷新dom，会导致pagination无法刷新
             // this.activeSlide = swiper.activeIndex

components/home/KindCategory.vue

@@ -67,7 +67,7 @@
     },
     computed: {
       kinds () {
-        return this.$store.state.product.kinds
+        return this.$store.state.product.kind.kinds
       },
       kindsToShow () {
         // 只显示前13个根类目

components/home/Nav.vue

@@ -10,10 +10,10 @@
       <nuxt-link to="/product" class="item">
         <span>品牌中心</span>
       </nuxt-link>
-      <nuxt-link to="/providers" class="item">
+      <nuxt-link to="/provider/factories" class="item">
         <span>原厂专区</span>
       </nuxt-link>
-      <nuxt-link to="/providers" class="item">
+      <nuxt-link to="/provider/home" class="item">
         <span>代理经销</span>
       </nuxt-link>
       <nuxt-link to="/product/original" class="item">
@@ -36,7 +36,9 @@
 <style lang="scss" scoped>
   @import '~assets/scss/variables';
   $nav-height: 40px;
-
+ .container{
+    padding: 0;
+  }
   .nav-list {
     background-color: rgb(244, 248, 255);
     height: $nav-height;

components/home/News.vue

@@ -6,7 +6,7 @@
       </h2>
       <ul class="title-list">
         <li v-for="n in news5" class="item">
-          <nuxt-link :to="`/news/${n.id}`">
+          <nuxt-link :to="`/news/${n.id}`" target="_blank">
             {{ n.title }}
           </nuxt-link>
         </li>
@@ -14,7 +14,7 @@
       </ul>
       <ul class="thumbnail-list">
         <li v-for="n in news3" class="item">
-          <nuxt-link :to="`/news/${n.id}`">
+          <nuxt-link :to="`/news/${n.id}`" target="_blank">
             <img :src="n.thumbnail">
             <span>{{ n.title }}</span>
           </nuxt-link>

components/home/Partner.vue

@@ -45,7 +45,9 @@
 </script>
 <style lang="scss" scoped>
   @import '~assets/scss/variables';
-
+  .partner-container h3{
+    font-size: 24px;
+  }
   .partner {
     text-align: center;
     margin-bottom: $xlg-pad;

components/home/floor/Floor.vue

@@ -24,6 +24,15 @@
   }
 </script>
 <style lang="scss" scoped>
+  .floor h3 {
+    width: 100%;
+    height: 70px;
+    font-size: 24px;
+    padding-top: 0;
+    margin: 0;
+    line-height: 100px;
+    color: #333;
+  }
   .floor {
 
     ul {
@@ -134,6 +143,7 @@
           -webkit-box-orient: vertical;
           -webkit-line-clamp: 2;
           word-break: break-all;
+          display: inherit;
         }
 
         .floor-item-body {

components/home/floor/FloorList.vue

@@ -25,7 +25,10 @@
 </script>
 <style lang="scss" scoped>
   @import '~assets/scss/variables';
-
+  /*add*/
+  .floor-list .container{
+    padding: 0;
+  }
   .floor-list {
     margin-bottom: $xlg-pad;
   }

components/main/Nav.vue

@@ -1,25 +1,25 @@
 <template>
   <nav class="nav-list">
     <div class="container">
-      <nuxt-link to="/product" class="item item-first">
+      <nuxt-link to="/product/kind" class="item item-first">
         <div>器件选型</div>
       </nuxt-link>
       <nuxt-link :to="'/'" class="item" exact>
         <span>首&nbsp;&nbsp;页</span>
       </nuxt-link>
-      <nuxt-link to="/product" class="item">
+      <nuxt-link to="/product/brand/brandList/ABC" class="item">
         <span>品牌中心</span>
       </nuxt-link>
-      <nuxt-link to="/providers" class="item">
+      <nuxt-link to="/provider/factories" class="item">
         <span>原厂专区</span>
       </nuxt-link>
-      <nuxt-link to="/providers" class="item">
+      <nuxt-link to="/provider/home" class="item">
         <span>代理经销</span>
       </nuxt-link>
       <nuxt-link to="/product/original" class="item">
         <span>热卖推荐</span>
       </nuxt-link>
-      <nuxt-link to="/product" class="item">
+      <nuxt-link :to="{ name: 'store-uuid', params: { uuid: '33069557578d44e69bd91ad12d28a8d4' } }" class="item">
         <span>库存寄售</span>
       </nuxt-link>
       <nuxt-link to="/news" class="item">

components/main/Search.vue

@@ -136,7 +136,9 @@
 </script>
 <style lang="scss" scoped>
   @import '~assets/scss/variables';
-
+  .form-control{
+    border-radius: 0;
+  }
   .search-box {
     width: 470px;
     height: 40px;
@@ -150,6 +152,7 @@
     .search-btn {
       font-size: 16px;
       width: 78px;
+      border-radius: 0;
     }
 
     .search-hot {

components/main/count/Box.vue

@@ -30,7 +30,7 @@
     },
     computed: {
       counts () {
-        return this.$store.state.product.counts
+        return this.$store.state.product.common.counts
       }
     },
     mounted () {

components/news/Detail.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="col-md-9">
+      <div class="news-detail" v-bind="item">
+        <h1 >{{item.title}}</h1>
+        <div class="hot-time">
+          <span class="text-num">时间：<span >{{item.created | date}}</span></span>
+          <span class="pull-right text-num" style="font-size: 12px;"><i class="fa fa-eye" style="margin-left: 15px;"></i>{{item.viewCount}}</span>
+        </div>
+        <div class="news-detail-content" v-html=item.content>
+        </div>
+      </div>
+    </div>
+</template>
+<script>
+  export default {
+    name: 'Detail',
+    computed: {
+      new () {
+        return this.$store.state.newsData.detailNews.detailNews
+      },
+      item () {
+        return this.new.data
+      }
+    },
+    filters: {
+      date: function (input) {
+        const d = new Date(input)
+        const year = d.getFullYear()
+        const month = d.getMonth() + 1
+        const hour = d.getHours()
+        const minutes = d.getMinutes()
+        const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate() + ' ' + hour + ':' + minutes
+        return year + '-' + month + '-' + day
+      }
+    }
+  }
+</script>
+<style scoped>
+  .col-md-9{
+    padding-left: 0;
+    float: right;
+    margin-top: 10px;
+  }
+  @media (min-width: 992px) {
+    .col-md-9 {
+      width: 75%;
+    }
+  }
+  .news-detail {
+    width: 100%;
+    margin: 0 auto;
+  }
+  .news-detail h1 {
+    font-size: 24px;
+    line-height: 40px;
+    margin: 0;
+  }
+  .news-detail .hot-time {
+    margin-bottom: 20px;
+  }
+  .hot-time span {
+    font-size: 14px;
+    color: #999;
+  }
+  .news-detail-content {
+    width: 100%;
+    margin: 0 auto;
+    font-size: 14px;
+    border-top: #e8e8e8 1px solid;
+    padding-top: 20px;
+    line-height: 28px;
+    color: #666;
+  }
+</style>

components/news/Left.vue

@@ -0,0 +1,157 @@
+<template>
+
+  <div class="hot-news col-md-3">
+    <h4>
+      <span>hot</span>热门文章
+    </h4>
+
+    <div>
+      <ol class="list-unstyled">
+        <li v-for="item in news_show" v-bind="item">
+          <h5>
+            <nuxt-link :to="'/news/'+item.id" :title=item.title
+                       v-text=item.title></nuxt-link>
+          </h5>
+          <div class="hot-time">
+            <span class="text-num">{{item.created | date}}</span>
+            <span class="pull-right text-num" style="font-size: 12px">
+          <i class="fa fa-eye" style="margin-left: 15px;"></i>{{item.viewCount}}
+          </span>
+          </div>
+          <p class="text-muted summary" v-text=item.summary></p>
+        </li>
+      </ol>
+    </div>
+
+  </div>
+
+</template>
+<script>
+  export default {
+    computed: {
+      new () {
+        return this.$store.state.newsData.hotNews.hotNews
+      },
+      news_show () {
+        return this.new.data
+      }
+    },
+    filters: {
+      date: function (input) {
+        const d = new Date(input)
+        const year = d.getFullYear()
+        const month = d.getMonth() + 1
+        const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
+        return year + '-' + month + '-' + day
+      }
+    }
+  }
+</script>
+<style scoped>
+
+  .hot-news{
+    border: 1px solid #e8e8e8;
+    width:260px;
+    padding: 0;
+    margin-top: 15px
+  }
+  .hot-news h4{
+    background: #ecf2fd;
+    width: 100%;
+    height: 40px;
+    line-height: 40px;
+    font-size: 18px!important;
+    margin: 0;
+  }
+  .hot-news h4 span{
+    background: #feb900;
+    width: 30px;
+    height: 40px;
+    display: inline-block;
+    position: relative;
+    text-align: right;
+    color: #fff;
+    margin-right: 40px;
+    font-size: 12px;
+    line-height: 40px;
+    float: left;
+  }
+
+  .hot-news h4 span:before{
+    content: '';
+    position: absolute;
+    right: -20px;
+    top: 0;
+    width: 0;
+    height: 0;
+    border-width: 20px 0 20px 20px;
+    border-style: solid;
+    border-color: transparent transparent transparent #feb900;
+  }
+
+  .hot-news ol{
+    padding-top: 0px;
+    padding-right: 15px;
+    padding-bottom: 0px;
+    padding-left: 15px;
+  }
+
+  .hot-news ol li{
+    border-bottom: #e8e8e8 1px dotted;
+  }
+
+  .hot-news li h5 {
+    margin-top: 20px;
+    margin-bottom: 0;
+    padding: 5px 0;
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 16px;
+    color: #666666;
+    line-height: 20px;
+    font-weight: 600;
+  }
+
+  .hot-news li h5 a {
+    font-weight: normal;
+    color: #323232;
+  }
+
+  .hot-news li h5 a:hover{
+    color: #5078cb;
+  }
+
+  .hot-time{
+    line-height: 30px;
+  }
+
+  .hot-time span{
+    font-size: 14px;
+    color: #999;
+  }
+  li{
+    display: list-item;
+    text-align: -webkit-match-parent;
+  }
+
+  .list-unstyled{
+    list-style: none;
+  }
+
+  .hot-news li p{
+    font-size: 12px;
+    line-height: 20px;
+    height: 40px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .fa {
+    margin-right: 5px;
+  }
+
+
+
+</style>

components/news/Right.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="news-content col-md-9">
+    <h4><span class="label label-primary">News</span>新闻资讯</h4>
+    <div class="news" v-for="item in news_show">
+      <div class="new">
+        <div style="width: 120px;">
+          <div class="thumbnail-news">
+            <nuxt-link :to="'/news/'+item.id" :title=item.title>
+              <img class="content-thumbnail"  alt="新闻缩略图" :src=item.thumbnail></nuxt-link>
+          </div>
+        </div>
+        <div class="news-list">
+          <h5> <nuxt-link :to="'/news/'+item.id" :title=item.title>{{item.title}}</nuxt-link></h5>
+          <p v-text=item.summary></p>
+          <div class="text-muted">
+            <span class="pull-left " >{{item.created | date}}</span>
+            <span class="pull-right text-num" >
+             <i class="fa fa-eye" style="margin-left: 15px;"></i>{{item.viewCount}}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <page :total="totalCount" :page-size="pageSize"
+          :current="nowPage" v-on:childEvent="listenPage"></page>
+  </div>
+</template>
+
+<script>
+  import Page from '~components/common/page/pageComponent.vue'
+  export default {
+    data () {
+      return {
+        pageSize: 10,
+        nowPage: 1
+      }
+    },
+    components: {
+      Page
+    },
+    computed: {
+      new () {
+        return this.$store.state.newsData.newsPage.allNews
+      },
+      news_show () {
+        return this.new.data.content
+      },
+      totalCount () {
+        return this.new.data.count
+      }
+    },
+    filters: {
+      date: function (input) {
+        const d = new Date(input)
+        const year = d.getFullYear()
+        const month = d.getMonth() + 1
+        const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
+        const hour = d.getHours()
+        const minutes = d.getMinutes()
+        return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes
+      }
+    },
+    methods: {
+      listenPage: function (changedPage) {
+        this.nowPage = changedPage
+        this.$emit('childEvent', this.nowPage)
+      }
+    }
+  }
+
+</script>
+
+<style scoped>
+  .news-content{
+    padding-left: 0;
+    float: right;
+    width: 75%;
+    margin-top: 10px;
+  }
+  .news-content h4{
+    border-bottom: #e8e8e8 1px solid;
+    line-height: 40px;
+    margin: 0;
+  }
+  .news-content h4 span.label{
+    font-size: 12px;
+    padding: 5px 2px;
+    margin-right: 8px;
+  }
+  .news-content h4 span.label-primary{
+    background: #5078cb;
+  }
+
+  .news {
+    display: table;
+  }
+
+  .new {
+    display: table-row;
+  }
+
+  .new >div{
+    display: table-cell;
+    vertical-align: middle;
+    border-bottom: 1px dashed #ccc;
+  }
+  .thumbnail-news {
+    width: 160px;
+    height: 100px;
+    overflow: hidden;
+    margin: 20px 0 20px;
+  }
+
+  .thumbnail-news img {
+    width: 160px;
+    height: 100px;
+    vertical-align: middle;
+    border: 0;
+  }
+
+  .news-list {
+    padding: 10px 10px 10px 20px;
+  }
+  .new h5 {
+    font-size: 16px;
+    font-weight: 600;
+  }
+  .news .new h5 a {
+    color: #323232;
+    font-weight: normal;
+  }
+  .news .new h5 a:hover {
+   color: #5078cb;
+  }
+  .news-list >p{
+    line-height: 25px;
+  }
+  .news-list .pull-right i {
+    margin-right: 10px;
+  }
+
+  .news-content a{
+    cursor: pointer;
+  }
+
+</style>

components/news/index.js

@@ -0,0 +1,4 @@
+import Left from './Left.vue'
+import Right from './Right.vue'
+
+export { Left, Right }

components/product/BrandList.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <div id="brandsList" class="container">
+      <div id="brands">
+        <div v-for="(brands, initial) in brandList" class="row container brands-page">
+          <div class="brands-title">{{initial}}</div>
+          <div class="hr-blue"></div>
+          <div class="row brands-body">
+            <div class="simplebrand" v-for="brand in brands">
+              <div class="brand-name">
+                <nuxt-link :to="`/product/brand/${brand.uuid}/`">
+                  <span>{{brand.nameEn}}</span>
+                </nuxt-link>
+              </div>
+              <div>
+                <nuxt-link :to="`/product/brand/${brand.uuid}/`" v-if="brand.nameEn!=brand.nameCn">
+                  <span class="brand-name-cn">{{brand.nameCn}}</span>
+                </nuxt-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'brandList',
+    computed: {
+      brandList () {
+        return this.$store.state.product.brand.brandList.data
+      }
+    }
+//    methods: {
+//      showList (keyword) {
+//        this.$store.dispatch('product/loadBrands', {'keyword': keyword})
+//      }
+//    }
+  }
+</script>
+
+<style>
+  /** brandList*/
+  #brandsList {
+    clear: both;
+    width: 1190px;
+    padding: 0px;
+  }
+
+  #brandsList .hr-blue {
+    border-bottom: 2px solid #6493FF;
+    border-right: 0px;
+    border-top: 0px;
+    border-left: 0px;
+    width: 100%;
+  }
+
+  #brandsList .initials {
+    margin-top: 3px;
+  }
+
+  #brandsList .row {
+    margin: 20px 0px;
+  }
+
+  #brandsList .row .initial {
+    display: inline-block;
+    margin: 0 5px;
+    font-size: 16px;
+    color: #787878;
+  }
+
+  #brandsList .row .initial:hover{
+    color: #5078CB;
+    font-weight: bold;
+    cursor: pointer;
+  }
+
+  #brandsList .row .initial-active{
+    color: #5078CB;
+    font-weight: bold;
+  }
+
+  #brands .container {
+    width: 1190px;
+    padding: 0px;
+  }
+
+  #brands .row .brands-title {
+    width: 70px;
+    height: 30px;
+    padding-top: 5px;
+    text-align: center;
+    font-size: 16px;
+    color: #fff;
+    background-color: #6493FF;
+  }
+
+  #brands .row .brands-body {
+    margin-bottom: 30px;
+    font-size: 14px;
+    color: #323232;
+  }
+
+  #brands .simplebrand {
+    height: 30px;
+    margin: 13px 0px;
+    width: 25%;
+    float: left;
+  }
+
+  #brands .simplebrand a {
+    color: #323232;
+    text-decoration: none;
+  }
+
+  #brands .simplebrand:hover a{
+    color: #6493FF;
+    font-weight: bold;
+  }
+
+  #brands .simplebrand .brand-name {
+    margin-bottom: 2px;
+  }
+
+  #brands .simplebrand .brand-name-cn {
+    font-size: 12px;
+  }
+
+  #brandsList ul {
+    padding-left: 0px;
+  }
+
+  #brandsList ul li {
+    list-style: none;
+  }
+  #carousel li {
+    width: 12px;
+    height: 12px;
+    margin: 3px;
+  }
+</style>

components/product/KindBox.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="container" style="width:1190px;padding: 0;">
+    <div style="background: #fff; z-index:10;">
+      <div class="box-first">
+        <div class="box-item">类目：</div>
+        <div class="box-kind">
+          <ul id="letter-nav">
+            <!--| orderBy : 'namelength'-->
+            <li class="text-num" v-for="kind in kinds">
+              <a :title="kind.nameCn"  @click="scrollTo(kind.id)">{{kind.nameCn}}</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="box-catagory" v-for="kind in kinds" style="clear: both">
+        <div class="box">
+          <div class="box-title" :id="kind.id">
+            <div class="box-smtitle">
+              <div>
+                <nuxt-link :to="`/product/kind/${kind.id}`"><span :title="kind.nameCn">{{kind.nameCn}}</span></nuxt-link>
+              </div>
+            </div>
+          </div>
+          <div class="box-content">
+            <div class="box-subcatagory">
+              <div class="childkind" v-for="child in kind.children">
+                <dl class="dl-horizontal">
+                  <dt class="dt-title">
+                    <ul>
+                      <li>
+                        <nuxt-link :to="`/product/kind/${child.id}`" :title="child.nameCn"><span>{{child.nameCn}}</span></nuxt-link>
+                      </li>
+                    </ul>
+                  </dt>
+                  <dd>
+                    <ul class="list-unstyled list-inline">
+                      <li v-if="leaf.nameCn.length<=15" v-for="leaf in child.children">
+                        <nuxt-link :to="`/product/kind/${leaf.id}`" :title="leaf.nameCn"><span>{{leaf.nameCn}}</span></nuxt-link>
+                      </li>
+                      <li  style="width: 35%" v-if="leaf.nameCn.length>15" v-for="leaf in child.children">
+                        <nuxt-link :to="`/product/kind/${leaf.id}`" :title="leaf.nameCn">{{leaf.nameCn}}</nuxt-link>
+                      </li>
+                    </ul>
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { scrollTo } from '~utils/scroll'
+  export default {
+    name: 'kind-box',
+    computed: {
+      kinds () {
+        return this.$store.state.product.kind.kinds.data
+      }
+    },
+    methods: {
+      scrollTo: function (el) {
+        scrollTo(document.getElementById(el), 10)
+      }
+    }
+  }
+</script>
+
+<style>
+  .box {
+    margin-bottom: 20px;
+  }
+  .box .box-title {
+    border-bottom: 4px solid #6493FF;
+  }
+  .box .box-smtitle span {
+    background-color: #6493FF;
+    line-height: 28px;
+    padding: 8px 30px;
+    font-size: 14px;
+    font-weight: 100;
+  }
+  .box .box-title a {
+    color: #FFF;
+    font-weight: bolder;
+  }
+  .box .box-title h4 {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    line-height: 30px;
+  }
+  .box .box-content {
+    position: relative;
+    width: 100%;
+    margin: 0 auto;
+  }
+  .box .box-content .box-subcatagory {
+    background-color: #ffffff;
+    border-radius: 5px;
+  }
+  .box .box-content .box-subcatagory .childkind {
+    border-bottom: 1px solid #ccc;
+    border-bottom-style: dashed;
+  }
+  .box .box-content .box-subcatagory dl, .box .box-content .box-subcatagory ul
+  {
+    padding-bottom: 5px;
+    margin-bottom: 0px;
+  }
+  .box .box-content .box-subcatagory dl dt {
+    width: 160px;
+    margin-left: 20px;
+  }
+  .box .box-content .box-subcatagory dl dt span{
+    width: 125px;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .box .box-content .box-subcatagory dl dt a {
+    color: #000;
+    font-size: 14px;
+    font-weight: 500;
+  }
+  .box .box-content .box-subcatagory dl dt a:hover {
+    color: #6493FF;
+  }
+  .box .box-content .box-subcatagory dl dd {
+    margin-left: 180px;
+    margin-bottom: 10px;
+    margin-top: 20px;
+  }
+  .box .box-content .box-subcatagory .list-inline {
+    margin-left: 0;
+  }
+  .box .box-content .box-subcatagory .list-inline>li {
+    width: 20%;
+    margin-bottom: 10px;
+    vertical-align: top;
+    font-size: 14px;
+  }
+  .box .box-content .box-subcatagory .list-inline>li a {
+    color: #000;
+    font-size: 14px;
+    font-weight: 500;
+  }
+  .box .box-content .box-subcatagory .list-inline>li a:hover {
+    color: #6493FF;
+  }
+  .box-first {
+    margin-top: 10px;
+  }
+  .box-first .box-item {
+    float: left;
+    width: 55px;
+    margin-left: 30px;
+    font-size: 14px;
+    padding-top: 10px;
+  }
+  .box-first .box-kind {
+    float: right;
+    width: 1050px;
+    margin-left: 50px;
+    font-size: 14px;
+  }
+  #letter-nav ul, #letter-nav li {
+    list-style-type: none;
+  }
+  #letter-nav li {
+    float: left;
+    width: 130px;
+    margin-right: 12px;
+    margin-bottom: 15px;
+    padding: 5px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  #letter-nav li a {
+    color: #000;
+    padding: 5px;
+    border-radius: 5px;
+  }
+  #letter-nav li a:hover {
+    color: #337ab7;
+    cursor: pointer;
+    text-decoration: none;
+  }
+  .dl-horizontal .dt-title{
+    text-align:left;
+    margin-left: -20px;
+  }
+  .dt-title li{
+    float: left;
+    list-style: none;
+    max-width: 150px;
+    color: #fff;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .box-first{
+    border: #e8e8e8 1px solid;
+    width: 100%;
+    display: inline-block;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    padding-top: 10px;
+  }
+</style>

components/product/Recommends.vue

@@ -0,0 +1,161 @@
+<template>
+  <div id="recommends"  class="container">
+    <div class="title-icon">品牌推荐</div>
+    <div class="hr-blue"></div>
+    <ul class="recommend-list list-unstyled list-inline">
+      <li class="recommend" v-for="hotBrand in hotBrands">
+        <nuxt-link :to="`/product/brand/${hotBrand.uuid}/`">
+          <div class="img"><img :src="hotBrand.logoUrl || '/images/all/default.png'" /></div>
+          <div class="content">
+            <div class="name">
+              <span :title="hotBrand.nameEn">{{hotBrand.nameEn}}</span>
+            </div>
+            <div class="subject">
+              <strong>主营分类</strong>： <span>{{hotBrand.series}}</span> <span v-if="!hotBrand.series">未知</span>
+            </div>
+            <div class="description">
+              <strong>品牌介绍</strong>：<span v-html="hotBrand.brief"></span> <span v-if="!hotBrand.brief">暂无简介</span>
+            </div>
+          </div>
+        </nuxt-link>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'recommends',
+
+    computed: {
+      hotBrands () {
+        return this.$store.state.product.brand.recommends.data
+      }
+    }
+  }
+</script>
+
+<style>
+  #newBrands .newBrands-header img {
+    width: 35px;
+    height: 35px;
+    margin-left: 35px;
+  }
+  #newBrands .newBrands-body .newBrand .newBrand-img img {
+    width: 100px;
+    height: 60px;
+    line-height: 14px;
+    border: 1px solid #ccc;
+  }
+  #recommends {
+    width: 1190px;
+    padding: 0px;
+  }
+  #recommends .hr-blue {
+    border-bottom: 2px solid #6493FF;
+    border-right: 0px;
+    border-top: 0px;
+    border-left: 0px;
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  #recommends .recommend-list {
+    margin-bottom: 20px;
+    text-align: center;
+    margin: 0;
+  }
+  #recommends .recommend-list .recommend {
+    width: 220px;
+    height: 210px;
+    border: 1px solid #D6D3CE;
+    margin-right: 22.5px;
+    margin-bottom: 22px;
+    padding: 0;
+    float: left;
+    overflow: hidden;
+  }
+  #recommends .recommend-list .recommend:last-child{
+    margin-right: 0px !important;
+  }
+  #recommends .recommend-list .recommend a {
+    text-decoration: none;
+  }
+  #recommends .recommend-list .recommend .img{
+    width: 200px;
+    height: 80px;
+    display: inline-block;
+    overflow: hidden;
+    line-height: 88px;
+    text-align: center;
+  }
+  #recommends .recommend-list .recommend img{
+    max-height: 80px;
+    max-width: 200px;
+  }
+  #recommends .recommend-list .recommend .content {
+    font-family: "Microsoft Yahei";
+    margin: 0 10px;
+    height: 108px;
+    text-align: left;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-break: break-all;
+  }
+  #recommends .recommend-list .recommend .name {
+    font-size: 16px;
+    color: #383939;
+    font-weight: 600;
+    width: 200px;
+    /*height: 30px;*/
+    margin-bottom: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  #recommends .recommend-list .recommend .subject, #recommends .recommend-list .recommend .description {
+    width: 200px;
+    height: 35px;
+    font-size: 12px;
+    color: #797979;
+    line-height: 18px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    max-height: 36px;
+  }
+  #recommends .recommend-list .recommend .description{
+    /*overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 3;*/
+    margin-top: 5px;
+  }
+  #recommends .recommend-list .recommend .subject span {
+    width: 204px;
+    white-space: pre-wrap;
+    word-wrap : break-word ;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  #recommends .recommend-list .recommend:hover{
+    border: #5078cb 1px solid;
+  }
+  #recommends .recommend-list .recommend .description span {
+    width: 204px;
+    display: inline;
+    white-space: pre-wrap;
+    word-wrap : break-word ;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .title-icon {
+    font-size: 24px;
+    color: #323232;
+    margin-top: 30px;
+    margin-bottom: 10px
+  }
+</style>

components/product/index.js

@@ -5,5 +5,8 @@ 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 }
+import Recommends from './Recommends.vue'
+import BrandList from './BrandList.vue'
+import KindBox from './KindBox.vue'
+export { ComponentDetail, ComponentMenu, StoreInfo, BrandDetail, CategoriesList, BrandComponent, OriginalDetail, Recommends, BrandList, KindBox }
+

components/provider/Carousel.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="carousel">
+    <div v-swiper:mySwiper="swiperOption">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide" v-for="banner in banners">
+          <img :src="banner.pictureUrl">
+        </div>
+      </div>
+      <div class="swiper-pagination swiper-pagination-bullets"></div>
+      <div class="swiper-button-prev"><i class="iconfont icon-arrow-left"></i></div>
+      <div class="swiper-button-next"><i class="iconfont icon-arrow-right"></i></div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'carousel',
+    data () {
+      return {
+        activeSlide: 0,
+        swiperOption: {
+          autoplay: 5000,
+          initialSlide: 1,
+          loop: true,
+          effect: 'fade',
+          lazyLoading: true,
+          pagination: '.swiper-pagination',
+          paginationClickable: true,
+          paginationElement: 'li',
+          prevButton: '.swiper-button-prev',
+          nextButton: '.swiper-button-next'
+        }
+      }
+    },
+    computed: {
+      banners () {
+        return this.$store.state.carousel.banners.data
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  @import '~assets/scss/variables';
+
+  $carousel_width: 668px;
+  $carousel_height: 358px;
+
+  .carousel {
+    width: $carousel_width;
+    height: $carousel_height;
+    transition: background-color .3s;
+    position: relative;
+
+    .swiper-wrapper {
+      .swiper-slide {
+        img {
+          display: block;
+          width: $carousel_width;
+          height: $carousel_height;
+        }
+      }
+    }
+  }
+</style>

components/provider/ExcellentSuppliers.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="container marketing" style="padding-top: 25px;">
+    <div class="head">
+      <span class="title">优秀商家</span>
+      <a class="see-more" href="/provider/list" v-if="isShowMore">查看更多</a>
+    </div>
+    <ul class="list-unstyled list-inline">
+      <li class="store-box" v-for="(store, index) in stores" :class="{ 'margin-left-zero' : index % 5 == 0}" >
+        <a :href="'/store/' + store.uuid" target="_blank">
+          <div class="img"><img :src="store.logoUrl || '/images/store/common/default.png'"/></div>
+          <div class="content">
+            <div class="name" title="store.storeName">
+              <span>{{store.storeName}}</span>
+            </div>
+            <div class="description">
+              商家介绍：<span>{{store.description}}</span>
+            </div>
+          </div>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'excellent-suppliers',
+  props: ['isShowMore'],
+  computed: {
+    stores () {
+      return this.$store.state.provider.storeCms.recommendStore.data
+    }
+  }
+}
+</script>
+<style scoped>
+  .marketing {
+		width: 1190px;
+		padding: 0px;
+	}
+
+	.marketing .store-box {
+		width: 220px;
+		height: 210px;
+		border: 1px solid #D6D3CE;
+		margin-left: 25px;
+		margin-bottom: 22px;
+		overflow: hidden;
+	}
+
+	.margin-left-zero {
+		margin-left: 0px !important;
+	}
+
+	.marketing ul.list-inline {
+		margin-left: 0px;
+	}
+
+	.marketing .list-inline>li.store-box {
+		padding-right: 0;
+		padding-left: 0;
+		margin-right: -3px;
+	}
+	.marketing .list-inline>li:last-child {
+		margin-right: 0;
+	}
+	.marketing .see-more {
+		float: right;
+		width: 70px;
+		height: 26px;
+		border: 1px solid #d6d3ce;
+		color: #214797;
+		font-family: "Microsoft Yahei", "微软雅黑";
+		font-size: 14px;
+		line-height: 26px;
+		padding-left: 6px;
+		margin-top: 20px;
+		border-radius: 3px;
+	}
+	.marketing .see-more:hover{
+		background: #5078cb;
+		color: #fff;
+	}
+	.marketing .see-more:hover {
+		cursor: pointer;
+	}
+
+	.marketing .title {
+		font-size: 24px;
+		font-family: "Microsoft Yahei", "微软雅黑";
+		line-height: 60px;
+		height: 60px;
+		font-weight: inherit;
+	}
+
+	li.store-box:hover {
+		border-color: #1162A4;
+	}
+
+	.store-box a {
+		text-decoration: none;
+		display: block;
+		text-align: center;
+		width: 220px;
+		height: 210px;
+	}
+	.store-box a .description {
+		text-align: left;
+	}
+
+	.store-box a:hover {
+		text-decoration: none;
+	}
+
+	.store-box img {
+
+		max-height: 80px;
+		max-width: 220px;
+		margin-top: 0;
+	}
+
+	.store-box .content {
+		margin: 0 12px;
+		padding: 5px;
+		height: 103px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		word-break: break-all;
+	}
+
+	.store-box .name {
+		font-size: 16px;
+		color: #383939;
+		text-align: left;
+		/*width: 200px;*/
+		height: 30px;
+		font-weight: 600;
+		margin: 10px 0 5px 0;
+		display: block;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.store-box .subject, .store-box .description {
+		margin-bottom: 5px;
+		/*width: 200px;*/
+		height: 35px;
+		font-size: 12px;
+		color: #797979;
+		line-height: 18px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.store-box .description{
+		overflow:hidden;
+		text-overflow:ellipsis;
+		display:-webkit-box;
+		-webkit-box-orient:vertical;
+		-webkit-line-clamp: 4;
+	}
+	.store-box .description span {
+		word-break: normal;
+		width: 204px;
+		display: inline;
+		white-space: pre-wrap;
+		word-wrap : break-word ;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.store-index-top {
+		height: 360px;
+	}
+
+	.store-index-top-left {
+		width: 240px;
+		float: left;
+		display: inline-block;
+	}
+
+	.store-index-top-center {
+		width: 670px;
+		display: inline-block;
+		float: left;
+		border: 1px solid #D6D3CE;
+	}
+
+	.store-index-top-right {
+		width: 280px;
+		float: left;
+		display: inline-block;
+	}
+	.store-box .img{
+		margin-top: 5px;
+		width: 220px;
+		height: 80px;
+		display: inline-block;
+		overflow: hidden;
+		line-height: 80px;
+		text-align: center;
+	}
+</style>

components/provider/HotCommodity.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="container marketing hot-commodity">
+    <div class="title">热销器件</div>
+    <ul class="list-unstyled list-inline">
+      <li class="hot-commodity-box" v-for="(component, index) in hotComponents" :class="{ 'border-right' : index % 5 == 4 }">
+        <a :href="'/store/' + component.storeid + '/batchInfo/' + component.batchCode" target="_blank">
+          <img :src="component.img || '/images/store/common/default.png'"/>
+          <span>{{component.code}}</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'hot-commodity',
+  computed: {
+    hotComponents () {
+      return this.$store.state.provider.storeCms.hotComponents.data
+    }
+  }
+}
+</script>
+<style scoped>
+  .hot-commodity {
+    margin-bottom: 40px;
+  }
+
+  .marketing .title {
+    font-size: 24px;
+    font-family: "Microsoft Yahei", "微软雅黑";
+    line-height: 60px;
+    height: 60px;
+    font-weight: inherit;
+  }
+
+  .hot-commodity .hot-commodity-box {
+		width: 238px;
+		height: 239px;
+		border-top: 1px solid #D6D3CE;
+		border-left: 1px solid #D6D3CE;
+		overflow: hidden;
+	}
+
+	.hot-commodity > ul > li {
+		/*float: left;*/
+	}
+	.hot-commodity > ul > li:hover{
+		border: #5078cb 1px solid;
+	}
+	.hot-commodity > ul > li:hover span{
+		color: #5078cb;
+		font-weight: bold;
+	}
+	.hot-commodity > ul > li:hover img{
+		transform: scale(1.1);
+	}
+	.hot-commodity ul {
+		border-bottom: 1px solid #D6D3CE;
+		font-size: 0px;
+	}
+
+	.hot-commodity-box img {
+		width: 238px;
+		height: 180px;
+		margin-top: 10px;
+	}
+
+	.hot-commodity-box span {
+		font-size: 14px;
+		font-family: "Microsoft Yahei", "微软雅黑";
+		color: #333434;
+		text-align: center;
+		display: inline-block;
+		width: 100%;
+		height: 30px;
+		line-height: 30px;
+		margin-top: 12px;
+	}
+
+	.hot-commodity .border-right {
+		border-right: 1px solid #D6D3CE;
+	}
+</style>

components/provider/NewStore.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="new-sign-module">
+    <div class="head">
+      <div class="img">
+        <img src="/images/store/home/new.png" />
+      </div>
+      <div class="title">新入驻的商家</div>
+    </div>
+    <ul class="list-unstyled list-inline" style="height: 210px;">
+      <li class="new-store" v-for="(store, index) in stores">
+        <div class="img">
+          <img :src="store.logoUrl || '/images/store/common/default.png'" style="max-width: 100%;max-height: 100%;" />
+        </div>
+        <div class="content">
+          <div class="name"><a target="_blank" :href="'/store/' + store.uuid" :title="store.storeName">{{store.storeName}}</a></div>
+          <div class="subject" style="display: none;">
+            主营：<span>暂无</span>
+          </div>
+          <div class="subject">
+            商家简介：<span>{{store.description}}</span>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <div class="sign">
+      <div class="img">
+        <img src="/images/store/home/shop.png"/>
+      </div>
+      <div class="content">
+        <div class="count">
+          已入驻商家<span>{{storeCount}}</span>家
+        </div>
+        <div>
+          <a href="vendor#/store-apply"><button>立即入驻</button></a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'new-store',
+  computed: {
+    stores () {
+      return this.$store.state.provider.storeCms.newStores.data ? this.$store.state.provider.storeCms.newStores.data.content : []
+    },
+    storeCount () {
+      return this.$store.state.provider.storeCms.storeCount.data
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import '~assets/scss/variables';
+
+  .new-sign-module {
+    width: 280px;
+    height: 360px;
+    padding-left: 10px;
+    border-right: 1px solid #D6D3CE;
+    border-bottom: 1px solid #D6D3CE;
+    border-top: 1px solid #D6D3CE;
+
+    a {
+      color: #337ab7;
+      text-decoration: none;
+    }
+
+    ul {
+      margin-bottom: 10px;
+    }
+
+    .head {
+      height: 60px;
+
+      .img {
+        margin-right: 14px;
+        width: 50px;
+        height: 50px;
+        display: inline-block;
+        text-align: center;
+        line-height: 50px;
+
+        img {
+          vertical-align: middle;
+        }
+      }
+
+      .title {
+        height: 60px;
+        line-height: 60px;
+        font-size: 18px;
+        font-weight: 600;
+        display: inline-block;
+      }
+    }
+
+    .new-store {
+      display: inline-block;
+      height: 70px;
+      padding-bottom: 0;
+      width: 260px;
+
+      .img {
+        width: 50px;
+        height: 50px;
+        display: inline-block;
+        text-align: center;
+        line-height: 50px;
+        border: #e8e8e8 1px solid;
+
+        img {
+          vertical-align: middle;
+        }
+      }
+
+      .content {
+        width: 185px;
+        display: inline-block;
+        padding: 8px;
+        vertical-align: middle;
+        margin-left: 10px;
+
+        .name {
+          font-size: 16px;
+          color: #6D6B66;
+          width: 190px;
+          line-height: 28px;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          word-break: keep-all;
+        }
+
+        .subject {
+          font-size: 14px;
+          color: #777570;
+          line-height: 28px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          word-break: keep-all;
+        }
+      }
+    }
+
+    .sign {
+      height: 80px;
+      box-shadow: 0px -5px 20px 0px #E3E1DE;
+      margin-left: -20px;
+      padding-left: 20px;
+      padding-top: 5px;
+
+      .img {
+        display: inline-block;
+
+        img {
+          margin-bottom: 25px;
+          vertical-align: middle;
+        }
+      }
+
+      .content {
+        display: inline-block;
+        font-size: 0;
+        padding-left: 3px;
+        height: 70px;
+
+        button {
+          background-color: #3D76C6;
+          color: white;
+          font-size: 14px;
+          font-weight: 600;
+          border-radius: 4px;
+          height: 30px;
+          width: 160px;
+          border: #3D76C6;
+        }
+
+        button:hover {
+          transform: scale(1.05);
+          background: #5078cb;
+        }
+      }
+
+      .count {
+        font-size: 16px;
+        padding: 5px;
+
+        span {
+          color: #328CFE;
+        }
+      }
+    }
+  }
+
+</style>

components/provider/RecommendOriginal.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="container" id="recommends">
+    <div class="title-icon">原厂推荐</div>
+    <div class="hr-blue"></div>
+    <ul class="recommend-list list-unstyled list-inline">
+      <li class="recommend" v-for="(store, index) in stores">
+        <a :href="'/store/' + store.uuid">
+          <div class="img"><img :src="store.logoUrl || '/images/store/common/default.png'" /></div>
+          <div class="content">
+            <div class="name">
+              <span :title="store.storeName">{{store.storeName}}</span>
+            </div>
+            <div class="subject" style="min-height: 5px;">
+            </div>
+            <div class="description">
+              <strong>商家介绍</strong>：
+              <span>{{store.description || '暂无简介'}}</span>
+            </div>
+          </div>
+        </a>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'recommend-original',
+  computed: {
+    stores () {
+      return this.$store.state.provider.storeCms.recommendStore.data
+    }
+  }
+}
+</script>
+<style scoped>
+  #recommends {
+		width: 1190px;
+		padding: 0px;
+	}
+
+	#recommends .title-icon {
+	  font-size: 24px;
+    color: #323232;
+    margin-top: 30px;
+    margin-bottom: 10px;
+	}
+
+	#recommends .hr-blue {
+		border-bottom: 2px solid #6493FF;
+		border-right: 0px;
+		border-top: 0px;
+		border-left: 0px;
+		width: 100%;
+		margin-bottom: 20px;
+	}
+
+	#recommends .recommend-list {
+		margin-bottom: 20px;
+		margin: 0;
+	}
+
+	#recommends .recommend-list .recommend {
+		width: 220px;
+		height: 210px;
+		border: 1px solid #D6D3CE;
+		margin-right: 22.5px;
+		margin-bottom: 22px;
+	}
+	#recommends .recommend-list .recommend:last-child{
+		margin-right: 0px !important;
+	}
+	.margin-left-zero {
+		margin-left: 0px !important;
+	}
+	#recommends .recommend-list .recommend a {
+		text-decoration: none;
+	}
+	#recommends .recommend-list .recommend .img{
+		width: 200px;
+		height: 80px;
+		display: inline-block;
+		overflow: hidden;
+		line-height: 80px;
+		text-align: center;
+		margin-top: 5px;
+	}
+	#recommends .recommend-list .recommend img{
+		max-height: 75px;
+		max-width: 200px;
+		margin-top: 5px;
+	}
+
+	#recommends .recommend-list .recommend .content {
+		margin: 0 10px;
+		height: 108px;
+		text-align: left;
+	}
+
+	#recommends .recommend-list .recommend .name {
+		font-size: 16px;
+		color: #383939;
+		font-weight: 600;
+		width: 200px;
+		height: 30px;
+		margin-top: 10px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		word-break: break-all;
+	}
+	/*#recommends .recommend-list .recommend:hover .name{*/
+		/*width: auto;*/
+	/*}*/
+	#recommends .recommend-list .recommend .subject, #recommends .recommend-list .recommend .description {
+		font-size: 12px;
+		color: #797979;
+		line-height: 18px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		max-height: 36px;
+	}
+	#recommends .recommend-list .recommend .description{
+		margin-top: 5px;
+		width: 200px;
+		height: 35px;
+	}
+	#recommends .recommend-list .recommend .subject span {
+		width: 204px;
+		white-space: pre-wrap;
+		word-wrap : break-word ;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	#recommends .recommend-list .recommend:hover{
+		border: #5078cb 1px solid;
+	}
+	#recommends .recommend-list .recommend .description span {
+		word-break: keep-all;
+		width: 204px;
+		display: inline;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: pre-wrap;
+		word-wrap : break-word ;
+	}
+</style>

components/provider/RecommendStore.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="container marketing">
+    <div class="sales-rank">
+      <sales-rank />
+    </div>
+    <div class="carousel">
+      <carousel />
+    </div>
+    <div class="new-store">
+      <new-store />
+    </div>
+  </div>
+</template>
+<script>
+import SalesRank from './SalesRank.vue'
+import NewStore from './NewStore.vue'
+import Carousel from './Carousel.vue'
+
+export default {
+  name: 'recommend-store',
+  components: {
+    SalesRank,
+    NewStore,
+    Carousel
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import '~assets/scss/variables';
+
+  .marketing {
+    width: 1190px;
+    min-height: 360px;
+    padding: 0;
+
+    .sales-rank {
+      width: 240px;
+      min-height: 360px;
+      float: left;
+      display: inline-block;
+    }
+
+    .carousel {
+      width: 670px;
+      min-height: 360px;
+      display: inline-block;
+      float: left;
+      border: 1px solid #D6D3CE;
+    }
+
+    .new-store {
+      width: 280px;
+      min-height: 360px;
+      float: left;
+      display: inline-block;
+    }
+  }
+</style>

components/provider/SalesRank.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="sale-module">
+    <div class="title">
+      <img src="/images/store/home/hot.png" />
+      <span>销售排行榜</span>
+    </div>
+    <ul class="list-unstyled list-inline">
+      <li v-for="(store, index) in stores">
+        <div class="rank">
+          <img v-if="index == 0"      src="/images/store/home/first.png"/>
+          <img v-else-if="index == 1" src="/images/store/home/second.png"/>
+          <img v-else-if="index == 2" src="/images/store/home/third.png"/>
+        </div>
+        <div class="content">
+          <div class="name"><a target="_blank" :href="'/store/' + store.uuid" :title="store.storeName">{{store.storeName}}</a></div>
+          <div class="grade"> 交易量： <span>{{store.orderCount || 0}}</span></div>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'sales-rank',
+  computed: {
+    stores () {
+      return this.$store.state.provider.storeCms.salesStores.data
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import '~assets/scss/variables';
+
+  .sale-module {
+    width: 240px;
+    height: 360px;
+    border-left: 1px solid #D6D3CE;
+    border-bottom: 1px solid #D6D3CE;
+    border-top: 1px solid #D6D3CE;
+
+    a {
+      color: #337ab7;
+      text-decoration: none;
+    }
+
+    .title {
+      height: 60px;
+      line-height: 60px;
+      font-size: 18px;
+      font-weight: 600;
+
+      img {
+        width: 60px;
+        height: 60px;
+      }
+    }
+
+    img {
+      float: left;
+      vertical-align: middle;
+    }
+
+    .list-unstyled {
+      position: relative;
+      top: -12px;
+    }
+
+    ul {
+      margin-bottom: 10px;
+
+      li {
+        height: 55px;
+        padding: 0;
+
+        .rank {
+          display: inline-block;
+          height: 60px;
+          padding-bottom: 0;
+          padding-top: 18px;
+          padding-left: 10px;
+          width: 60px;
+
+          img {
+            width: 40px;
+            height: 33px;
+          }
+        }
+
+        .content {
+          width: 169px;
+          display: inline-block;
+          padding: 5px;
+          vertical-align: bottom;
+          line-height: 20px;
+
+          .name {
+            font-size: 16px;
+            width: 150px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: #6D6B66;
+          }
+
+          .grade {
+            font-size: 14px;
+            color: #777570;
+
+            >span {
+              color: #777570;
+            }
+          }
+        }
+      }
+
+      li:nth-child(1), li:nth-child(2), li:nth-child(3) {
+        .content {
+          .grade {
+            >span {
+              color: #f00;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

components/provider/Suppliers.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="container" id="store-list">
+    <table class="table">
+      <thead>
+      <tr>
+        <td width="175"></td>
+        <td width="auto"></td>
+        <td width="200">
+          <div class="input-group">
+            <input class="form-control" type="search" v-model="keyword" placeholder="请输入商家名称" @search="search()" />
+            <span class="input-group-btn">
+							<button type="button" class="btn btn-default" @click="search()"><i class="iconfont">&#xe6fc;</i></button>
+						</span>
+          </div>
+        </td>
+        <td width="150" style="vertical-align: middle"><span>入驻商家：</span><span class="text-message">{{stores ? stores.length : 0}}</span><span>家</span></td>
+        <td width="150">
+          <a href="vendor#/store-apply"><button class="btn btn-primary" style="margin-left: 6px;">立即入驻</button></a>
+        </td>
+      </tr>
+      </thead>
+      <tbody>
+      <!--<tr>{{$data}}</tr>-->
+      <tr v-for="store in stores">
+        <td>
+          <div class="logo">
+            <a :href="'/store/' + store.uuid"><img :src="store.logoUrl || '/images/store/common/default.png'" :alt="store.storeName"></a>
+          </div>
+        </td>
+        <td colspan="3">
+          <a class="store-name" :href="'/store/' + store.uuid" target="_blank"><div :title="store.storeName">{{store.storeName}}</div></a>
+          <div class="store-message">
+            <span>商家介绍：</span>
+            <span>{{store.description.slice(0,160)}}<em v-if="store.description.length > 160">...</em></span>
+          </div>
+        </td>
+        <td class="vertical-middle">
+          <a :href="'/store/' + store.uuid" target="_blank"><button class="btn btn-primary">进入店铺&nbsp;&gt;</button></a>
+        </td>
+      </tr>
+      <tr v-if="!stores || stores.length == 0">
+        <td colspan="10" class="text-center" style="line-height: 40px; font-size: 20px;">
+          <i class="fa fa-smile-o fa-lg"></i> 暂无店铺信息
+        </td>
+      </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'suppliers',
+  props: ['op'],
+  data () {
+    return {
+      keyword: ''
+    }
+  },
+  computed: {
+    stores () {
+      return this.$store.state.provider.stores.storeList.data
+    }
+  },
+  methods: {
+    search () {
+      let params = { op: this.op, keyword: this.keyword }
+      this.$store.dispatch('provider/findStoreList', params)
+    }
+  }
+}
+</script>
+<style scoped>
+  #store-list{
+		width: 1190px;
+		padding: 0;
+	}
+
+	#store-list table {
+		border: 1px solid #d8d4d4;
+		font-size: 14px;
+	}
+
+	#store-list table>thead>tr {
+		background-color: #f7f7f7;
+		font-size: 14px;
+		font-weight: 600;
+		color: rgb(50,50,50);
+	}
+
+	#store-list table>thead>tr input {
+		font-weight: 100;
+	}
+
+	#store-list .text-message {
+		color: rgb(80,120,203);
+		font-family: "Microsoft Yahei";
+	}
+
+	#store-list .btn-primary {
+		background-color: rgb(80,120,203);
+		color: #fff;
+		width: 100px;
+		height: 30px;
+		line-height: 14px;
+	}
+
+	#store-list table>tbody .logo {
+		width: 150px;
+		height: 76px;
+		text-align: center;
+		line-height: 72px;
+		border:1px solid #ccc;
+	}
+
+	#store-list table>tbody img {
+		max-width: 148px;
+		max-height: 72px;
+	}
+
+	#store-list table>tbody .vertical-middle{
+		vertical-align: middle;
+	}
+
+	#store-list table>tbody .store-mark {
+		margin: 10px 0;
+	}
+
+	#store-list table>tbody .text-point {
+		font-family: "Microsoft Yahei", "微软雅黑";
+		color: #ff3737;
+		font-weight: 600;
+	}
+
+	#store-list table>tbody .store-name {
+		font-size: 17px;
+		font-weight: 600;
+		color: #000;
+	}
+
+	#store-list table>tbody .store-message {
+    color: #999;
+    width: 95%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-height: 18px;
+	}
+	#store-list table>tbody tr td{
+		padding: 15px;
+	}
+
+	@font-face {
+    font-family: 'iconfont';  /* project id 357960 */
+    src: url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.eot');
+    src: url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.eot?#iefix') format('embedded-opentype'),
+    url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.woff') format('woff'),
+    url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.ttf') format('truetype'),
+    url('//at.alicdn.com/t/font_sw3uw5ndd9uow29.svg#iconfont') format('svg');
+  }
+</style>
+

components/provider/index.js

@@ -0,0 +1,7 @@
+import RecommendStore from './RecommendStore.vue'
+import RecommendOriginal from './RecommendOriginal.vue'
+import ExcellentSuppliers from './ExcellentSuppliers.vue'
+import HotCommodity from './HotCommodity.vue'
+import Suppliers from './Suppliers.vue'
+
+export { RecommendStore, RecommendOriginal, ExcellentSuppliers, HotCommodity, Suppliers }

components/search/GoodList.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="main">
+    <div class="proofList">
+      <div class="main-proof">
+        <div class="content-f pro-title">
+          <div class="content-f img"><a href=""></a></div>
+          <div class="content-f">
+            <div style="margin:10px 0 5px 0">
+              <a href="" class="f16 text-bold text-num">123-91-422-41-001000</a>
+              <a href="" class="text-num f10" style="margin-left: 10px">Mill-Max</a>
+            </div>
+            <p class="f10"><span title="产品分类"><i class="fa fa-th-large f14 " aria-hidden="true"></i>&nbsp;&nbsp;<a href="">插座及导线座</a></span></p>
+            <p class="f10"><span class="title">包装方式：</span> <span class="content">无</span></p>
+          </div>
+        </div>
+        <div class="content-r pro-r">
+          <div>
+            库存：<span class="text-num f12">0</span> &nbsp;<span class="text-num f12">PCS</span>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-xs-12">
+          <div class="toMore"><a href="">查看更多&gt;&gt;&nbsp;&nbsp;</a></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+</script>
+<style scoped>
+  .main {
+    margin: 20px auto;
+    width: 100%;
+    padding: 3px 3px;
+  }
+  .main .proofList {
+    width: 100%;
+    height: auto;
+    border: 1px solid #d2d2d2;
+    border-top: 2px solid #5078cb;
+    margin: 15px 0 15px 0;
+    padding-bottom: 20px;
+  }
+  .proofList .main-proof {
+    padding: 20px 20px;
+  }
+  .proofList .pro-title {
+    width: 720px;
+    padding: 10px 10px 10px 20px;
+    height: 115px;
+  }
+  .main .content-f {
+    float: left;
+  }
+  .proofList .img {
+    width: 80px;
+    height: 80px;
+    margin-right: 15px;
+  }
+  .text-bold {
+    font-weight: 700;
+  }
+  .content {
+    margin: 10px 0 20px 0;
+  }
+  .proofList .pro-r {
+    padding: 15px 10px 0 0;
+  }
+  .main .content-r {
+    float: right;
+  }
+  .row {
+    margin-right: -15px;
+    margin-left: -15px;
+  }
+  .proofList .toMore {
+    text-align: right;
+    font-size: 14px;
+  }
+  .f16 {
+    font-size: 16px;
+  }
+  .f14 {
+    font-size: 14px;
+  }
+  a:hover{
+    text-decoration: none;
+    color: #f39801;
+  }
+  .text-num{
+    font-style: normal;
+    font-family: verdana;
+  }
+  .f10{
+    font-size: 10px;
+  }
+</style>

components/search/Kind.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="selector">
+    <div class="sl-wrap">
+      <div class="sl-key f14">按类目筛选：</div>
+      <div class="sl-value">
+        <ul class="list-inline">
+          <li>
+            <a href="" class="f14">射频连接器</a>
+          </li>
+        </ul>
+      </div>
+      <div class="sl-clear"></div>
+      <div class="sl-ext">
+        <a >
+          <span >更多</span>
+          <i class="fa fa-angle-down ng-scope"></i>
+        </a>
+      </div>
+    </div>
+    <div class="sl-wrap">
+      <div class="sl-key f14">按品牌筛选：</div>
+      <div class="sl-value">
+        <ul class="list-inline">
+          <li>
+            <a href="" class="f14">泰科电子</a>
+          </li>
+        </ul>
+      </div>
+      <div class="sl-clear"></div>
+      <div class="sl-ext">
+        <a >
+          <span >更多</span>
+          <i class="fa fa-angle-down ng-scope"></i>
+        </a>
+      </div>
+    </div>
+  </div>
+
+</template>
+<style scoped>
+  #searchResult .selector .sl-wrap {
+    position: relative;
+    padding: 5px 5px;
+    font-size: 12px;
+    line-height: 30px;
+    border-bottom: 1px solid #e5e5e5;
+  }
+  #searchResult .selector .sl-wrap .sl-key {
+    float: left;
+    width: 100px;
+  }
+  .f14 {
+    font-size: 14px;
+  }
+  #searchResult .selector .sl-wrap .sl-value {
+    margin-left: 110px;
+    margin-right: 50px;
+  }
+  #searchResult .selector .sl-wrap .sl-clear {
+    clear: both;
+  }
+  #searchResult .selector .sl-wrap .sl-ext {
+    width: 40px;
+    top: 5px;
+    position: absolute;
+    right: 0;
+  }
+  #searchResult .selector .sl-wrap .sl-value ul {
+    height: 60px;
+    overflow: hidden;
+    margin-bottom: 0;
+  }
+  .list-inline {
+    padding-left: 0;
+    margin-left: -5px;
+    list-style: none;
+  }
+  .list-inline a:hover{
+    text-decoration: none;
+    color: #f50;
+  }
+  .sl-ext a{
+    color: black;
+  }
+  .sl-ext a:hover{
+    color: #5078cb;
+    text-decoration: none;
+  }
+</style>
+

components/search/ResultTitle.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="result-title text-muted">
+    搜索"<span class="text-inverse ng-binding">123</span>"，为您找到
+    <span class="text-num ng-binding" >1,472</span><!-- ngIf: !total --> 个相关产品：
+  </div>
+</template>
+<script>
+  export default{
+  }
+</script>
+<style scoped>
+  #searchResult .result-title {
+    margin-top: 5px;
+    padding: 0 5px;
+    height: 30px;
+    line-height: 30px;
+    font-size: 14px;
+    background: #efefef;
+    border: 1px solid #e5e5e5;
+  }
+  .text-inverse {
+    color: #f40!important;
+  }
+  .text-num {
+    font-style: normal;
+    font-family: verdana;
+  }
+</style>

components/search/index.js

@@ -0,0 +1,5 @@
+import GoodList from './GoodList.vue'
+import Kind from './Kind.vue'
+import ResultTitle from './ResultTitle.vue'
+
+export { GoodList, Kind, ResultTitle }

components/store/BaseInfo.vue

@@ -0,0 +1,271 @@
+<template>
+  <div style="margin-bottom: 30px;">
+    <div id="introduction-fragment">
+      <div class="container">
+        <div class="menu-com row">
+          <div class="menu-title col-md-12">
+            <a href="/">商城首页</a> >
+            <a href="provider/home" v-if="storeInfo.type == 'AGENCY' || storeInfo.type == 'DISTRIBUTION'" title="代理经销">代理经销</a>
+            <a href="provider/factories" v-if="storeInfo.type == 'ORIGINAL_FACTORY'" title="原厂专区">原厂专区</a>
+            <a :href="'/store/' + storeInfo.uuid" v-if="storeInfo.type == 'CONSIGNMENT'" title="库存寄售">库存寄售</a>
+            >
+            <span v-if="storeInfo.type != 'CONSIGNMENT'"><a :href="'/store/' + storeInfo.uuid" :title="storeInfo.storeName" v-text="storeInfo.storeName">店铺名称</a>> </span>
+            <span>了解更多</span>
+          </div>
+        </div>
+        <div class="intro-title row">
+          <h3 class="col-xs-2">
+            商家介绍
+          </h3>
+          <a class="col-xs-10" :href="'/store/' + storeInfo.uuid">返回店铺</a>
+        </div>
+        <div class="intro-text" v-text="storeInfo.description">店铺简介</div>
+      </div>
+    </div>
+    <div id="contact-fragment">
+      <div class="container" style="margin-top: 30px;">
+        <div class="contact-title">
+          <h3>
+            联系我们
+          </h3>
+        </div>
+        <div ng-if="storeInfo.enterprise">
+          <div class="contact-text">
+            <div v-text="storeInfo.enterprise.enName">深圳市华商龙商务互联科技有限公司</div>
+            <div v-if="storeInfo.enterprise.enAddress.length >0">地址：<span v-text="storeInfo.enterprise.enAddress">深圳市南山区科技园科技南五路英唐大厦一楼</span></div>
+            <div v-if="storeInfo.enterprise.enTel.length >0">电话：<span v-text="storeInfo.enterprise.enTel">0755-26038000/26038047/26038008/86140880</span></div>
+            <div v-if="storeInfo.enterprise.enFax.length > 0">传真：<span v-text="storeInfo.enterprise.enFax">0755-26038111</span></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div id="proof-fragment" v-show="qualifications.length > 0">
+      <div class="container" style="margin-top: 30px; margin-bottom: 20px;">
+        <div class="proof-title">
+          <h3>
+            资质证明
+          </h3>
+        </div>
+        <div>
+          <div class="div-proof" style="position:relative;" v-for="qualification in qualifications">
+            <div v-if="qualification.isPdf">
+              <img src="/images/store/common/timg.png" alt="" style="max-width: 124px; max-height: 147px;">
+              <div class="hover-show hover-shows">
+                <a :href="qualification.resourceUrl" target="_blank"><i class="fa fa-search" style="margin-right: 5px;"></i>查看</a>
+              </div>
+            </div>
+            <div v-if="!qualification.isPdf">
+              <a class="img-show">
+                <img :src="qualification.resourceUrl"/>
+              </a>
+              <div class="hover-show" @click="showImg(qualification.resourceUrl)"><i class="fa fa-search" style="margin-right: 5px;"></i>查看</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+function isPdf (path) {
+  // 根据path文件名来判断文件是否是PDF文件
+  if (path) {
+    let str = path.slice(path.lastIndexOf('.')).toLowerCase()
+    if (str === '.pdf') {
+      return true
+    } else {
+      return false
+    }
+  } else {
+    return false
+  }
+}
+
+export default {
+  name: 'base-info',
+  computed: {
+    storeInfo () {
+      return this.$store.state.shop.storeInfo.store.data
+    },
+    qualifications () {
+      let storeInfo = this.$store.state.shop.storeInfo.store.data
+      let qualifications = JSON.parse(JSON.stringify(storeInfo.qualifications))
+      qualifications = qualifications.filter(qualification => {
+        return qualification && qualification.type === 'APTITUDE'
+      })
+      for (let i = 0; i < qualifications.length; i++) {
+        qualifications[i].isPdf = isPdf(qualifications[i].resourceUrl)
+      }
+      console.log(qualifications)
+      return qualifications || []
+    }
+  },
+  methods: {
+    showImg (path) {
+      window.open(path)
+    }
+  }
+}
+</script>
+<style scoped>
+  #introduction-fragment .intro-title h3 {
+		font-size: 24px;
+		color: rgb(50,50,50);
+	}
+
+	#introduction-fragment .intro-title a {
+		font-size: 14px;
+		color: rgb(33,71,151);
+		margin-top: 25px;
+		margin-left: -50px;
+	}
+
+	#introduction-fragment .intro-text {
+		font-size: 14px;
+		color: rgb(50,50,50);
+		margin-top: 10px;
+		line-height: 30px;
+	}
+
+	#introduction-fragment .intro-text{
+		text-indent:2em;
+	}
+
+  #contact-fragment .contact-title h3 {
+		font-size: 24px;
+		color: rgb(50,50,50);
+
+	}
+
+	#contact-fragment .contact-text {
+		font-size: 14px;
+		color: rgb(50,50,50);
+		margin-top: 10px;
+		line-height: 28px;
+	}
+
+  #proof-fragment .proof-title {
+		margin-bottom: 10px;
+	}
+
+	#proof-fragment .proof-title h3 {
+		font-size: 24px;
+		color: rgb(50,50,50);
+	}
+
+	#proof-fragment .div-proof {
+		float: left;
+		border: 1px solid #eee;
+		margin-right: 47px;
+	}
+	#proof-fragment .div-proof:last-child{
+		margin-right: 0;
+	}
+
+	#proof-fragment .div-proof a :HOVER {
+		border: 1px solid #5078cb;
+	}
+	#proof-fragment .div-proof a.img-show :HOVER{
+		border: none;
+	}
+	#proof-fragment .div-proof img {
+		max-width: 200px;
+		max-height: 200px;
+	}
+	.div-proof{
+		width: 200px;
+		height: 200px;
+		overflow: hidden;
+		line-height: 200px;
+		text-align: center;
+	}
+	.div-proof a{
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+	}
+	.hover-show{
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 100%;
+		left: 0;
+		background: rgba(0,0,0,.5);
+		z-index: 10;
+		line-height: 200px;
+		text-align: center;
+		color: #fff;
+		font-size: 14px;
+	}
+	.div-proof:hover .hover-show{
+		top: 0;
+		transition: top .3s ease-in;
+	}
+	.hover-show:hover{
+		cursor: pointer;
+	}
+	/* 预览框 end */
+	#image-box .x-floating-wrap {
+		position: fixed;
+		z-index: 99998;
+		background: #000;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0.5;
+	}
+	#image-box .x-floating {
+		position: fixed;
+		z-index: 99999;
+		top: 60px;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		text-align: center;
+		vertical-align: middle;
+	}
+	#image-box .x-floating img {
+		margin: auto auto;
+		max-width: 100%;
+		max-height: 80%;
+		-webkit-user-select: none;
+		-moz-user-select: none;
+		-ms-user-select: none;
+		user-select: none
+	}
+
+	#image-box .x-close-wrap {
+		position: fixed;
+		top: 0;
+		right: 0;
+		z-index: 100000;
+		width: 120px;
+		height: 120px;
+		margin: -60px -60px 0 0;
+		border-radius: 100%;
+		background: #000;
+		opacity: .3
+	}
+
+	#image-box .x-close-wrap a {
+		position: absolute;
+		left: 25px;
+		bottom: 25px;
+		font-size: 42px;
+		color: #fff
+	}
+
+	#image-box .x-close-wrap:hover {
+		opacity: .7
+	}
+	.hover-shows a{
+		text-decoration: none;
+		color: #fff;
+	}
+	.hover-shows a:hover, .hover-shows a:focus, .hover-shows a:active{
+		text-decoration: none;
+		color: #fff;
+	}
+</style>

components/store/Breadcrumb.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <el-breadcrumb separator=">">
+      <el-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbs" :key="index" :to="breadcrumb.to || {}" v-text="breadcrumb.name">首页</el-breadcrumb-item>
+      <!--<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item>活动管理</el-breadcrumb-item>
+      <el-breadcrumb-item>活动列表</el-breadcrumb-item>
+      <el-breadcrumb-item>活动详情</el-breadcrumb-item>-->
+    </el-breadcrumb>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'breadcrumb',
+  props: ['breadcrumbs']
+}
+</script>
+<style lang="scss" scoped>
+  @import '~assets/scss/variables';
+
+  el-breadcrumb {
+    font-size: 14px;
+  }
+</style>

components/store/CommodityInfo.vue

@@ -0,0 +1,391 @@
+<template>
+  <div>
+    <div class="menu-com row">
+      <div class="menu-title col-md-12">
+        <a href=".">商城首页</a> >
+        <a href="provider/home" v-if="storeInfo.type == 'AGENCY' || storeInfo.type == 'DISTRIBUTION'" title="代理经销">代理经销</a>
+        <a href="provider/factories" v-if="storeInfo.type == 'ORIGINAL_FACTORY'" title="原厂专区">原厂专区</a>
+        <a :href="'/store/' + storeInfo.uuid" v-if="storeInfo.type == 'CONSIGNMENT'" title="库存寄售">库存寄售</a>
+        >
+        <span v-if="storeInfo.type != 'CONSIGNMENT'"><a :href="'/store/' + storeInfo.uuid" :title="storeInfo.storeName" v-text="storeInfo.storeName">storeInfo.storeName</a>> </span>
+        <span>产品详情</span>
+      </div>
+    </div>
+    <div id="commodity-info-fragment">
+      <div class="commodity-detail">
+        <div class="img">
+          <img :src="commodity.img || '/images/store/common/default.png'" style="width: 256px;height: 256px;"/>
+          <div class="box"></div>
+        </div>
+        <div class="content">
+          <div class="code">
+            <span v-text="commodity.code"></span>
+          </div>
+          <div class="commodity-info-detail">
+            <div class="com-info">
+              <span class="name">价&nbsp;格</span>：
+              <span class="money">
+                <span v-if="fragment.currency == 'RMB'">￥</span>
+                <span v-if="fragment.currency == 'USD'">$</span>
+                <span v-text="fragment.price"></span>
+              </span>
+            </div>
+            <div class="com-info">
+              <span class="name">品&nbsp;牌</span>：<span v-text="commodity.brandNameEn"></span>
+            </div>
+            <div class="com-info">
+              <span class="name">类&nbsp;目</span>：<span v-text="commodity.kindNameCn"></span>
+            </div>
+            <div class="com-info">
+              <span class="name">下&nbsp;载</span>：<a target="_blank" :href="component.attach">{{component.attach ? '规格书' : '暂无信息'}}</a>
+            </div>
+            <div class="com-info">
+              <span class="name">包&nbsp;装</span>：<span v-text="commodity.packaging || '无包装信息'"></span>
+            </div>
+            <div class="com-info">
+              <span class="name">封&nbsp;装</span>：<span v-text="commodity.encapsulation || '无封装信息'"></span>
+            </div>
+            <div class="com-info">
+              <span class="name">库&nbsp;存</span>：<span v-text="commodity.reserve || 0"></span>
+              （<span v-text="commodity.minBuyQty || 1"></span>个起订）
+            </div>
+            <div class="com-info">
+              <span class="name">货&nbsp;期</span>：
+              <div class="delivery">
+                <span v-text="commodity.b2cMinDelivery || 0"></span>-
+                <span v-text="commodity.b2cMaxDelivery || 0"></span>
+                <span>(天)</span>
+              </div>
+            </div>
+            <div class="com-info form-inline">
+              <span class="name">数&nbsp;量</span>：
+              <div class="input-group" style="width: 120px">
+                <div class="input-group-addon operate" @click="subNum()" :disabled="!fragment.canAdd">-</div>
+                <input type="text" class="form-control text-center" placeholder="数量" v-model="fragment.num" @change="inputNum()"/>
+                <div class="input-group-addon operate" @click="addNum()" :disabled="!fragment.canSub">+</div>
+              </div>
+              ×
+              <div class="select">
+                <select class="form-control"  :disabled="commodity.currencyName != 'RMB-USD'" v-model="fragment.currency" @change="changeCurrency()">
+                  <option value="RMB">RMB</option>
+                  <option value="USD">USD</option>
+                </select>
+              </div>
+              ＝
+              <span class="money">
+                 <span v-if="fragment.currency == 'RMB'">￥</span>
+                 <span v-if="fragment.currency == 'USD'">$</span>
+                 <span v-text="calculate || 0"></span>
+              </span>
+            </div>
+            <div class="button" ng-controller="GoodsPickUpCtrl">
+              <button class="btn btn-default btn-primary" ng-click="addToCart(commodity, false, fragment.num, fragment.currency)">加入购物车</button>
+              <button class="btn btn-default btn-now" ng-click="addToCart(commodity, true, fragment.num, fragment.currency)">立即购买</button>
+            </div>
+          </div>
+          <div class="price-block">
+            <div class="commodity-price">
+              <div class="title">价格梯度</div>
+              <div class="table">
+                <div class="head">
+                  <div class="fragment">数量</div>
+                  <div class="price">单价￥(含税)</div>
+                  <div class="price">单价$</div>
+                </div>
+                <ul class="list-unstyled list-inline">
+                  <li v-for="price in commodity.prices">
+                    <div class="fragment">
+                      <span v-text="price.start"></span>+
+                    </div>
+                    <div class="price">
+                      <span v-if="price.rMBPrice" v-text="price.rMBPrice ||0"></span>
+                    </div>
+                    <div class="price">
+                      <span v-if="price.uSDPrice" v-text="price.uSDPrice || 0"></span>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+function initFragment (commodity) {
+  let fragment = {}
+  let prices = commodity.prices[0]
+  fragment.num = commodity.minBuyQty
+  fragment.prices = prices
+
+  if (commodity.currencyName !== 'USD') {
+    fragment.currency = 'RMB'
+  } else {
+    fragment.currency = 'USD'
+  }
+
+  if (fragment.currency !== 'USD') {
+    fragment.price = prices.rMBPrice
+  } else {
+    fragment.price = prices.uSDPrice
+  }
+  console.log(fragment)
+  return fragment
+}
+
+function getFragment (commodity, fragment) {
+  // 判断是否小于第一分段的起订量
+  if (commodity.prices[0].start > fragment.num) {
+    fragment.num = commodity.prices[0].start
+  }
+  // 获取分段的信息
+  let prices = commodity.prices
+  for (let i = 0; i < prices.length; i++) {
+    if (fragment.num <= prices[i].end) {
+      fragment.prices = prices[i]
+      break
+    }
+  }
+}
+
+export default {
+  name: 'commodity-info',
+  data () {
+    return {
+      fragment: { currency: 'RMB', num: 0, price: 0, canAdd: true }
+    }
+  },
+  computed: {
+    storeInfo () {
+      return this.$store.state.shop.storeInfo.store.data
+    },
+    commodity () {
+      let commodity = this.$store.state.shop.storeInfo.commodity.data
+      this.fragment = initFragment(commodity)
+      return commodity
+    },
+    component () {
+      return this.$store.state.shop.storeInfo.component.data
+    },
+    calculate () {
+      this.fragment.total = this.fragment.price * this.fragment.num
+      return this.fragment.total
+    }
+  },
+  methods: {
+    changeCurrency () {
+      if (this.fragment.currency === 'RMB') {
+        this.fragment.price = this.fragment.prices.rMBPrice
+      } else if (this.fragment.currency === 'USD') {
+        this.fragment.price = this.fragment.prices.uSDPrice
+      }
+    },
+    subNum () {
+      let newNum = this.fragment.num - this.commodity.minPackQty
+      if (newNum >= this.commodity.minBuyQty) {
+        this.fragment.num = newNum
+      } else {
+        this.fragment.canSub = false
+      }
+      this.fragment.canAdd = true
+      getFragment(this.commodity, this.fragment)
+    },
+    addNum () {
+      let newNum = this.fragment.num + this.commodity.minPackQty
+      if (newNum <= this.commodity.reserve) {
+        this.fragment.num = newNum
+      } else {
+        this.fragment.canAdd = false
+      }
+      this.fragment.canSub = true
+      getFragment(this.commodity, this.fragment)
+    },
+    inputNum () {
+      if (this.fragment.num < this.commodity.minBuyQty) {
+        this.fragment.num = this.commodity.minBuyQty
+      } else if (this.fragment.num > this.commodity.reserve) {
+        this.fragment.num = this.commodity.reserve
+      }
+      getFragment(this.commodity, this.fragment)
+    }
+  }
+}
+</script>
+<style scoped>
+  .container.commodity {
+		width: 1190px;
+		padding-left: 0px;
+		padding-right: 0px;
+		font-family: "Microsoft Yahei", "微软雅黑";
+	}
+
+	.commodity .commodity-detail {
+		width: 100%;
+		display: inline-block;
+		font-size: 0px;
+	}
+
+	.commodity-detail .img{
+		float: left;
+		width: 258px;
+		height: 320px;
+	}
+
+	.commodity-detail .img img {
+		border: 1px solid #D6D3CE;
+	}
+
+	.commodity-detail .img  .box {
+		height: 62px;
+	}
+
+	.commodity-detail .content {
+		width: 932px;
+		float: left;
+		font-size: 14px;
+	}
+
+	.commodity-detail .content {
+		padding-left: 20px;
+	}
+
+	.commodity-detail .content .code {
+		font-size: 24px;
+		color: rgb(50, 50, 50);
+		font-weight: 600;
+		border-bottom: 1px solid #D6D3CE;
+		line-height: 40px;
+	}
+
+	.commodity-detail .content .com-info {
+		font-size: 14px;
+		font-family: "Microsoft Yahei", "微软雅黑";
+		line-height: 26px;
+	}
+
+	.input-group .input-group-operate {
+		padding: 6px 12px;
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 1;
+		color: #555;
+		text-align: center;
+		background-color: #eee;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+	}
+
+	.input-group .input-group-operate:last-child {
+		border-bottom-left-radius: 0px;
+		border-top-left-radius: 0px;
+	}
+
+	.input-group .input-group-operate:first-child {
+		border-bottom-right-radius: 0px;
+		border-top-right-radius: 0px;
+	}
+
+	.content .com-info .name {
+		letter-spacing: 15px;
+	}
+
+	.commodity-info-detail {
+		float: left;
+		padding-top: 10px;
+		width: 582px;
+	}
+
+	.price-block {
+		float: right;
+		width: 330px;
+		margin-top: 10px;
+		height: 220px;
+	}
+
+	.commodity-price {
+		line-height: 30px;
+		text-align: center;
+		border: 1px solid #D6D3CE;
+	}
+
+	.commodity-price .title {
+		background-color: #f7f7f7;
+		border-bottom: 1px solid #D6D3CE;
+	}
+
+	.commodity-price .head {
+		border-bottom: 1px solid #D6D3CE;
+	}
+
+	.commodity-price .fragment {
+		display: inline-block;
+		width: 70px;
+	}
+
+	.commodity-price .price {
+		width: 123px;
+		display: inline-block;
+	}
+
+	.com-info div.select {
+		display: inline-block;
+	}
+
+	.com-info .operate {
+		cursor: pointer;
+	}
+
+	.com-info .operate:hover, .com-info .operate:link {
+		background-color: #00B83F;
+		color: white;
+	}
+
+	.com-info .money {
+		font-weight: 600;
+		color: red;
+	}
+
+	.com-info select {
+		border-radius: 4px;
+		width: 120px!important;
+	}
+
+	ul.list-inline {
+		margin: 0px;
+	}
+
+	.commodity-price ul.list-inline li {
+		padding-left: 0px;
+		padding-right: 0px;
+		border-bottom: 1px dashed #D6D3CE;
+	}
+
+	.commodity-price .table {
+		margin-bottom: 0px;
+	}
+
+	.commodity-price ul>li:last-child {
+		border-bottom: none;
+	}
+
+	div.button {
+		padding-top: 20px;
+		float: left;
+	}
+
+	button.btn-now {
+		border: 1px solid #3D76C6;
+		color: #3D76C6;
+		margin-left: 30px;
+	}
+
+	.com-info .delivery {
+		display: inline;
+	}
+	#commodity-info-fragment{
+		margin-bottom: 20px;
+	}
+</style>

components/store/CommodityList.vue

@@ -0,0 +1,458 @@
+<template>
+  <div id="goods-list-fragment">
+    <div class="container" style="width: 1190px; padding: 0;">
+      <div class="title-area">
+        <div class="category-title">
+          <span style="line-height: 34px;">产品分类</span>
+        </div>
+        <div class="category-content">
+          <el-tree :data="kinds" :props="defaultProps" accordion :highlight-current="true" @current-change="handlerCurrentNode"></el-tree>
+        </div>
+      </div>
+      <!-- 产品列表 -->
+      <div class="goods-area">
+        <div class="row" style="margin: 0;width: 970px;">
+          <div class="col-md-3 btn-group btn-group-sm" style="padding: 0;">
+            <a type="button" class="btn btn-default btn-line btn-info">产品列表</a>
+          </div>
+          <div class="col-md-4 col-md-offset-5" style="padding: 0;">
+            <div class="input-group">
+              <input type="search" class="form-control" id="search_input" title="code" placeholder="请输入要筛选的原厂型号"
+                     v-model="searchCode" @search="goodsSearch(searchCode)"/>
+              <span class="input-group-btn">
+							<button type="button" class="btn" id="search_btn" @click="goodsSearch(searchCode)">&nbsp;筛&nbsp;选&nbsp;</button>
+						</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 列表展示 -->
+        <table class="goodslist" style="width: 970px">
+          <thead>
+          <tr style="height: 40px;">
+            <th width="90"></th>
+            <th width="150">品牌/型号</th>
+            <th width="100">包装/生产日期</th>
+            <th width="90">库存</th>
+            <th width="90">数量</th>
+            <th width="90">香港交货<span style="font-size: 12px;">($)</span></th>
+            <th width="100">大陆交货<span style="font-size: 12px;">(￥)</span></th>
+            <th width="100">交期</th>
+            <th width="100">操作</th>
+          </tr>
+          </thead>
+          <tbody id="goodslist-content">
+          <tr v-for="commodity in commodities.content">
+            <td class="commodity-icon">
+              <a :href="'/store/' + commodity.storeid + '/' + commodity.batchCode" target="_blank">
+                <div class="img"><img :src="commodity.img || '/images/store/common/default.png'"/></div>
+              </a>
+            </td>
+            <td class="brand-code">
+              <div class="brand" v-text="commodity.brandNameEn"></div>
+              <div class="code" v-text="commodity.code"></div>
+            </td>
+            <td>
+              <div class="package" v-text="commodity.packaging || '暂无包装信息'"></div>
+              <div class="date" v-text="commodity.produceDate">2016-12-01</div>
+            </td>
+            <td style="text-align: left;vertical-align: middle;">
+              <div class="goods">
+                库存：<span v-text="commodity.reserve">31500</span>
+              </div>
+              <div class="from">
+                起拍：<span v-text="commodity.minBuyQty">300</span>
+              </div>
+              <div class="multiple">
+                倍数：<span>1</span>
+              </div>
+            </td>
+            <td>
+              <div v-for="price in commodity.prices" v-text="price.start + '+'"></div>
+            </td>
+            <td>
+              <div v-show="commodity.currencyName.indexOf('USD')==-1 || !commodity.prices">
+                <span>—</span>
+              </div>
+              <div v-for="price in commodity.prices" v-text="price.uSDPrice"></div>
+            </td>
+            <td>
+              <div v-show="commodity.currencyName.indexOf('RMB')==-1 || !commodity.prices">
+                <span>—</span>
+              </div>
+              <div v-for="price in commodity.prices" v-text="price.rMBPrice"></div>
+            </td>
+            <td>
+              <div v-if="commodity.b2cMinDelivery">交期：{{commodity.b2cMinDelivery || 0}}-{{commodity.b2cMaxDelivery || 0}}天</div>
+            </td>
+            <td>
+              <div>
+                <button class="btn btn-primary btn-buy-now" ng-click="addToCart(commodity, true, commodity.minBuyQty, commodity.currencyName)"><span class="watch">立即购买</span></button>
+              </div>
+              <div>
+                <button class="btn btn-add-cart" ng-click="addToCart(commodity, false, commodity.minBuyQty, commodity.currencyName)"><span class="watch">加入购物车</span></button>
+              </div>
+            </td>
+          </tr>
+          <tr v-if="!commodities.content || commodities.content.length == 0">
+            <td colspan="10">
+              <div class="text-center">
+                <div class="col-xs-offset-3 col-xs-2">
+                  <img src="/images/all/empty-cart.png">
+                </div>
+                <div class="col-xs-4 txt-info">
+                  <p class="grey f16">暂无器件信息</p>
+                  <i class="iconfont">&#xe610;</i>&nbsp;<a href="javascript:history.go(-1)">返回上一页</a>
+                </div>
+              </div>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+        <div style="float: right;">
+          <el-pagination
+            :current-page.sync="pageParams.page"
+            :page-size="pageParams.count"
+            layout="prev, pager, next, jumper"
+            :total="commodities.totalElements"
+            @current-change="handleCurrentChange">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+function getAllLeafIds (kind) {
+  if (!kind) {
+    return null
+  }
+  if (kind.isLeaf === 1) {
+    return kind.id
+  } else {
+    if (!kind.children || kind.children.length === 0) {
+      return null
+    }
+    let ids = []
+    for (let i = 0; i < kind.children.length; i++) {
+      ids.push(getAllLeafIds(kind.children[i]))
+    }
+    return ids.join('-')
+  }
+}
+
+export default {
+  name: 'commodity-list',
+  props: ['kinds'],
+  data () {
+    return {
+      defaultProps: {
+        children: 'children',
+        label: 'nameCn'
+      },
+      pageParams: {
+        page: 1,
+        count: 6
+      },
+      searchCode: '',
+      parentKindId: 0,
+      ids: null
+    }
+  },
+  computed: {
+    commodities () {
+      return this.$store.state.shop.storeInfo.storeCommodity.data
+    }
+  },
+  methods: {
+    handlerCurrentNode (data, node) {
+      this.searchCode = ''
+      if (this.parentKindId === data.id) {
+        this.parentKindId = 0
+        this.ids = null
+        console.log('取消选中状态')
+      } else {
+        if (data.level === 1) {
+          this.parentKindId = data.id
+        }
+        this.ids = getAllLeafIds(data)
+      }
+      console.log('data', data.id + '-' + data.nameCn)
+      this.pageParams.page = 1
+
+      this.pageCommodity(this.pageParams, this.ids)
+    },
+    goodsSearch (keyword) {
+      console.log(keyword)
+      this.pageParams.page = 1
+
+      this.pageCommodity(this.pageParams, this.ids, keyword)
+    },
+    async pageCommodity (pageParams, kindId, keyword) {
+      let params = { storeid: this.$route.params.uuid, origin: 'store', kindUuid: kindId, code: keyword }
+      params.page = pageParams.page
+      params.count = pageParams.count
+
+      let { data } = await this.$http.get('/api/commodity/commodities', { params })
+      this.$store.commit('shop/storeInfo/GET_STORE_COMMODITY_SUCCESS', data)
+    },
+    handleCurrentChange (page) {
+      console.log(page)
+      this.pageParams.page = page
+
+      this.pageCommodity(this.pageParams, this.ids, this.searchCode)
+    }
+  }
+}
+</script>
+<style>
+  #goods-list-fragment{
+		font-family: "Microsoft Yahei", "微软雅黑";
+	}
+	#goods-list-fragment .category-title {
+		height: 34px;
+		background-color: #5078cb;
+		font-size: 14px;
+		color: rgb(255,255,255);
+		font-weight: 600;
+		text-align: center;
+	}
+
+	#goods-list-fragment .category-content li {
+		line-height: 33px;
+		font-size: 14px;
+		color: #333;
+		float: left;
+		width: 100%;
+		padding-left: 10px;
+	}
+
+	#goods-list-fragment .category-content li a {
+		display: block;
+		padding-left: 15px;
+		text-decoration: none;
+		color: #333;
+		/* background:url("static/img/store/default/openblackR.png") no-repeat left; */
+	}
+
+	#goods-list-fragment .category-content li a:hover{
+		color: #5078cb;
+		cursor: pointer;
+	}
+
+	#goods-list-fragment .category-content ul.list-body {
+		display: none;
+		color: #666;
+	}
+
+	#goods-list-fragment .category-content ul.list-body.active {
+		display: block;
+	}
+
+	#goods-list-fragment .category-content ul.list-body li {
+		float: none;
+		background-image: none;
+		min-height: 26px;
+		line-height: 26px;
+		font-size: 12px;
+	}
+
+	#goods-list-fragment .category-content ul.list-body li a {
+		padding-left: 15px;
+		display: block;
+		color: rgb(50,50,50);
+		background: none;
+	}
+
+	#goods-list-fragment .category-content ul.list-body li a:hover {
+		color: #5078cb;
+		cursor: pointer;
+	}
+
+	#goods-list-fragment .category-content ul.list-body li a.cur {
+		text-decoration: none;
+		font-size: 14px;
+		/* background:url("static/img/store/default/openblackR.png") no-repeat left; */
+	}
+
+	#goods-list-fragment .title-area {
+		margin-bottom: 30px;
+		width: 200px;
+		float: left;
+	}
+	#goods-list-fragment .category-content{
+		border: 1px solid #e8e8e8;
+	}
+	/* goods-area */
+	#goods-list-fragment .goods-area {
+		margin-left: 20px;
+		float: left;
+		margin-bottom: 30px;
+	}
+
+	#goods-list-fragment .goods-area .btn-line {
+		border-radius: 0;
+	}
+
+
+	#goods-list-fragment .btn-info.btn-line {
+		background-color: #5078CB;
+		color: #fff;
+		font-weight: 600;
+	}
+
+	#goods-list-fragment .btn-line {
+		height: 34px;
+		width: 150px;
+		border: 1px solid #5078cb;
+		background-color: #fff;
+		color: rgb(80,120,203);
+		font-weight: 600;
+	}
+
+	#goods-list-fragment .btn-line:hover {
+		background-color: #5078CB;
+		color: #fff;
+	}
+
+	/* 物品列表 */
+	#goods-list-fragment .goodslist .brand-code {
+		font-size: 14px;
+		text-align: center;
+	}
+
+	#goods-list-fragment #search_btn {
+		background: #5078CB;
+		color: #FFFFFF;
+	}
+
+	#goods-list-fragment #search_input {
+		font-size: 14px;
+	}
+
+	#goods-list-fragment .brand-code .code {
+		font-weight: 600;
+	}
+
+	#goods-list-fragment .goodslist th {
+		color: rgb(50,50,50);
+		font-size: 14px;
+		font-weight: 600;
+		background-color: #f7f7f7;
+		text-align: center;
+	}
+
+	#goods-list-fragment .category-content a.selected-node,
+	#goods-list-fragment .category-content ul.list-body li a.selected-node {
+		color: #5078cb;
+	}
+
+	#goods-list-fragment .category-content a.selected-parent-node,
+	#goods-list-fragment .category-content ul.list-body li a.selected-parent-node {
+		/* background:url("static/img/store/default/openblack.png") no-repeat left; */
+	}
+
+	#goods-list-fragment .goodslist tbody>tr {
+		border: 1px solid #e8e8e8;
+	}
+	#goods-list-fragment .goodslist tbody>tr td.commodity-icon .img{
+		border: 1px solid #e8e8e8;
+		margin: 10px;
+		width: 80px;
+		height: 80px;
+		overflow: hidden;
+		line-height: 75px;
+	}
+	#goods-list-fragment .goodslist tbody>tr td.commodity-icon .img>img {
+		width: 80px;
+		height: 80px;
+	}
+	#goods-list-fragment .goodslist td {
+		font-size: 12px;
+		color: #333;
+		text-align: center;
+		line-height: 20px;
+	}
+
+	/* 物品列表按钮 */
+	#goods-list-fragment .btn-buy-now {
+		background-color: #5078CB;
+		color: #fff;
+		width: 80px;
+		height: 30px;
+		font-size: 12px;
+		border: 1px solid #5078cb;
+	}
+
+	#goods-list-fragment .btn-add-cart {
+		margin-top: 10px;
+		color: #214797;
+		width: 80px;
+		height: 30px;
+		font-size: 12px;
+		background-color: #fff;
+		border: 1px solid #e8e8e8;
+	}
+	#goods-list-fragment .btn-buy-now:hover{
+		background: #214797;
+	}
+	#goods-list-fragment .btn-add-cart:hover{
+		background-color: #5078CB;
+		color: #fff;
+	}
+	.category-content{
+		min-height: 243px;
+	}
+	.no-record{
+		font-size: 14px;
+		color: #999;
+		text-align: center;
+		line-height: 200px;
+	}
+	.no-record i{
+		margin-right: 5px;
+	}
+	.text-center{
+		text-align: center;
+		margin-top: 30px;
+	}
+	.text-center  .col-xs-2  img{
+		margin: 50px 0 50px 95px;
+		vertical-align: middle;
+	}
+	.text-center .txt-info{
+		font-size: 14px;
+		margin-top: 70px;
+	}
+	.text-center  .col-xs-4  p{
+		color: #999;
+		margin-top: 3px;
+		margin-bottom: 2px;
+	}
+	.text-center  .txt-info a{
+		font-size: 14px;
+	}
+	.text-center  .col-xs-4 i{
+		color: #5078cb;
+		font-size: 14px;
+	}
+	.goodslist{
+		margin-bottom: 16px;
+	}
+
+	@font-face {
+    font-family: 'iconfont';  /* project id 357960 */
+    src: url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.eot');
+    src: url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.eot?#iefix') format('embedded-opentype'),
+    url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.woff') format('woff'),
+    url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.ttf') format('truetype'),
+    url('//at.alicdn.com/t/font_27kjyd082ezpk3xr.svg#iconfont') format('svg');
+  }
+
+  <!-- 分页 -->
+  #goods-list-fragment .el-pagination .el-pager li.active {
+    border-color: #5078cb !important;
+    background-color: #5078cb !important;
+  }
+</style>

components/store/ComponentInfo.vue

@@ -0,0 +1,98 @@
+<template>
+  <div id="component-info-fragment">
+    <div class="component-info">
+      <div class="head">
+        <span class="tab">产品参数<b class="tip">(仅供参考，以实际产品为准)</b></span>
+      </div>
+      <ul class="list-unstyled list-inline" v-if="component.properties">
+        <li v-for="property in component.properties" v-if="property.value">
+          <div class="property-name">
+            <span v-text="property.property.labelCn"></span>:
+          </div>
+          <div class="property-value" v-text="property.value"></div>
+        </li>
+        <li v-if="!component.properties || component.properties.length === 0" class="text-center">
+          <i class="fa fa-smile-o fa-lg"></i> 暂无参数信息
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'component-info',
+  computed: {
+    component () {
+      return this.$store.state.shop.storeInfo.component.data
+    }
+  }
+}
+</script>
+<style scoped>
+  .component-info {
+		width: 906px;
+		margin-bottom: 16px;
+	}
+
+	.component-info .head {
+		background-color: rgb(236, 242, 253);
+		height: 40px;
+	}
+
+	.component-info ul .tab {
+		width: 130px;
+	}
+	.component-info ul{
+		padding-top: 15px;
+		padding-bottom: 15px;
+	}
+
+	.component-info ul li {
+		line-height: 30px;
+	}
+
+	.component-info .head {
+		font-size: 14px;
+		font-weight: 600;
+	}
+
+	.component-info .head .tab {
+		line-height: 40px;
+		margin-left: 10px;
+		text-align: center;
+		display: inline-block;
+	}
+
+	.component-info ul {
+		border: 1px solid #D6D3CE;;
+	}
+
+	.component-info ul li {
+		line-height: 30px;
+		font-size: 12px;
+		padding-left: 20px;
+	}
+
+	.component-info .property-name {
+		width: 130px;
+		float: left;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.component-info .property-value {
+		float: left;
+		width: 740px;
+	}
+
+	.tip {
+		font-size: 12px;
+		color: rgba(168, 181, 181, 0.79);
+		margin-left: 5px;
+	}
+	.ng-hide{
+		display: block !important;
+	}
+</style>

components/store/RecommendProduct.vue

@@ -0,0 +1,209 @@
+<template>
+  <div id="recommend-fragment" v-if="commodities && commodities.length > 0">
+    <div class="recommend-list">
+      <ul>
+        <li ng-repeat="commodity in commodities">
+          <div class="img"><a href="javascript:void(0);"><img ng-src="commodity.comImg"/></a></div>
+          <div class="content">
+            <p ng-bind="commodity.comCode">MRFE6S9045NF001</p>
+            <p class="color666" ng-bind="commodity.brandNameCn">PANFAEFQ</p>
+            <p class="price" ng-if="commodity.minPriceRMB">¥ commodity.minPriceRMB</p>
+            <p class="price" ng-if="!commodity.minPriceRMB">$ commodity.minPriceUSD || 0</p>
+          </div>
+          <div class="hover-show" ng-href="commodity.batchCode ? 'store/' + storeInfo.uuid + '#/batchInfo/' + commodity.batchCode : ''">
+            <a ng-href="commodity.batchCode ? 'store/' + storeInfo.uuid + '#/batchInfo/' + commodity.batchCode : ''" class="href">
+              <div class="title" ng-bind="commodity.comCode">MRFE6S9045NF001</div>
+              <div class="type" ng-bind="commodity.brandNameCn">PANFAEFQ</div>
+              <div class="hr"><span>抢购价</span></div>
+              <div class="price" ng-if="commodity.minPriceRMB">¥ commodity.minPriceRMB</div>
+              <div class="price" ng-if="!commodity.minPriceRMB">$ commodity.minPriceUSD || 0</div>
+            </a>
+            <div class="by-cart"><button title="加入购物车" ng-click="addToCart(commodity, false, commodity.minBuyQty, commodity.currency)"><img src="static/img/icon/cart-blue.png"/></button></div>
+            <div class="buy-now"><button title="立即购买" ng-click="addToCart(commodity, true, commodity.minBuyQty, commodity.currency)">立即购买</button></div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'recommend-product',
+  computed: {
+    commodities () {
+      return this.$store.state.shop.recommend.products.data
+    }
+  }
+}
+</script>
+<style scoped>
+  #recommend-fragment{
+		width: 1190px;
+		margin: 0 auto;
+	}
+	.recommend-list{
+		width: 100%;
+		margin: 0 auto;
+		display: inline-block;
+	}
+	#recommend-fragment ul{
+		width: 100%;
+		margin: 0 auto;
+		display: inline-block;
+		-webkit-padding-start: 0;
+	}
+	#recommend-fragment ul li{
+		float: left;
+		width: 218px;
+		height: 260px;
+		border: #d2d2d2 1px solid;
+		position: relative;
+		overflow: hidden;
+		margin-right: 25px;
+		margin-bottom: 20px;
+	}
+	#recommend-fragment ul li:nth-child(5n){
+		margin-right: 0;
+	}
+	#recommend-fragment ul li .img{
+		height: 175px;
+		text-align: center;
+		line-height: 170px;
+	}
+	#recommend-fragment ul li .img img{
+		max-width: 120px;
+		max-height: 120px;
+	}
+	#recommend-fragment ul li .content{
+		width: 100%;
+		margin: 0 auto;
+	}
+	#recommend-fragment ul li .content p{
+		width: 90%;
+		display: inline-block;
+		line-height: 22px;
+		font-size: 14px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		margin-bottom: 0;
+		padding-left: 10px;
+	}
+	#recommend-fragment ul li .content p.price{
+		color: #ff9000;
+		font-size: 16px;
+		font-weight: bold;
+	}
+	.color666{
+		color: #666;
+	}
+	#recommend-fragment ul li .hover-show{
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 100%;
+		left: 0;
+		background: rgba(80,120,203,.85);
+		padding: 30px 10px;
+	}
+	#recommend-fragment ul li:hover .hover-show{
+		top: 0;
+		transition: top .5s ease-in;
+	}
+	#recommend-fragment ul li .hover-show div{
+		width: 100%;
+		margin: 0 auto;
+		text-align: left;
+		color: #fff;
+		line-height: 25px;
+	}
+	#recommend-fragment ul li .hover-show .title{
+		font-size: 18px;
+		margin-top: 8px;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		overflow: hidden;
+		margin-bottom: 0;
+	}
+	#recommend-fragment ul li .hover-show .type{
+		font-size: 14px;
+	}
+	#recommend-fragment ul li .hover-show .hr{
+		text-align: center;
+		margin-top: 5px;
+	}
+	#recommend-fragment ul li .hover-show .hr span{
+		font-size: 16px;
+		position: relative;
+	}
+	#recommend-fragment ul li .hover-show .hr span:before,#recommend-fragment ul li .hover-show .hr span:after{
+		content: '';
+		position: absolute;
+		display: inline-block;
+		width: 65px;
+		height: 1px;
+		background: #fff;
+		top: 10px;
+	}
+	#recommend-fragment ul li .hover-show .hr span:before{
+		left: 53px;
+	}
+	#recommend-fragment ul li .hover-show .hr span:after{
+		right: 53px;
+	}
+	#recommend-fragment ul li .hover-show .price{
+		font-size: 20px;
+		text-align: center;
+		line-height: 48px;
+	}
+	#recommend-fragment ul li .hover-show .by-cart,#recommend-fragment ul li .hover-show .buy-now{
+		text-align: center;
+		position: absolute;
+	}
+	#recommend-fragment ul li .hover-show .by-cart{
+		bottom: 50px;
+	}
+	#recommend-fragment ul li .hover-show .buy-now{
+		bottom: 15px;
+	}
+	#recommend-fragment ul li .hover-show .by-cart button{
+		display: inline-block;
+		width: 38px;
+		height: 38px;
+		border-radius: 100%;
+		background: #fff;
+		line-height: 38px;
+		margin-bottom: 5px;
+		cursor: pointer;
+		border: none;
+		z-index: 100;
+		position: relative;
+	}
+	#recommend-fragment ul li .hover-show .buy-now button{
+		display: inline-block;
+		width: 90px;
+		height: 34px;
+		text-align: center;
+		font-size: 14px;
+		border-radius: 4px;
+		background: #df1b0f;
+		line-height: 34px;
+		color: #fff;
+		cursor: pointer;
+		border: none;
+		z-index: 100;
+		position: relative;
+	}
+	#recommend-fragment ul li .hover-show .buy-now button:hover{
+		background: #f00;
+	}
+	#recommend-fragment ul li a.href{
+		display: inline-block;
+		position: relative;
+		z-index: 10;
+		width: 100%;
+		text-align: center;
+		height: 260px;
+	}
+</style>

components/store/StoreHeader.vue

@@ -0,0 +1,343 @@
+<template>
+  <div id="nav_fragment">
+    <div class="container">
+      <div class="row" style="height: 120px; padding-top: 30px; margin: 0;">
+        <!-- 店铺信息以及下拉菜单 -->
+        <div id = "shop" :class="{ 'drop-down-active' : isOpen }" @mouseleave="closeDropDown()">
+          <div class="dropdown">
+            <div style="width: 440px;">
+              <div class="dropdown-btn" style="margin-top: 0;">
+                <div style="margin-bottom: 15px;">
+                  <a role="button" class="dropdown-toggle" @mouseover="openDropDown()">
+                    <span class="shop-name" v-text="storeInfo.storeName || '店铺名称'"></span>
+                    <span><i class="fa fa-angle-down fa-fw" style="font-size: 20px;"></i></span>
+                  </a>
+                </div>
+                <div class="icon-style">
+                  <button class="btn btn-xs btn-danger btn-nav" v-if="!isFocus"><span class="watch">关注</span></button>
+                  <button class="btn btn-xs btn-default btn-nav" v-if="isFocus" style="width:50px"><span>已关注</span></button>
+                  <span v-if="storeInfo.type == 'ORIGINAL_FACTORY'">&nbsp;<img src="/images/store/icon/icon-factory.png"/></span>
+                  <span v-else-if="storeInfo.type == 'AGENCY'">&nbsp;<img src="/images/store/icon/icon-agent.png"/></span>
+                  <span v-else-if="storeInfo.type == 'DISTRIBUTION'">&nbsp;<img src="/images/store/icon/icon-distribution.png"/></span>
+                  <span v-else-if="storeInfo.type == 'CONSIGNMENT'">&nbsp;<img src="/images/store/icon/consignment.png"/></span>
+                </div>
+              </div>
+              <div class="clearfix"></div>
+            </div>
+            <div style="background: #FFFFFF;" v-if="isOpen">
+              <ul class = "shop-contact list-unstyled" style="padding: 15px 0; margin-bottom: 0; border-top: #e8e8e8 1px solid; margin-top: 20px;">
+                <li ng-if="storeInfo.enterprise.enTel.length > 0">
+                  <span>电话：</span><span v-text="storeInfo.enterprise.enTel"></span>
+                </li>
+                <li ng-if="storeInfo.enterprise.enFax.length > 0">
+                  <span>传真：</span><span v-text="storeInfo.enterprise.enFax"></span>
+                </li>
+                <li ng-if="storeInfo.enterprise.enAddress.length > 0">
+                  <span>地址：</span><span v-text="storeInfo.enterprise.enAddress"></span>
+                </li>
+                <li class="text-right">
+                  <nuxt-link :to="{ name: 'store-uuid-description', params: { uuid: storeInfo.uuid } }">了解更多&gt;</nuxt-link>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <!-- 搜索框 -->
+        <div id="search-group" style="margin-left: 450px;">
+          <search-box/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import SearchBox from '~components/home/Search.vue'
+
+export default {
+  name: 'store-header',
+  data () {
+    return {
+      isFocus: false,
+      isOpen: false
+    }
+  },
+  computed: {
+    storeInfo () {
+      return this.$store.state.shop.storeInfo.store.data
+    }
+  },
+  components: {
+    SearchBox
+  },
+  methods: {
+    closeDropDown () {
+      this.isOpen = false
+    },
+    openDropDown () {
+      this.isOpen = true
+    }
+  }
+}
+</script>
+<style scoped>
+  body{
+		font-family: "Microsoft Yahei", "微软雅黑";
+	}
+	#nav_fragment {
+		margin-bottom: 20px;
+	}
+
+	#nav_fragment .shop-name {
+		font-size: 24px;
+		color: RGB(50,50,50);
+	}
+
+	#nav_fragment div#shop {
+		width: 440px;
+		padding: 5px;
+	}
+
+	#nav_fragment .shop-info {
+		font-size: 12px;
+		color: rgb(50,50,50);
+	}
+
+	#nav_fragment .shop-data {
+		font-size: 12px;
+		line-height: 25px;
+		font-weight: 600;
+		color: RGB(255,0,0);
+	}
+
+	#nav_fragment .btn-nav{
+		width: 40px;
+		height: 20px;
+		line-height: 14px;
+	}
+
+	#nav_fragment .btn-nav .watch {
+		font-size: 12px;
+		color: white;
+	}
+
+	#nav_fragment .btn-nav .message {
+		font-size: 12px;
+		color: rgb(50,50,50);
+	}
+
+	#nav_fragment div.dropdown {
+		margin-top: -5px;
+		padding: 5px;
+	}
+
+	#nav_fragment .shop-contact {
+		font-size: 14px;
+		color: rgb(120,120,120);
+		line-height: 25px;
+	}
+
+	#nav_fragment .shop-contact a{
+		color: rgb(33,71,151);
+	}
+
+	#nav_fragment #search_input {
+		height: 40px;
+		font-size: 16px;
+		font-family: '微软雅黑';
+		border: 2px solid #5078cb;
+		border-top-left-radius: 0px;
+		border-bottom-left-radius: 0px;
+		line-height: 40px;
+	}
+
+	#nav_fragment #search_input:focus {
+		border-color: #5078cb;
+		outline: 0;
+		-webkit-box-shadow: none;
+		box-shadow: none;
+	}
+
+	#nav_fragment #search_btn {
+		background-color: #5078cb;
+		color: rgb(255, 255, 255);
+		font-size: 16px;
+		width: 78px;
+		height: 40px;
+		border: 2px solid #5078cb;
+		border-radius: 0;
+	}
+
+	#nav_fragment #search_btn_this {
+		height: 36px;
+		line-height: 36px;
+		padding-top: 0px;
+		padding-bottom: 0px;
+		font-size: 16px;
+		font-weight: 600;
+		color: #5078cb;
+		background: #fff;
+		border-radius: 0;
+		border: 1px #5078cb solid;
+	}
+
+	#nav_fragment .my-cart {
+		margin-top: 20px;
+		margin-left: 20px;
+	}
+
+	#nav_fragment .my-cart #my-cart{
+		font-size: 14px;
+		color: #5078cb;
+	}
+
+	#nav_fragment .my-cart .badge {
+		background-color: #ff0000;
+		position: absolute;
+		top: -10px;
+	}
+
+	#nav_fragment .list-unstyled {
+		list-style: none;
+	}
+
+	#nav_fragment a:hover,a:focus {
+		text-decoration: none;
+	}
+
+	#nav_fragment .row>div {
+		float: left;
+	}
+
+	#nav_fragment #shop {
+		width: 100%;
+		position: absolute;
+		float: left;
+	}
+
+	#nav_fragment #search-group {
+		padding-top: 20px;
+		margin-left: 10px;
+		padding-left: 20px;
+		top: -12px;
+		position: relative;
+	}
+
+	#nav_fragment #search-group .input-group {
+		margin-right: 10px;
+		float: left;
+		width: 480px;
+	}
+
+	#nav_fragment .dropdown .dropdown-menu .dropdown-btn {
+		float: left;
+		margin-top: 30px;
+	}
+
+	#nav_fragment .dropdown .dropdown-score .description {
+		padding-top: 10px;
+		color: #323232;
+		font-size: 12px;
+	}
+
+	#nav_fragment .dropdown .dropdown-score .score {
+		display: inline-block;
+		padding-top: 5px;
+		color: #FF6868;
+		font-size: 12px;
+	}
+
+	#nav_fragment .dropdown .dropdown-menu .dropdown-score>div>div {
+		margin-top: 0px;
+		width: 25px;
+		margin-right: 10px;
+	}
+
+	#nav_fragment .shop-score {
+		margin-top: 20px;
+		margin-left: 70px;
+	}
+
+	#nav_fragment .shop-score>div>div {
+		margin-right: 10px;
+		width: 25px;
+	}
+
+	#nav_fragment .hot-search .active-search-item {
+		color: #ff0101;
+		font-size: 13px;
+		display: inline-block;
+		margin-right: 1em;
+	}
+
+	#nav_fragment .hot-search .resources {
+		font-size: 12px;
+		font-family: "Microsoft Yahei", "微软雅黑";
+		color: rgb(250,50,50);
+	}
+
+	#nav_fragment .hot-search .hot-word {
+		font-size: 12px;
+		color: rgb(50,50,50);
+		margin-left: 20px;
+	}
+	#nav_fragment .drop-down-active {
+		z-index: 20;
+		-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(210,209,209,.9);
+		box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 2px rgba(210,209,209,.9);
+		border: #f5f5f5 1px solid;
+		background-color: white;
+		transition: dispaly .5s ease;
+	}
+	.hot-search{
+		margin-top: 5px;
+	}
+	.hot-search .static{
+		color: #f00;
+	}
+	.hot-search a{
+		color: #838383;
+	}
+	.hot-search a:hover{
+		color: #f00;
+	}
+	.my-cart .btn{
+		top: -8px;
+		position: relative;
+	}
+	#search-group .association {
+		position: absolute;
+		left: 0;
+		top: 100%;
+		right: 61px;
+		list-style: none;
+		-webkit-padding-start: 0;
+		background: #ffffff;
+		border: 1px solid #dddddd;
+		z-index: 21;
+	}
+
+	#search-group .association li {
+		padding: 0 15px;
+		line-height: 30px;
+		text-align: left;
+		font-family: "Microsoft Yahei";
+	}
+
+	#search-group .association li:hover {
+		background: #EEEEEE;
+		cursor: pointer;
+	}
+	.text-right{
+		text-align: right;
+	}
+	.text-right a:hover{
+		color: #d32526 !important;
+		text-decoration: underline;
+	}
+	.icon-style img{
+		vertical-align: top;
+		position: relative;
+		top: -9px;
+	}
+</style>

components/store/StoreTitle.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="container" id="title-fragment">
+    <div class="container">
+      <div class="row" style="margin-bottom: 20px;">
+        <!-- 商标展示 -->
+        <div class="shop-logo">
+          <img :src="storeInfo.logoUrl || '/images/store/common/default.png'" />
+        </div>
+        <!-- 店名展示 -->
+        <div class="shop-banner">
+          <img :src="storeInfo.bannerUrl || '/images/store/default/shop_banner.png'">
+          <div id="shop-title" v-if="storeInfo.storeShortName" v-text="storeInfo.storeShortName">店铺名称</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'store-title',
+  computed: {
+    storeInfo () {
+      return this.$store.state.shop.storeInfo.store.data
+    }
+  }
+}
+</script>
+<style scoped>
+  #title-fragment {
+		padding: 0;
+	}
+	#title-fragment .container {
+		width: 1190px;
+		padding-left: 0px;
+		padding-right: 0px;
+	}
+	#title-fragment .container >.row {
+		margin-left: 0px;
+		margin-right: 0px;
+	}
+	#title-fragment .shop-logo {
+		width: 220px;
+		height: 220px;
+		border: 1px solid #e8e8e8;
+		float: left;
+		text-align: center;
+		line-height: 210px;
+		overflow: hidden;
+	}
+
+	#title-fragment .shop-logo img {
+		max-width: 220px;
+		max-height: 220px;
+		vertical-align: middle;
+	}
+
+	#title-fragment .shop-banner {
+		float: left;
+		position: relative;
+		width: 970px;
+		height: 220px;
+		border: 1px solid #e8e8e8;
+		border-left: none;
+		overflow: hidden;
+	}
+
+	#title-fragment .shop-banner img {
+		width: 970px;
+		height: 220px;
+	}
+
+	#title-fragment .shop-banner #shop-title {
+		position: absolute;
+		top: 50px;
+		left: 60px;
+		font-size: 30px;
+		color: rgb(255,255,255);
+	}
+	.container{
+		width: 1190px;
+		padding: 0;
+	}
+</style>

components/store/index.js

@@ -0,0 +1,9 @@
+import StoreHeader from './StoreHeader.vue'
+import StoreTitle from './StoreTitle.vue'
+import BaseInfo from './BaseInfo.vue'
+import ComponentInfo from './ComponentInfo.vue'
+import CommodityInfo from './CommodityInfo.vue'
+import CommodityList from './CommodityList.vue'
+import RecommendProduct from './RecommendProduct.vue'
+
+export { StoreHeader, StoreTitle, BaseInfo, ComponentInfo, CommodityInfo, CommodityList, RecommendProduct }

layouts/shop.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="main">
+    <header-view></header-view>
+    <store-header/>
+    <store-title/>
+    <nuxt/>
+    <footer-view></footer-view>
+    <right-bar></right-bar>
+  </div>
+</template>
+<script>
+  import { Header, Footer, RightBar } from '~components/default'
+  import { StoreHeader, StoreTitle } from '~components/store'
+
+  export default {
+    name: 'shop',
+    components: {
+      HeaderView: Header,
+      FooterView: Footer,
+      RightBar,
+      StoreHeader,
+      StoreTitle
+    }
+  }
+</script>
+<style>
+
+</style>

nuxt.config.js

@@ -1,6 +1,7 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
 const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://www.usoftmall.com/' : 'http://192.168.253.60:9090/platform-b2c/')
+const webpack = require('webpack')
 
 module.exports = {
   router: {
@@ -48,7 +49,8 @@ module.exports = {
     },
     vendor: [
       'axios',
-      'swiper'
+      'swiper',
+      'element-ui'
     ],
     babel: {
       presets: ['es2015', 'stage-2'],
@@ -64,11 +66,17 @@ module.exports = {
       })
     ]
   },
-  css: [{
+  css: [ {
+    src: 'bootstrap/dist/css/bootstrap.css'
+  }, {
+    src: 'font-awesome/css/font-awesome.css'
+  }, {
     src: '~assets/scss/app.scss',
     lang: 'scss'
   }, {
     src: 'swiper/dist/css/swiper.css'
+  }, {
+    src: 'element-ui/lib/theme-default/index.css'
   }],
   dev: !isProdMode,
   env: {
@@ -85,6 +93,8 @@ module.exports = {
   }, {
     src: '~plugins/vue-empty.js',
     ssr: false
+  }, {
+    src: '~plugins/element-ui.js'
   }],
   proxyTable: ['/api/**', '/search/**', '/user/**', '/login/**', '/logout/**']
 }

package.json

@@ -7,10 +7,14 @@
   "dependencies": {
     "axios": "^0.15.3",
     "bezier-easing": "^2.0.3",
+    "bootstrap": "^3.3.7",
     "cross-env": "^3.1.4",
+    "element-ui": "^1.3.7",
     "express": "^4.14.1",
+    "font-awesome": "^4.7.0",
     "http-proxy-middleware": "^0.17.4",
     "nuxt": "0.10.6",
+    "iview": "^2.0.0-rc.19",
     "vue-awesome-swiper": "^2.5.4"
   },
   "scripts": {

pages/help/helpDetail/_id.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <help-header></help-header>
+  <div id="main">
+    <div class="container" style="padding: 0; width: 1190px;">
+      <div style="display: inline-block; width: 100%; margin: 0 auto">
+        <div class="left">
+          <left></left>
+        </div>
+        <div class="right">
+          <div class="help-center">
+            <div class="help-head"><img src="/images/help/help-title.png"></div>
+            <div class="help-center-title">
+              <a v-bind:href="'/help/home'" style="font-size: 14px">帮助中心首页<i class="fa fa-angle-right"></i></a>
+              <span>
+              <nuxt-link :to="`/help/home`" class="box" style="font-size: 16px">
+                <span>{{helpTitle.item}}</span><i class="fa fa-close"></i></nuxt-link>
+                <i class="dot fa fa-angle-right"></i>
+              </span>
+              <nuxt-link :to="`/help/helpList/{$helpDetail.navId}`" class="box" style="font-size: 14px"><span v-text="helpDetail.title"></span><i class="fa fa-close"></i></nuxt-link>
+            </div>
+            <!--文章详情-->
+            <div class="help-center-details" style="color: #000">
+              <div class="ql-container ql-snow" v-html="helpDetail.article"></div>
+              <div v-if="helpDetail.length == 0" style="color: #999;">暂无数据！</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    </div>
+</div>
+</template>
+<script>
+  import { left, helpHeader } from '~components/help'
+  export default {
+    name: 'help',
+    components: {
+      left,
+      helpHeader
+    },
+    fetch ({ store, route }) {
+      console.log(route.params)
+      return Promise.all([
+        store.dispatch('loadHelpSnapsho', { parentId: 0 }),
+        store.dispatch('loadHelpDetail', route.params)
+        // store.dispatch('loadHelpTitle', route)
+      ])
+    },
+    computed: {
+      helpTitle () {
+        return this.$store.state.help.title.data
+      },
+      helpDetail () {
+        return this.$store.state.help.detail.data
+      }
+    }
+  }
+</script>
+<style>
+  @import '~assets/scss/help.css';
+  .help-center-details .ql-container img {
+    max-width: 840px;
+  }
+  .ql-container.ql-snow{
+    border: none;
+  }
+  .ql-container.ql-snow p{
+    font-size: 16px;
+  }
+  .ql-container.ql-snow .ql-editor{
+    padding: 0;
+  }
+</style>

pages/help/helpList/_id.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <help-header></help-header>
+  <div id="main">
+    <div class="container" style="padding: 0; width: 1190px;">
+      <div style="display: inline-block; width: 100%; margin: 0 auto">
+        <div class="left">
+          <left></left>
+        </div>
+        <div class="right">
+          <div class="help-center">
+            <div class="help-head"><img src="/images/help/help-title.png"></div>
+            <div class="help-center-title">
+              <a v-bind:href="'/help/home'" style="font-size: 14px">帮助中心首页<i class="fa fa-angle-right"></i></a>
+              <span>
+                <nuxt-link :to="`/help/home`" class="box" style="font-size: 16px"><span>{{helpTitle.item}}</span><i class="fa fa-close"></i></nuxt-link>
+              </span>
+            </div>
+            <!-- 文章列表-->
+            <div class="help-center-list">
+              <h4>问题知识列表</h4>
+              <ul>
+                <li v-for="list in helpList">
+                  <em></em>
+                  <nuxt-link :to="`/help/helpDetail/${list.num}`" v-text="list.title" :title="list.title"></nuxt-link>
+                </li>
+                <li v-if="helpList.length == 0" style="color: #999;">暂无数据！</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+<script>
+  import { left, helpHeader } from '~components/help'
+  export default {
+    name: 'help',
+    components: {
+      left,
+      helpHeader
+    },
+    fetch ({ store, route }) {
+      console.log(route.params)
+      return Promise.all([
+        store.dispatch('loadHelpSnapsho', { parentId: 0 }),
+        store.dispatch('loadHelpList', { navId: route.params.id }),
+        store.dispatch('loadHelpTitle', route.params)
+      ])
+    },
+    computed: {
+      helpTitle () {
+        return this.$store.state.help.title.data
+      },
+      helpList () {
+        return this.$store.state.help.helplist.data
+      }
+    }
+  }
+</script>
+<style>
+  @import '~assets/scss/help.css';
+</style>

pages/help/home.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <help-header></help-header>
+  <div id="main">
+    <div class="container" style="padding: 0; width: 1190px;">
+      <div style="display: inline-block; width: 100%; margin: 0 auto">
+        <div class="left">
+          <left></left>
+        </div>
+        <div class="right">
+          <div class="help-center">
+            <div class="help-head"><img src="/images/help/help-title.png"></div>
+            <div class="help-center-title">
+              <a style="font-size: 14px" v-bind:href="'/help/home'">帮助中心首页</a>
+            </div>
+            <div class="help-center-home">
+              <div v-for="nav01 in helpNav">
+                <h4 v-text="nav01.item"></h4>
+                <div class="row">
+                  <div v-for="nav02 in nav01.children">
+                    <em></em><nuxt-link :to="`/help/helpList/${nav02.id}`" v-text="nav02.item"></nuxt-link>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  </div>
+</template>
+<script>
+  import { left, helpHeader } from '~components/help'
+  export default {
+    name: 'help',
+    components: {
+      left,
+      helpHeader
+    },
+    fetch ({ store }) {
+      return Promise.all([
+        store.dispatch('loadHelpSnapsho', { parentId: 0 })
+      ])
+    },
+    computed: {
+      helpNav () {
+        return this.$store.state.help.snapsho.data
+      }
+    }
+  }
+</script>
+<style>
+  @import '~assets/scss/help.css';
+</style>

pages/index.vue

@@ -20,7 +20,7 @@
         store.dispatch('loadFloors'),
         store.dispatch('loadBanners'),
         store.dispatch('loadProductKinds', { id: 0 }),
-        store.dispatch('loadNewsSnapshot', { page: 1 })
+        store.dispatch('loadNewsSnapshot', { page: 1, pageSize: 10 })
       ])
     },
     components: {

pages/news/_id.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="container">
+    <div class="menu-title col-md-12"><nuxt-link to="/news">优软快讯</nuxt-link> &gt; <span>资讯详情</span></div>
+    <left></left>
+    <detail></detail>
+  </div>
+</template>
+<script>
+  import Left from '~components/news/Left.vue'
+  import Detail from '~components/news/Detail.vue'
+  import NuxtLink from '../../.nuxt/components/nuxt-link'
+  export default {
+    layout: 'main',
+    fetch ({store, route}) {
+      return Promise.all([
+        store.dispatch('newsData/loadHotNews'),
+        store.dispatch('newsData/loadDetailNews', {id: route.params.id})
+      ])
+    },
+    components: {
+      NuxtLink,
+      Left,
+      Detail
+    }
+  }
+</script>
+<style scoped>
+</style>

pages/news/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="container news-container">
+    <left></left>
+    <right v-on:childEvent="listenChild"></right>
+  </div>
+</template>
+
+<script>
+  import { Left, Right } from '~components/news'
+  export default {
+    layout: 'main',
+    data () {
+      return {
+        pageSize: 10,
+        nowPage: 1
+      }
+    },
+    fetch ({ store }) {
+      return Promise.all([
+        store.dispatch('newsData/loadAllNews', { page: this.nowPage, pageSize: this.pageSize }),
+        store.dispatch('newsData/loadHotNews')
+      ])
+    },
+    components: {
+      Left,
+      Right
+    },
+    methods: {
+      listenChild: function (nPage) {
+        this.nowPage = nPage
+        this.$store.dispatch('newsData/loadAllNews', { page: this.nowPage, pageSize: this.pageSize })
+      }
+    }
+
+  }
+</script>
+
+<style scoped>
+  body{
+    font-size: 14px!important;
+  }
+</style>

pages/product/brand.vue

@@ -0,0 +1,9 @@
+<template>
+  <nuxt-child />
+</template>
+<script>
+
+export default {
+  layout: 'main'
+}
+</script>

pages/product/brand/brandList.vue

@@ -0,0 +1,58 @@
+<template>
+  <div>
+    <recommends></recommends>
+    <div id="brandsList" class="container">
+      <div class="title-icon">品牌索引</div>
+      <div class="hr-blue"></div>
+      <ul class="row initials">
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/ABC'">ABC</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/DEF'">DEF</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/GHI'">GHI</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/JKL'">JKL</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/MNO'">MNO</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/PQR'">PQR</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/STU'">STU</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/VWX'">VWX</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/YZ'">YZ</nuxt-link>
+        </li>
+        <li class="col-xs-1 initial">
+          <nuxt-link :to="'/product/brand/brandList/0~9'">0~9</nuxt-link>
+        </li>
+      </ul>
+    </div>
+    <nuxt-child/>
+  </div>
+</template>
+
+<script>
+  import { Recommends } from '~components/product'
+
+  export default {
+    layout: 'main',
+    fetch ({store}) {
+      return Promise.all([
+        store.dispatch('product/loadRecommends')
+      ])
+    },
+    components: {
+      Recommends
+    }
+  }
+</script>

pages/product/brand/brandList/_initial.vue

@@ -0,0 +1,19 @@
+<template>
+  <brand-list></brand-list>
+</template>
+
+<script>
+  import { BrandList } from '~components/product'
+
+  export default {
+    name: 'brandListDetail',
+    fetch ({store, route}) {
+      return Promise.all([
+        store.dispatch('product/loadBrands', {'keyword': route.params.initial})
+      ])
+    },
+    components: {
+      BrandList
+    }
+  }
+</script>

pages/product/kind.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <kind-box></kind-box>
+  </div>
+</template>
+
+<script>
+import { KindBox } from '~components/product'
+
+export default {
+  layout: 'main',
+  fetch ({store}) {
+    return Promise.all([
+      store.dispatch('product/loadAllProductKinds', { id: 0 })
+    ])
+  },
+  components: {
+    KindBox
+  }
+}
+</script>

pages/provider/factories.vue

@@ -0,0 +1,39 @@
+<template>
+  <!-- 组件模板只能包含一个根元素，除非使用v-if 和 v-if-else -->
+  <div>
+    <!-- 轮播及店铺推荐 -->
+    <recommend-store/>
+
+    <recommend-original/>
+
+    <suppliers :op="'findByOriginal'"/>
+  </div>
+</template>
+<script>
+import { RecommendStore, RecommendOriginal, Suppliers } from '~components/provider'
+
+export default {
+  layout: 'main',
+  fetch ({ store }) {
+    return Promise.all([
+      store.dispatch('loadBanners'),
+      store.dispatch('provider/loadSalesStore', { isOriginal: true }),
+      store.dispatch('provider/loadNewStores', { types: 'ORIGINAL_FACTORY' }),
+      store.dispatch('provider/loadRecommendOriginal'),
+      store.dispatch('provider/findStoreList', { op: 'findByOriginal' })
+    ])
+  },
+  components: {
+    RecommendStore,
+    RecommendOriginal,
+    Suppliers
+  },
+  data () {
+    return {
+      msg: 'hello vue'
+    }
+  }
+}
+</script>
+<style>
+</style>

pages/provider/home.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <!-- 轮播及店铺推荐 -->
+    <recommend-store/>
+
+    <excellent-suppliers :isShowMore="true"/>
+
+    <hot-commodity/>
+  </div>
+</template>
+<script>
+import { RecommendStore, ExcellentSuppliers, HotCommodity } from '~components/provider'
+
+export default{
+  layout: 'main',
+  fetch ({ store }) {
+    return Promise.all([
+      store.dispatch('loadBanners'),
+      store.dispatch('provider/loadSalesStore', { isOriginal: false }),
+      store.dispatch('provider/loadNewStores', { types: 'AGENCY-DISTRIBUTION' }),
+      store.dispatch('provider/loadRecommendStores'),
+      store.dispatch('provider/loadHotComponents')
+    ])
+  },
+  components: {
+    RecommendStore,
+    ExcellentSuppliers,
+    HotCommodity
+  }
+}
+</script>
+<style>
+  .container{
+    padding:0;
+  }
+</style>

pages/provider/list.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <excellent-suppliers :isShowMore="false"/>
+
+    <suppliers :op="'findByAGENCY'"/>
+  </div>
+</template>
+<script>
+import { ExcellentSuppliers, Suppliers } from '~components/provider'
+
+export default {
+  layout: 'main',
+  fetch ({ store }) {
+    return Promise.all([
+      store.dispatch('provider/loadRecommendStores'),
+      store.dispatch('provider/findStoreList', { op: 'findByAGENCY' })
+    ])
+  },
+  components: {
+    ExcellentSuppliers,
+    Suppliers
+  }
+}
+</script>
+<style>
+</style>

pages/search/_keyword.vue

@@ -0,0 +1,25 @@
+<template>
+<div class="container" id="searchResult">
+  <result-title></result-title>
+    <kind></kind>
+  <good-list></good-list>
+</div>
+</template>
+<script>
+  import { GoodList, Kind, ResultTitle } from '~components/search'
+  import 'bootstrap/dist/css/bootstrap.min.css'
+  export default{
+    layout: 'main',
+    data () {
+      return {
+        key: this.$route.query.w
+      }
+    },
+    components: {
+      ResultTitle,
+      Kind,
+      GoodList
+    }
+  }
+</script>
+

pages/store/_uuid/_batchCode.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="container commodity">
+    <commodity-info />
+    <component-info />
+  </div>
+</template>
+<script>
+import { ComponentInfo, CommodityInfo } from '~components/store'
+
+export default {
+  layout: 'shop',
+  fetch ({ store, route }) {
+    return Promise.all([
+      store.dispatch('shop/findStoreInfoFromUuid', route.params),
+      store.dispatch('shop/findCommodityOnBatchInfo', route.params)
+    ])
+  },
+  components: {
+    ComponentInfo,
+    CommodityInfo
+  }
+}
+</script>
+<style scoped>
+  .container.commodity {
+		width: 1190px;
+		padding-left: 0px;
+		padding-right: 0px;
+		font-family: "Microsoft Yahei", "微软雅黑";
+	}
+</style>

pages/store/_uuid/description.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="container">
+    <base-info/>
+  </div>
+</template>
+<script>
+import { BaseInfo } from '~components/store'
+
+export default {
+  layout: 'shop',
+  fetch ({ store, route }) {
+    return Promise.all([
+      store.dispatch('shop/findStoreInfoFromUuid', route.params)
+    ])
+  },
+  components: {
+    BaseInfo
+  }
+}
+</script>
+<style>
+
+</style>

pages/store/_uuid/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="container">
+    <recommend-product/>
+    <commodity-list :kinds="kinds"/>
+  </div>
+</template>
+<script>
+import axios from '~plugins/axios'
+import { CommodityList, RecommendProduct } from '~components/store'
+
+export default {
+  layout: 'shop',
+  data () {
+    return {
+      uuid: this.$route.params.uuid
+    }
+  },
+  fetch ({ store, params }) {
+    return Promise.all([
+      store.dispatch('shop/findStoreInfoFromUuid', params),
+      store.dispatch('shop/findRecommendProducts', params),
+      store.dispatch('shop/pageCommoditiesOfStore', params.uuid, { page: 1, count: 6 })
+    ])
+  },
+  async asyncData ({ params }) {
+    let { data } = await axios.get('/api/commodity/components/kinds', { params: { StoreUuid: params.uuid } })
+    return { kinds: data }
+  },
+  components: {
+    RecommendProduct,
+    CommodityList
+  }
+}
+</script>
+<style>
+
+</style>

plugins/element-ui.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import { Breadcrumb, BreadcrumbItem, Tree, Pagination } from 'element-ui'
+
+Vue.use(Breadcrumb)
+Vue.use(BreadcrumbItem)
+Vue.use(Tree)
+Vue.use(Pagination)

store/floor.js

@@ -4,7 +4,6 @@ export const state = () => ({
     data: []
   }
 })
-
 export const mutations = {
   REQUEST_LIST (state) {
     state.list.fetching = true

store/help.js

@@ -0,0 +1,61 @@
+export const state = () => ({
+  snapsho: {
+    fetching: false,
+    data: []
+  },
+  helplist: {
+    fetching: false,
+    data: []
+  },
+  detail: {
+    fetching: false,
+    data: []
+  },
+  title: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_SNAPSHO (state) {
+    state.snapsho.fetching = true
+  },
+  GET_SNAPSHO_FAILURE (state) {
+    state.snapsho.fetching = false
+  },
+  GET_SNAPSHO_SUCCESS (state, result) {
+    state.snapsho.fetching = false
+    state.snapsho.data = result
+  },
+  REQUEST_HELPLIST (state) {
+    state.helplist.fetching = true
+  },
+  GET_HELPLIST_FAILURE (state) {
+    state.helplist.fetching = false
+  },
+  GET_HELPLIST_SUCCESS (state, result) {
+    state.helplist.fetching = false
+    state.helplist.data = result
+  },
+  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
+  },
+  REQUEST_TITLE (state) {
+    state.title.fetching = true
+  },
+  GET_TITLE_FAILURE (state) {
+    state.title.fetching = false
+  },
+  GET_TITLE_SUCCESS (state, result) {
+    state.title.fetching = false
+    state.title.data = result
+  }
+}