fix: 列表滚动、详情页跳回

src/views/DetailView.vue

@@ -211,7 +211,7 @@ const fileDownload = ({ fileName, filePath }) => {
 }
 
 const handleReturn = (typeItem) => {
-  router.push({ path: '/', query: { id: typeItem.id, toolName: typeItem.toolName } })
+  router.push({ path: '/', query: { id: typeItem.id } })
 }
 </script>
 

src/views/HomeView.vue

@@ -21,7 +21,7 @@
             right-icon="search"
             @search="handleSearch"
             @clear="handleClear"
-            @click-right-icon="handleSearch(searchValueRef)"
+            @click-right-icon="handleSearch"
           />
         </div>
         <div class="w-full text-xs px-4 flex">
@@ -116,7 +116,7 @@
     >
       <div class="tool-card-content w-full px-4 flex flex-wrap md:max-w-[1440px] mx-auto">
         <div class="tool-card" v-for="item in toolsListRef" :key="item" @click="handleDetail(item)">
-          <div class="tool-img" :class="`bg-[url('${devPath + item.picturePath}')]`"></div>
+          <img class="tool-img" :src="`${devPath + item.picturePath}`"></img>
           <div class="px-3 pt-2 flex-1 flex flex-col">
             <div class="font-[PingFang-Heavy] truncate">{{ item.toolName }}</div>
             <div class="text-[#585F66] text-xs mt-1 line-clamp-2 break-all">
@@ -158,6 +158,7 @@ const device = computed(() => {
 })
 // 搜索内容
 const searchValueRef = ref('')
+const totalPage = ref(10)
 // 热门工具列表
 const hotToolsRef = ref(hotToolsList)
 
@@ -173,69 +174,46 @@ const loadingRef = ref(false)
 const finished = ref(false)
 // 末尾补齐的个数
 const noneCardNum = ref(0)
-const onLoad = () => {
-  // 异步更新数据
-  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
-  // setTimeout(() => {
-  //   for (let i = 0; i < 20; i++) {
-  //     toolsListRef.value.push(toolsListRef.value.length + 1)
-  //   }
-  noneCardNum.value = getFillNums('.tool-card-content', toolsListRef.value, 220)
-  //   // 加载状态结束
-  loadingRef.value = false
-  //   // 数据全部加载完成
-  //   if (toolsListRef.value.length >= 100) {
-  //     finished.value = true
-  //   }
-  // }, 1000)
+const onLoad = (value) => {
+  listTools({
+      level: '3',
+      parentId: value,
+      materialName: searchValueRef.value,
+      pageSize: totalPage.value,
+      delFlag: 0
+    }).then((res) => {
+      toolsListRef.value = res.rows
+       //  加载状态结束
+       loadingRef.value = false
+      if(totalPage.value >res.total){
+        finished.value = true
+      }else{
+        totalPage.value +=5
+      }
+
+    })
+    setTimeout(()=>{
+      noneCardNum.value = getFillNums('.tool-card-content', toolsListRef.value, 220)
+    },500 )
 }
 const init = () => {
-  loadingRef.value = false
+  loadingRef.value = true
   // 一级分类
   listTools({
     level: '1',
-    pageSize: 999
   }).then((res) => {
     typeOptions1Ref.value = res.rows
   })
-  if (route.query.id) {
-    searchValueRef.value = route.query.toolName
-    type1ValueRef.value = route.query.id
-    listTools({
-      level: '2',
-      parentId: route.query.id,
-      pageSize: 999
-    }).then((res) => {
-      typeOptions2Ref.value = res.rows
-    })
-    listTools({
-      level: '3',
-      parentId: route.query.id,
-      pageSize: 999,
-      delFlag: 0
-    }).then((res) => {
-      toolsListRef.value = res.rows
-    })
+    type1ValueRef.value = route.query.id ? Number(route.query.id) : ''
     type2ValueRef.value = ''
-  } else {
-    Promise.allSettled([
       // 二级分类
       listTools({
         level: '2',
-        pageSize: 999
-      }),
-      // 未选中分类 默认列表
-      listTools({
-        level: '3',
-        delFlag: 0,
-        pageSize: 999
-      })
-    ]).then((res) => {
-      typeOptions2Ref.value = res[0].value.rows
-      toolsListRef.value = res[1].value.rows
-      onLoad()
+        parentId: route.query.id?route.query.id:'',
+      }).then((res) => {
+      typeOptions2Ref.value = res.rows
     })
-  }
+   onLoad(route.query.id)
 }
 init()
 
@@ -251,7 +229,7 @@ const handleSearch = () => {
 // 点击热门关键字搜索
 const handleKeySearch = (toolName) => {
   searchValueRef.value = toolName
-  handleSearch(toolName)
+  handleSearch()
 }
 
 // 点击一级菜单
@@ -265,28 +243,13 @@ const handleChangeDropdownOfType1 = (value) => {
   }).then((res) => {
     typeOptions2Ref.value = res.rows
   })
-  listTools({
-    level: '3',
-    parentId: value,
-    pageSize: 999,
-    delFlag: 0
-  }).then((res) => {
-    toolsListRef.value = res.rows
-    handleSearch(value)
-  })
+  onLoad(value)
   type2ValueRef.value = ''
 }
 // 点击二级菜单
 const handleChangeDropdownOfType2 = (value) => {
   resetList()
-  listTools({
-    level: '3',
-    parentId: value,
-    pageSize: 999
-  }).then((res) => {
-    toolsListRef.value = res.rows
-    handleSearch(value)
-  })
+  onLoad(value)
   type2ValueRef.value = value
 }
 
@@ -294,7 +257,6 @@ const handleClear = () => {
   searchValueRef.value = ''
 }
 const handleDetail = (row) => {
-  console.log(row)
   router.push({ path: '/detail', query: { id: row.id, toolName: row.toolName } })
 }
 </script>