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

<template>
  <div
    class="category-container">
    <!--商家-->
    <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>
            <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>
    <!--商品列表-->
    <Main
      :source="this.businessValue"
      :catId="catId"
      ref="myMain"/>
  </div>
</template>

<script>
import { Tab, Tabs, DropdownMenu, DropdownItem, Icon, Toast } from 'vant'
import Main from './child/main'
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,
    Main
  },
  data () {
    return {
      sourceList: [
        {
          name: '京东',
          value: 'jd'
        },
        {
          name: '唯品会',
          value: 'vip'
        },
        {
          name: '拼多多',
          value: 'pdd'
        },
        {
          name: '考拉',
          value: 'kaola'
        },
        {
          name: '淘宝',
          value: 'taobao'
        }
      ], // 商家列表
      businessValue: 'jd',
      catId: '',
      cateList: [], // 分类列表
      numPositionY: 0 // BS纵轴坐标
    }
  },
  activated () {
    if (!this.$route.meta.isUseCache) {
      this.businessValue = this.sourceList[0].value
      this.catId = ''
      this.numPositionY = 0
      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()
      })
    }
  },
  beforeRouteLeave (to, from, next) {
    if (['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: 0;
  width: 100%;
}

.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;
        padding: 0 12px;
        background: #F3F3F3;
        border-radius: 12px;

        img {
          width: 16px;
          height: 16px;
          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>