xinkeaboard/xinkeaboard-web/components/CategorySortTop.vue

<template>
  <div ref="category_sort" class="2" id="category_sort" >
    <ul class="menu_wrap" ref="menu_wrap" @scroll="scrollMenu">
      <!-- 一级分类 start-->
      <li
        class="menu_item"
        v-for="(item1, firstIndex) in cateData.data"
        v-bind:key="firstIndex"
        style="position: static"
        @mouseover="selectTab(firstIndex, item1.categoryId)"
      >
        <a class="first_cat" @click.stop="toGoodsList(item1)">
          {{ item1.categoryName }} <span style="float:right">></span> </a
        >
        <div class="children" @click.stop="void 0">
          <!-- 二级分类 start-->
          <div v-if="cateDataFirst.data.length > 0">
            <dl
              class="fore_dl"
              v-for="(item2, index) in cateDataFirst.data"
              v-bind:key="index"
            >
              <dt>
                <a class="second" @click.stop="toGoodsList(item2)">
                  {{ item2.categoryName }}</a
                >
                <i>&gt;</i>
              </dt>
              <dd>
                <!-- 三级分类 start-->
                <a
                  class="third"
                  @click.stop="toGoodsList(item3)"
                  v-for="(item3, thirdIndex) in item2.children"
                  v-bind:key="thirdIndex"
                  >{{ item3.categoryName }}</a
                >
              </dd>
            </dl>

          </div>
          <SldCommonEmpty v-else totalWidth="900" totalHeight="300" style="color: #666" />
          <!-- 二级分类 end-->
        </div>
      </li>
      <!-- 一级分类 end-->
    </ul>
    <!-- <img v-show="showDown" src="/arrows_down_double-34.svg" class="img" /> -->

  </div>
</template>

<script setup>
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from '@/composables/common.js';
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
// const L = lang_zn;
const L = getCurLanguage();
const cateShow = ref(false);
const cateDataFirst = reactive({ data: [] });
const cateCache = reactive({ data: [] });
const showDown = ref(false)

//获取产品分类下面的一级菜单
const cateData = reactive({ data: [] });
const getInitData =  (index, params) => {
  get("v3/goods/front/goods/category/topCategory").then((res) => {
    if (res.state == 200) {
      cateData.data = res.data;
      if(cateData.data.length < 9){
        showDown.value = false
      }else{
        showDown.value = true
      }
    }
  })
};
getInitData(0, {});


const selectTab = (index, categoryId) => {
  // cateShow.value = true
  cateDataFirst.data = [];
  let params = {
    categoryId1: categoryId,
  };
  let index1 = cateCache.data.findIndex((item) => item.categoryId == categoryId);
  if (index1 > -1) {
    cateDataFirst.data = cateCache.data[index1].list;
  } else {
    getSortChild(index, params);
  }
};

const getSortChild = (index, params) => {
  get("v3/goods/front/goods/category/bottomCategory", params).then((res) => {
    if (res.state == 200) {
      let index1 = cateCache.data.findIndex(
        (item) => item.categoryId == params.categoryId1
      );
      if (index1 > -1) {
        cateDataFirst.data = cateCache.data[index1].list;
      } else {
        cateDataFirst.data = res.data;
        cateCache.data.push({ categoryId: params.categoryId1, list: res.data });
      }
    }
  });
};


const scrollMenu = (e) => {
  if(Math.floor(e.target.scrollTop) +  Math.floor(e.target.clientHeight) >= Math.floor(e.target.scrollHeight)){
    showDown.value = false
  }else{
    showDown.value = true
  }
}

const toGoodsList = (item) => {
  let newWin = router.resolve({
    path:'/goods/list/'+ calcProductName(item.categoryName) +'_v-'+item.categoryId+'_gid-'+item.grade+'_pid-'+item.pid,
  });
  window.open(newWin.href, "_blank");
};


</script>

<style lang="scss" scoped>
@import "@/assets/style/theme.scss";

.index {
  background: #f8f8f8;
  padding-bottom: 10px;
}

#category_sort {
  font-size: 12px;
  position: relative;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 306px;
  z-index: 9;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  .img{
    width: 24px;
    position: absolute;
    bottom: 0;
    left: 113px;
    animation:  im_icon 1s linear infinite;
  }
  @keyframes im_icon{
    0%{
      opacity: 0.5;
      transform: translate(0,0);
    }
    50%{
      opacity: 1;
      transform: translate(0,5px);
    }
    100%{
      opacity: 0.5;
      transform: translate(0,0);
    }
  }


  .menu_wrap {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    direction: rtl;
    &::-webkit-scrollbar {
      /*滚动条整体样式*/
      width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
      height: 5px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
      background   : $colorMain;
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background   : #ededed;
    }



    .menu_item {

      line-height: 1.4;
      padding: 9px 0;
      position: relative;
      border-left: 3px solid transparent;
      cursor:pointer;
      direction: ltr;
      text-align: left;
      .first_cat {
        width: 100%;
        display: block;
        font-size: 14px;
        color: #333;
        padding: 0 10px 0 15px;
        text-overflow: ellipsis;
        overflow: hidden;
        position: relative;
        letter-spacing: normal;

        &:hover {
          color: $colorMain;
        }
      }

      &:hover {
        background: #F6F8FA;
        // border-left-color: $colorMain;

        .children {
          display: inline-block;
          -webkit-animation: showMore 0.2s ease-in-out;
          animation: showMore 0.2s ease-in-out;

          @-webkit-keyframes showMore {
            0% {
              opacity: 0;
            }

            to {
              opacity: 1;
            }
          }

          @keyframes showMore {
            0% {
              opacity: 0;
            }

            to {
              opacity: 1;
            }
          }
        }
      }

      .children {
        display: none;
        width: 1013px;
        height: 306px;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 250px;
        padding: 10px 0;
        overflow: hidden;
        box-shadow: 0px 5px 10px 0px rgba(153, 153, 153, 0.15);
        .fore_dl {
          width: 100%;
          clear: both;
          overflow: hidden;
        }

        dt {
          position: relative;
          float: left;
          width: 180px;
          padding: 5px 30px 0 0;
          font-weight: 700;
          line-height: 2em;
          overflow: hidden;
          white-space: nowrap;
          margin-left: 30px;

          i {
            position: absolute;
            top: 7px;
            right: 8px;
            width: 14px;
            height: 14px;
            font: 400 9px/14px consolas;
            color: #333;
          }

          .second {
            color: #666;
            font: 700 12px/40px "microsoft yahei";
            width: 100%;
            overflow: hidden;
            display: inline-block;
            text-align: left;
            line-height: 18px;
            text-overflow: ellipsis;
            letter-spacing: normal;

            &:hover {
              color: $colorMain;
            }
          }
        }

        dd {
          border-top: none;
          border-bottom: 1px dashed #dddddd;
          width: auto;
          padding: 4px 0;
          float: left;
          line-height: 16px;
          margin-left: 15px;
          min-height: 32px;
        }

        .third {
          float: left;
          padding: 0 8px;
          margin: 2px 0;
          line-height: 16px;
          height: 16px;
          border-right: 1px solid #e0e0e0;
          white-space: nowrap;
          font-size: 12px;
          letter-spacing: normal;

          &:hover {
            color: $colorMain;
          }

          &:last-child {
            border-right: none;
          }
        }
      }
    }
  }
}
</style>