mayou/htmldev/cps/src/views/search/index.vue

<template>
  <div>
    <form
      class="fbt-form"
      action="/">
      <van-search
        v-model.trim="keyword"
        show-action
        :shape="'round'"
        placeholder="搜索商品标题 领优惠券拿返现"
        @search="onSearch">
        <template #action>
          <div
            class="btn"
            @click="onSearch">搜索
          </div>
        </template>
      </van-search>
    </form>
    <!--商家-->
    <div
      class="business-list">
      <van-tabs
        v-model="source"
        :color="'#F09E38'"
        :title-active-color="'#333333'"
        :title-inactive-color="'#515151'"
        :background="'#fff'"
        @click="fetchGoodsList"
        ref="fbtCateList">
        <van-tab
          :name="item.value"
          v-for="item in sourceList"
          :key="item.value">
          <template #title>{{ item.name }}</template>
        </van-tab>
      </van-tabs>
    </div>
    <ul
      class="filter-wrap border-top-1px"
      v-show="booGoodsWrap">
      <li
        :class="{'active': sort === item.value}"
        v-for="item in filterList"
        :key="item.value"
        @click="selectSortType(item)">{{ item.name }}
      </li>
    </ul>
    <!--商品列表-->
    <Main
      :keyword="keyword"
      :source="source"
      :sort="sort"
      ref="myMain"
      v-show="booGoodsWrap"/>
  </div>
</template>

<script>
import { Search, Tabs, Tab, Toast } from 'vant'
import Main from './child/main'

export default {
  name: 'index',
  components: {
    'van-search': Search,
    'van-tabs': Tabs,
    'van-tab': Tab,
    Main
  },
  data () {
    return {
      keyword: '',
      sourceList: [
        {
          name: '京东',
          value: 'jd'
        },
        {
          name: '唯品会',
          value: 'vip'
        },
        {
          name: '拼多多',
          value: 'pdd'
        },
        {
          name: '考拉',
          value: 'kaola'
        },
        {
          name: '淘宝',
          value: 'taobao'
        }
      ], // 商家列表
      // 1-综合排序,2-价格升序,3-销量降序 默认1
      filterList: [
        {
          name: '综合',
          value: 1
        },
        {
          name: '销量',
          value: 2
        },
        {
          name: '价格',
          value: 3
        }
      ],
      source: 'jd',
      sort: 1,
      booGoodsWrap: false
    }
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
    } else {}
    setTimeout(() => {
      this.$refs.fbtCateList.resize()
    }, 500)
    this.$route.meta.isUseCache = false
  },
  methods: {
    onSearch () {
      if (!this.keyword) {
        Toast('搜索内容不能为空')
        return
      }
      if (!this.booGoodsWrap) {
        this.booGoodsWrap = true
      }
      this.$nextTick(() => {
        this.$refs.myMain.init()
      })
    },
    fetchGoodsList () {
      if (!this.keyword) {
        return
      }
      this.$nextTick(() => {
        this.$refs.myMain.init()
      })
    },
    selectSortType (item) {
      this.sort = item.value
      if (!this.keyword) {
        return
      }
      this.$nextTick(() => {
        this.$refs.myMain.init()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.fbt-form {
  ::v-deep .van-search {
    padding-bottom: 0;

    .van-cell {
      align-items: center;

      input {
        color: #333;
        -webkit-text-fill-color: #333;
        opacity: 1;

        &::-webkit-input-placeholder {
          -webkit-text-fill-color: #999;
          opacity: 1;
          color: #999;
        }
      }
    }
  }

  .btn {
    font-size: 16px;
    color: #333;
  }
}

.cate-header {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;

  ::v-deep .van-tabs {
    width: calc(100% - 42px);

    .van-tabs__nav--line {
      .van-tab {
        &--active {

          .van-tab__text {
            font-size: 16px !important;
            font-weight: bold;
          }
        }

        .van-tab__text {
          font-size: 13px;
        }
      }
    }
  }
}

.filter-wrap {
  display: flex;
  align-items: center;
  background: #fff;
  @include border-top-1px(#eee);

  li {
    flex: 1;
    line-height: 40px;
    font-size: 14px;
    color: #999;
    text-align: center;

    &.active {
      font-weight: bolder;
      color: #333;
    }
  }
}
</style>