You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.3 KiB
121 lines
3.3 KiB
10 months ago
|
<!--商品分类-->
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref, toRefs } from 'vue'
|
||
|
|
import { categoryTreeApi } from '~/server/goodsApi'
|
||
|
|
import { linkNavigateTo } from '~/utils/util'
|
||
|
|
const route = useRoute()
|
||
|
|
|
||
|
|
// 获取首页路由地址
|
||
|
|
const homeRoutePath = route.path
|
||
|
|
/**
|
||
|
|
* 平台端商品分类
|
||
|
|
*/
|
||
|
|
const categoryCurrent = ref<any[]>([])
|
||
|
|
const current = ref<number| null>(null)
|
||
|
|
|
||
|
|
const { data: productClassify } = await useAsyncData(async () => categoryTreeApi())
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 鼠标移入
|
||
|
|
* @param idx
|
||
|
|
*/
|
||
|
|
const seen = ref<boolean>(false)
|
||
|
|
const handlerEnter = (idx: number) => {
|
||
|
|
seen.value = true
|
||
|
|
current.value = idx
|
||
|
|
categoryCurrent.value = productClassify.value[idx].childList
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 鼠标移出
|
||
|
|
*/
|
||
|
|
const emit = defineEmits(['handleSubmitLeave'])
|
||
|
|
const handlerLeave = () => {
|
||
|
|
seen.value = false
|
||
|
|
current.value = null
|
||
|
|
emit('handleSubmitLeave')
|
||
|
|
}
|
||
|
|
|
||
|
|
const handleEnterKey = (id: number) => {
|
||
|
|
linkNavigateTo(`/product/product_list`, { productCid: id })
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div>
|
||
|
|
<div
|
||
|
|
class="acea-row absolute z-11 classifyCard overflow-hidden"
|
||
|
|
:class="homeRoutePath !== '/' ? 'boxShadow' : ''"
|
||
|
|
@mouseleave="handlerLeave"
|
||
|
|
>
|
||
|
|
<el-scrollbar height="376px" class="w-200px px-20px py-17px bg-#FFFFFF">
|
||
|
|
<div class="classify-left bg-#FFFFFF">
|
||
|
|
<div v-for="(item, index) in productClassify" :key="item.id" class="flex classifyClassA cursors">
|
||
|
|
<el-image :src="item.icon" class="w-40px h-40px b-rd-50%"></el-image>
|
||
|
|
<div class="ml-10px">
|
||
|
|
<div
|
||
|
|
@mouseenter="handlerEnter(index)"
|
||
|
|
class="fonts14 line1 mb-8px w-109px"
|
||
|
|
:class="index === current ? 'font-color' : 'fontColor333'"
|
||
|
|
>
|
||
|
|
{{ item.name }}
|
||
|
|
</div>
|
||
|
|
<div class="acea-row">
|
||
|
|
<div
|
||
|
|
v-for="(items, idx) in item.childList.length === 2 ? item.childList : item.childList.slice(0, 2)"
|
||
|
|
:key="index"
|
||
|
|
class="text-12px text-#999 classifyClassB line1"
|
||
|
|
>
|
||
|
|
{{ items.name }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-scrollbar>
|
||
|
|
<div v-if="seen" class="classify-rgiht bg-#FAFAFA w-1000px px-40px py-20px">
|
||
|
|
<el-scrollbar height="360px">
|
||
|
|
<div v-for="(item, index) in categoryCurrent" :key="index" class="mb18px acea-row">
|
||
|
|
<div class="fonts14 fontColor333 mr30px font-500 oppoSans-M">{{ item.name }}</div>
|
||
|
|
<div class="acea-row w-85%">
|
||
|
|
<span
|
||
|
|
@click="handleEnterKey(items.id)"
|
||
|
|
v-for="(items, idx) in item.childList"
|
||
|
|
:key="idx"
|
||
|
|
class="fonts14 fontColor333 mr20px mb-10px cursors oppoSans-R childName"
|
||
|
|
>{{ items.name }}</span
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-scrollbar>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.childName:hover{
|
||
|
|
color: #e93323;
|
||
|
|
}
|
||
|
|
.classifyCard {
|
||
|
|
background: #fafafa;
|
||
|
|
border-radius: 0px 0px 16px 16px;
|
||
|
|
}
|
||
|
|
.boxShadow {
|
||
|
|
box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.1);
|
||
|
|
}
|
||
|
|
.classifyClassA {
|
||
|
|
margin-bottom: 24px;
|
||
|
|
&:last-child {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.classifyClassB {
|
||
|
|
max-width: 49px;
|
||
|
|
margin-right: 10px;
|
||
|
|
&:last-child {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|