新版品牌详情页

components/brandCenter/BrandIndex.vue

@@ -0,0 +1,503 @@
+<template>
+  <div class="brand-center-index">
+    <img src="/images/brandCenter/brand-index-title.png" alt="">
+    <div class="brand-index-tab">
+      <div class="brand-index-group" v-for="(indexGroup, index) in indexGroups">
+        <span v-if="index == 5"></span>
+        <a @click="goBrandIndex(group_index)" v-for="group_index in indexGroup" :class="{'active': activeIndex==group_index}">{{group_index}}</a>
+        <span v-if="index == 5"></span>
+      </div>
+    </div>
+    <div class="brand-center-index-list">
+      <div class="brand-list-nav">
+        <div class="filter-area">
+          <input type="text" placeholder="请输入您要搜索的品牌" v-model="keyword" @keyup.13="searchBrands()">
+          <img src="/images/brandCenter/search-btn.png" alt="" @click="searchBrands()">
+          <span v-if="brandList.totalElements > 0">{{nowPage}}/{{brandList.totalPages}}
+            <a href="javascript:void(0)" class="icon-xiangzuo iconfont" @click="changePage('pre')" :class="{'is-border': nowPage==1}"></a>
+            <a href="javascript:void(0)" @click="changePage('next')" class="icon-xiangyou iconfont" :class="{'is-border': nowPage>=brandList.totalPages}"></a>
+          </span>
+        </div>
+      </div>
+      <div class="brand-list-items">
+        <span v-show="!isSearch">
+          以{{activeIndex&&activeIndex.length==1?'字母':''}}
+          <span class="active-index">{{activeIndex}}&nbsp;</span>开头共有
+          <span class="active-number">{{brandList.totalElements || 0}}&nbsp;</span>个品牌
+          <span v-if="brandList.totalElements > 0">，当前是第
+            <span class="active-number">{{nowPage}}&nbsp;</span>页
+          </span>
+        </span>
+        <span v-show="isSearch">
+          搜索
+          <span class="active-index">"{{showKeyword}}"&nbsp;</span>，为您找到
+          <span class="active-number">{{brandList.totalElements || 0}}&nbsp;</span>个相关品牌：
+        </span>
+        <div class="brand-list-item-wrap" v-for="brand in brandList.content">
+          <a :href="'/product/brand/'+brand.uuid" target="_blank">
+            <span v-if="brand.nameEn">{{brand.nameEn}}</span>
+            <span v-if="brand.nameCn != brand.nameEn">{{brand.nameCn}}</span>
+            <div class="brand-intro">
+              <span class="brand-application">应用领域：{{brand.application | applicationFilter}}</span>
+              <span >品牌介绍：{{brand.brief | introduceFilter}}</span>
+            </div>
+          </a>
+        </div>
+        <div v-if="brandList.totalElements <= 0" class="empty-remind">
+          商城暂未收录您想要查找的品牌，可前往<a @click="goBrandApply">“品牌申请”</a>提醒我们完善该品牌信息
+        </div>
+        <div class="search-modal-wrap" v-if="showSearchModal"></div>
+      </div>
+      <page :total="brandList.totalElements" :page-size="pageSize"
+            :current="nowPage" v-on:childEvent="listenPage"></page>
+    </div>
+  </div>
+</template>
+<script>
+    import Page from '~components/common/page/pageComponent.vue'
+    export default {
+      data () {
+        return {
+          indexGroups: [
+            ['A', 'B', 'C', 'D', 'E'],
+            ['F', 'G', 'H', 'I', 'J'],
+            ['K', 'L', 'M', 'N', 'O'],
+            ['P', 'Q', 'R', 'S', 'T'],
+            ['U', 'V', 'W', 'X', 'Y', 'Z'],
+            ['0~9']
+          ],
+          nowPage: 1,
+          pageSize: 60,
+          keyword: '',
+          isSearch: false,
+          brands: {},
+          showKeyword: '',
+          showSearchModal: false
+        }
+      },
+      filters: {
+        applicationFilter: function (str) {
+          return str ? str.split(',').join('|') : '-'
+        },
+        introduceFilter: function (str) {
+          if (!str || str === '') {
+            return '-'
+          }
+          let len = 0
+          let index = 0
+          for (let i = 0; i < str.length; i++) {
+            if (index === 0 && str.charAt(i).charCodeAt(0) > 255) {
+              len = len + 2
+            } else {
+              len++
+            }
+            if (len > 50) {
+              index = i
+              break
+            }
+          }
+          if (index > 0) {
+            return str.substring(0, index) + '...'
+          } else {
+            return str
+          }
+        }
+      },
+      components: {
+        Page
+      },
+      mounted () {
+        if (this.$route.path !== '/product/brand/brandList/A') {
+          this.$router.push('/product/brand/brandList/A')
+        }
+      },
+      computed: {
+        brandList () {
+          let brandsList = !this.isSearch ? this.$store.state.product.brand.brandPagerList.data : this.brands
+          brandsList.content = brandsList.content || []
+          return brandsList
+        },
+        activeIndex () {
+          return !this.isSearch ? this.$route.params.initial : ''
+        },
+        user () {
+          return this.$store.state.option.user
+        }
+      },
+      watch: {
+        $route: function (val, oldVal) {
+          this.initParams()
+        }
+      },
+      methods: {
+        initParams: function () {
+          this.nowPage = 1
+          this.isSearch = false
+          this.keyword = ''
+          this.reloadData()
+        },
+        reloadData: function () {
+          !this.isSearch ? this.$store.dispatch('product/loadBrandsPager', {'initial': this.$route.params.initial, 'page': this.nowPage, 'count': this.pageSize, 'keyword': this.keyword}) : this.searchData()
+        },
+        searchData: function () {
+          this.showSearchModal = true
+          this.$http.get('/api/product/brand/Brand/ByPage', {params: {'page': this.nowPage, 'count': this.pageSize, 'keyword': this.keyword}})
+            .then(response => {
+              this.brands = response.data
+              this.isSearch = true
+              this.showKeyword = this.keyword
+              this.showSearchModal = false
+            })
+        },
+        listenPage: function (page) {
+          this.nowPage = page
+          this.reloadData()
+        },
+        changePage: function (type) {
+          if (type === 'next' && this.nowPage < this.brandList.totalPages) {
+            this.nowPage ++
+          } else if (type === 'pre' && this.nowPage > 1) {
+            this.nowPage --
+          }
+          this.reloadData()
+        },
+        searchBrands: function () {
+          if (this.keyword && this.keyword !== '') {
+            this.nowPage = 1
+            this.searchData()
+          } else {
+            this.initParams()
+            this.reloadData()
+            this.$router.push('/product/brand/brandList/A')
+          }
+        },
+        goBrandIndex: function (index) {
+          if (index === this.$route.params.initial) {
+            this.initParams()
+            this.reloadData()
+          } else {
+            this.$router.push('/product/brand/brandList/' + index)
+          }
+        },
+        goBrandApply: function () {
+          if (!this.user.logged) {
+            this.login()
+          } else {
+            window.open('/vendor#/brand/apply/')
+          }
+        },
+        login: function () {
+          this.$http.get('/login/page', {params: {returnUrl: window.location.href}}).then(response => {
+            if (response.data) {
+              this.$router.push('/auth/login')
+            }
+          })
+        }
+      }
+    }
+</script>
+<style lang="scss" scoped>
+  .brand-center-index {
+    width: 1190px;
+    margin: 0 auto;
+    >img {
+      width: 1190px;
+      height: 70px;
+      margin-top: 28px;
+    }
+    .brand-index-tab {
+      height: 206px;
+      position: relative;
+      background: url(/images/brandCenter/brand-index-tree.png) no-repeat;
+      background-position: 60px 71.7px;
+      background-color: #eef1fd;
+      .brand-index-group {
+        height: 40px;
+        text-align: center;
+        position: absolute;
+        a {
+          width: 40px;
+          height: 40px;
+          text-align: center;
+          display: inline-block;
+          color: #fff;
+          line-height: 40px;
+          font-size: 16px;
+          vertical-align: middle;
+        }
+        span {
+          width: 10px;
+          height: 40px;
+          display: inline-block;
+          background: #898ef3;
+          vertical-align: middle;
+        }
+        &:nth-child(1) {
+          left: 184px;
+          top: 32px;
+          a {
+            background: #fc524a;
+            &.active {
+              font-weight: bold;
+              background-color: #ec190f;
+              position: relative;
+              bottom: 2px;
+            }
+            &:hover {
+              font-weight: bold;
+              position: relative;
+              bottom: 2px;
+            }
+          }
+        }
+        &:nth-child(2) {
+          left: 322px;
+          bottom: 22px;
+          a {
+            background: #fdad33;
+            &.active {
+              font-weight: bold;
+              background-color: #ea8f02;
+              position: relative;
+              bottom: 2px;
+            }
+            &:hover {
+              font-weight: bold;
+              position: relative;
+              bottom: 2px;
+            }
+          }
+        }
+        &:nth-child(3) {
+          left: 472px;
+          top: 32px;
+          a {
+            background: #12c8b1;
+            &.active {
+              font-weight: bold;
+              background-color: #009b87;
+              position: relative;
+              bottom: 2px;
+            }
+            &:hover {
+              font-weight: bold;
+              position: relative;
+              bottom: 2px;
+            }
+          }
+        }
+        &:nth-child(4) {
+          left: 612px;
+          bottom: 22px;
+          a {
+            background: #24b8fe;
+            &.active {
+              font-weight: bold;
+              background-color: #0095db;
+              position: relative;
+              bottom: 2px;
+            }
+            &:hover {
+              font-weight: bold;
+              position: relative;
+              bottom: 2px;
+            }
+          }
+        }
+        &:nth-child(5) {
+          left: 745px;
+          top: 32px;
+          a {
+            background: #008cff;
+            &.active {
+              font-weight: bold;
+              background-color: #026dc5;
+              position: relative;
+              bottom: 2px;
+            }
+            &:hover {
+              font-weight: bold;
+              position: relative;
+              bottom: 2px;
+            }
+          }
+        }
+        &:nth-child(6) {
+          left: 958px;
+          bottom: 22px;
+          a {
+            background: #898ef3;
+            &.active {
+              font-weight: bold;
+              background-color: #7479eb;
+              position: relative;
+              bottom: 2px;
+            }
+            &:hover {
+              font-weight: bold;
+              position: relative;
+              bottom: 2px;
+            }
+          }
+        }
+      }
+    }
+    .brand-center-index-list {
+      .brand-list-nav {
+        height: 56px;
+        padding-top: 15px;
+        .filter-area {
+          float: right;
+          height: 50px;
+          line-height: 50px;
+          margin-right: 9px;
+          position: relative;
+          input {
+            height: 32px;
+            width: 318px;
+            line-height: 32px;
+            padding-left: 11px;
+            border: 1px solid #c6c6c6;
+            background-color: #fff;
+            padding-right: 32px;
+            position: absolute;
+            right: 150px;
+            top: 9px;
+          }
+          img {
+            position: absolute;
+            top: 15px;
+            right: 154px;
+          }
+          span {
+            margin-left: 47px;
+            color: #666;
+            a {
+              width: 30px;
+              height: 22px;
+              display: inline-block;
+              line-height: 22px;
+              text-align: center;
+              border: 1px solid #d2d2d2;
+              color: #3c7cf5;
+              margin-left: 9px;
+              cursor: pointer;
+              background: #fff;
+              &.is-border {
+                color: #999;
+                cursor: not-allowed;
+              }
+            }
+          }
+        }
+      }
+      .brand-list-items {
+        padding-top: 20px;
+        background: url('/images/brandCenter/brand-index-bg.png')no-repeat;
+        background-size: cover;
+        padding-bottom: 20px;
+        position: relative;
+        .search-modal-wrap {
+          background: rgba(255, 255, 255, 0.3);
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          z-index: 2;
+          left: 0;
+          top: 0;
+        }
+        >span {
+          font-size: 14px;
+          color: #333;
+          display: block;
+          margin-bottom: 20px;
+          .active-index {
+            font-size: 16px;
+            color: #3c7cf5;
+          }
+          .active-number {
+            font-weight: bold;
+            font-size: 16px;
+            color: #fc524a;
+          }
+        }
+        .brand-list-item-wrap {
+          display: inline-block;
+          width: 297.5px;
+          margin-bottom: 29px;
+          position: relative;
+          height: 30px;
+          vertical-align: middle;
+          >a {
+            display: inline-block;
+            width: 90px;
+            >span {
+              max-width: 270px;
+              white-space: nowrap;
+              display: block;
+              line-height: 20px;
+              color: #323232;
+              font-size: 14px;
+              &:nth-child(2) {
+                font-size: 12px;
+              }
+            }
+            .brand-intro {
+              display: none;
+              z-index: 3;
+              position: absolute;
+              width: 177px;
+              height: 96px;
+              overflow: hidden;
+              right: 31px;
+              top:0;
+              border-radius: 4px;
+              background-color: rgb( 102, 102, 102 );
+              box-shadow: 1.5px 2.598px 7px 0px rgba(0, 0, 0,0.58);
+              color: #fff;
+              font-size: 11px;
+              padding: 13px 15px;
+              line-height: 18px;
+              text-align: left;
+              word-break: break-all;
+              span {
+                display: block;
+                &.brand-application {
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                }
+              }
+              &:hover {
+                span {
+                  text-decoration: underline;
+                }
+              }
+            }
+            &:hover {
+              >span {
+                color: #54c1fa;
+                font-weight: bold;
+              }
+              .brand-intro {
+                display: block;
+              }
+            }
+            >div {
+              text-align: center;
+            }
+          }
+        }
+        >div.empty-remind{
+          text-align: center;
+          margin: 20px 0;
+        }
+      }
+      .page-wrap {
+        text-align: right;
+        margin: 0 0 62px 0;
+        float: none;
+      }
+    }
+  }
+</style>

components/brandCenter/RecommendBrand.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="recommend-brand">
+    <div v-swiper:mySwiper="swiperOption">
+      <div class="swiper-wrapper">
+        <div class="swiper-slide" v-for="banner in sliceBanners">
+          <a :href="banner.hrefUrl" target="_blank" v-if="banner.hrefUrl">
+            <img :src="banner.pictureLink"/>
+          </a>
+          <span v-if="!banner.hrefUrl">
+                <img :src="banner.pictureLink"/>
+              </span>
+        </div>
+        <div class="swiper-button-prev"><i class="iconfont icon-swiper-left"></i></div>
+        <div class="swiper-button-next"><i class="iconfont icon-swiper-right"></i></div>
+      </div>
+      <div class="swiper-pagination swiper-pagination-bullets"></div>
+    </div>
+    <div class="recommend-area">
+      <ul class="recommend-items">
+        <li v-for="item in hotBrands.data">
+          <a :href="item.detailsLink" target="_blank">
+            <img :src="item.pictureLink" alt="">
+            <div>
+              <p>{{item.title}}</p>
+              <span class="brand-application" v-if="item.metadatas.contExp_abstract" :title="item.metadatas.contExp_abstract">应用领域：{{item.metadatas.contExp_abstract | applicationFilter}}</span>
+              <span class="brand-introduce" v-if="item.metadatas.contExp_select">品牌介绍：{{item.metadatas.contExp_select | introduceFilter}}</span>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data () {
+      return {
+        activeSlide: 0,
+        swiperOption: {
+          autoplay: 6000,
+          pagination: '.swiper-pagination',
+          paginationClickable: true,
+          mousewheelControl: false,
+          effect: 'fade',
+          lazyLoading: true,
+          loop: true,
+          prevButton: '.swiper-button-prev',
+          nextButton: '.swiper-button-next',
+          onTransitionStart: (swiper) => {
+            if (this.banners.data && this.banners.data.length && (swiper.activeIndex > this.banners.data.length)) {
+              swiper.activeIndex = 1
+            }
+            if (this.banners.data && this.banners.data.length && swiper.activeIndex <= 0) {
+              swiper.activeIndex = this.banners.data.length
+            }
+          }
+        }
+      }
+    },
+    filters: {
+      applicationFilter: function (str) {
+        return str.split(',').join('|')
+      },
+      introduceFilter: function (title) {
+        if (title === '') {
+          return title
+        }
+        let len = 0
+        let index = 0
+        for (let i = 0; i < title.length; i++) {
+          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
+            len = len + 2
+          } else {
+            len++
+          }
+          if (len > 80) {
+            index = i
+            break
+          }
+        }
+        if (index > 0) {
+          return title.substring(0, index) + '...'
+        } else {
+          return title
+        }
+      }
+    },
+    computed: {
+      floors () {
+        return this.$store.state.floor.list.data
+      },
+      hotBrands () {
+        return this.$store.state.product.brand.recommends.data
+      },
+      banners () {
+        return this.$store.state.carousel.brandCarousel.data
+      },
+      sliceBanners () {
+        return this.banners && this.banners.data.length ? this.banners.data.slice(0, 3) : []
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .recommend-brand {
+    width: 1190px;
+    margin: 0 auto;
+    .swiper-container {
+      z-index: 2;
+      .swiper-wrapper {
+        width: 1190px;
+        margin: 0 auto;
+        .swiper-slide {
+          height: 163px;
+          margin: 0 auto;
+          display: flex;
+          img {
+            width: 1190px;
+            height: 163px;
+            border: 1px solid #ccc;
+          }
+        }
+        .swiper-button-prev i, .swiper-button-next i {
+          font-size: 26px;
+        }
+      }
+      .swiper-pagination-bullets {
+        .swiper-pagination-bullet {
+          width: 10px!important;
+          height: 10px!important;
+        }
+      }
+    }
+    .recommend-adv {
+      margin: 0 auto;
+      width: 1190px;
+      height: 163px;
+      display: block;
+      border-radius: 3px;
+    }
+    .recommend-area {
+      margin: 29px auto 0;
+      width: 1190px;
+      height: 362px;
+      background:url("/images/brandCenter/recommend-bg.png") no-repeat;
+      .recommend-items {
+        padding-top: 80px;
+        padding-left: 2px;
+        li {
+          border-radius: 3px;
+          width: 234px;
+          height: 127px;
+          background: #fff;
+          display: inline-block;
+          margin-right: 4px;
+          vertical-align: middle;
+          margin-bottom: 5px;
+          text-align: center;
+          &:nth-child(5n) {
+            margin-right: 0;
+          }
+          a {
+            padding-top: 22px;
+            width: 234px;
+            height: 127px;
+            line-height: 91px;
+            display: block;
+            position: relative;
+            img {
+              max-width: 140px;
+              max-height: 91px;
+            }
+            >div {
+              display: none;
+              position: absolute;
+              bottom: 2px;
+              border-radius: 3px;
+              width: 234px;
+              height: 127px;
+              background-color: #3a78f4;
+              opacity: 0.9;
+              top: 0;
+              text-align: left;
+              padding: 13px 7px;
+              p {
+                font-size: 15px;
+                color: #fff;
+                font-weight: bold;
+                height: 16px;
+                line-height: 16px;
+              }
+              span {
+                color: #fff;
+                display: block;
+                width: 228px;
+                line-height: 18px;
+                font-size: 12px;
+                &.brand-application {
+                  padding-right: 5px;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+                  overflow: hidden;
+                }
+                &.brand-introduce {
+                  padding-right: 5px;
+                  word-break: break-all;
+                }
+              }
+            }
+          }
+          &:hover {
+            /*position: relative;
+            bottom: 5px;*/
+            a {
+              div {
+                display: block;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>

components/brandCenter/index.js

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

components/main/Nav.vue

@@ -36,7 +36,7 @@
           </li>
         </ul>
       </a>
-      <nuxt-link to="/product/brand/brandList/ABC" class="item">
+      <nuxt-link to="/product/brand/brandList/A" class="item">
         <span>品牌墙</span>
       </nuxt-link>
       <nuxt-link to="/news" class="item">

components/mobile/base/SearchHeader.vue

@@ -18,15 +18,15 @@
       </template>
     </ul>
     <ul v-if="emptyStatus && type == 'default' && keyword && keyword !== '' && showSimilarWord">
-      <template v-if="similarList.brand && similarList.brand.length">
+      <template v-if="similarList.brand && similarList.brand.length && (similarType == 'all' || similarType == 'brand')">
         <li class="title text-ellipse">品牌</li>
         <li class="text-ellipse" v-for="brand in similarList.brand.slice(0, 4)" @click="onSearch(brand.nameEn, 'brand', $event)">{{brand.nameEn}}</li>
       </template>
-      <template v-if="similarList.kind && similarList.kind.length">
+      <template v-if="similarList.kind && similarList.kind.length && (similarType == 'all' || similarType == 'kind')">
         <li class="title text-ellipse">类目(产品名称)</li>
         <li class="text-ellipse" v-for="kind in similarList.kind.slice(0, 4)" @click="onSearch(kind.nameCn, 'kind', $event)">{{kind.nameCn}}</li>
       </template>
-      <template v-if="similarList.component && similarList.component.length">
+      <template v-if="similarList.component && similarList.component.length && (similarType == 'all' || similarType == 'code')">
         <li class="title text-ellipse">型号</li>
         <li class="text-ellipse" v-for="code in similarList.component.slice(0, 4)" @click="onSearch(code.code, 'code', $event)">{{code.code}}</li>
       </template>
@@ -56,6 +56,10 @@
       outerKeyword: {
         type: String,
         default: ''
+      },
+      similarType: {
+        type: String,
+        default: 'all'
       }
     },
     data () {

components/mobile/brand/BrandCenter.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <search-header @searchAction="onSearch" :placeholder="'请输入品牌名称'" :showSimilar="false"></search-header>
+    <search-header @searchAction="onSearch" :placeholder="'请输入品牌名称'" :similarType="'brand'"></search-header>
     <div class="mobile-brand-center mobile-content">
-      <div class="mobile-brand-wrap">
-        <div class="mobile-brand-header">
+      <div class="mobile-brand-wrap" :class="{'is-search': isSearch}">
+        <div class="mobile-brand-header" v-if="!isSearch">
           <img src="/images/mobile/@2x/brand/brandWall.png" alt="">
           <div class="mobile-brand-index" :class="{'scrolled': isScrolled, 'is-more': isScrolled && !isMore}">
             <p style="float: left">索引：</p>
@@ -23,10 +23,11 @@
         <div class="mobile-brand-list">
           <div>
             <div class="brand-initial">
-              <p v-text="activeIndex" :style="activeIndex === '0~9' ? 'font-size: .28rem': 'font-size: .32rem'"></p>
-              <span>
+              <p v-if="!isSearch" v-text="activeIndex" :style="activeIndex === '0~9' ? 'font-size: .28rem': 'font-size: .32rem'"></p>
+              <span v-if="!isSearch">
               {{activeIndex}}开头共<span>{{brandList.totalElements || 0}}</span>个品牌
             </span>
+              <span v-if="isSearch">搜索<span>{{showKeyword}}</span>，共有<span>{{brandList.totalElements || 0}}</span>个品牌</span>
             </div>
             <div class="brand-items" v-if="brandListTemplate.length">
               <nuxt-link :to="`/mobile/brand/${brand.uuid}/`" :key="brand.uuid" v-for="brand in brandListTemplate">
@@ -64,7 +65,9 @@
           keyword: ''
         },
         isChange: false,
-        brandListTemplate: []
+        brandListTemplate: [],
+        isSearch: false,
+        showKeyword: ''
       }
     },
     components: {
@@ -115,14 +118,27 @@
           this.isScrolled = scrolled > 200
         }
       },
+//      reloadData: function () {
+//        this.$store.dispatch('product/loadBrandsPager', {'initial': this.activeIndex, page: this.pageParams.page, count: this.pageParams.count, keyword: this.pageParams.keyword})
+//      },
       reloadData: function () {
-        this.$store.dispatch('product/loadBrandsPager', {'initial': this.activeIndex, page: this.pageParams.page, count: this.pageParams.count, keyword: this.pageParams.keyword})
+        !this.isSearch ? this.$store.dispatch('product/loadBrandsPager', {'initial': this.activeIndex, page: this.pageParams.page, count: this.pageParams.count, keyword: this.pageParams.keyword})
+          : this.$store.dispatch('product/loadBrandsPagerWithoutIndex', this.pageParams)
       },
       onSearch: function (keyObj) {
-        this.pageParams.keyword = keyObj.keyword
-        this.pageParams.page = 1
-        this.isChange = true
-        this.reloadData()
+        if (keyObj.keyword && keyObj.keyword !== '') {
+          this.pageParams.keyword = keyObj.keyword
+          this.pageParams.page = 1
+          this.isChange = true
+          this.isSearch = true
+          this.showKeyword = this.pageParams.keyword
+          this.reloadData()
+        } else {
+          this.isSearch = false
+          this.pageParams.page = 1
+          this.isChange = true
+          this.reloadData()
+        }
       },
       onPullUpAction: function () {
         this.pageParams.page++
@@ -254,6 +270,24 @@
           }
         }
       }
+      &.is-search {
+        width: 100%;
+        padding-top: .5rem;
+        .mobile-brand-header {
+          height: auto;
+        }
+        .mobile-brand-list {
+          .brand-initial {
+            line-height: .5rem;
+            > span {
+              font-size: .26rem;
+             > span {
+               color: red;
+             }
+            }
+          }
+        }
+      }
     }
   }
 

components/product/brand/BrandDetail.vue

@@ -2,20 +2,23 @@
   <div class="brandDetail container">
     <div class="menu-com row">
       <div class="menu-title col-md-12">
-        <a href="/product/brand/brandList/ABC">品牌中心</a> > <span>{{list.nameEn}}</span></div>
+        <a href="/product/brand/brandList/A">品牌中心</a> > <span>{{list.nameEn}}</span></div>
     </div>
     <div id="brand">
-      <div class="brand-logo">
-        <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
-      </div>
+      <div class="brand-name"><h5>{{list.nameEn}}</h5><h5 v-if="list.nameCn && list.nameEn!=list.nameCn"><span>{{list.nameCn}}</span></h5></div>
       <div class="brand-message">
-        <div class="brand-name"><span>{{list.nameEn}}</span><span v-if="list.nameCn && list.nameEn!=list.nameCn">(<span>{{list.nameCn}}</span>)</span></div>
-        <div class="brand-main" v-show="list.series">主营产品：<span>{{list.series}}</span></div>
-        <div class="apply-area" v-show="applications.length>0">
-          应用领域：<span v-for="(item, index) in applications"><span>{{item}}</span><span v-show="index+1 < applications.length">|</span></span>
+        <div class="brand-logo">
+          <img src='/images/brandCenter/detail.jpg' :alt="list.nameEn"/>
+          <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
         </div>
-        <div class="brand-description" v-show="list.brief">品牌介绍：<div class="txt-description">{{list.brief}}</div></div>
-        <div style="margin-top: 5px;color:#666;" v-show="list.url">官网地址：<a class="office-address" :href="list.url">{{list.url}}</a></div>
+        <ul>
+        <li class="brand-main" v-show="list.series">主打产品：<span>{{list.series}}</span></li>
+        <li class="apply-area" v-show="applications.length>0">
+          应用领域：<span v-for="(item, index) in applications"><span>{{item}}</span><span v-show="index+1 < applications.length">|</span></span>
+        </li>
+        <li class="brand-description" v-if="list.brief"><span>品牌介绍：</span><div class="txt-description">{{list.brief | briefFilter}}</div></li>
+        <li style="margin-top: 10px;color:#eb062b;" v-show="list.url"><span style="color:#666;">官网地址：</span><a class="office-address" :href="list.url">{{list.url}}</a></li>
+        </ul>
       </div>
     </div>
   </div>
@@ -28,9 +31,34 @@
         applications: []
       }
     },
+    filters: {
+      briefFilter: function (title) {
+        if (title === '') {
+          return title
+        }
+        let len = 0
+        let index = 0
+        for (let i = 0; i < title.length; i++) {
+          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
+            len = len + 2
+          } else {
+            len++
+          }
+          if (len > 536) {
+            index = i
+            break
+          }
+        }
+        if (index > 0) {
+          return title.substring(0, index) + '...'
+        } else {
+          return title
+        }
+      }
+    },
     computed: {
       list () {
-        let list = this.$store.state.brandDetail.detail.data
+        let list = this.baseUtils.deepCopy(this.$store.state.brandDetail.detail.data)
         if (list.application && list.application !== '') {
           this.applications = list.application.split(',')
         }
@@ -39,89 +67,110 @@
     }
   }
 </script>
-<style scoped>
+<style lang="scss" scoped>
   .brandDetail {
     margin-bottom: 60px;
     width: 1190px;
     padding: 0;
     overflow: hidden;
-  }
-  .menu-com{
-    margin: 0;
-  }
-  .menu-title{
-    line-height: 40px;
-    font-size: 14px;
-  }
-  .menu-title a{
-    color: #5078cb;
-    font-size: 14px;
-  }
-  i{
-    margin-right: 5px;
-  }
-  .menu-title{
-    padding-left: 0;
-  }
-  .brand-main{
-    font-size: 14px;
-    color: #5078cb;
-    line-height: 20px;
-  }
-  .apply-area{
-    font-size: 14px;
-    color: #5078cb;
-    margin-top: 8px;
-  }
-  .apply-area span{
-    margin-right: 5px;
-  }
-  .office-address{
-    margin-top: 10px;
-  }
-  .office-address{
-    color: #666;
-  }
-  .office-address:hover{
-    color: #5078cb;
-    cursor: pointer;
-  }
-  .brand-description{
-    margin-top: 6px;
-    font-size: 14px;
-    color: #666;
-  }
-  .brand-description .txt-description{
-    font-size: 14px;
-    color: #666;
-  }
-  .brandDetail .brand-logo{
-    float: left;
-    width: 200px;
-    height: 108px;
-    text-align: center;
-    line-height: 100px;
-    border: 1px solid #ccc;
-    background-color: #c1c1c1;
-  }
-  .brandDetail .brand-logo img {
-    max-width: 198px;
-    max-height: 106px;
-    vertical-align: middle;
-  }
-  .brandDetail .brand-message {
-    float: left;
-    margin-left: 20px;
-    margin-bottom: 60px;
-    width: 970px;
-  }
-  .brandDetail .brand-message .brand-name {
-    font-size: 18px;
-    font-weight: 700;
-    margin-bottom: 14px;
-  }
-  .brandDetail .brand-message .brand-description {
-    font-size: 14px;
-    line-height: 20px;
+    .menu-com {
+      margin: 0;
+      width: 100%;
+      border-bottom: 2px solid #3975f4;
+      padding-top: 22px;
+      .menu-title {
+        line-height: 40px;
+        font-size: 14px;
+        padding-left: 0;
+        a {
+          color: #5078cb;
+          font-size: 14px;
+        }
+      }
+    }
+    #brand {
+      width: 1190px;
+      .brand-name {
+        width: 100%;
+        padding-left: 30px;
+        h5 {
+          color: #eb062b;
+          font-size: 18px;
+          font-weight: bold;
+          margin-top: -25px;
+          &:first-child {
+            font-size: 24px;
+            margin-top: 26px;
+          }
+        }
+      }
+      .brand-message {
+        min-height: 310px;
+        .brand-logo {
+          float: right;
+          height: 310px;
+          text-align: center;
+          position: relative;
+         /* line-height: 340px;*/
+          img:first-child {
+            height: 310px;
+            vertical-align: middle;
+          }
+          img:last-child{
+            width: 120px;
+            height: 40px;
+            position: absolute;
+            top: 140px;
+            left: 260px;
+          }
+        }
+        ul {
+          width: 100%;
+          min-height: 310px;
+          list-style-type: disc;
+          font-size: 20px;
+          color: #eb062b;
+          padding: 30px 0px 0px 30px;
+          border-left: 2px solid #efefef;
+          border-right: 2px solid #efefef;
+          border-bottom: 3px solid #efefef;
+          li {
+            color: #666;
+            font-size: 14px;
+          }
+         .brand-main,.apply-area{
+           color: #eb062b;
+           font-size: 14px;
+           padding-bottom: 20px;
+          }
+          .apply-area{
+            font-size: 14px;
+            span{
+              margin-right: 5px;
+            }
+          }
+          .brand-description{
+            line-height: 20px;
+            color: #eb062b;
+            font-size: 14px;
+            span{
+              color: #333;
+            }
+            .txt-description{
+              margin-top: 8px;
+              line-height: 20px;
+              color: #666;
+            }
+          }
+          .office-address{
+            color: #333;
+            &:hover{
+              color: #5078cb;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
   }
 </style>

components/product/brand/CategoriesList.vue

@@ -1,36 +1,33 @@
 <template>
   <div class="categories-list container">
-    <div class="categories-list-header">产品分类</div>
-    <div class="categories-list-body" id="kinds">
-      <el-tree :data="list" :props="defaultProps" accordion :highlight-current="true" @current-change="handlerCurrentNode"></el-tree>
-      <!--<ul>-->
-        <!--<li v-for="kind in list[0]">-->
-          <!--{{kind.nameCn}}-->
-        <!--</li>-->
-      <!--</ul>-->
+    <div v-if="isShow == 0">
+      <div class="categories-list-header">产品分类</div>
+      <div class="categories-list-body">
+        <el-tree :data="list" :props="defaultProps" accordion :highlight-current="true" @current-change="handlerCurrentNode"></el-tree>
+        <!--<ul>
+          <li v-for="kind in list[0]">
+            {{kind.nameCn}}
+          </li>
+        </ul>-->
+      </div>
+    </div>
+    <div v-if="isShow == 1">
+      <div class="categories-list-header">代理商分类</div>
+      <div class="categories-list-agency-body">
+        <ul>
+          <li><a>已入驻代理商</a></li>
+          <li><a>未入驻代理商</a></li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
-
 <script>
-  // 实现深拷贝
-  function deepCopy(target) {
-    if (typeof target !== 'object') return
-    // 判断目标类型，来创建返回值
-    var newObj = target instanceof Array ? [] : {}
-    for (var item in target) {
-      // 只复制元素自身的属性，不复制原型链上的
-      if (target.hasOwnProperty(item)) {
-        newObj[item] = typeof target[item] === 'object' ? deepCopy(target[item]) : target[item]
-        }
-      }
-      return newObj
-  }
   export default {
     name: 'CategoriesList',
     computed: {
       list () {
-        let brands = deepCopy(this.$store.state.brandCategories.categories.data)
+        let brands = this.baseUtils.deepCopy(this.$store.state.brandCategories.categories.data)
         if (!brands || brands.length === 0) {
           return []
         }
@@ -92,6 +89,7 @@
         return this.$store.state.brandDetail.detail.data
       }
     },
+    props: ['isShow'],
     data () {
       return {
         defaultProps: {
@@ -197,7 +195,7 @@
     height: 34px;
     text-align: center;
     color: #fff;
-    background-color: #5078cb;
+    background: url("/images/brandCenter/type.png") no-repeat center #5078cb;
     font-size: 14px;
     padding: 7px;
   }
@@ -221,4 +219,25 @@
     list-style: none;
     padding: 10px;
   }
+  /*.categories-list-header {*/
+    /*height: 34px;*/
+    /*text-align: center;*/
+    /*color: #fff;*/
+    /*background: url("/images/brandCenter/type.png") no-repeat center #5078cb;*/
+    /*font-size: 14px;*/
+    /*padding: 7px;*/
+  /*}*/
+  .categories-list-agency-body ul>li {
+    list-style: none;
+    padding: 12px 0px 10px 20px;
+    color: #5078CB;
+    font-size: 14px;
+  }
+  .categories-list-agency-body ul>li>a {
+    cursor: pointer;
+    color: #323232;
+  }
+  .categories-list-agency-body ul>li>a:hover {
+    color: #5078CB;
+  }
 </style>

nuxt.config.js

@@ -6,6 +6,9 @@ const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://api.usoftmall.com/
 const commonUrl = process.env.COMMON_URL || (isProdMode ? 'https://api-inquiry.usoftmall.com/' : 'http://218.17.158.219:24000/')
 // 公共物料
 const materialUrl = process.env.MATERIAL_URL || (isProdMode ? 'https://api-product.usoftmall.com/' : 'http://218.17.158.219:24000/')
+// 公共cms
+const cmsUrl = process.env.CMS_URL || (isProdMode ? 'https://cms.usoftmall.com' : 'http://10.1.51.123:8080/jpress')
+
 module.exports = {
   router: {
     middleware: 'check-auth',
@@ -87,7 +90,8 @@ module.exports = {
   env: {
     baseUrl,
     commonUrl,
-    materialUrl
+    materialUrl,
+    cmsUrl
   },
   plugins: [
     {
@@ -178,6 +182,7 @@ module.exports = {
     '/account/**': baseUrl,
     '/vendor/**': baseUrl,
     '/internalmessage-service/**': baseUrl,
-    '/wx/**': baseUrl
+    '/wx/**': baseUrl,
+    '/cmsApi**': cmsUrl
   }
 }

pages/mobile/center/vendor/seek.vue

@@ -20,6 +20,7 @@
       if (query.seekType === 'wait') {
         params.enuu = user.enterprise.uu
         params.useruu = user.userUU
+        params.enableOffer = 1
         return Promise.all([
           store.dispatch('applyPurchase/loadVendorEnPushList', params)
         ])
@@ -52,6 +53,7 @@
           params.enuu = user.enterprise.uu
           params.useruu = user.userUU
           params.keyword = keyword
+          params.enableOffer = 1
           return Promise.all([
             store.dispatch(`applyPurchase/${activeType === 'all' ? 'loadVendorEnPushList' : 'loadVendorPushList'}`, params)
           ])

pages/product/brand/_code.vue

@@ -1,48 +1,42 @@
 <template>
   <div class="details">
-    <div class="information" v-if="list.id">
+    <div class="information">
       <brand-detail/>
-      <div class="comm-list">
-        <categories-list/>
-        <brand-component/>
+      <div class="comm-list" v-if="true">
+        <categories-list :isShow="isShow"></categories-list>
+        <brand-component @showEvent="showList"></brand-component>
       </div>
     </div>
-    <div v-else>
-      <error-page :title="'品牌'"></error-page>
-    </div>
   </div>
 </template>
 <script>
   import { BrandDetail, CategoriesList, BrandComponent } from '~components/product'
-  import { ErrorPage } from '~components/error'
   export default {
     layout: 'main',
     data () {
       return {
-        code: ''
+        code: '',
+        isShow: 0
       }
     },
     components: {
       BrandDetail,
       CategoriesList,
-      BrandComponent,
-      ErrorPage
-    },
-    computed: {
-      list () {
-        let list = this.$store.state.brandDetail.detail.data
-        if (list.application && list.application !== '') {
-          this.applications = list.application.split(',')
-        }
-//        console.log(list)
-        return list
-      }
+      BrandComponent
     },
     fetch ({ store, params }) {
       return Promise.all([
         store.dispatch('loadBrandDetail', { id: params.code }),
         store.dispatch('product/loadSupplierInformation', { uuid: params.code, count: 5, page: 1 })
       ])
+    },
+    methods: {
+      showList: function (status) {
+        this.isShow = status
+      },
+      listenChild: function (brand) {
+        this.$store.dispatch('loadBrandPages', {count: 10, filter: { brandid: brand.id }, page: brand.page})
+      }
     }
   }
 </script>

pages/product/brand/brandList.vue

@@ -1,66 +0,0 @@
-<template>
-  <div>
-    <img class="banner-img" src="/images/all/banner-brandcenter.jpg" alt="">
-    <recommends></recommends>
-    <img class="banner-img" src="/images/all/banner-brandcenter2.jpg" alt="">
-    <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>
-<style scoped>
-  .router-link-exact-active{
-    color: #5078CB;
-    font-weight: bold;
-  }
-</style>

pages/product/brand/brandList/_initial.vue

@@ -1,19 +1,66 @@
 <template>
-  <brand-list></brand-list>
+  <div id="brand-center">
+    <!--<new-search :background="bgLink"></new-search>-->
+    <recommend-brand></recommend-brand>
+    <brand-index></brand-index>
+    <!--<type-index :title="title"></type-index>-->
+  </div>
 </template>
 
 <script>
-  import { BrandList } from '~components/product'
-
+//  import { BrandList, Recommends } from '~components/product'
+  import { NewSearch } from '~components/home'
+  import { RecommendBrand, BrandIndex } from '~components/brandCenter'
   export default {
-    name: 'brandListDetail',
+    name: 'brandCenterIndex',
+    layout: 'default',
+    data () {
+      return {
+        background: '/images/brandCenter/search-bg.png',
+        title: '型号索引：'
+      }
+    },
+    computed: {
+      bgLink () {
+        return this.$store.state.product.banner.brandBanner.data.data[0].pictureLink
+      }
+    },
     fetch ({store, route}) {
       return Promise.all([
-        store.dispatch('product/loadBrands', {'keyword': route.params.initial})
+        store.dispatch('loadFloors'),
+        store.dispatch('loadBanners', {type: 'Brand-v3'}),
+        store.dispatch('loadBrandCarousel'),
+        store.dispatch('loadBrandBanner'),
+        store.dispatch('product/loadRecommends'),
+        store.dispatch('product/loadBrandsPager', {'initial': route.params.initial, 'page': 1, 'count': 60, 'keyword': ''})
       ])
     },
     components: {
-      BrandList
+//      BrandList,
+//      Recommends
+      NewSearch,
+      RecommendBrand,
+      BrandIndex
     }
   }
 </script>
+<style lang="scss">
+  /*.router-link-exact-active{*/
+    /*color: #5078CB;*/
+    /*font-weight: bold;*/
+  /*}*/
+  #brand-center {
+    .search-box {
+      background-size: auto!important;
+      background-position: 54% 0!important;
+     /* height: 187px;*/
+      height: 444px;
+      .input-group {
+        padding-top: 300px;
+      }
+      .association {
+        top: 125px;
+      }
+    }
+  }
+</style>

plugins/axios.js

@@ -19,6 +19,8 @@ service.interceptors.request.use(config => {
       config.url = process.env.commonUrl + config.url
     } else if (config.url.indexOf('/productsuer') === 0) {
       config.url = process.env.materialUrl + config.url
+    } else if (config.url.indexOf('/cmsApi') === 0) {
+      config.url = process.env.cmsUrl + config.url
     } else {
       config.url = process.env.baseUrl + config.url
     }

plugins/mixin.js

@@ -4,6 +4,7 @@
 */
 import BScroll from 'better-scroll'
 import Vue from 'vue'
+import {deepCopy} from '~utils/baseUtils'
 // import { mapState } from 'vuex'
 
 Vue.mixin({
@@ -48,6 +49,9 @@ Vue.mixin({
       } else {
         return {}
       }
+    },
+    baseUtils () {
+      return {deepCopy: deepCopy}
     }
   },
   methods: {

store/carousel.js

@@ -2,6 +2,10 @@ export const state = () => ({
   banners: {
     fetching: false,
     data: []
+  },
+  brandCarousel: {
+    fetching: false,
+    data: []
   }
 })
 
@@ -15,5 +19,15 @@ export const mutations = {
   GET_BANNER_SUCCESS (state, result) {
     state.banners.fetching = false
     state.banners.data = result
+  },
+  REQUEST_BRANDCAROUSEL (state) {
+    state.brandCarousel.fetching = true
+  },
+  GET_BRANDCAROUSEL_FAILURE (state) {
+    state.brandCarousel.fetching = false
+  },
+  GET_BRANDCAROUSEL_SUCCESS (state, result) {
+    state.brandCarousel.fetching = false
+    state.brandCarousel.data = result
   }
 }

store/index.js

@@ -476,6 +476,26 @@ export const actions = {
       }, err => {
         commit('option/REQUEST_WECHATINFO_STATUS_FAILURE', err)
       })
+  },
+  // 获取品牌中心轮播图
+  loadBrandCarousel ({ commit }) {
+    commit('carousel/REQUEST_BRANDCAROUSEL')
+    return axios.get('/cmsApi?method=queryContentPage&module=brandCenter_littleSlideshow&orderBy=contExp_sort')
+      .then(response => {
+        commit('carousel/GET_BRANDCAROUSEL_SUCCESS', response.data)
+      }, err => {
+        commit('carousel/GET_BRANDCAROUSEL_FAILURE', err)
+      })
+  },
+  // 获取品牌中心首屏背景图
+  loadBrandBanner ({ commit }) {
+    commit('product/banner/REQUEST_BRANDBANNER')
+    return axios.get('/cmsApi?method=queryContentPage&module=brandCenter_firstScreen&orderBy=contExp_sort')
+      .then(response => {
+        commit('product/banner/GET_BRANDBANNER_SUCCESS', response.data)
+      }, err => {
+        commit('product/banner/GET_BRANDBANNER_FAILURE', err)
+      })
   }
 }
 

store/product.js

@@ -27,7 +27,7 @@ export const actions = {
   // 品牌列表推荐品牌配置
   loadRecommends ({ commit }) {
     commit('brand/REQUEST_RECOMMENDS')
-    return axios.get(`/api/product/brand/hot/5`)
+    return axios.get('/cmsApi?method=queryContentPage&module=brandCenter_brandReco&orderBy=contExp_sort')
       .then(response => {
         commit('brand/GET_RECOMMENDS_SUCCESS', response.data)
       }, err => {
@@ -45,14 +45,8 @@ export const actions = {
         commit('brand/GET_BRANDS_FAILURE', err)
       })
   },
-  // 品牌列表分页查询
+  // 品牌列表分页查询(索引)
   loadBrandsPager ({ commit }, params = {}) {
-    // let initial = params.initial
-    // let param = {
-    //   page: params.page || 1,
-    //   count: params.count || 30,
-    //   keyword: params.keyword
-    // }
     commit('brand/REQUEST_BRANDS_PAGER', params)
     return axios.get(`/api/product/brand/page/initial`, {params: params})
       .then(response => {
@@ -61,6 +55,16 @@ export const actions = {
         commit('brand/GET_BRANDS_PAGER_FAILURE', err)
       })
   },
+  // 品牌列表分页查询(搜索)
+  loadBrandsPagerWithoutIndex ({ commit }, params = {}) {
+    commit('brand/REQUEST_BRANDS_PAGER', params)
+    return axios.get(`/api/product/brand/Brand/ByPage`, {params: params})
+      .then(response => {
+        commit('brand/GET_BRANDS_PAGER_SUCCESS', response.data)
+      }, err => {
+        commit('brand/GET_BRANDS_PAGER_FAILURE', err)
+      })
+  },
   // 获取全部子器件类目
   loadAllProductKinds ({ commit }, params = {}) {
     let id = params.id

store/product/banner.js

@@ -0,0 +1,19 @@
+export const state = () => ({
+  brandBanner: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_BRANDBANNER (state) {
+    state.brandBanner.fetching = true
+  },
+  GET_BRANDBANNER_SUCCESS (state, result) {
+    state.brandBanner.fetching = false
+    state.brandBanner.data = result
+  },
+  GET_BRANDBANNER_FAILURE (state) {
+    state.brandBanner.fetching = false
+  }
+}