youzi
585702cf40
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m42s
126 lines
3.2 KiB
Vue
126 lines
3.2 KiB
Vue
<template>
|
|
<div class="w-2/3 mx-auto mt-[20px] shadow" ref="box">
|
|
<div class="p-10">
|
|
<n-cascader class="w-[540px]" v-model:value="category" placeholder="请选择分类" :options="clist" check-strategy="child"
|
|
:show-path="true" remote :on-load="handleLoad" @update:value="handdleSelect" />
|
|
</div>
|
|
<n-scrollbar>
|
|
<div class="grid grid-cols-2 items-center justify-items-center">
|
|
<div ref="card"
|
|
class="mt-4 px-10 w-[90%] flex mx-2 py-3 bg-[#f1f2f330] items-center hover:shadow-lg hover:bg-[#a81b2b20]"
|
|
v-for="(i, idx) in cooks.list" @click="handdleGotoDetail(i.id)">
|
|
<div class="w-[80px] h-[80px] rounded-sm">
|
|
<img class="w-[80px] h-[80px] rounded-sm" :src="i.cover" alt="">
|
|
</div>
|
|
<n-popover width="trigger" :delay="2000" trigger="hover" placement="top">
|
|
<template #trigger>
|
|
<div class="ml-3" style="width: calc(100% - 120px);">
|
|
<div class="text-2xl font-bold mt-2 truncate">{{ i.name }}</div>
|
|
<div class="text-sm mt-2 truncate">{{ i.desc }}</div>
|
|
</div>
|
|
</template>
|
|
<div>
|
|
<div class="text-2xl font-bold mt-2">{{ i.name }}</div>
|
|
<div class="text-sm mt-2">{{ i.desc }}</div>
|
|
</div>
|
|
</n-popover>
|
|
|
|
</div>
|
|
</div>
|
|
</n-scrollbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
|
|
|
|
|
|
//mark import
|
|
|
|
//mark data
|
|
const box = ref(null);
|
|
const category = ref(null)
|
|
const clist = ref([])
|
|
const cooks = ref({ list: [] });
|
|
const page = ref(1);
|
|
const card = ref(null);
|
|
const cardWidth = ref(0);
|
|
const router = useRouter();
|
|
//mark method
|
|
async function getCate(id) {
|
|
const res = await $http.cookbook.category({ id });
|
|
// console.log(res);
|
|
return res.data;
|
|
}
|
|
|
|
async function getCooks(id, page) {
|
|
setTimeout(async () => {
|
|
const res = await $http.cookbook.list({ id, page });
|
|
|
|
cooks.value = res.data;
|
|
console.log(2222, cooks.value);
|
|
|
|
|
|
// console.log(111111, card.value);
|
|
cardWidth.value = card.value[0].clientWidth;
|
|
// console.log(111111, cardWidth.value);
|
|
}, 1000);
|
|
}
|
|
|
|
function handleLoad(option) {
|
|
return new Promise((resolve) => {
|
|
window.setTimeout(async () => {
|
|
option.children = await getChildren(option);
|
|
resolve();
|
|
}, 1e3);
|
|
});
|
|
}
|
|
async function getChildren(option) {
|
|
// console.log(option);
|
|
|
|
const children = [];
|
|
const res = await getCate(option.value);
|
|
res.forEach(item => {
|
|
children.push({
|
|
label: item.name,
|
|
value: item.id,
|
|
depth: option.depth + 1,
|
|
isLeaf: option.depth === 2
|
|
});
|
|
});
|
|
return children
|
|
|
|
}
|
|
|
|
function handdleSelect() {
|
|
console.log(category.value);
|
|
getCooks(category.value, page.value)
|
|
}
|
|
|
|
function handdleGotoDetail(id) {
|
|
router.push(`/cook/${id}`)
|
|
}
|
|
|
|
//mark 周期、内置函数等
|
|
onMounted(async () => {
|
|
box.value.style.height = document.documentElement.clientHeight - 100 + 'px';
|
|
const res = await $http.cookbook.category({ id: -1 })
|
|
clist.value = res.data;
|
|
clist.value.forEach(item => {
|
|
item.label = item.name;
|
|
item.value = item.id;
|
|
item.isLeaf = false;
|
|
item.depth = 1;
|
|
});
|
|
console.log(clist.value);
|
|
|
|
setTimeout(() => {
|
|
getCooks(3, page.value)
|
|
}, 1000);
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped></style> |