mall-web-ssr/components/brandCenter/BrandIndex.vue

<template>
  <div class="search-index">
    <div class="brand-recommend">
      <div class="recommend-area">
        <div class="recommend-head">
          <img src="/images/brandCenter/brand-recommend.png"/>品牌推荐
        </div>
        <ul class="recommend-items">
          <li v-for="item in hotBrands.data">
            <a :href="item.detailsLink" target="_blank">
              <img :src="item.pictureLink" alt="">
              <div class="brand-item">
                <p>{{item.title}}</p>
                <span class="brand-application" v-if="item.metadatas.contExp_abstract">应用领域：{{item.metadatas.contExp_abstract | applicationFilter}}</span>
                <span class="brand-application" v-if="!item.metadatas.contExp_abstract">应用领域：-</span>
                <span class="brand-introduce" v-if="item.metadatas.contExp_select">品牌介绍：{{item.metadatas.contExp_select | introduceFilter}}</span>
                <span class="brand-introduce" v-if="!item.metadatas.contExp_select">品牌介绍：-</span>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="recommend-prod">
        <div class="item">
          <img src="/images/brandCenter/11.png" style="margin-top: 12px;"><span>秒速搜索全球器件品牌，精准查找品牌授权代理商,最优产品，为采购提供最可靠的资质信息。</span>
        </div>
        <div class="item">
          <img src="/images/brandCenter/22.png" style="margin-top: 5px;"><span>元器件标准参数自由筛选，性能差异横向比较，生产配料一清二楚。</span>
        </div>
        <div class="item">
          <img src="/images/brandCenter/33.png"><span>推荐品牌，让您的品牌处于最亮眼的位置。</span>
        </div>
      </div>
    </div>
    <div class="brand-center-index" id="index" @click="showSimilarWord = false">
      <div class="brand-center-index-list">
        <div class="brand-list-nav">
          <span class="search-index-show">品牌索引</span>
          <div class="search">
            <span v-show="!isSearch">
              以{{activeIndex&&activeIndex.length==1?'字母':''}}
              <span class="active-index" :title="activeIndex">{{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>
          <div class="filter-area">
            <input type="text" placeholder="请输入您要搜索的品牌" @input="onKeywordInput()" v-model="keyword" @keyup.13="searchBrands()">
            <b class="search-btn" @click="searchBrands()">搜 索</b>
            <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>
            <ul class="similar-list" v-show="showSimilarWord && keyword && keyword.length">
              <li class="text-ellipse" v-for="similar in similarList" @click.stop="setSimilar(similar.nameCn)">{{similar.nameCn}}</li>
            </ul>
          </div>
        </div>
        <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-list-items">
          <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>
  </div>
</template>
<script>
    import Page from '~components/common/page/pageComponent.vue'
    import PcSearchHeader from '~components/common/PcSearchHeader.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,
          clickCount: 0,
          showSimilarWord: false,
          similarList: []
        }
      },
      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,
        PcSearchHeader
      },
      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
        },
        hotBrands () {
          return this.$store.state.product.brand.recommends.data
        }
      },
      watch: {
        $route: function (val, oldVal) {
          this.initParams()
        }
      },
      methods: {
        onKeywordInput: function () {
          this.clickCount ++
          let count = this.clickCount
          let timer = setTimeout(() => {
            this.getSimilarList(count, timer)
          }, 300)
        },
        getSimilarList: function (clickCount, timer) {
          clearTimeout(timer)
          if (this.keyword && this.keyword !== '' && clickCount === this.clickCount) {
            this.$http.get('/search/similarKeywords', {params: {keyword: this.keyword}}).then(
              res => {
                this.similarList = res.data.brand
                this.showSimilarWord = true
              }
            )
          }
        },
        setSimilar: function (key) {
          this.showSimilarWord = false
          this.keyword = key
          this.searchBrands()
        },
        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)
//            window.location.href = '/product/brand/brandList/' + index + '#index'
//            window.open('/product/brand/brandList/' + index + '#index', '_self')
          }
        },
        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>
  .search-index {
    margin: 0 auto;
    margin-top: 20px;
    width: 1190px;
    overflow: hidden;
    .brand-recommend {
      float: left;
      margin-right: 15px;
      .recommend-area {
        width: 220px;
        height: 862px;
        background-color: #ffffff;
        border-radius: 5px;
        /*border: solid 1px #d2d2d2;*/
      }
      .recommend-head {
        padding-left: 10px;
        width: 220px;
        height: 34px;
        line-height: 34px;
        background-color: #2496f1;
        font-size: 14px;
        font-weight: bold;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        color: #fff;
          img{
            margin-right: 6px;
            margin-top: -2px;
          }
      }
      .recommend-items{
        li {
          padding: 0px 0 11px 13px;
          overflow: hidden;
          height: 82px;
          border-bottom: solid 1px #e5e5e5;
          img{
            float: left;
            margin: 10px 10px 0 0;
            width: 60px;
            height: 60px;
            background-color: #ffffff;
            border-radius: 4px;
            border: solid 1px #e5e5e5;
          }
          div.brand-item{
            float: left;
            margin-top: 6px;
            width: 128px;
            p{
              margin-bottom: 6px;
              font-size: 12px;
              color: #666666;
              width: 128px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            span {
              display: inline-block;
              width: 128px;
              font-size: 12px;
              color: #666;
              overflow: hidden;
            }
            span.brand-application{
              white-space: nowrap;
              text-overflow: ellipsis;
            }
            span.brand-introduce {
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            &:hover p{
              color: #2496f1;
             }
            &:hover span{
              color: #2496f1;
            }
          }
          &:last-child {
             padding-top: 5px;
             border-bottom: none;
          }
        }
      }
      .recommend-prod {
        padding: 20px 0 0px 10px;
        margin-top: 20px;
        width: 220px;
        height: 229px;
        border-radius: 5px;
        background: #fff;
        margin-bottom: 120px;
        /*border: solid 1px rgba(210, 210, 210, 0.8);*/
        .item {
          overflow: hidden;
          margin-bottom: 22px;
          img{
            margin-right: 10px;
            float: left;
            width: 39px;
            height: 39px;
          }
          span {
            float: left;
            display: inline-block;
            width: 155px;
            word-break: break-all;
          }
        }
      }
    }
  }
  .brand-center-index {
    float: left;
    width: 955px;
    margin: 0 auto;
    >img {
      /*height: 50px;*/
      &:last-child{
        height: 70px;
        margin-bottom: 40px;
      }
    }
    .brand-index-tab {
      margin-top: 7px;
      position: relative;
      width: 955px;
      height: 34px;
      border-radius: 5px;
      background: #fff;
      border: solid 1px #e5e5e5;
      .brand-index-group {
        float: left;
        height: 34px;
        text-align: center;
        a {
          width: 32px;
          height: 32px;
          text-align: center;
          display: inline-block;
          color: #666;
          line-height: 32px;
          font-size: 14px;
          vertical-align: middle;
          &:hover{
             background-color: #2496f1;
             border-radius: 5px;
             color: #fff;
           }
        }
        a.active{
          background-color: #2496f1;
          border-radius: 5px;
          color: #fff;
        }
        &:last-child{
           margin-left: 55px;
         }
        &:last-child a{
          letter-spacing: 12px;
         }
        &:last-child a:hover{
           width: 56px;
           padding-left: 3px;
         }
        &:last-child a.active{
           width: 56px;
           padding-left: 3px;
         }
      }
    }
    .brand-center-index-list {
      .brand-list-nav {
        width: 955px;
        height: 34px;
        line-height: 34px;
        position: relative;
        /*overflow: hidden;*/
        background: #fff;
        border-bottom: solid 1px #e5e5e5;
        span.search-index-show {
          float: left;
          display: inline-block;
          width: 98px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          background-color: #2496f1;
          font-size: 14px;
          color: #fdfbfb;
          border-radius: 3px 3px 0px 0px;
        }
         span {
            font-size: 14px;
            color: #333;
            /*margin-bottom: 20px;*/
            .active-index {
              font-size: 16px;
              color: #3c7cf5;
              display: inline-block;
              max-width: 100px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              vertical-align: middle;
            }
            .active-number {
              font-weight: bold;
              font-size: 16px;
              color: #fc524a;
            }
          }
        div.search{
          float: left;
          margin-left: 10px;
        }
        .filter-area {
          float: right;
          /*height: 50px;*/
          /*line-height: 50px;*/
          margin-right: 9px;
          position: relative;
          input {
            height: 32px;
            width: 258px;
            line-height: 32px;
            padding-left: 11px;
            background-color: #ffffff;
            border-radius: 3px;
            border: solid 1px #2496f1;
            padding-right: 32px;
            position: absolute;
            right: 150px;
            top: 0px;
          }
          b.search-btn {
            position: absolute;
            top: 0px;
            right: 150px;
            width: 69px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            background-color: #2496f1;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
          }
          span {
            height: 28px;
            line-height: 28px;
            float:left;
            margin-left: 47px;
            color: #666;
            margin-top: 5px;
            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;
              }
            }
          }
          .similar-list {
            position: absolute;
            z-index: 1;
            right: 150px;
            top: 29px;
            border: 1px solid #c9c9c9;
            text-align: left;
            width: 258px;
            background: #fff;
            li {
              padding: 0 11px;
              height: 30px;
              line-height: 30px;
              cursor: pointer;
              &:hover {
                background: #f7f7f7;
              }
            }
          }
        }
      }
      .brand-list-items {
        padding-top: 20px;
        padding-left: 20px;
        background-size: cover;
        padding-bottom: 20px;
        position: relative;
        height: 1037px;
        background: #fff;
        /*border-bottom: 1px solid #dcdcdc;*/
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        .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: 25%;
          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;
              overflow: hidden;
              text-overflow: ellipsis;
              &: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;
              color: #fff;
              font-size: 11px;
              padding: 13px 15px;
              line-height: 18px;
              text-align: left;
              word-break: break-all;
              background-color: #ffffff;
              box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.19);
              span {
                display: block;
                font-size: 12px;
                color: #333;
                &.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;
          margin-top: 495px;
          font-size: 20px;
        }
      }
      .page-wrap {
        text-align: right;
        margin: 30px 0 115px 0;
        float: none;
        .el-pagination .el-pager li.active{
          border-color: #20a0ff;
          background-color: #20a0ff;
          color: #fff;
          cursor: default;
        }
        .page-a{
          background-color: #2496f1!important ;
        }
      }
    }
  }
</style>