cook

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);
 
 });