From 8db7c7d92bbb38e06e9dd9f12e3883db747c6203 Mon Sep 17 00:00:00 2001
From: cherishsince <cherishsince@aliyun.com>
Date: Tue, 18 Jun 2024 14:31:14 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=A2=9E=E5=8A=A0=E3=80=91image=20tas?=
 =?UTF-8?q?k=20=E5=A2=9E=E5=8A=A0=E6=BB=9A=E5=8A=A8=E5=88=86=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ai/image/ImageTask.vue | 48 ++++++++++++++++++++++++++------
 1 file changed, 40 insertions(+), 8 deletions(-)

diff --git a/src/views/ai/image/ImageTask.vue b/src/views/ai/image/ImageTask.vue
index 8ada16a6..04e8cadb 100644
--- a/src/views/ai/image/ImageTask.vue
+++ b/src/views/ai/image/ImageTask.vue
@@ -1,12 +1,15 @@
 <template>
   <el-card class="dr-task" body-class="task-card" shadow="never">
     <template #header>绘画任务</template>
-    <ImageTaskCard
-      v-for="image in imageList"
-      :key="image"
-      :image-detail="image"
-      @on-btn-click="handlerImageBtnClick"
-      @on-mj-btn-click="handlerImageMjBtnClick"/>
+    <div class="task-image-list" ref="imageTaskRef" @scroll="handleTabsScroll">
+      <ImageTaskCard
+        v-for="image in imageList"
+        :key="image"
+        :image-detail="image"
+
+        @on-btn-click="handlerImageBtnClick"
+        @on-mj-btn-click="handlerImageMjBtnClick"/>
+    </div>
   </el-card>
   <!-- 图片 detail 抽屉 -->
   <ImageDetailDrawer
@@ -26,6 +29,10 @@ const imageList = ref<ImageDetailVO[]>([]) // image 列表
 const imageListInterval = ref<any>() // image 列表定时器，刷新列表
 const isShowImageDetail = ref<boolean>(false) // 是否显示 task 详情
 const showImageDetailId = ref<number>(0) // 是否显示 task 详情
+const imageTaskRef = ref<any>() // ref
+const imageTaskLoading = ref<boolean>(false) // loading
+const pageNo = ref<number>(1) // page no
+const pageSize = ref<number>(20) // page size
 
 /**  抽屉 - close  */
 const handlerDrawerClose = async () => {
@@ -41,8 +48,13 @@ const handlerDrawerOpen = async () => {
  * 获取 - image 列表
  */
 const getImageList = async () => {
-  const { list } = await ImageApi.getImageList({pageNo: 1, pageSize: 20})
-  imageList.value = list
+  imageTaskLoading.value = true
+  try {
+    const { list } = await ImageApi.getImageList({pageNo: pageNo.value, pageSize: pageSize.value})
+    imageList.value.push.apply(imageList.value, list)
+  } finally {
+    imageTaskLoading.value = false
+  }
 }
 
 /**  图片 - btn click  */
@@ -95,6 +107,18 @@ const downloadImage = async (imageUrl) => {
   }
 }
 
+const handleTabsScroll = async () => {
+  if (imageTaskRef.value) {
+    const { scrollTop, scrollHeight, clientHeight } = imageTaskRef.value;
+    console.log('scrollTop', scrollTop, clientHeight, scrollHeight)
+    if (scrollTop + clientHeight >= scrollHeight - 20 && !imageTaskLoading.value) {
+      console.log('分页')
+      pageNo.value = pageNo.value + 1
+      await getImageList();
+    }
+  }
+}
+
 /** 暴露组件方法 */
 defineExpose({getImageList})
 
@@ -118,12 +142,20 @@ onUnmounted(async () => {
 
 <style lang="scss">
 .task-card {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+.task-image-list {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-content: flex-start;
   height: 100%;
   overflow: auto;
+  padding: 20px;
+  padding-bottom: 300px;
 
   >div {
     margin-right: 20px;