feat: 筛选时获取数据

package-lock.json

@@ -13,6 +13,7 @@
 				"crypto-js": "^4.2.0",
 				"element-plus": "^2.13.2",
 				"gsap": "^3.13.0",
+				"lodash-es": "^4.18.1",
 				"markdown-it": "^14.1.0",
 				"md5": "^2.3.0",
 				"normalize.css": "^8.0.1",
@@ -4790,9 +4791,9 @@
 			"license": "MIT"
 		},
 		"node_modules/lodash-es": {
-			"version": "4.17.23",
-			"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.23.tgz",
-			"integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
+			"version": "4.18.1",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+			"integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
 			"license": "MIT"
 		},
 		"node_modules/lodash-unified": {
@@ -12111,9 +12112,9 @@
 			"integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="
 		},
 		"lodash-es": {
-			"version": "4.17.23",
-			"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.23.tgz",
-			"integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg=="
+			"version": "4.18.1",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+			"integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A=="
 		},
 		"lodash-unified": {
 			"version": "1.0.3",

package.json

@@ -17,6 +17,7 @@
 		"crypto-js": "^4.2.0",
 		"element-plus": "^2.13.2",
 		"gsap": "^3.13.0",
+		"lodash-es": "^4.18.1",
 		"markdown-it": "^14.1.0",
 		"md5": "^2.3.0",
 		"normalize.css": "^8.0.1",

src/views/wardrobe/Assets.vue

@@ -38,7 +38,7 @@
 					</div>
 				</div>
 			</div>
-			<div v-if="dataList.length" class="data-list-container">
+			<div ref="assetsScrollRef" v-if="dataList.length" class="data-list-container" @scroll.passive="handleAssetsScroll">
 				<div ref="dataListRef" class="data-list">
 					<div
 						v-for="(item, index) in dataList"
@@ -85,12 +85,13 @@
 	import { useI18n } from 'vue-i18n'
 	import { useRouter } from 'vue-router'
 	import { useClothesCategories } from '@/utils/ClothesCategory'
-	import img from '@/assets/images/collectionStory/Rectangle.png'
 	import Empty from './Empty.vue'
 	import FilterSidebar from './FilterSidebar.vue'
 	import { fetchMyWardrobe } from '@/api/user'
 	import { useUserInfoStore } from '@/stores'
 
+	import { debounce } from 'lodash-es'
+
 	const buyerId = useUserInfoStore().state.userInfo?.userId
 
 	interface FilterOption {
@@ -124,17 +125,14 @@
 		genders.value.filter((option) => option.value !== 'all').map((option) => option.value)
 	)
 
-	const dataList = ref([
-		{
-			url: img,
-			title: 'Windswept Burden',
-			price: '$100.00',
-			checked: false
-		}
-	])
+	const dataList = ref([])
 	const dataListRef = ref<HTMLDivElement | null>(null)
+	const assetsScrollRef = ref<HTMLDivElement | null>(null)
 	const gridColumnCount = shallowRef(1)
 	let gridResizeObserver: ResizeObserver | null = null
+	const assetsRequestId = ref(0)
+	const isLoadingAssets = ref(false)
+	const hasMoreAssets = ref(true)
 
 	const filters = reactive({
 		categories: [
@@ -149,28 +147,52 @@
 		],
 		genders: ['male', 'female']
 	})
-	const pageParams= reactive({
+	const pageParams = reactive({
 		page: 1,
 		size: 10
 	})
-	const handleGetAssets = () => {
-		fetchMyWardrobe({
-			buyerId: buyerId,
-			categories: [],
-			designFor: filters.genders.length > 1 ? 'all' : filters.genders[0],
-			page: pageParams.page,
-			size: pageParams.size
-		}).then(res => {
-			console.log(res)
-			dataList.value = res.content
-		})
+	const handleGetAssets = async () => {
+		if (isLoadingAssets.value || !hasMoreAssets.value) return
+		isLoadingAssets.value = true
+		const requestId = ++assetsRequestId.value
+
+		try {
+			const res = await fetchMyWardrobe({
+				buyerId: buyerId,
+				categories: [],
+				designFor: filters.genders.length > 1 ? 'all' : filters.genders[0] || 'all',
+				page: pageParams.page,
+				size: pageParams.size
+			})
+
+			if (requestId !== assetsRequestId.value) return
+
+			const content = res.content ?? []
+			if (pageParams.page === 1) {
+				dataList.value = content
+			} else {
+				dataList.value = [...dataList.value, ...content]
+			}
+
+			hasMoreAssets.value = content.length >= pageParams.size
+			if (hasMoreAssets.value) {
+				pageParams.page += 1
+			}
+		} finally {
+			if (requestId === assetsRequestId.value) {
+				isLoadingAssets.value = false
+			}
+		}
 	}
 
 	watch(
 		() => filters,
-		(val) => {
-			console.log(val)
-		},
+		debounce(() => {
+			pageParams.page = 1
+			hasMoreAssets.value = true
+			assetsRequestId.value += 1
+			handleGetAssets()
+		}, 500),
 		{ deep: true }
 	)
 
@@ -255,6 +277,16 @@
 		console.log(items)
 	}
 
+	const handleAssetsScroll = () => {
+		const el = assetsScrollRef.value
+		if (!el || isLoadingAssets.value || !hasMoreAssets.value) return
+
+		const reachBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 120
+		if (reachBottom) {
+			handleGetAssets()
+		}
+	}
+
 	const updateGridColumnCount = () => {
 		if (!dataListRef.value) {
 			gridColumnCount.value = 1
@@ -278,20 +310,29 @@
 		router.push('/digitalItem')
 	}
 
-	onMounted(() => {
-		handleGetAssets()
-		nextTick(() => {
+	watch(
+		() => dataList.value.length,
+		async (len) => {
+			if (!len) return
+
+			await nextTick()
+
 			updateGridColumnCount()
 
-			if (!dataListRef.value || typeof ResizeObserver === 'undefined') {
-				return
-			}
+			gridResizeObserver?.disconnect()
 
-			gridResizeObserver = new ResizeObserver(() => {
-				updateGridColumnCount()
-			})
-			gridResizeObserver.observe(dataListRef.value)
-		})
+			if (dataListRef.value) {
+				gridResizeObserver = new ResizeObserver(() => {
+					updateGridColumnCount()
+				})
+
+				gridResizeObserver.observe(dataListRef.value)
+			}
+		},
+		{ immediate: true }
+	)
+	onMounted(() => {
+		handleGetAssets()
 	})
 
 	onUnmounted(() => {