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

<template>
  <div class="search-list">
    <div class="search-item">
      <span :class="activeType=='store'?'active':''" @click="activeType='store'">仅看有货</span>
      <span :class="activeType=='support'?'active':''" @click="activeType='support'">店铺自营</span>
    </div>
    <div class="brand-list-content">
      <div class="brand-list-top">
        <span>品牌墙</span>
        <span @click="onclick()">展开<i class="iconfont icon-arrow-down"></i></span>
      </div>
      <div class="brand-list-item" :style="isShow?'max-height:2.1rem;':'min-height:2.1rem;'" >
        <div v-for="item in brandList">
          <nuxt-link to="/">
            <img :src="item.logoUrl ||'/images/component/default.png'"/>
          </nuxt-link>
        </div>
      </div>
    </div>
    <div class="detail-brand-content" >
      <h4>主营产品</h4>
      <div class="brand-list">
        <div class="list-left">
          <img :src="brandDetail.logoUrl || '/images/component/default.png'" :alt="brandDetail.nameEn"/>
          <span>{{brandDetail.nameCn}}</span>
        </div>
        <p>{{brandDetail.series}}</p>
      </div>
    </div>
    <div class="detail-brand" v-for="(item, index) in productList.components" v-if="productList.components">
      <nuxt-link :to="'/mobile/brand/componentDetail/'+ item.uuid">
        <div class="brand-item">
          <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"></i>
        </div>
      </nuxt-link>
    </div>
  </div>
</template>

<script>
  export default {
    layout: 'main',
    data () {
      return {
        activeType: 'store',
        count: '',
        filter: {},
        page: '',
        sorting: {},
        isShow: true,
        isMove: ''
      }
    },
    fetch ({store, route}) {
      return Promise.all([
        store.dispatch('searchData/searchForList', {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.searchDetail.detail.data
      }
    },
    methods: {
      onclick () {
        this.isShow = !this.isShow
      }
    }
  }
</script>

<style scoped lang="scss">
  .search-list{
    width:100%;
    margin-bottom: .98rem;
    margin-top: .88rem;
    .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:2px 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;
        p{
          font-size:.28rem;
          line-height:.4rem;
          color:#333;
          margin:0;
        span{}
        }
        i{
          display:block;
          position:absolute;
          top:.2rem;
          right:.1rem;
          font-size:.4rem;
          color:#ff7800;
        }
      }
      div.active{
        background: #d4d;
      }
    }
  }

</style>