略略略

src/views/nuic/index.vue

@@ -62,6 +62,7 @@
 				}
 			})
 		} else {
+			data.vibe = JSON.parse(data.vibe)
 			onSubmit(data)
 		}
 	}

src/views/nuic/nuic-2.vue

@@ -3,9 +3,9 @@
 		<p class="title" v-html="$t('Nuic.nuic2Title')"></p>
 		<div class="list">
 			<div v-for="v in list" :key="v.id" @click="v.active = !v.active">
-				<img :src="v.url" draggable="false" />
+				<img :src="v.imageUrl" draggable="false" />
 				<div class="active" v-show="v.active">
-					<span>{{ v.title }}</span>
+					<span>{{ v.styleName }}</span>
 				</div>
 			</div>
 		</div>
@@ -22,28 +22,35 @@
 <script setup lang="ts">
 	import { computed, ref } from 'vue'
 	import { useRouter } from 'vue-router'
+	import { GetUserStyleImages } from '@/api/user'
 	const router = useRouter()
 	const emit = defineEmits(['next'])
-	const list = ref([
-		{ id: 1, url: '/image/nuic/style-1.png', title: '凳子', active: false },
-		{ id: 2, url: '/image/nuic/style-2.png', title: '沙发', active: false },
-		{ id: 3, url: '/image/nuic/style-3.png', title: '凳子', active: false },
-		{ id: 4, url: '/image/nuic/style-4.png', title: '桌子', active: false },
-		{ id: 5, url: '/image/nuic/style-5.png', title: '桌子', active: false },
-		{ id: 6, url: '/image/nuic/style-6.png', title: '桌子', active: false },
-		{ id: 7, url: '/image/nuic/style-7.png', title: '沙发', active: false },
-		{ id: 8, url: '/image/nuic/style-8.png', title: '桌子', active: false }
-	])
+	const list = ref([])
+	const pageSize = ref(8)
+	const pageNum = ref(1)
+	const totalPages = ref(1)
 	const onNext = () => {
 		const data = {
-			vibe: list.value
-				.filter((v) => v.active)
-				.map((v) => v.id)
-				.join(',')
+			vibe: JSON.stringify(list.value.filter((v) => v.active).map((v) => v.id))
 		}
 		emit('next', data)
 	}
-	const onLoadMore = () => {}
+	const onLoadMore = () => {
+		GetUserStyleImages({
+			pageNum: pageNum.value,
+			pageSize: pageSize.value
+		}).then((res) => {
+			if (!res) return
+			list.value = res.images.map((v) => ({
+				...v,
+				active: false
+			}))
+			totalPages.value = res.totalPages
+			pageNum.value++
+			if (pageNum.value > totalPages.value) pageNum.value = 1
+		})
+	}
+	onLoadMore()
 </script>
 
 <style lang="less" scoped>