diff --git a/src/api/listing.ts b/src/api/listing.ts
index 3611584..b027584 100644
--- a/src/api/listing.ts
+++ b/src/api/listing.ts
@@ -14,7 +14,7 @@ export interface listingListData {
 	pageNum?: number
 	pageSize?: number
 }
-export const getlistingList = (data:listingListData,loading?:boolean) => {
+export const getlistingListApi = (data:listingListData,loading?:boolean) => {
 	return request({
 		url: '/buyer/listing/shop/seller',
 		method: 'get',
@@ -32,7 +32,7 @@ export const getlistingList = (data:listingListData,loading?:boolean) => {
 export interface listingDetailData {
 	id?: string
 }
-export const getListingDetail = (data:listingDetailData,loading?:boolean) => {
+export const getListingDetailApi = (data:listingDetailData,loading?:boolean) => {
 	return request({	
 		url: `/buyer/listing/mall/detail`,
 		method: 'get',
@@ -60,7 +60,7 @@ export interface listingMallData {
 	pageNum: number,
 	pageSize: number
 }
-export const getListingMallList = (data:listingMallData,loading?:boolean) => {
+export const getListingMallListApi = (data:listingMallData,loading?:boolean) => {
 	return request({	
 		url: `/buyer/listing/mall`,
 		method: 'post',
diff --git a/src/components/CommodityItem.vue b/src/components/CommodityItem.vue
index 9f97b91..3c21bde 100644
--- a/src/components/CommodityItem.vue
+++ b/src/components/CommodityItem.vue
@@ -47,7 +47,7 @@ const {} = toRefs(data)
         <div class="name">
           {{ props.name }}
         </div>
-        <div class="price" :class="{ 'is-download': download }" v-if="props.showPrice">
+        <div class="price" :class="{ 'is-download': download }" v-if="props.showPrice && props.price">
           {{ props.price }}
         </div>
       </div>
diff --git a/src/components/checked.vue b/src/components/checked.vue
index e55331f..e293ba1 100644
--- a/src/components/checked.vue
+++ b/src/components/checked.vue
@@ -11,7 +11,7 @@ const props = defineProps({
 	}
 })
 const emit = defineEmits([
-	'update:selected'
+	'update:selected','change'
 ])
 const checkList = computed(()=>{
 	if(props.selected[0] === ''){
@@ -22,16 +22,18 @@ const checkList = computed(()=>{
 })
 const handleChange = (val) => {
 	emit('update:selected', val)
+	emit('change', val)
 }
 const checkAll = computed(()=>{
 	return checkList.value.length === props.list.length
 })
 const handleCheckAllChange = (val) => {
+	let data = []
 	if(val){
-		emit('update:selected', props.list.map(item => item.value))
-	}else{
-		emit('update:selected', [])
+		data = props.list.map(item => item.value)
 	}
+	emit('update:selected', data)
+	emit('change', data)
 }
 let data = reactive({
 })
diff --git a/src/views/brandDetail/commodity-list.vue b/src/views/brandDetail/commodity-list.vue
index 5d02399..0b7c179 100644
--- a/src/views/brandDetail/commodity-list.vue
+++ b/src/views/brandDetail/commodity-list.vue
@@ -1,54 +1,70 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import img from "@/assets/images/collectionStory/Rectangle.png";
-//const props = defineProps({
-//})
-const emit = defineEmits([
-	'addShopping'
-])
-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",
+import { getlistingListApi } from "@/api/listing";
+
+const props = defineProps({
+	id: {
+		type: String,
+		default: ''
 	}
+})
+const emit = defineEmits([
+	'addShopping','openDetail'
 ])
-const type = ref('All')
+const getMerchantData = reactive({
+	pageSize: 10,
+	pageNum: 1,
+	isShowMark:false,
+	isNoData:false,
+})
+const listingList = ref([
+])
+const type = ref('all')
 const addShopping = (item) => {
 	emit('addShopping', item)
 }
+const setType = (val) => {
+	type.value = val
+	getMerchantData.pageNum = 1
+	getMerchantData.isShowMark = false
+	getMerchantData.isNoData = false
+}
+const vObserve  = {
+	mounted (el,binding) {
+		getMerchantData.isShowMark = false
+		getMerchantData.isNoData = false
+		new IntersectionObserver(
+		(entries, observer) => {
+				// 如果不是相交，则直接返回
+				// console.log(entries[0]);
+				if (!entries[0].intersectionRatio) return;
+				binding.value()
+				getMerchantData.pageNum += 1
+			},
+			// { root:worksPage }
+		).observe(el);
+	}
+}
+const getListingList = () => {
+	getMerchantData.isShowMark = true
+	getMerchantData.isNoData = false
+	getlistingListApi({
+		sellerId: props.id,
+		designFor: type.value,
+		pageNum: getMerchantData.pageNum,
+		pageSize: getMerchantData.pageSize,
+	}).then((res)=>{
+		if(res.content.length == 0)getMerchantData.isNoData = true
+		listingList.value.push(...res.content)
+		getMerchantData.isShowMark = false
+	})
+}
 onMounted(()=>{
 })
 onUnmounted(()=>{
 })
 defineExpose({})
-const {} = toRefs(data);
 </script>
 <template>
 	<div class="commodityList">
@@ -57,14 +73,18 @@ const {} = toRefs(data);
 				Items
 			</div>
 			<div class="menu">
-				<div :class="{'active': type === 'All'}" @click="type = 'All'">All</div>
-				<div :class="{'active': type === 'Male'}" @click="type = 'Male'">Male</div>
-				<div :class="{'active': type === 'Female'}" @click="type = 'Female'">Female</div>	
+				<div :class="{'active': type === 'all'}" @click="setType('all')">All</div>
+				<div :class="{'active': type === 'male'}" @click="setType('male')">Male</div>
+				<div :class="{'active': type === 'female'}" @click="setType('female')">Female</div>	
 			</div>
 		</div>
 		<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)"></CommodityItem>
+			<div class="item" v-for="item in listingList" :key="item.url">
+				<CommodityItem :url="item.cover" :name="item.title" :price="item.price" @addShopping="addShopping(item)" @openDetail="$emit('openDetail', item)"></CommodityItem>
+			</div>
+			<div v-show="!getMerchantData.isNoData" class="material_content_list_loding">
+				<span class="page_loading" v-show="!getMerchantData.isShowMark" v-observe="getListingList"></span>
+				<img v-if="getMerchantData.isShowMark" src="@/assets/images/brand/brandLoading.gif" alt="">
 			</div>
 		</div>
 	</div>
@@ -145,6 +165,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>
\ No newline at end of file
diff --git a/src/views/brandDetail/index.vue b/src/views/brandDetail/index.vue
index 4193851..25ed20d 100644
--- a/src/views/brandDetail/index.vue
+++ b/src/views/brandDetail/index.vue
@@ -4,7 +4,9 @@ import CommodityList from "./commodity-list.vue";
 import MerchantInfo from "./merchant-info.vue";
 import { useRouter, useRoute } from "vue-router";
 import myEvent from '@/utils/myEvent'
+import { ElMessage } from 'element-plus'
 import { getDesignerDetail } from '@/api/brand'
+import { AddShoppingCart } from '@/api/shoppingCart'
 
 //const props = defineProps({
 //})
@@ -25,10 +27,14 @@ const designerDetail = ref({
 })
 
 const addShopping = (item) => {
-	myEvent.emit('addShopping', item)
+	if(!item.price) return ElMessage.warning('Please log in first.')
+	AddShoppingCart({listingIds:[item.id]}).then((res)=>{
+		item.shopName = designerDetail.value.shopName
+		myEvent.emit('addShopping', item)
+	})
 }
 const openDetail = (item) => {	
-	router.push({name: 'digitalDetail', params: {id: item.id}})
+	router.push({name: 'digitalItemDetail', params: {id: item.id}})
 }
 const getDetail = ()=>{
 	let data = {
@@ -55,7 +61,7 @@ defineExpose({})
 				<MerchantInfo :designerDetail="designerDetail"></MerchantInfo>
 			</div>
 			<div class="commodity-list">
-				<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
+				<CommodityList :id="route.params.id" @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
 			</div>
 		</div>
 		<Footer></Footer>
@@ -76,7 +82,7 @@ defineExpose({})
 		.content{
 			display: flex;
 			height: auto;
-			align-items: flex-start;
+			// align-items: flex-start;
 			.merchant-info{
 				width: 40rem;
 				padding-left: 12.7rem;
diff --git a/src/views/digitalDetail/index.vue b/src/views/digitalDetail/index.vue
index 87b6be3..ae017fd 100644
--- a/src/views/digitalDetail/index.vue
+++ b/src/views/digitalDetail/index.vue
@@ -3,24 +3,41 @@ import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import { useRouter } from "vue-router";
 import img from "@/assets/images/collectionStory/Rectangle.png";
 import myEvent from '@/utils/myEvent'
-
+import { getListingDetailApi } from '@/api/listing'
+import { useRoute } from 'vue-router'
 
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
+const route = useRoute()
+
 const router = useRouter()
-let data = reactive({
+let detail:any = ref({
+	description: '',
+	title: '',
+	price: '',
+	shopName: '',
+	updateTime: '',
+	gender: '',
 })
 const addShopping = (item) => {
 	myEvent.emit('addShopping', item)
 }
+const getListingDetail = ()=>{
+	getListingDetailApi({
+		id:route.params.id + '',
+	}).then((res)=>{
+		console.log(res)
+		if(res)detail.value = res
+	})
+}
 onMounted(()=>{
+	getListingDetail()
 })
 onUnmounted(()=>{
 })
 defineExpose({})
-const {} = toRefs(data);
 </script>
 <template>
 	<div class="digitalItemDetail">
@@ -52,22 +69,22 @@ const {} = toRefs(data);
 					<span>Back</span>
 				</div>
 				<div class="img-info">
-					<div class="img-type">FEMALE / skirt, blouse, Outwear</div>
-					<div class="img-name">Heritage Layered Set</div>
-					<div class="img-price">$100 <span class="mini-scrollbar">HKD</span></div>
+					<div class="img-type">{{ detail.gender.toUpperCase() }} / skirt, blouse, Outwear</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="">
 						<div class="detail">
-							<div class="name">Roaming Clouds</div>
+							<div class="name">{{ detail.shopName }}</div>
 							<div class="release-time">
-								<span>Release in Feb 26, 2026</span>
+								<span>Release in {{ detail.updateTime }}</span>
 							</div>
 						</div>
 					</div>
 					<div class="introduce">
-						This ensemble artfully merges traditional folk heritage with contemporary tailoring, creating a timeless silhouette that honors ancestral craftsmanship while embracing modern sophistication.
+						{{ detail.description }}
 					</div>
 				</div>
 				<div class="notice">
diff --git a/src/views/digitalItem/index.vue b/src/views/digitalItem/index.vue
index a9742a9..44c8ce5 100644
--- a/src/views/digitalItem/index.vue
+++ b/src/views/digitalItem/index.vue
@@ -4,6 +4,8 @@ import CommodityList from "./commodity-list.vue";
 import MerchantInfo from "./merchant-info.vue";
 import { useRouter } from "vue-router";
 import scListNull from '@/views/shoppingCart/sc-list-null.vue'
+import { getListingMallListApi } from '@/api/listing'
+import { get } from "http";
 
 // 定义组件名称
 defineOptions({
@@ -16,8 +18,6 @@ defineOptions({
 const digitalItemRef = ref(null)
 const scrollTop = ref(0)
 const router = useRouter()
-let data = reactive({
-})
 
 const categoriesList = ref([
 	{
@@ -39,6 +39,17 @@ const openDetail = (item) => {
 		path: '/digitalItem/' + 123,
 	})
 }
+const handleChange = (val) => {
+	
+}
+const getListingMallList = ()=>{
+	let data = {
+		// designFor
+	}
+	getListingMallListApi().then(res => {
+
+	})
+}
 onActivated(()=>{
 	digitalItemRef.value.scrollTop = scrollTop.value
 })
@@ -47,7 +58,6 @@ onMounted(()=>{
 onUnmounted(()=>{
 })
 defineExpose({})
-const {} = toRefs(data);
 </script>
 <template>
 	<div class="digitalItem" ref="digitalItemRef">
@@ -76,7 +86,7 @@ const {} = toRefs(data);
 		</div>
 		<div class="content">
 			<div class="merchant-info">
-				<MerchantInfo></MerchantInfo>
+				<MerchantInfo @change="handleChange"></MerchantInfo>
 			</div>
 			<div class="commodity-list">
 				<CommodityList v-if="true" @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
diff --git a/src/views/digitalItem/merchant-info.vue b/src/views/digitalItem/merchant-info.vue
index 996598f..11ac4cc 100644
--- a/src/views/digitalItem/merchant-info.vue
+++ b/src/views/digitalItem/merchant-info.vue
@@ -1,46 +1,20 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { ref, onMounted, onUnmounted, computed, toRefs } from "vue";
+import { useI18n } from 'vue-i18n'
+import { useClothesCategories } from '@/utils/ClothesCategory'
 //const props = defineProps({
 //})
-//const emit = defineEmits([
-//])
-let data = reactive({
-})
-const categoriesList = ref([
-	{
-		label: 'Outwear',
-		value: 'Outwear'
-	},
-	{
-		label: 'Dress',
-		value: 'Dress'
-	},
-	{
-		label: 'Trousers',
-		value: 'Trousers'
-	},
-	{
-		label: 'Blouse',
-		value: 'Blouse'
-	},
-	{
-		label: 'Skirt',
-		value: 'Skirt'
-	},
-	{
-		label: 'Accessories',
-		value: 'Accessories'
-	},
-]);
-const genderList = ref([
-	{
-		label: 'Male',
-		value: 'Male'
-	},
-	{
-		label: 'Female',
-		value: 'Female'
-	},
+const emit = defineEmits([
+	'change'
+])
+
+const { t } = useI18n()
+
+const categoriesList = useClothesCategories();
+
+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([''])
@@ -48,13 +22,16 @@ const gender = ref([''])
 const clearFilters = () => {
 	categories.value = ['']
 	gender.value = ['']
+	handleChange()
+}
+const handleChange = () => {	
+	emit('change', {categories:categories.value, gender:gender.value})
 }
 onMounted(()=>{
 })
 onUnmounted(()=>{
 })
 defineExpose({})
-const {} = toRefs(data);
 </script>
 <template>
 	<div class="filters">
@@ -65,12 +42,12 @@ const {} = toRefs(data);
 		<div class="categories">Categories</div>
 		<div class="line"></div>
 		<div class="multiple">
-			<checked :list="categoriesList" v-model:selected="categories" />
+			<checked :list="categoriesList" @change="handleChange" v-model:selected="categories" />
 		</div>
 		<div class="categories">Gender</div>
 		<div class="line"></div>
 		<div class="multiple">
-			<checked :list="genderList" v-model:selected="gender" />
+			<checked :list="genderList" @change="handleChange" v-model:selected="gender" />
 		</div>
 	</div>
 </template>
diff --git a/src/views/shopping-drawer.vue b/src/views/shopping-drawer.vue
index 2a14152..0d9f9cc 100644
--- a/src/views/shopping-drawer.vue
+++ b/src/views/shopping-drawer.vue
@@ -11,6 +11,10 @@ import img from '@/assets/images/brand-null.png'
 //])
 let data = reactive({
 })
+const cover = ref('')
+const price = ref('')	
+const shopName = ref('')
+const commodityName = ref('')
 const router = useRouter()
 const isShoppingShow = ref(false)
 const shoppingClose = () => {
@@ -25,7 +29,10 @@ const goShopping = () => {
 onMounted(()=>{
 	myEvent.add('addShopping', (item) => {
 		isShoppingShow.value = true
-		console.log(item)
+		cover.value = item.cover || ''
+		price.value = item.price || ''
+		shopName.value = item.shopName || ''
+		commodityName.value = item.title || ''
 	})
 })
 onUnmounted(()=>{
@@ -52,18 +59,18 @@ const {} = toRefs(data);
 						<img :src="img" alt="">
 					</div>
 					<div class="img-box">
-						<img :src="img" alt="">
+						<img :src="cover" alt="">
 					</div>
 				</div>
 				<div class="inf-box">
-					<div class="name">North Outfit Set</div>
+					<div class="name">{{ commodityName }}</div>
 					<div class="shopping-name">
 						<div class="icon">
 							<SvgIcon name="shop" size="24" />
 						</div>
-						Roaming Clouds
+						{{ shopName }}
 					</div>
-					<div class="price">$15 <span class="currency">HKD</span></div>
+					<div class="price">${{ price }} <span class="currency">HKD</span></div>
 				</div>
 				<div class="statement">
 					<div class="icon">