diff --git a/src/views/cookbook/index.vue b/src/views/cookbook/index.vue index daf83a2..1d5d05e 100644 --- a/src/views/cookbook/index.vue +++ b/src/views/cookbook/index.vue @@ -4,11 +4,11 @@ <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> + <n-scrollbar class="h-120" :style="{maxHeight:'calc(100vh - 230px)'}"> <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)"> + v-for="(i, idx) in cooks.rlist" @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> @@ -36,13 +36,14 @@ + //mark import //mark data const box = ref(null); const category = ref(null) const clist = ref([]) -const cooks = ref({ list: [] }); +const cooks = ref({ rlist: [] }); const page = ref(1); const card = ref(null); const cardWidth = ref(0); @@ -54,18 +55,20 @@ async function getCate(id) { return res.data; } -async function getCooks(id, page) { +async function getCooks(id) { setTimeout(async () => { - const res = await $http.cookbook.list({ id, page }); + const res = await $http.cookbook.list({ id, page: page.value }); + cooks.value = Object.assign({}, cooks.value, res.data); + cooks.value.rlist.push(...res.data.list); + page.value++; + setTimeout(async () => { + const res2 = await $http.cookbook.list({ id, page: page.value }); + // cooks.value= Object.assign({}, cooks.value, res2.data); + cooks.value.rlist.push(...res2.data.list); + // console.log(333, cooks.value.rlist); + }, 1000); - 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); + }, 500); } function handleLoad(option) { @@ -73,7 +76,7 @@ function handleLoad(option) { window.setTimeout(async () => { option.children = await getChildren(option); resolve(); - }, 1e3); + }, 500); }); } async function getChildren(option) { @@ -95,7 +98,9 @@ async function getChildren(option) { function handdleSelect() { console.log(category.value); - getCooks(category.value, page.value) + cooks.value = { rlist: [] } + page.value = 1; + getCooks(category.value) } function handdleGotoDetail(id) { @@ -113,10 +118,13 @@ onMounted(async () => { item.isLeaf = false; item.depth = 1; }); - console.log(clist.value); + // console.log(clist.value); + + cooks.value = { rlist: [] } + page.value = 1; setTimeout(() => { - getCooks(3, page.value) + getCooks(3) }, 1000); });