mall-web-ssr/components/mobile/brand/BrandDetail.vue

<template>
  <div class="brand-detail" @click="checkShowFilter()">
    <div class="brand-logo">
      <img :src="brandDetail.logoUrl || '/images/component/default.png'" :alt="brandDetail.nameEn"/>
    </div>
    <div class="brand-switch-item">
      <span :class="activeType=='detail'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='detail'">品牌</span>
      <span :class="activeType=='product'?'mobile-switch-btn active':'mobile-switch-btn'" @click="activeType='product'">产品</span>
    </div>
    <div class="brand-param-list" v-if="activeType=='detail'">
      <div class="brand-param-item" v-if="brandDetail.series">
        <span class="remind-tag">| </span>
        <span>主营产品</span>
        <div class="main-sell">{{brandDetail.series}}</div>
      </div>
      <div class="brand-param-item" v-if="applications.length>0">
        <span class="remind-tag">| </span>
        <span>应用领域</span>
        <div class="main-sell">
          <span v-for="(item, index) in applications"><span>{{item}}</span><span v-show="index+1 < applications.length">|</span></span>
        </div>
      </div>
      <div class="brand-param-item" v-if="brandDetail.brief">
        <span class="remind-tag">| </span>
        <span>品牌介绍</span>
        <div class="main-sell">{{brandDetail.brief}}</div>
      </div>
      <div class="brand-param-item" v-if="brandDetail.url">
        <span class="remind-tag">| </span>
        <span>官网地址</span>
        <a class="brand-url" v-text="brandDetail.url"></a>
      </div>
    </div>
    <div class="brand-product-list" v-if="activeType=='product'">
      <div class="search-box">
        <div class="kind-selecter">
          <div @mouseenter="isInList = true" @mouseleave="isInList = false">
            <span @click="showKindList = !showKindList" v-text="selectedKind"></span>
            <ul v-show="showKindList">
              <li @click="selectKind({nameCn: '全部分类', id: ''})">全部分类</li>
              <li v-for="kind in kindList" v-text="kind.nameCn" @click="selectKind(kind)"></li>
            </ul>
          </div>
        </div>
        <div class="kind-search">
          <input type="text" v-model="keyword" placeholder="请输入型号">
          <i @click="goodsSearch()" class="icon-sousuo iconfont"></i>
        </div>
      </div>
      <ul class="product-list">
        <li v-for="product in productList.content">
          <nuxt-link class="text-left" :to="'/mobile/brand/componentDetail/' + product.uuid">{{product.code}}</nuxt-link>
          <a class="text-right" @click="toShowPdf(product.attach)">规格书 <i class="icon-chakan iconfont"></i></a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'MobileBrandsDetail',
    data () {
      return {
        applications: [],
        activeType: 'detail',
        keyword: '',
        showKindList: false,
        parentid: 0,
        ids: null,
        pageParams: {
          page: 1,
          count: 10,
          filter: {}
        },
        selectedKind: '全部分类',
        isInList: false
      }
    },
    computed: {
      brandDetail () {
        let list = this.$store.state.brandDetail.detail.data
        if (list.application && list.application !== '') {
          this.applications = list.application.split(',')
        }
        return list
      },
      productList () {
        return this.$store.state.brandComponent.component.data || []
      },
      kindList () {
        let brands = this.$store.state.brandCategories.categories.data
        if (!brands || brands.length === 0) {
          return []
        }
        // 初始化去除重复数据
        for (let i = 0; i < brands.length; i++) {
          for (let j = 0; j < brands[i].length; j++) {
            brands[i][j].children = []
          }
        }

        // 处理第1层
        if ((brands[0] && brands[0].length > 0) && (brands[1] && brands[1].length > 0)) {
          for (let i = 0; i < brands[1].length; i++) {
            for (let j = 0; j < brands[0].length; j++) {
              if (brands[0][j].id === brands[1][i].parentid) {
                if (!brands[0][j].children) {
                  brands[0][j].children = []
                }
                brands[0][j].children.push(brands[1][i])
                break
              }
            }
          }
        }

        // 处理第2层
        if ((brands[1] && brands[1].length > 0) && (brands[2] && brands[2].length > 0)) {
          for (let i = 0; i < brands[2].length; i++) {
            for (let j = 0; j < brands[1].length; j++) {
              if (brands[1][j].id === brands[2][i].parentid) {
                if (!brands[1][j].children) {
                  brands[1][j].children = []
                }
                brands[1][j].children.push(brands[2][i])
                break
              }
            }
          }
        }

        // 处理第3层
        if ((brands[2] && brands[2].length > 0) && (brands[3] && brands[3].length > 0)) {
          for (let i = 0; i < brands[3].length; i++) {
            for (let j = 0; j < brands[2].length; j++) {
              if (brands[2][j].id === brands[3][i].parentid) {
                if (!brands[2][j].children) {
                  brands[2][j].children = []
                }
                brands[2][j].children.push(brands[3][i])
                break
              }
            }
          }
        }
        let kindList = []
        if (brands[0]) {
          for (let i = 0; i < brands[0].length; i++) {
            this.getKinds(brands[0][i], kindList)
          }
        }
        return kindList
      }
    },
    methods: {
      getKinds: function (list, kindList) {
        if (list.children && list.children.length > 0) {
          for (let i = 0; i < list.children.length; i++) {
            this.getKinds(list.children[i], kindList)
          }
        } else {
          kindList.push(list)
        }
      },
      selectKind: function (data) {
        this.showKindList = false
        this.selectedKind = data.nameCn
        if (this.parentid === data.id) {
          this.parentid = 0
          this.ids = null
        } else {
          if (data.level === 1) {
            this.parentid = data.id
          }
        }
        this.pageParams.page = 1
        this.pageParams.filter.brandid = this.brandDetail.id
        if (data.id !== '') {
          this.pageParams.filter.kindid = data.id
        } else {
          delete this.pageParams.filter.kindid
        }
        this.pageCommodity(this.pageParams, this.ids)
      },
      goodsSearch () {
        this.pageParams.page = 1
        this.pageParams.filter.brandid = this.brandDetail.id
        this.pageParams.filter.code = this.keyword
        this.pageCommodity(this.pageParams)
      },
      async pageCommodity (params) {
        try {
          let { data } = await this.$http.get('/api/product/component/list', { params })
          this.$store.commit('brandComponent/GET_COMPONENT_SUCCESS', data)
        } catch (err) {
          this.$store.commit('brandComponent/GET_COMPONENT_FAILURE', err)
        }
      },
      checkShowFilter: function () {
        if (!this.isInList) {
          this.showKindList = false
        }
      },
      toShowPdf: function (url) {
        if (url && url !== '1') {
          window.location.href = url
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .brand-detail {
    margin: 0 auto;
    margin-bottom: 1.2rem;
    text-align: center;
    .brand-logo {
      height: 2.21rem;
      width: 3.73rem;
      display: inline-block;
      border: .01rem solid #e75610;
      margin: .38rem auto;
      line-height: 2.13rem;
      img {
        max-height: 2.13rem;
      }
    }
    .brand-switch-item {
      text-align: center;
      .mobile-switch-btn {
        background: #e75610;
        color: #fff;
        display: inline-block;
        height: .68rem;
        font-size: .28rem;
        padding: .19rem .53rem;
        position: relative;
        &:first-child {
          background: #fff;
          color: #e75610;
          border: .01rem solid #e75610;
          border-left: none;
          padding-left: .30rem;
        }
        &:first-child.active {
          background: #e75610;
          color: #fff;
          border: .01rem solid #e75610;
          padding-left: .30rem;
        }
        &:last-child {
          background: #fff;
          color: #e75610;
          border: .01rem solid #e75610;
          border-right: none;
          padding-right: .35rem;
        }
        &:last-child.active {
          background: #e75610;
          color: #fff;
          border: .01rem solid #e75610;
          border-right: none;
          padding-right: .35rem;
        }
        &:first-child:before {
          content: '';
          background: #fff;
          border: .01rem solid #e75610;
          width: .64rem;
          height: .68rem;
          border-radius: 100%;
          position: absolute;
          left: -.33rem;
          top: -.01rem;
          z-index: -5;
        }
        &:first-child.active:before {
          background: #e75610;
          border: .01rem solid #e75610;
        }
        &:last-child:before {
          content: '';
          background: #fff;
          width: .64rem;
          height: .68rem;
          border-radius: 100%;
          position: absolute;
          border: .01rem solid #e75610;
          left: 1.04rem;
          z-index: -5;
          top: -.01rem;
        }
        &:last-child.active:before {
          background: #e75610;
          border: .01rem solid #e75610;
        }
      }
    }
    .brand-param-list {
      text-align: left;
      padding: 0 .44rem;
      margin-top: .28rem;
      .brand-param-item {
        font-size: .28rem;
        margin-bottom: .48rem;



        .remind-tag {
          color: rgb(4,198,96);
          font-size: .24rem;
          position: relative;
          bottom: .03rem;
        }
        .main-sell {
          color: #666;
          margin-top: .19rem;
          line-height: .4rem;
          max-height: 1.2rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }
        .brand-url {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #01a44e;
          margin-left: .28rem;
        }
      }
    }
    .brand-product-list {
      margin-top: .5rem;
      font-size: .28rem;
      ul.product-list {
        text-align: center;
        li {
          margin-left: .42rem;
          width: 6.66rem;
          height: .66rem;
          line-height: .66rem;
          border: {
            top: 1px solid rgb(230,228,228);
            bottom: 1px solid rgb(230,228,228);
          }
          &:nth-child(even) {
            background: #f9f9f9;
          }
          &:active, &:hover {
            background: #eee;
          }
          .text-left {
            float: left;
            color: #333;
          }
          .text-right {
            float: right;
            color: #333;
            i {
              font-size: .55rem;
              float: right;
              margin-right: .27rem;
              margin-left: .54rem;
              color: #6fcafe;
            }
          }
        }
      }
      .search-box {
        margin-bottom: .28rem;
        .kind-selecter {
          display: inline-block;
          position: relative;
          float: left;
          margin-left: .72rem;
          div {
            display: inline-block;
            span {
              width: 1.64rem;
              height: .6rem;
              line-height: .6rem;
              border: .01rem solid rgb(195,195,195);
              border-radius: .05rem;
              font-size: .28rem;
              display: inline-block;
              background: url('/images/mobile/@2x/productDetail/kind-narrow-down@2x.png')no-repeat;
              padding-right: .15rem;
              background-position: 1.35rem .25rem;
              background-size: .14rem .1rem;
              overflow: hidden;
            }
          }
        }
        .kind-search {
          display: inline-block;
          margin-right: .19rem;
          input[type = "text"] {
            width: 3.61rem;
            height: .6rem;
            padding-left: .21rem;
            font-size: .24rem;
            margin-top: .01rem;
          }
          i {
            background: rgb(65,142,247);
            float: right;
            position: relative;
            left: -.01rem;
            width: .61rem;
            height: .6rem;
            line-height: .6rem;
            font-size: .32rem;
            color: #fff;
            display: inline-block;
          }
        }
        ul {
          position: absolute;
          top: 0.65rem;
          max-height: 3.15rem;
          overflow-y: auto;
          &::-webkit-scrollbar
          {
            display: none;
          }
          li {
            width: 1.64rem;
            height: .63rem;
            line-height: .63rem;
            padding: 0 .08rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
          }
        }
      }
    }
  }
</style>