digital item页面

src/components/checked.vue

@@ -6,34 +6,42 @@ const props = defineProps({
 		default:()=>[]
 	},
 	selected:{
-		type:String,
-		default:()=>''
+		type:Array,
+		default:()=>[]
 	}
 })
 const emit = defineEmits([
 	'update:selected','change'
 ])
 const checkList = computed(()=>{
-	if(props.selected[0] === ''){
+	if(props.selected[0] === 'all'){
 		return props.list.map(item => item.value)
 	}else{
 		return [...props.selected]
 	}
 })
 const handleChange = (val) => {
-	emit('update:selected', val)
-	emit('change', val)
+	let data = val.filter(item => item !== 'all')
+	if(val.length == 0)return
+	if(data.length == props.list.length){
+		data = ['all']
+	}else{
+		data = [...val]
+	}
+	emit('update:selected', data)
+	emit('change', data)
 }
 const checkAll = computed(()=>{
 	return checkList.value.length === props.list.length
 })
 const handleCheckAllChange = (val) => {
 	let data = []
-	if(val){
-		data = props.list.map(item => item.value)
+	if(val && props.selected[0] !== 'all'){
+		data = ['all']
+		// data = props.list.map(item => item.value)
+		emit('update:selected', data)
+		emit('change', data)
 	}
-	emit('update:selected', data)
-	emit('change', data)
 }
 let data = reactive({
 })

src/views/brand/index.vue

@@ -6,8 +6,6 @@ import scListNull from '@/views/shoppingCart/sc-list-null.vue'
 import brandItem from '@/views/brand/brand-item.vue'
 import { getDesignerList } from '@/api/brand'
 
-
-import img from '@/assets/images/collectionStory/Rectangle.png'
 //const props = defineProps({
 //})
 //const emit = defineEmits([

src/views/brandDetail/commodity-list.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
-import img from "@/assets/images/collectionStory/Rectangle.png";
 import { getlistingListApi } from "@/api/listing";
 
 const props = defineProps({
@@ -150,10 +149,9 @@ defineExpose({})
 			// 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;
 			/* 垂直线（右边框） */

src/views/digitalDetail/index.vue

@@ -5,6 +5,8 @@ import img from "@/assets/images/collectionStory/Rectangle.png";
 import myEvent from '@/utils/myEvent'
 import { getListingDetailApi } from '@/api/listing'
 import { useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+
 
 //const props = defineProps({
 //})
@@ -21,8 +23,40 @@ let detail:any = ref({
 	updateTime: '',
 	gender: '',
 })
-const addShopping = (item) => {
-	myEvent.emit('addShopping', item)
+const sketchList = ref([])
+const illustrationList = ref([])
+const productList = ref([])
+const editorialVisualList = ref([])
+const addShopping = () => {
+	console.log(detail.value)
+	if(!detail.value.price) return ElMessage.warning('Please log in first.')
+	let data = {
+		cover: detail.value.images.cover[0],
+		price: detail.value.price,
+		shopName: detail.value.shopName,
+		title: detail.value.title,
+	}
+	myEvent.emit('addShopping', data)
+}
+const goShopping = () => {
+	if(!detail.value.price) return ElMessage.warning('Please log in first.')
+	router.push({path: '/shoppingCart'})
+}
+const setImgList = (list)=>{
+	sketchList.value = list.apparel.map((item:any) => {return {imgUrl:item}})
+	illustrationList.value = list.sketch.map((item:any) => {return {imgUrl:item}})
+	productList.value = list.main_product.map((item:any) => {return {imgUrl:item}})
+
+	editorialVisualList.value = list.product.map((item:any) => {return {imgUrl:item}})
+	if(list.firstFrame){
+		list.firstFrame.forEach((item:any,index) => {
+			editorialVisualList.value.push({
+				imgUrl:item,
+				gif: list.gif[index],
+				video: list.video[index],
+			})
+		})
+	}
 }
 const getListingDetail = ()=>{
 	getListingDetailApi({
@@ -30,8 +64,15 @@ const getListingDetail = ()=>{
 	}).then((res)=>{
 		console.log(res)
 		if(res)detail.value = res
+		setImgList(res.images)
 	})
 }
+// const vObserve  = {
+// 	mounted (el,binding) {
+// 	},
+// 	unmounted (el,binding) {	
+// 	}
+// }
 onMounted(()=>{
 	getListingDetail()
 })
@@ -43,23 +84,38 @@ defineExpose({})
 	<div class="digitalItemDetail">
 		<div class="center">
 			<div class="img-list">
-				<div class="title">
-					<div>Sketch</div>
-					<div>Illustration</div>
-					<div>Product</div>
-				</div>
-				<div class="img">
-					<div class="sketch">
-						<img :src="img" v-for="item in 4" :key="item" alt="">
-					</div>
-					<div class="illustration">
-						<img :src="img" v-for="item in 4" :key="item" alt="">
-					</div>
-					<div class="product">
-						<img :src="img" v-for="item in 4" :key="item" alt="">
+				<div class="left">
+					<div class="title">Sketch</div>
+					<div class="box sketch">
+						<div class="imgBox">
+							<img :src="item?.imgUrl" v-for="item in sketchList" :key="item" alt="">
+						</div>
+					</div>
+				</div>
+				<div class="right">
+					<div class="top">
+						<div class="box">
+							<div class="title">Illustration</div>
+							<div class="imgBox">
+								<img :src="item?.imgUrl" v-for="item in illustrationList" :key="item" alt="">
+							</div>
+						</div>
+						<div class="box">
+							<div class="title">Product</div>
+							<div class="imgBox">
+								<img :src="item?.imgUrl" v-for="item in productList" :key="item" alt="">
+							</div>
+						</div>
+					</div>
+					<div class="bottom">
+						<div class="box aa">
+							<div class="title">Editorial Visual</div>
+							<div class="imgBox">
+								<img :src="item?.gif||item?.imgUrl" v-for="item in editorialVisualList" :key="item" alt="">
+							</div>
+						</div>
 					</div>
 				</div>
-				
 			</div>
 			<div class="img-detail">
 				<div class="back" @click="router.back()">
@@ -69,13 +125,13 @@ defineExpose({})
 					<span>Back</span>
 				</div>
 				<div class="img-info">
-					<div class="img-type">{{ detail.gender.toUpperCase() }} / skirt, blouse, Outwear</div>
+					<div class="img-type">{{ detail.designFor?.toUpperCase() || ''}} / {{ detail.productCategory?.join(',')?.toUpperCase() || '' }}</div>
 					<div class="img-name">{{ detail.title }}</div>
 					<div class="img-price" v-if="detail.price">¥{{ detail.price }} <span class="mini-scrollbar">HKD</span></div>
 				</div>
 				<div class="commodity">
 					<div class="info">
-						<img class="profile" :src="img" alt="">
+						<img class="profile" :src="detail.avatar" alt="">
 						<div class="detail">
 							<div class="name">{{ detail.shopName }}</div>
 							<div class="release-time">
@@ -102,8 +158,8 @@ defineExpose({})
 					</div>
 				</div>
 				<div class="button">
-					<div class="buy-now">Buy Now</div>
-					<div class="add-cart" @click="addShopping(item)">
+					<div class="buy-now" @click="goShopping">Buy Now</div>
+					<div class="add-cart" @click="addShopping()">
 						<div class="icon">
 							<svg-icon name="cart_0" size="24"></svg-icon>
 						</div>
@@ -130,42 +186,66 @@ defineExpose({})
 			display: flex;
 			overflow: hidden;
 			.img-list{
-				display: flex;
 				flex: 1;
-				flex-direction: column;
+				display: grid;
+				grid-template-columns: 1fr 2fr;
 				--row-width: 33.333%;
+				align-items: stretch;
 				// --row-width: 29.3rem;
 				overflow-y: auto;
+				position: relative;
 				&::-webkit-scrollbar{
 					display: none;
 				}
-				> .title{
-					display: flex;
+				.title{
+					width: 100%;
+					line-height: 8.6rem;
+					padding-left: 2.4rem;
+					font-weight: 500;
+					font-size: 1.6rem;
+					background-color: #f5f5f5;
 					position: sticky;
 					top: 0;
-					> div{
-						width: var(--row-width);
-						line-height: 8.6rem;
-						padding-left: 2.4rem;
-						border-right: 0.5px solid #C4C4C4;
-						font-weight: 500;
-						font-size: 1.6rem;
-						background-color: #f5f5f5;
-						&:last-child{
-							border: none;
+				}
+				.box{
+					flex: 1;
+					.imgBox{
+						display: flex;
+						flex-direction: row;
+						flex-wrap: wrap;
+						img{
+							width: 100%;
 						}
 					}
-				}
-				> .img{
-					display: flex;
 					
-					> div{
-						display: flex;
-						width: var(--row-width);
+				}
+				> .left{
+					border-right: 0.5px solid #C4C4C4;
+					.imgBox{
+						padding: 0 30px;
+					}
+				}
+				> .right{
+					position: relative;
+					&::after{
+						content: '';
+						display: block;
 						border-right: 0.5px solid #C4C4C4;
-						flex-direction: column;
-						&:last-child{
-							border: none;
+						position: absolute;
+						height: 100%;
+						left: 50%;
+						top: 0;
+						z-index: 2;
+					}
+					> .top{
+						display: flex;
+					}
+					> .bottom{
+						.imgBox{
+							display: flex;
+							img{
+								width: 50%;
+							}
 						}
 					}
 				}

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 = () => {