xinkeaboard/xinkeaboard-web/pages/goods/Category.vue

<template>
  <div>
    <SldHomeTopSearch />
    <NavTopBar />
    <NavCatHeader />
    <div class="bottom_line"></div>
    <div class="goods_sort">
      <div class="boxbg" style="z-index: 2; position: relative">
        <div class="class_ification_wrap clearfix">
          <!-- 一级分类 -->
          <ul
            :class="{
              fl: true,
              class_ification: true,
              fixed: isTop,
              bottomFixed: isBottom,
            }"
          >
            <li
              v-for="(item, index) in navList.data"
              :key="index"
              :class="index === indexNum ? 'on cat_item' : 'cat_item'"
            >
              <div @click="toTop(item.categoryId, index)">{{ item.categoryName }}</div>
            </li>
          </ul>
          <ul class="class_detail">
            <li :class="['detail_item', cateStyle]">
              <div class="detail_title">{{ childCate.categoryName }}</div>
              <div class="cat_wrap_dd">
                <div
                  class="cat_dd_item"
                  v-for="(item2, cateIndex) in childCate.data"
                  :key="cateIndex"
                  v-show="childCate.data && childCate.data.length"
                >
                  <div
                    class="fl cat_left"
                    :style="{ color: color, cursor: 'pointer' }"
                  >
                    <nuxt-link
                        target="_blank"
                        style="color: inherit"
                        :to="'/goods/list/'+ calcProductName(item2.categoryName) +'_v-'+ item2.categoryId + '_pid-' + item2.pid + '_gid-' + item2.grade"
                    >
                    {{ item2.categoryName }} >
                    </nuxt-link>
                  </div>
                  <div class="cat_add_right">
                    <span
                      v-for="(item3, index) in item2.children"
                      :key="index"
                      >
                        <nuxt-link
                            target="_blank"
                            style="color: inherit"
                            :to="'/goods/list/'+ calcProductName(item3.categoryName) +'_v-'+ item3.categoryId + '_pid-' + item3.pid + '_gid-' + item3.grade"
                        >
                      {{ item3.categoryName }}
                        </nuxt-link>
                    </span>
                  </div>
                </div>
                <div
                  class="detail_none flex_row_center_center"
                  v-if="!(childCate.data && childCate.data.length) && !firstLoading"
                >
                  <img :src="noneUrl" style="width: 100px; margin-bottom: 15px" />
                  <p>{{ L["暂无数据"] }}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from '@/composables/common.js';

// const L = lang_zn;
const L = getCurLanguage();
const firstLoading = ref(true); //是否第一次加载
const noneUrl = ref("/common_empty.png");
let indexNum = ref(0);
const router = useRouter();
const navList = reactive({ data: {} });
const isTop = ref(false);
const isBottom = ref(false);

useHead({
  title: 'Categories',
  meta: [
    {
      name: "description",
      content: 'Categories',
    },
    {
      name: "keywords",
      content: 'Categories',
    },
  ],
});


const getInitData = async (index, params) => {
  //SSR
  const { data: value } = await useFetchRaw(
    apiUrl + "v3/goods/front/goods/category/topCategory",
    { params }
  );
  const res = value._rawValue;
  if (res.state == 200) {
    navList.data = res.data;
    getChild(navList.data[0].categoryId, index);
  }
};
getInitData(0, {});

const childCate = reactive({
  categoryName: "",
  data: [],
});
const cateStyle = ref("item_style1");
const getChild = async (categoryId1, index) => {
  const { data: value } = await useFetchRaw(
    apiUrl + "v3/goods/front/goods/category/bottomCategory?categoryId1=" + categoryId1,
    { key: categoryId1.toString() }
  );
  const res = value._rawValue;
  if (res.state == 200) {
    childCate.data = res.data;
    childCate.categoryName = navList.data[index].categoryName;
  }
};

const toTop = (categoryId, index) => {
  indexNum.value = index;
  let odd = (index + 1) % 9;
  cateStyle.value = `item_style${odd}`;
  getChild(categoryId, index);
};


onMounted(() => {
  setTimeout(() => {
      sldStatEvent({ behaviorType: 'pv',pageUrl: defaultUrl + router.currentRoute.value.path, referrerPageUrl: apiUrl  });
    }, 3000)
});

</script>

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

.detail_none {
  flex-direction: column;
  margin-top: 7px;
  width: inherit;
  height: 200px;
}

.detail_none p {
  padding: 7px;
}
</style>