chore: 推荐模板的改进

src/views/workbench/components/recommend-template.vue

@@ -30,7 +30,8 @@ const pagingInfo = ref({
 })
 const columnHeights = ref<number[]>([])
 const waterfallHeight = ref(900)
-const templateIsLoading = ref(false)
+const templateClassifyIsLoading = ref(false)
+const templateBottomIsLoading = ref(false)
 const templateListEl = ref(null)
 const smooth = ref(false)
 
@@ -45,7 +46,10 @@ const templateClassify = [
   { value: TemplateType.FESTIVAL_HOTS_SPOTS, label: '節日熱點' },
 ]
 
-watch(checkedClassifyValue, () => {
+watch(checkedClassifyValue, async () => {
+  templateClassifyIsLoading.value = true
+  templateList.value = []
+  newTemplateList.value = []
   pagingInfo.value = {
     pageNo: 1,
     totalPages: 1,
@@ -53,17 +57,17 @@ watch(checkedClassifyValue, () => {
     totalRows: 0,
   }
   columnHeights.value = Array(6).fill(0)
-  getTemplateList(true)
+  await getTemplateList(true)
 })
 
-watch(bottom, (newBottom) => {
+watch(bottom, async (newBottom) => {
   if (newBottom) {
     if (pagingInfo.value.pageNo < pagingInfo.value.totalPages) {
+      templateBottomIsLoading.value = true
       pagingInfo.value.pageNo += 1
-      getTemplateList()
+      await getTemplateList()
     }
   }
-  templateIsLoading.value = false
 })
 
 onMounted(() => {
@@ -72,8 +76,9 @@ onMounted(() => {
 })
 
 async function getTemplateList(refresh = false) {
-  if (templateIsLoading.value) return
-  templateIsLoading.value = true
+  if (templateBottomIsLoading.value) {
+    if (templateClassifyIsLoading.value) return
+  }
 
   try {
     const res = await fetchDigitalHumanTemplateStatusList<DigitalTemplate[]>(
@@ -93,7 +98,8 @@ async function getTemplateList(refresh = false) {
 
     pagingInfo.value = res.pagingInfo as PagingInfo
   } finally {
-    templateIsLoading.value = false
+    templateClassifyIsLoading.value = false
+    templateBottomIsLoading.value = false
   }
 }
 async function calculatePositions(templates: any[]) {
@@ -125,19 +131,12 @@ async function calculatePositions(templates: any[]) {
   return positions
 }
 
-function calculateImageHeight(template: { coverUrl: string }): Promise<number> {
+function calculateImageHeight(template): Promise<number> {
   return new Promise((resolve) => {
-    const img = new Image()
-    img.src = template.coverUrl
-    img.onload = () => {
-      const naturalWidth = img.naturalWidth
-      const naturalHeight = img.naturalHeight
+    const renderWidth = 170
+    const renderHeight = (template.videoParams.height / template.videoParams.width) * renderWidth
 
-      const renderWidth = 170
-      const renderHeight = (naturalHeight / naturalWidth) * renderWidth
-
-      resolve(renderHeight)
-    }
+    resolve(renderHeight)
   })
 }
 
@@ -178,11 +177,11 @@ function handleToCreation(template: DigitalTemplate) {
     </div>
     <div
       ref="templateListEl"
-      class="h-screen w-full overflow-y-scroll bg-white px-[24px] pb-[16px]"
+      class="h-screen min-h-[900px] w-full overflow-y-scroll bg-white px-[24px] pb-[16px]"
       style="scrollbar-width: none"
     >
       <div
-        v-show="pagingInfo.totalPages !== 0"
+        v-show="!templateClassifyIsLoading"
         class="page-main relative h-auto min-h-[900px] w-full"
         :style="{ height: waterfallHeight + 'px' }"
       >
@@ -221,7 +220,7 @@ function handleToCreation(template: DigitalTemplate) {
         </div>
       </div>
       <div class="flex justify-center">
-        <n-spin v-show="templateIsLoading" size="large" />
+        <n-spin v-show="templateClassifyIsLoading" size="large" />
       </div>
       <div
         v-show="pagingInfo.pageNo === pagingInfo.totalPages || pagingInfo.totalPages === 0"