mall4pc-bbc/components/categroy-sidebar.vue

<template>
  <!-- 分类筛选 -->
  <div
    :class="[
      'categroy',
      (fixedCate ? 'fixed' : '') || (notIndexFixed ? 'fixed2' : ''),
      notIndex ? 'shorttop' : ''
    ]"
    :style="{width:$t('language')==='en'?'120px':''}"
  >
    <div class="tit">{{$t('categroyCommon.categoryFilter')}}</div>
    <div class="con">
      <div
        class="item"
        v-for="(firstCategroy, index) in categoryList"
        :key="index"
        v-on:mouseover="
          onMenuTab(mouseIndex++, index, firstCategroy.categoryId)
        "
        v-on:mouseout="
          onMenuTabOut(mouseIndex - 1, index, firstCategroy.categoryId)
        "
      >
      <div class='firstCategroyBox' 
          @click.stop="
          toCatePage(
            firstCategroy.categoryId,
            null,
            null,
            0
          )"
      >
        <span class="icon">
          <img :src="firstCategroy.icon" alt />
        </span>
        <!-- 图标 -->
        <span class="name"
        >{{ firstCategroy.categoryName }}</span>
      </div>
        <div class="select">
          <div class="sort">
            <div v-for="(subCate, index) in subCategoryList" :key="index">
            <!-- @click="toCatePage(subCate.parentId,subCate.categoryId)" -->
            <!-- <div class="item-img">
              <img :src="subCate.pic" alt />
            </div>-->
            <div class="select-title">{{ subCate.categoryName }}</div>
            <div class="select-item-wrapper">
              <div
                v-for="(threeCate, index) in subCate.categories"
                :key="index"
                @click="
                  toCatePage(
                    firstCategroy.categoryId,
                    subCate.categoryId,
                    threeCate.categoryId,
                    0
                  )
                "
                class="select-item"
              >
                <div class="item-img">
                  <img :src="threeCate.pic" alt />
                </div>
                <div class="item-name">{{ threeCate.categoryName }}</div>
              </div>
            </div>
          </div>
          
          </div>
          
        </div>
      </div>
    </div>
    <!-- <div class="phone-code">
      <div class="code">
        <div id="qrcode2"></div>
        <img src="~/assets/images/mobile-code.png" alt />
      </div>
      <div class="text">{{$t('categroyCommon.h5Mall')}}</div>
    </div> -->
  </div>
  <!-- /分类筛选 -->
</template>

<script>
import { h5Path } from '~/plugins/config'
export default {
  data () {
    return {
      backgroundPositionX: 'backgroundPositionX',
      backgroundPositionY: 'backgroundPositionY',
      fixedCate: false,
      categoryList: [],  //父分类列表
      subCategoryList: [],  //子分类列表
      notIndex: false,  //当前非首页
      notIndexFixed: false, //当前非首页
      mouseoverEventList: [],
      mouseIndex: 0,
    }
  },
  mounted () {
    document.title = this.$t('commonHead.productList')
    // 监听页面滚动
    window.addEventListener('scroll', this.scrollToTop);
    this.getCategoryList()  //一级分类列表
    //如果当前处在非首页，则分类侧栏增加一个class
    window.location.pathname != '/' ? this.notIndex = true : this.notIndex = false
    // this.$nextTick(() => {
    //   this.loadQRCode()
    // })
  },
  methods: {
    /**
     * 生成二维码
     */
    loadQRCode () {
      let qrcode = new QRCode('qrcode2', {
        text: h5Path,
        width: 90,
        height: 90,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: 3
      })
    },
    /**
     * 页面滚动事件
     */
    scrollToTop () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (window.location.pathname == '/') {
        this.fixedCate = scrollTop > 500 ? true : false
      } else {
        this.notIndexFixed = scrollTop > 130 ? true : false
      }
    },

    /**
     * 加载父分类列表
     */
    getCategoryList () {
      this.$axios.get('/category/categoryInfo?parentId=' + '')
        .then(({ data }) => {
          this.categoryImg = data[0].pic,
            this.categoryList = data
          this.getProdList(data[0].categoryId)
        })
    },

    /**
     * 分类点击事件，获取子分类
     */
    onMenuTab (mouseIndex, index, id) {
      var _this = this
      var timeout = setTimeout(() => {
        this.getProdList(this.categoryList[index].categoryId);
        this.categoryImg = this.categoryList[index].pic,
          this.selIndex = index
      }, 100)
      var eventData = {
        index, id,
        eventTime: new Date().getTime(),
        timeout: timeout
      }

      this.mouseoverEventList.push(eventData)

    },
    onMenuTabOut () {
      var eventData = this.mouseoverEventList.shift()
      // var eventData = this.mouseoverEventList[mouseIndex]
      if (new Date().getTime() - eventData.eventTime < 100) {
        clearTimeout(eventData.timeout)
      }

    },
    /**
     * 加载子分类列表
     */
    getProdList (categoryId) {
      this.$axios.get('/category/categoryInfo?parentId=' + categoryId)
        .then(({ data }) => {
          this.subCategoryList = data
        })
    },
    /**
     * 跳转子分类商品页面 */
    toCatePage: function (parentId, categoryId, thCategoryId, st) {
      // this.$router.push({ path: '/list?cpid=' + parentId + "&cid=" + categoryId + "&thCid=" + thCategoryId + "&st=" + st })
      console.log('跳转和艰苦拉萨机打开拉萨角度来看');
      this.$router.push({
        path: '/list',
        query: {
          cpid: parentId,
          cid: categoryId,
          thCid: thCategoryId,
          st: st
        }
      })
    },
  },
  destroyed () {
    // 页面销毁时移除监听
    window.removeEventListener('scroll', this.scrollToTop);
  }
}
</script>

<style scoped>
/* 分类侧栏位置 */
.fixed {
  position: fixed;
  top: 130px;
}
.fixed2 {
  position: fixed;
  top: 100px;
}
.categroy .phone-code .code{
  width: 90px;
}

.categroy .con .item .select {
  width: auto;
  max-height: 700px;
}
.categroy .con .item .select .sort {
  max-height: 700px;
  overflow: auto;
}

@media screen and ( max-width: 1366px ){
.categroy .con .item .select {
  left:90px;
}
.categroy{
  width:71px;
  top: 60px;
  position: fixed !important;
}
.categroy .con .item{
  padding-top: 10px;
}
.fixed{
  top: 60px;
}
.fixed2{
  top: 45px;
}
.categroy .con .item .name{
  width: 100%;
  margin-left: 0;
}
}

.select-title {
  cursor: default;
}
</style>