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 || brandList && brandList.length == 1) && productList.expose > 0">
      <div class="brand-list-top">
        <span>品牌墙</span>
        <span class="row-switch" @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 | productDescFilter}}</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:#bbb'" @click="collect(item, $event)"></i>
      </div>
    </div>

    <div class="none-state" v-if="!productList.expose">
      <img src="/images/mobile/@2x/sousuokongzhuangtai@2x.png">
      <a @click="goLastPage">返回上一页</a>
    </div>
    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
  </div>
</template>

<script>
  import RemindBox from '~components/mobile/common/RemindBox.vue'
  export default {
    layout: 'main',
    data () {
      return {
        activeType: 'store',
        count: '',
        filter: {},
        page: '',
        sorting: {},
        isShow: true,
        isMove: '',
        isFocus: false,
        isClickCollect: false,
        collectResult: '收藏成功',
        timeoutCount: 0
      }
    },
    components: {
      RemindBox
    },
    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: {}})
      ])
    },
    filters: {
      productDescFilter: function (str) {
        return str.length > 50 ? str.substring(0, 50) + '...' : str
      }
    },
    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/searchForListInMobile', {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/searchForListInMobile', {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
              this.collectResult = '收藏成功'
              this.timeoutCount++
            })
        } else {
          this.$http.post('/trade/collection/delete/cmpId', [item.cmpId]).then(response => {
            item.isFocus = false
            this.collectResult = '取消成功'
            this.timeoutCount++
          })
        }
      },
      goComponent: function (uuid) {
        if (!this.isClickCollect) {
          this.$router.push('/mobile/brand/componentDetail/' + uuid)
        } else {
          this.isClickCollect = false
        }
      },
      goLastPage: function () {
        window.history.back(-1)
      }
    }
  }
</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: 4.08rem;
          height: 4.13rem;
        }
        a {
          display: block;
          font-size: .28rem;
          color: #fff;
          width: 1.88rem;
          height: .54rem;
          line-height: .54rem;
          background: #418bf6;
          margin: .7rem auto 0;
          border-radius: .05rem;
        }
      }
      .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:1.51rem;
      overflow: hidden;
      text-align: left;
      padding-top:.33rem;
      padding-bottom:.33rem;
      .brand-list-top{
        span:first-child{
          font-size:.32rem;
          margin-right:4.78rem;
          margin-left: .3rem;
        }
        span.row-switch{
          font-size:.28rem;
          color:#53a0f7;
        }
      }
      .brand-list-item{
        flex-wrap: wrap;
        display:inline-flex;
        overflow: hidden;
        margin:0 .2rem;
        text-align: center;
        >div {
          display: inline-block;
          margin-right: .14rem;
          &:nth-child(4n) {
            margin-right: 0;
          }
          a {
            width: 1.57rem;
            height: .77rem;
            display: inline-block;
            margin-top: .2rem;
            border: .02rem solid #53a0f7;
            border-radius: .1rem;
            line-height: .77rem;
            img{
              max-width:1.07rem;
              max-height:.57rem;
            }
          }
        }
      }
    }

    .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:.1rem;
          right:.34rem;
          font-size:.4rem;
          color:#ff7800;
        }
      }
      div.active{
        background: #d4d;
      }
    }
  }

</style>