youzitree/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cook
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m41s
Details

Browse Source
This commit is contained in:
youzi 2025-01-05 16:20:50 +08:00
parent 2dc6dfa0c1
commit 0bbcc06a85
1 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/cookbook/index.vue
View File

@ -2,18 +2,29 @@
<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" />
:show-path="true" remote :on-load="handleLoad" @update:value="handdleSelect" />
</div>
<n-scrollbar>
<div class="flex flex-wrap">
<div class="mt-4 px-10 w-[40%] flex mx-2 py-3 bg-[#f1f2f330] items-center hover:shadow-lg hover:bg-[#a81b2b20]" v-for="(i, idx) in cooks.list">
<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">
<div class="w-[80px] h-[80px] rounded-sm">
<img class="w-[80px] h-[80px] rounded-sm" :src="i.cover" alt="">
</div>
<div class="ml-3" style="width: calc(100% - 120px);">
<div class="text-2xl font-bold mt-2">{{i.name}}</div>
<div class="text-sm mt-2">{{i.desc}}</div>
</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>
@ -24,14 +35,17 @@
//mark import
//mark data
const box = ref(null);
const category = ref(null)
const clist = ref([])
const cooks = ref([]);
const cooks = ref({ list: [] });
const page = ref(1);
const card = ref(null);
const cardWidth = ref(0);
//mark method
async function getCate(id) {
const res = await $http.cookbook.category({ id });
@ -40,9 +54,17 @@ async function getCate(id) {
}
async function getCooks(id, page) {
const res = await $http.cookbook.list({ id, page });
console.log(111111, res.data);
cooks.value = res.data;
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) {
@ -70,13 +92,14 @@ async function getChildren(option) {
}
function handdleSelect() {
console.log(category.value);
getCooks(category.value, page.value)
}
//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 => {
@ -88,7 +111,7 @@ onMounted(async () => {
console.log(clist.value);
setTimeout(() => {
getCooks(3, page.vue)
getCooks(3, page.value)
}, 1000);
});