<template>
<div class="home-category">
<ul class="menu">
<!-- 一级菜单 -->
<li
v-for="item in leftNavs"
:key="item.id"
@mouseenter="currCateId = item.id"
>
<router-link to="/">{{ item.name }}</router-link>
<!-- <RouterLink to="/">{{ item }}</RouterLink> -->
<!-- 二级菜单（前两个二级） -->
<template v-if="item.children">
<RouterLink v-for="sub in item.children" :key="sub.id" to="/">
{{ sub.name }}
</RouterLink>
</template>
</li>
</ul>
<!-- 鼠标hover之后显示=》推荐商品的弹层 -->
<!-- 弹层 -->
<div class="layer">
<h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
<ul v-if="currGoods">
<li v-for="good in currGoods" :key="good.id">
<RouterLink to="/">
<img :src="good.picture" alt="" />
<div class="info">
<p class="name ellipsis-2">{{ good.name }}</p>
<p class="desc ellipsis">{{ good.desc }}</p>
<p class="price"><i>¥</i>{{ good.price }}</p>
</div>
</RouterLink>
</li>
</ul>
</div>
</div>
</template>
<script>
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
export default {
name: 'HomeCategory',
setup () {
const store = useStore()
// 1. 左侧分类数据
const leftNavs = computed(() => {
return store.state.category.cateList.map(item => {
return {
id: item.id,
name: item.name,
children: item.children.slice(0, 2)
}
})
})
/**
* 2. 需求:鼠标经过对应分类，右侧弹层显示当前分类推荐商品
* 步骤：
* 1. 注册鼠标经过事件=》获取当前分类下的推荐商品（item.goods）
* 2. 在弹层中渲染推荐商品
*/
const currCateId = ref('')
// 获取当前分类下的推荐商品
const currGoods = computed(() => {
return store.state.category.cateList.find(item => item.id === currCateId.value)?.goods
})
return { leftNavs, currCateId, currGoods }
}
}
</script>
\
