Aida_Purchaser_Front/src/views/digitalItem/commodity-list.vue

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { getListingMallListApi } from '@/api/listing'

const props = defineProps({
	getListData: {
		type: Object,
		default: () => ({
			designFor: '',
			categories: [],
			sortField: '',
		})
	}
})
const emit = defineEmits([
	'addShopping',
	'openDetail',
	'getListingMallList'
])
let data = reactive({
})
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 clearData = () => {
	commodityList.value = []
	getListingListData.pageNum = 1
	getListingListData.isNoData = true
}

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({reset,clearData,commodityList,getListingListData})
const {} = toRefs(data);
</script>
<template>
	<div class="commodityList">
		<div class="list">
			<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>
</template>
<style lang="less" scoped>
	.commodityList{
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
		margin-top: -1px;
		.list{
			width: 100%;
			flex: 1;
			// display: grid;
			// align-content: start;
			// grid-template-columns: repeat(3, 1fr);
			overflow: hidden;
			display: grid;
			align-content: start;
			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;
				padding: 1.2rem;
				border-bottom: 0.5px solid #585858;
				border-right: 0.5px solid #585858;
				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>