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>
    <brand-list v-if="activeType=='support'"></brand-list>
    <detail-brand v-if="activeType=='store'"></detail-brand>
    <good-list></good-list>
  </div>
</template>

<script>
  import { BrandList, DetailBrand, GoodList } from '~components/mobile/search'
  export default {
    layout: 'main',
    data () {
      return {
        activeType: 'store',
        count: '',
        filter: {},
        page: '',
        sorting: {}
      }
    },
    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'}})
      ])
    },
    components: {
      BrandList,
      DetailBrand,
      GoodList
    }
  }
</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;
  }
  }
  }

</style>