添加下拉加载分页

src/views/Workshop/creation/creation-list.vue

@@ -25,6 +25,8 @@
 		emit('view-type', 1)
 	})
 	const list = reactive([])
+	const size = ref(10)
+	const page = computed(() => Math.ceil(list.length / size.value) + 1)
 	const loading = ref(false)
 	const finish = ref(false)
 	const selectCount = computed(() => list.filter((v) => v.selected).length)
@@ -43,20 +45,25 @@
 	navLst.forEach((v) => {
 		if (v.flowType === query.value.active) navActive.value = v.value
 	})
-	
+
 	const clickNav = (v) => {
 		if (v.value === navActive.value || loading.value) return
 		navActive.value = v.value
-		onLoad()
+		onBackChooseSave()
+		onLoad('reload')
 	}
-	const onLoad = () => {
+	const onLoad = (type?: 'reload') => {
+		if (type === 'reload') {
+			finish.value = false
+			list.splice(0, list.length)
+		}
 		loading.value = true
-		finish.value = false
-		list.splice(0, list.length)
 		const params = {
 			customerId: generateStore.customerId,
 			type: navActive.value,
-			isLibrary: false
+			isLibrary: false,
+			pageNum: page.value,
+			pageSize: size.value
 		}
 		if (props.isChooseOne) {
 			params['visitRecordId'] = ''
@@ -67,8 +74,8 @@
 			params['visitRecordId'] = generateStore.visitRecordId
 		}
 		getGenerateHistoricals(params)
-			.then((data) => {
-				data?.forEach((v) => {
+			.then((data: any) => {
+				data.records?.forEach((v) => {
 					const obj = {
 						// tryOnId: v.tryOnId,
 						tryOnUrl: v.tryOnUrl,
@@ -85,7 +92,7 @@
 					list.push(obj)
 				})
 				loading.value = false
-				finish.value = true
+				finish.value = !data.hasNext
 			})
 			.catch((err) => {
 				console.error(err)
@@ -228,11 +235,11 @@
 				hGenerateStore.originalTryOn.id = selectedItem.id
 				hGenerateStore.originalTryOn.tryOnUrl = selectedItem.tryOnUrl
 				hGenerateStore.originalTryOn.isLike = selectedItem.isFavorite
-				hGenerateStore.style.id = '';
+				hGenerateStore.style.id = ''
 				hGenerateStore.style.url = selectedItem.styleUrl
 			} else {
 				// style
-				hGenerateStore.style.id = selectedItem.id;
+				hGenerateStore.style.id = selectedItem.id
 				hGenerateStore.style.url = selectedItem.url
 				// selectedItem.isFavorite
 			}
@@ -260,7 +267,14 @@
 		</div>
 		<div class="list">
 			<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
-				<div class="item" v-for="(v, i) in list" :key="i" @click="onItem(v)" :type="navActive">
+				<div
+					class="item"
+					v-for="(v, i) in list"
+					:key="i"
+					@click="onItem(v)"
+					:type="navActive"
+					:class="{ active: (isChooseSave || isChooseOne) && v.selected }"
+				>
 					<img v-lazy="v.tryOnUrl || v.url" />
 					<!-- <div class="corner">
 						<div class="ai" v-if="v.isRegenerated">Gen-AI</div>
@@ -358,12 +372,14 @@
 				.item {
 					width: 47%;
 					height: 62.2rem;
-					// overflow: hidden;
 					border-radius: var(--border-radius);
 					background-color: #fff;
 					margin-bottom: 4rem;
-					border: 0.1rem solid #000;
+					// overflow: hidden;
 					position: relative;
+					&.active {
+						border: 0.3rem solid #d9d9d9;
+					}
 					&[type='Outfit'] {
 						height: 50rem;
 						> img {
@@ -454,7 +470,7 @@
 			}
 		}
 		> .btns {
-			margin: 9rem 0;
+			margin: 5.4rem 0 6.4rem 0;
 			display: flex;
 			justify-content: center;