Merge branch 'master' of C:\Users\wangyc\WebstormProjects\mall-web-ssr with conflicts.

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/main/Nav.vue

@@ -7,7 +7,7 @@
       <nuxt-link :to="'/'" class="item" exact>
         <span>首&nbsp;&nbsp;页</span>
       </nuxt-link>
-      <nuxt-link to="/product" class="item">
+      <nuxt-link to="/product/brand?initial=ABC" class="item">
         <span>品牌中心</span>
       </nuxt-link>
       <nuxt-link to="/provider/factories" class="item">

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/product/BrandList.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <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?initial=ABC'">ABC</nuxt-link></li>
+        <li class="col-xs-1 initial"><nuxt-link :to="'/product/brand?initial=DEF'">DEF</nuxt-link></li>
+        <li class="col-xs-1 initial" @click="showList('GHI')">GHI</li>
+        <li class="col-xs-1 initial" @click="showList('JKL')">JKL</li>
+        <li class="col-xs-1 initial" @click="showList('MNO')">MNO</li>
+        <li class="col-xs-1 initial" @click="showList('PQR')">PQR</li>
+        <li class="col-xs-1 initial" @click="showList('STU')">STU</li>
+        <li class="col-xs-1 initial" @click="showList('VWX')">VWX</li>
+        <li class="col-xs-1 initial" @click="showList('YZ')">YZ</li>
+        <li class="col-xs-1 initial" @click="showList('0~9')">0~9</li>
+      </ul>
+      <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 35px;
+    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%;
+    display: inline-block;
+  }
+
+  #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/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

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

pages/product/brand.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <recommends></recommends>
+    <brand-list></brand-list>
+  </div>
+</template>
+
+<script>
+  import { Recommends, BrandList } from '~components/product'
+
+  export default {
+    name: 'brand',
+    layout: 'main',
+    fetch ({store}) {
+      return Promise.all([
+        store.dispatch('product/loadRecommends'),
+        store.dispatch('product/loadBrands', {'keyword': 'ABC'})
+      ])
+    },
+    components: {
+      Recommends,
+      BrandList
+    }
+  }
+</script>

pages/product/brand/brandList/_initial.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <brand-list></brand-list>
+  </div>
+</template>
+
+<script>
+  import { BrandList } from '~components/product'
+
+  export default {
+    name: 'brand',
+    layout: 'main',
+    fetch ({store}) {
+      return Promise.all([
+        store.dispatch('product/loadBrands', {'keyword': 'ABC'})
+      ])
+    },
+    components: {
+      BrandList
+    }
+  }
+</script>

store/floor.js

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

store/index.js

@@ -53,23 +53,23 @@ export const actions = {
   // 获取子器件类目
   loadProductKinds ({ commit }, params = {}) {
     let id = params.id
-    commit('product/REQUEST_KIND', params)
+    commit('product/kind/REQUEST_KIND', params)
     return axios.get(`/api/product/kind/${id}/children`)
       .then(response => {
-        commit('product/GET_KIND_SUCCESS', { id, result: response.data })
+        commit('product/kind/GET_KIND_SUCCESS', { id, result: response.data })
       }, err => {
-        commit('product/GET_KIND_FAILURE', {id, err})
+        commit('product/kind/GET_KIND_FAILURE', {id, err})
       })
   },
   // 获取全部子器件类目
   loadAllProductKinds ({ commit }, params = {}) {
     let id = params.id
-    commit('product/REQUEST_KIND', params)
+    commit('product/kind/REQUEST_KIND', params)
     return axios.get(`/api/product/kind/${id}/children_all`)
       .then(response => {
-        commit('product/GET_KIND_SUCCESS', { id, result: response.data })
+        commit('product/kind/GET_KIND_SUCCESS', { id, result: response.data })
       }, err => {
-        commit('product/GET_KIND_FAILURE', {id, err})
+        commit('product/kind/GET_KIND_FAILURE', {id, err})
       })
   },
   // 获取首页新闻
@@ -84,12 +84,12 @@ export const actions = {
   },
   // 获取器件统计信息
   loadProductCounts ({ commit }, params = {}) {
-    commit('product/REQUEST_COUNTS')
+    commit('product/common/REQUEST_COUNTS')
     return axios.get('/api/product/commoncount', {params})
       .then(response => {
-        commit('product/GET_COUNTS_SUCCESS', response.data)
+        commit('product/common/GET_COUNTS_SUCCESS', response.data)
       }, err => {
-        commit('product/GET_COUNTS_FAILURE', err)
+        commit('product/common/GET_COUNTS_FAILURE', err)
       })
   },
   // 搜索关键字

store/product.js

@@ -1,58 +1,37 @@
-export const state = () => ({
-  kinds: {
-    fetching: false,
-    data: []
-  },
-  counts: {
-    fetching: false,
-    data: []
-  }
-})
+import axios from '~/plugins/axios'
 
-export const mutations = {
-  REQUEST_KIND (state, action) {
-    if (!action.id) {
-      state.kinds.fetching = true
-    } else {
-      const kind = state.kinds.data.find(kind => Object.is(kind.id, action.id))
-      if (kind) {
-        kind.fetching = true
-      }
-    }
-  },
-  GET_KIND_FAILURE (state, action) {
-    if (!action.id) {
-      state.kinds.fetching = false
-    } else {
-      const kind = state.kinds.data.find(kind => Object.is(kind.id, action.id))
-      if (kind) {
-        kind.fetching = false
-      }
-    }
+export const actions = {
+  // 全局服务初始化
+  nuxtServerInit (store, { params, route, isServer, req }) {
+    // 检查设备类型
+    const userAgent = isServer ? req.headers['user-agent'] : navigator.userAgent
+    const isMobile = /(iPhone|iPod|Opera Mini|Android.*Mobile|NetFront|PSP|BlackBerry|Windows Phone)/ig.test(userAgent)
+    store.commit('option/SET_MOBILE_LAYOUT', isMobile)
+    store.commit('option/SET_USER_AGENT', userAgent)
+    return Promise.all([
+      // 全局数据
+      // store.dispatch('loadUserInfo')
+    ])
   },
-  GET_KIND_SUCCESS (state, action) {
-    if (!action.id) {
-      state.kinds.fetching = false
-      action.result.forEach(kind => {
-        kind.fetching = false
+  // 品牌列表推荐品牌配置
+  loadRecommends ({ commit }) {
+    commit('brand/REQUEST_RECOMMENDS')
+    return axios.get(`/api/product/brand/hot/5`)
+      .then(response => {
+        commit('brand/GET_RECOMMENDS_SUCCESS', response.data)
+      }, err => {
+        commit('brand/GET_RECOMMENDS_FAILURE', err)
       })
-      state.kinds.data = action.result
-    } else {
-      const kind = state.kinds.data.find(kind => Object.is(kind.id, action.id))
-      if (kind) {
-        kind.fetching = false
-        kind.children = action.result
-      }
-    }
   },
-  REQUEST_COUNTS (state) {
-    state.counts.fetching = true
-  },
-  GET_COUNTS_FAILURE (state) {
-    state.counts.fetching = false
-  },
-  GET_COUNTS_SUCCESS (state, result) {
-    state.counts.fetching = false
-    state.counts.data = result
+  // 品牌列表配置
+  loadBrands ({ commit }, params = {}) {
+    let keyword = params.keyword
+    commit('brand/REQUEST_BRANDS', params)
+    return axios.get(`/api/product/brand/initial/${keyword}`)
+      .then(response => {
+        commit('brand/GET_BRANDS_SUCCESS', response.data)
+      }, err => {
+        commit('brand/GET_BRANDS_FAILURE', err)
+      })
   }
 }

store/product/brand.js

@@ -0,0 +1,33 @@
+export const state = () => ({
+  recommends: {
+    fetching: false,
+    data: []
+  },
+  brandList: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_RECOMMENDS (state) {
+    state.recommends.fetching = true
+  },
+  GET_RECOMMENDS_SUCCESS (state, result) {
+    state.recommends.fetching = false
+    state.recommends.data = result
+  },
+  GET_RECOMMENDS_FAILURE (state) {
+    state.recommends.fetching = false
+  },
+  REQUEST_BRANDS (state) {
+    state.brandList.fetching = true
+  },
+  GET_BRANDS_SUCCESS (state, result) {
+    state.brandList.fetching = false
+    state.brandList.data = result
+  },
+  GET_BRANDS_FAILURE (state) {
+    state.brandList.fetching = false
+  }
+}

store/product/common.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  counts: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_COUNTS (state) {
+    state.counts.fetching = true
+  },
+  GET_COUNTS_FAILURE (state) {
+    state.counts.fetching = false
+  },
+  GET_COUNTS_SUCCESS (state, result) {
+    state.counts.fetching = false
+    state.counts.data = result
+  }
+}

store/product/kind.js

@@ -0,0 +1,44 @@
+export const state = () => ({
+  kinds: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_KIND (state, action) {
+    if (!action.id) {
+      state.kinds.fetching = true
+    } else {
+      const kind = state.kinds.data.find(kind => Object.is(kind.id, action.id))
+      if (kind) {
+        kind.fetching = true
+      }
+    }
+  },
+  GET_KIND_FAILURE (state, action) {
+    if (!action.id) {
+      state.kinds.fetching = false
+    } else {
+      const kind = state.kinds.data.find(kind => Object.is(kind.id, action.id))
+      if (kind) {
+        kind.fetching = false
+      }
+    }
+  },
+  GET_KIND_SUCCESS (state, action) {
+    if (!action.id) {
+      state.kinds.fetching = false
+      action.result.forEach(kind => {
+        kind.fetching = false
+      })
+      state.kinds.data = action.result
+    } else {
+      const kind = state.kinds.data.find(kind => Object.is(kind.id, action.id))
+      if (kind) {
+        kind.fetching = false
+        kind.children = action.result
+      }
+    }
+  }
+}