mall-web-ssr/pages/mobile/search/_keycode.vue

<template>
  <div class="search-list">
    <div class="search-item" v-if="productList.expose > 0 || productList.brands">
      <span :class="activeType=='store'?'active':''" @click="clickType('store')">仅看有货</span>
      <span :class="activeType=='support'?'active':''" @click="clickType('support')">店铺自营</span>
    </div>

    <div class="brand-list-content" v-if="!productList.brands && productList.expose > 0 && brandList && brandList.length > 1">
      <div class="brand-list-top">
        <span>品牌墙</span>
        <span @click="onclick()" v-if="brandList.length > 8">{{!isShow?'收起':'展开'}}<i :class="{'iconfont icon-arrow-down':isShow,'icon-icon-shang iconfont':!isShow}"></i></span>
      </div>
      <div class="brand-list-item" >
        <div v-for="item in isShow?brandList.slice(0, 8):brandList">
          <nuxt-link :to="'/mobile/brand/'+item.br_uuid">
            <img :src="item.logoUrl ||'/images/component/default.png'"/>
          </nuxt-link>
        </div>
      </div>
    </div>

    <div class="detail-brand-content" v-if="productList.brands" @click="goBrand(list.uuid)">
      <h4>主营产品</h4>
      <div class="brand-list">
        <div class="list-left">
          <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
          <span>{{list.nameCn}}</span>
        </div>
        <p>{{list.series}}</p>
      </div>
    </div>

    <div class="detail-brand" v-for="(item, index) in productList.components" v-if="productList.components">
      <div class="brand-item" @click="goComponent(item.uuid)">
        <p>型号：<span>{{item.code}}</span></p>
        <p>品牌：<span>{{item.brand.nameCn}}</span></p>
        <p>产品描述：<span>{{item.kind.nameCn}}</span></p>
        <i class="iconfont icon-shoucang" :style="(item.isFocus)?'color:#ff7800':'color:#333'" @click="collect(item, $event)"></i>
      </div>
    </div>

    <div class="none-state" v-if="!productList.expose">
      <img src="/images/mobile/@2x/sousuokongzhuangtai@2x.png">
    </div>
  </div>
</template>

<script>
  export default {
    layout: 'main',
    data () {
      return {
        activeType: 'store',
        count: '',
        filter: {},
        page: '',
        sorting: {},
        isShow: true,
        isMove: '',
        isFocus: false,
        isClickCollect: false
      }
    },
    fetch ({store, route}) {
      return Promise.all([
        store.dispatch('searchData/searchForListInMobile', {count: 15, filter: {}, keyword: route.query.w, page: 1, sorting: {'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'}}),
        store.dispatch('searchData/searchForBrands', {collectList: 'goods_brand', keyword: route.query.w, paramJSON: {}})
      ])
    },
    computed: {
      productList () {
        return this.$store.state.searchData.searchList.lists.data
      },
      brandList () {
        return this.$store.state.searchData.searchBrands.brands.data
      },
      brandDetail () {
        return this.$store.state.searchData.searchList.lists.data.brands
      },
      list () {
        let list = this.$store.state.searchData.searchDetail.detail.data
        if (list.application && list.application !== '') {
          this.applications = list.application.split(',')
        }
        return list
      }
    },
    methods: {
      onclick () {
        this.isShow = !this.isShow
      },
      clickType (type) {
        if (type === 'store') {
          this.activeType = 'store'
          this.$store.dispatch('searchData/searchForList', {count: 15, filter: {}, keyword: this.$route.query.w, page: 1, sorting: {'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'}})
        }
        if (type === 'support') {
          this.activeType = 'support'
          this.$store.dispatch('searchData/searchForList', {count: 15, filter: {'goods_store_type': ['ORIGINAL_FACTORY', 'AGENCY', 'DISTRIBUTION']}, keyword: this.$route.query.w, page: 1, sorting: {'GO_RESERVE': 'DESC', 'GO_SEARCH': 'DESC'}})
        }
      },
      goBrand: function (uuid) {
        this.$router.push('/mobile/brand/' + uuid)
      },
      collect: function (item, $event) {
        this.isClickCollect = true
        if (!item.isFocus) {
          this.$http.post('/trade/collection/save', {componentid: item.cmpId, kind: 2})
            .then(response => {
              item.isFocus = true
            })
        } else {
          this.$http.delete('/trade/collection/' + item.cmpId).then(response => {
            item.isFocus = false
          })
        }
      },
      goComponent: function (uuid) {
        if (!this.isClickCollect) {
          this.$router.push('/mobile/brand/componentDetail/' + uuid)
        } else {
          this.isClickCollect = false
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .search-list{
      width:100%;
      margin-bottom: .98rem;
      .none-state{
        text-align: center;
        margin-top:2rem;
        width:100%;
        img{
          margin:0 auto;
          width:3rem;
          hight:3rem;
        }
      }
      .search-item{
        justify-content: space-around;
        text-align: center;
        display:flex;
        span{
          display:inline-block;
          width:1.41rem;
          line-height: .76rem;
          font-size:.32rem;
          color:#666;
        }
      span.active{
        color:#3976f4;
        border-bottom:.02rem solid #3976f4;
      }
    }

    .brand-list-content{
      margin:0 auto;
      border-top:.02rem solid #dedfdf;
      border-bottom:.02rem solid #dedfdf;
      width:7.1rem;
      min-height:3.02rem;
      overflow: hidden;
      text-align: center;
      padding-top:.33rem;
      padding-bottom:.33rem;
      .brand-list-top{
        span:first-child{
          font-size:.32rem;
          margin-right:4.78rem;
        }
        span:last-child{
          font-size:.28rem;
          color:#53a0f7;
        }
      }
      .brand-list-item{
        justify-content: space-between;
        flex-wrap: wrap;
        display:inline-flex;
        overflow: hidden;
        margin:0 .2rem;
        img{
          width:1.57rem;
          height:.77rem;
          margin-top:.2rem;
          border-radius: .1rem;
          border:.02rem solid #53a0f7;
        }
      }
    }

    .detail-brand-content{
      margin:0 auto;
      border-top:.02rem solid #dedfdf;
      border-bottom:.02rem solid #dedfdf;
      width:7.1rem;
      height:3.02rem;
      padding-top:.18rem;
      h4{
        font-size:.32rem;
        line-height: .6rem;
        margin:0;
        margin-left:3.97rem;
      }
      .brand-list{
        display:flex;
        justify-content: space-between;
        align-items: center;
        margin:0 .15rem;
        .list-left{
          border:.02rem solid #418ef7;
          border-radius: .05rem;
          width:2.03rem;
          height:1.73rem;
          img{
            display:block;
            width:100%;
            height:1.25rem;
          }
          span{
            display: block;
            font-size: .24rem;
            color:#fff;
            text-align: center;
            width:100%;
            background: #418ef7;
            line-height: .45rem;
          }
        }
        p{
          width:4.3rem;
          font-size:.28rem;
          line-height: .4rem;
          padding:.12rem .46rem 0 .05rem;
        }
      }
    }

    .detail-brand{
      background: #f8fcff;
      width:100%;
      min-height:1.5rem;
      padding-top:.2rem;
      .brand-item{
        width:7rem;
        margin:0 auto;
        border-radius:.1rem;
        background: #fff;
        padding:.2rem;
        position:relative;
        &:active{
           background: #e1e1e1;
         }
        p{
          font-size:.28rem;
          line-height:.4rem;
          color:#333;
          margin:0;
          span{}
        }
        i{
          display:block;
          position:absolute;
          top:.55rem;
          right:.1rem;
          font-size:.4rem;
          color:#ff7800;
        }
      }
      div.active{
        background: #d4d;
      }
    }
  }

</style>