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

<template>
  <div
    class="category-container">
    <transition name="fade">
      <div
        class="header-wrap"
        v-show="showHeader">
        <!--模拟搜索-->
        <div class="jump-search">
          <van-search
            :shape="'round'"
            v-model="searchValue"
            placeholder="搜索商品标题 领优惠券拿返现"/>
          <router-link
            :to="{name: 'Search'}">去搜索页
          </router-link>
        </div>
        <!--商家-->
        <div class="business-list">
          <van-tabs
            v-model="businessValue"
            :color="'#ee0a24'"
            :title-active-color="'#FFF'"
            :title-inactive-color="'#8A8A8A'"
            :background="'#fff'"
            @click="fetchCateList"
            ref="fbtBusinessList">
            <van-tab
              :name="item.value"
              v-for="item in sourceList"
              :key="item.value">
              <template #title>
                <img
                  :src="item.default"
                  alt=""
                  v-show="businessValue !== item.value">
                <img
                  :src="item.active"
                  alt=""
                  v-show="businessValue === item.value">
                <i>{{ item.name }}</i>
              </template>
            </van-tab>
          </van-tabs>
        </div>
        <!--分类-->
        <div
          class="cate-header">
          <van-tabs
            v-model="catId"
            :color="'#F09E38'"
            :title-active-color="'#333333'"
            :title-inactive-color="'#515151'"
            :background="'#fff'"
            @click="selectCateId"
            ref="fbtCateList">
            <van-tab
              :name="item.id"
              v-for="item in cateList"
              :key="item.id">
              <template #title>{{ item.name }}</template>
            </van-tab>
          </van-tabs>
          <van-dropdown-menu
            class="fbt-van-dropdown-menu">
            <van-dropdown-item
              ref="fbtCateDropdownMenu">
              <template #title>
                <van-icon name="arrow-down"/>
              </template>
              <ul>
                <li
                  :class="{'active': item.id === catId}"
                  v-for="item in cateList"
                  :key="item.id"
                  @click="onConfirm(item)">{{ item.name }}
                </li>
              </ul>
            </van-dropdown-item>
          </van-dropdown-menu>
        </div>
      </div>
    </transition>
    <!--商品列表-->
    <Main
      :source="this.businessValue"
      :catId="catId"
      @setShowHeader="setShowHeader"
      ref="myMain"/>
    <!--回到顶部-->
    <BSScrollTop
      @handleScrollTop="handleScrollTop"
      v-show="!showHeader"/>
  </div>
</template>

<script>
import { Tab, Tabs, DropdownMenu, DropdownItem, Icon, Toast, Search } from 'vant'
import Main from './child/main'
import BSScrollTop from '../../common/BSScrollTop'
import { apiCateList } from './api/api'

export default {
  name: 'index',
  components: {
    'van-tabs': Tabs,
    'van-tab': Tab,
    'van-dropdown-menu': DropdownMenu,
    'van-dropdown-item': DropdownItem,
    'van-icon': Icon,
    'van-search': Search,
    Main,
    BSScrollTop
  },
  data () {
    return {
      searchValue: '',
      businessValue: 'jd',
      catId: '',
      cateList: [], // 分类列表
      numPositionY: 0, // BS纵轴坐标
      showHeader: true // 是否展示顶部模块：搜索、商家筛选、类别筛选
    }
  },
  computed: {
    sourceList () {
      return this.$store.getters['common/sourceList']
    }
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.searchValue = ''
      this.businessValue = this.sourceList[0].value
      this.catId = ''
      this.numPositionY = 0
      this.showHeader = true
      this.fetchCateList()
    } else {
      this.$nextTick(() => {
        if (this.$refs.myMain.scroll) {
          this.$refs.myMain.scroll.refresh()
          this.$refs.myMain.scroll.scrollTo(0, this.numPositionY)
        }
      })
    }
    setTimeout(() => {
      this.$refs.fbtBusinessList.resize()
    }, 500)
    this.$route.meta.isUseCache = false
  },
  methods: {
    async fetchCateList () {
      try {
        const { status, data, msg } = await apiCateList(this.businessValue)
        if (status) {
          this.cateList = data

          setTimeout(() => {
            this.$refs.fbtCateList.resize()
            this.$refs.myMain.init()
          }, 500)
        } else {
          Toast(msg)
        }
      } catch (e) {}
    },
    selectCateId () {
      this.$nextTick(() => {
        this.$refs.myMain.init()
      })
    },
    onConfirm (obj) {
      this.catId = obj.id
      this.$nextTick(() => {
        this.$refs.fbtCateDropdownMenu.toggle()
        this.$refs.myMain.init()
      })
    },
    setShowHeader (val) {
      this.showHeader = val
    },
    handleScrollTop () {
      this.$refs.myMain.scroll && this.$refs.myMain.scroll.scrollTo(0, 0)
    }
  },
  beforeRouteLeave (to, from, next) {
    if (['MarketingSave', 'Invite', 'Mine', 'Search', 'CategoryDetail'].findIndex(item => item === to.name) > -1) {
      from.meta.isUseCache = true
    }
    this.numPositionY = this.$refs.myMain.scroll ? this.$refs.myMain.scroll.y : 0
    next()
  }
}
</script>

<style lang="scss" scoped>
.category-container {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 50px;
  width: 100%;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.6s;
}

.fade-enter,
.fade-leave-to {
  transform: translate3d(0, -136px, 0);
}

.header-wrap {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100%;
}

.jump-search {
  ::v-deep .van-search {
    padding-bottom: 0;

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

  position: relative;
  left: 0;
  top: 0;
  overflow: hidden;

  a {
    position: absolute;
    left: 12px;
    top: 10px;
    right: 12px;
    bottom: 0;
    opacity: 0;
  }
}

.business-list {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;

  ::v-deep .van-tabs__nav--line {
    .van-tab {
      width: 75px;
      padding: 0;

      &--active {

        .van-tab__text {
          background: #EA483F !important;;
        }
      }

      .van-tab__text {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 67px;
        height: 23px;
        background: #F3F3F3;
        border-radius: 12px;

        img {
          width: 20px;
          height: 20px;
          margin-right: 3px;
        }

        i {
          font-size: 11px;
          color: inherit;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }

    .van-tabs__line {
      display: none;
    }
  }
}

.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;
        }
      }
    }
  }

  .fbt-van-dropdown-menu {
    position: absolute;
    right: 0;
    top: 0;
    width: 42px;
    height: 100%;

    ::v-deep .van-dropdown-menu__bar {
      height: 100%;
      box-shadow: none;

      .van-dropdown-menu__title {
        &::after {
          visibility: hidden;
        }
      }
    }

    ul {
      display: flex;
      flex-flow: row wrap;
      align-content: flex-start;
      width: 375px;
      min-height: 177px;
      background: #F8F8F8;
      padding: 12px 0 2px;

      li {
        width: 75px;
        height: 24px;
        margin-left: 15px;
        margin-bottom: 10px;
        border-radius: 12px;
        color: #515151;
        background: #ECECEC;
        font-size: 12px;
        line-height: 24px;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

        &.active {
          color: #FFFFFF;
          background: #EA483F;
        }
      }
    }
  }
}
</style>