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>