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

<template>
  <div class="brand-center-index">
    <img src="/images/brandCenter/brand-index-title1.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>
    <img src="/images/brandCenter/features.png" alt="">
  </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: 50px;
      margin-top: 20px;
      &:last-child{
        height: 70px;
        margin-bottom: 40px;
      }
    }
    .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 20px 0;
        float: none;
      }
    }
  }
</style>