digital item页面

src/views/digitalItem/commodity-list.vue

@@ -1,68 +1,103 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-import img from "@/assets/images/collectionStory/Rectangle.png";
-//const props = defineProps({
-//})
+import { getListingMallListApi } from '@/api/listing'
+
+const props = defineProps({
+	getListData: {
+		type: Object,
+		default: () => ({
+			designFor: '',
+			categories: [],
+			sortField: '',
+		})
+	}
+})
 const emit = defineEmits([
 	'addShopping',
-	'openDetail'
+	'openDetail',
+	'getListingMallList'
 ])
 let data = reactive({
 })
-const list = ref([
-	{
-		url: img,
-		title: "Windswept Burden",
-		price: "$100.00",
-	},{
-		url: img,
-		title: "Windswept Burden",
-		price: "$100.00",
-	},{
-		url: img,
-		title: "Windswept Burden",
-		price: "$100.00",
-	},{
-		url: img,
-		title: "Windswept Burden",
-		price: "$100.00",
-	},{
-		url: img,
-		title: "Windswept Burden",
-		price: "$100.00",
-	},{
-		url: img,
-		title: "Windswept Burden",
-		price: "$100.00",
-	},{
-		url: img,
-		title: "Windswept Burden",
-		price: "$100.00",
-	},{
-		url: img,
-		title: "Windswept Burden",
-		price: "$100.00",
-	},
-])
-const type = ref('All')
 const addShopping = (item) => {
 	emit('addShopping', item)
 }
 const openDetail = (item) => {
 	emit('openDetail', item)
 }
+
+const commodityList = ref([])
+
+const getListingListData = reactive({
+	pageSize: 10,
+	pageNum: 1,
+	isShowMark:false,
+	isNoData:false,
+})
+
+const reset = () => {
+	commodityList.value = []
+	getListingListData.pageNum = 1
+	getListingListData.isShowMark = false
+	getListingListData.isNoData = false
+}
+
+const getListingMallList = ()=>{
+	getListingListData.isShowMark = true
+	getListingListData.isNoData = false
+	let data = {
+		designFor: props.getListData.designFor,
+		// categories: [all],
+		categories: props.getListData.categories[0] == 'all' ? [] : props.getListData.categories,
+		sortField: props.getListData.sortField,
+		sortOrder: 'desc',
+		pageSize: getListingListData.pageSize,
+		pageNum: getListingListData.pageNum,
+
+	}
+	getListingMallListApi(data).then(res => {
+		if(res.content.length == 0)getListingListData.isNoData = true
+		commodityList.value.push(...res.content)
+		getListingListData.isShowMark = false
+	}).catch(()=>{
+		getListingListData.isNoData = true
+		getListingListData.isShowMark = false
+	})
+}
+
+
+const vObserve  = {
+	mounted (el,binding) {
+		getListingListData.isShowMark = false	
+		getListingListData.isNoData = false
+		new IntersectionObserver(
+		(entries, observer) => {
+				// 如果不是相交，则直接返回
+				// console.log(entries[0]);
+				if (!entries[0].intersectionRatio) return;
+				binding.value()
+				getListingListData.pageNum += 1
+			},
+			// { root:worksPage }
+		).observe(el);
+	}
+}
 onMounted(()=>{
 })
 onUnmounted(()=>{
 })
-defineExpose({})
+defineExpose({reset,commodityList,getListingListData})
 const {} = toRefs(data);
 </script>
 <template>
 	<div class="commodityList">
 		<div class="list">
-			<div class="item" v-for="item in list" :key="item.url">
-				<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)" @openDetail="openDetail(item)"></CommodityItem>
+			<div class="item" v-for="item in commodityList" :key="item.url">
+				<CommodityItem :url="item.cover" :name="item.title" :price="item.price" @addShopping="addShopping(item)" @openDetail="openDetail(item)"></CommodityItem>
+			</div>
+			<div v-show="!getListingListData.isNoData" class="material_content_list_loding">
+				<span class="page_loading" v-show="!getListingListData.isShowMark" v-observe="getListingMallList"></span>
+				<img v-if="getListingListData.isShowMark" src="@/assets/images/brand/brandLoading.gif" alt="">
 			</div>
 		</div>
 	</div>
@@ -81,12 +116,12 @@ const {} = toRefs(data);
 			// align-content: start;
 			// grid-template-columns: repeat(3, 1fr);
 			overflow: hidden;
-
 			display: grid;
 			align-content: start;
-			grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
+			grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
 			border-top: 0.5px solid #585858;
 			padding: .5px 0 0 .5px;
+			
 			/* 垂直线（右边框） */
 			.item{
 				position: relative;
@@ -96,6 +131,25 @@ const {} = toRefs(data);
 				margin-right: -1px;
 				margin-bottom: -1px;
 			}
+			> .material_content_list_loding{
+				width: 100%;
+				height: 5rem;
+				aspect-ratio: 1/1;
+				grid-column: 1 / -1;
+				overflow: hidden;
+				display: flex;
+				flex-shrink: 0;
+				justify-content: center;
+				> .page_loading{
+					width: 5rem;
+					height: 5rem;
+				}
+				> img{
+					width: 5rem;
+					height: 5rem;
+					object-fit: contain;
+				}
+			}
 		}
 	}
 </style>

src/views/digitalItem/index.vue

@@ -10,47 +10,45 @@ import { getListingMallListApi } from '@/api/listing'
 defineOptions({
   name: 'digitalItem'
 })
-
-const categories = ref([''])
-const gender = ref([''])
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
+const categories = ref(['all'])
+const gender = ref(['all'])
 const digitalItemRef = ref(null)
 const scrollTop = ref(0)
 const router = useRouter()
+const commodityListRef = ref(null)
 
 const searechTypeList = ref([
 	{
-		value:'Best Selling',
+		value:'salesVolume',
 		label:'Best Selling'
 	},{
-		value:'Price: Low to High',
+		value:'price',
 		label:'Price: Low to High'
 	},{
-		value:'Newest First',
+		value:'updateTime',
 		label:'Newest First'
 	},
 ])
-const searechType = ref('Newest First')
+
+const searechType = ref('updateTime')
 const addShopping = (item) => {}
 const openDetail = (item) => {
 	scrollTop.value = digitalItemRef.value.scrollTop
 	router.push({
-		path: '/digitalItem/' + 123,
+		path: '/digitalItem/' + item.id,
 	})
 }
 const handleChange = (val) => {
-	
+	categories.value = val.categories
+	gender.value = val.gender
+	commodityListRef.value.reset()
 }
-const getListingMallList = ()=>{
-	let data = {
-		// designFor
-	}
-	// getListingMallListApi().then(res => {
-
-	// })
+const updateSort = () => {
+	commodityListRef.value.reset()
 }
 onActivated(()=>{
 	digitalItemRef.value.scrollTop = scrollTop.value
@@ -72,13 +70,13 @@ defineExpose({})
 		</div>
 		<div class="filters">
 			<div class="filter-item">
-				<el-select v-model="categories" placeholder="Sort By" :teleported="false">
+				<el-select v-model="searechType" @change="updateSort" placeholder="Sort By" :teleported="false">
 					<template #label="{ label }">
 						<span class="header-label">Sort By</span>
 						<span class="header-value">{{ label }}</span>
 					</template>
 					<el-option
-						v-for="item in categoriesList"
+						v-for="item in searechTypeList"
 						:key="item.label"
 						:value="item.value"
 						:label="item.label"
@@ -91,8 +89,17 @@ defineExpose({})
 				<MerchantInfo @change="handleChange"></MerchantInfo>
 			</div>
 			<div class="commodity-list">
-				<CommodityList v-if="true" @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
-				<div v-else class="null">
+				<CommodityList 
+					v-show="commodityListRef?.commodityList?.length > 0 || !commodityListRef?.getListingListData.isNoData" 
+					ref="commodityListRef"
+					:getListData="{
+						designFor: gender[0],
+						categories: categories,
+						sortField: searechType,
+					}"
+					@addShopping="addShopping" 
+					@openDetail="openDetail"></CommodityList>
+				<div v-show="commodityListRef?.commodityList?.length == 0" class="null">
 					<sc-list-null 
 						nullImage="shopping-cart"
 						:showButton="false" 
@@ -100,6 +107,7 @@ defineExpose({})
 						tip="Try adjusting your filters or refreshing the page."
 					/>
 				</div>
+				
 			</div>
 		</div>
 		<Footer></Footer>
@@ -220,8 +228,13 @@ defineExpose({})
 				border-right: 0.5px solid #585858;
 				margin-right: 9rem;
 				display: flex;
+				position: relative;
 				.null{
 					flex: 1;
+					position: absolute;
+					width: 100%;
+					height: 100%;
+					background-color: #fff;
 				}
 			}
 		}

src/views/digitalItem/merchant-info.vue

@@ -16,12 +16,12 @@ const genderList = computed(() => [
   { label: t('Wardrobe.assets.genders.male'), value: 'male' },
   { label: t('Wardrobe.assets.genders.female'), value: 'female' }
 ])
-const categories = ref([''])
-const gender = ref([''])
+const categories = ref(['all'])
+const gender = ref(['all'])
 
 const clearFilters = () => {
-	categories.value = ['']
-	gender.value = ['']
+	categories.value = ['all']
+	gender.value = ['all']
 	handleChange()
 }
 const handleChange = () => {