digital item页面

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;
 				}
 			}
 		}