Merge branch 'main' of http://18.167.251.121:10003/aidlab/Aida_Purchaser_Front

2026-05-22 13:36:53 +08:00
parent c8fa11aa25 c576d050db
commit ecf53c8353
24 changed files with 1620 additions and 1041 deletions
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,8 +1,10 @@
 {
 	"$schema": "https://json.schemastore.org/prettierrc",
 	"semi": false,
-  "tabWidth": 2,
+	"tabWidth": 4,
 	"singleQuote": true,
 	"printWidth": 100,
-  "trailingComma": "none"
+	"useTabs": true,
+	"trailingComma": "none",
+	"vueIndentScriptAndStyle": true
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
 				"crypto-js": "^4.2.0",
 				"element-plus": "^2.13.2",
 				"gsap": "^3.13.0",
+				"lodash-es": "^4.18.1",
 				"markdown-it": "^14.1.0",
 				"md5": "^2.3.0",
 				"normalize.css": "^8.0.1",
@@ -4790,9 +4791,9 @@
 			"license": "MIT"
 		},
 		"node_modules/lodash-es": {
-			"version": "4.17.23",
-			"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.23.tgz",
-			"integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==",
+			"version": "4.18.1",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+			"integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
 			"license": "MIT"
 		},
 		"node_modules/lodash-unified": {
@@ -12111,9 +12112,9 @@
 			"integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="
 		},
 		"lodash-es": {
-			"version": "4.17.23",
-			"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.23.tgz",
-			"integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg=="
+			"version": "4.18.1",
+			"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+			"integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A=="
 		},
 		"lodash-unified": {
 			"version": "1.0.3",
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
 		"crypto-js": "^4.2.0",
 		"element-plus": "^2.13.2",
 		"gsap": "^3.13.0",
+		"lodash-es": "^4.18.1",
 		"markdown-it": "^14.1.0",
 		"md5": "^2.3.0",
 		"normalize.css": "^8.0.1",
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -16,15 +16,19 @@ export const fetchMyWardrobe = (data: WardrobeItem): Promise<ApiResponse> => {
 }

 export interface OrderItem {
-  status: number // 0未支付 1已支付 2已取消 不穿查全部
+  status?: number // 0未支付 1已支付 2已取消 不传查全部
  page: number
  size: number
 }
-export const fetchMyOrders = (data: OrderItem): Promise<ApiResponse> => {
+
+export interface OrdersPageResponse {
+  content: any[]
+}
+
+export const fetchMyOrders = (data: OrderItem): Promise<OrdersPageResponse> => {
  return request({
    url: '/buyer/buyer/order/page',
    method: 'get',
    params: data
  })
 }
-
--- a/src/assets/images/avatar.png
+++ b/src/assets/images/avatar.png
--- a/src/assets/images/brand/brandDetailBg.png
+++ b/src/assets/images/brand/brandDetailBg.png
--- a/src/components/checked.vue
+++ b/src/components/checked.vue
@@ -6,35 +6,43 @@ 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)
 	}
+}
 let data = reactive({
 })
 onMounted(()=>{
--- a/src/directives/avatarLoad.js
+++ b/src/directives/avatarLoad.js
@@ -0,0 +1,27 @@
+// 加载图片
+import avatar from '@/assets/images/avatar.png'
+export default {
+	name: 'avatarLoad',
+	mmounted(el, binding) {
+		loadImage(el, binding.value)
+	},
+	updated(el, binding) {
+		// 当 binding.value 发生变化时重新加载
+		if (binding.oldValue !== binding.value) {
+			loadImage(el, binding.value)
+		}
+	},
+};
+function loadImage(el, src) {
+	if (!src) return
+	
+	const img = new Image()
+	img.src = src
+	img.onload = () => {
+		el.src = src
+	}
+	img.onerror = () => {
+		el.src = avatar // 默认头像
+		console.log('图片加载失败:', src)
+	}
+}
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -133,7 +133,6 @@ export default {
 		subtitle: 'Your digital pieces, all in one place',
 		common: {
 			all: 'All',
-			currencyHkd: 'HKD'
 		},
 		tabs: {
 			ariaLabel: 'Wardrobe tabs',
@@ -187,7 +186,7 @@ export default {
 		}
 	},
 	ClothesCategories: {
-		blouses: 'Blouse',
+		blouse: 'Blouse',
 		dress: 'Dress',
 		trousers: 'Trousers',
 		skirt: 'Skirt',
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -133,7 +133,6 @@ export default {
 		subtitle: '你的数字单品尽在此处',
 		common: {
 			all: '全部',
-			currencyHkd: 'HKD'
 		},
 		tabs: {
 			ariaLabel: '衣橱标签页',
@@ -187,7 +186,7 @@ export default {
 		}
 	},
 	ClothesCategories: {
-		blouses: '衬衫',
+		blouse: '衬衫',
 		dress: '连衣裙',
 		trousers: '裤子',
 		skirt: '短裙',
--- a/src/utils/ClothesCategory.ts
+++ b/src/utils/ClothesCategory.ts
@@ -6,8 +6,8 @@ type Translate = (key: string) => string

 const clothesCategoryConfigs = [
  {
-    key: 'blouses',
-    value: 'blouses'
+    key: 'blouse',
+    value: 'blouse'
  },
  {
    key: 'dress',
--- a/src/views/brand/brand-item.vue
+++ b/src/views/brand/brand-item.vue
@@ -25,7 +25,7 @@ const {} = toRefs(data);
 	<div class="item">
 		<div class="left">
 			<div class="portrait">
-				<img :src="item.avatar" alt="">
+				<img v-avatarLoad="item.avatar" alt="">
 			</div>
 			<div class="info">
 				<div class="name">{{ item.shopName }}</div>
--- a/src/views/brand/index.vue
+++ b/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([
--- a/src/views/brandDetail/commodity-list.vue
+++ b/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;
 			/* 垂直线（右边框） */
--- a/src/views/brandDetail/index.vue
+++ b/src/views/brandDetail/index.vue
@@ -7,6 +7,7 @@ import myEvent from '@/utils/myEvent'
 import { ElMessage } from 'element-plus'
 import { getDesignerDetail } from '@/api/brand'
 import { AddShoppingCart } from '@/api/shoppingCart'
+import brandDetailBg from '@/assets/images/brand/brandDetailBg.png'

 //const props = defineProps({
 //})
@@ -54,7 +55,7 @@ defineExpose({})
 <template>
 	<div class="brand">
 		<div class="header-img">
-			<img :src="designerDetail.brandBanner || '@/assets/images/brand/brandDetailBg.png'" alt="">
+			<img :src="designerDetail.brandBanner || brandDetailBg" alt="">
 		</div>
 		<div class="content">
 			<div class="merchant-info">
--- a/src/views/brandDetail/merchant-info.vue
+++ b/src/views/brandDetail/merchant-info.vue
@@ -31,7 +31,7 @@ const {} = toRefs(data);
 <template>
 	<div class="merchantInfo">
 		<div class="profile">
-			<img :src="designerDetail.avatar || '@/assets/images/collectionStory/Rectangle.png'" alt="">
+			<img v-avatarLoad="designerDetail.avatar" alt="">
 		</div>
 		<div class="info">
 			<div class="detail">
--- a/src/views/digitalDetail/index.vue
+++ b/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" v-avatarLoad="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;
-					position: sticky;
-					top: 0;
-					> div{
-						width: var(--row-width);
+				.title{
+					width: 100%;
 					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;
+					position: sticky;
+					top: 0;
 				}
-					}
-				}
-				> .img{
+				.box{
+					flex: 1;
+					.imgBox{
 						display: flex;
+						flex-direction: row;
+						flex-wrap: wrap;
+						img{
+							width: 100%;
+						}
+					}
 					
-					> div{
-						display: flex;
-						width: var(--row-width);
+				}
+				> .left{
 					border-right: 0.5px solid #C4C4C4;
-						flex-direction: column;
-						&:last-child{
-							border: none;
+					.imgBox{
+						padding: 0 30px;
+					}
+				}
+				> .right{
+					position: relative;
+					&::after{
+						content: '';
+						display: block;
+						border-right: 0.5px solid #C4C4C4;
+						position: absolute;
+						height: 100%;
+						left: 50%;
+						top: 0;
+						z-index: 2;
+					}
+					> .top{
+						display: flex;
+					}
+					> .bottom{
+						.imgBox{
+							display: flex;
+							img{
+								width: 50%;
+							}
 						}
 					}
 				}
--- a/src/views/digitalItem/commodity-list.vue
+++ b/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>
--- a/src/views/digitalItem/index.vue
+++ b/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;
 				}
 			}
 		}
--- a/src/views/digitalItem/merchant-info.vue
+++ b/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 = () => {	
--- a/src/views/shoppingCart/sc-item.vue
+++ b/src/views/shoppingCart/sc-item.vue
@@ -10,7 +10,7 @@
 		<img :src="info.cover" />
 		<div class="content">
 			<div class="title">{{ info.title }}</div>
-			<div class="brand">
+			<div class="brand" v-if="showBrand">
 				<span class="icon"><svg-icon name="order-shop" size="24" /></span>
 				<span class="text">{{ info.brand }}</span>
 			</div>
@@ -56,6 +56,7 @@
 		showDate: { type: Boolean, default: true },
 		showRemove: { type: Boolean, default: true },
 		orderActionsLayout: { type: Boolean, default: false },
+		showBrand: { type: Boolean, default: true },
 		info: {
 			type: Object as () => {
 				status: number
--- a/src/views/wardrobe/Assets.vue
+++ b/src/views/wardrobe/Assets.vue
@@ -1,55 +1,11 @@
 <template>
 	<div class="wardrobe-assets flex">
-    <aside class="wardrobe-assets__filters">
-      <div class="filters-card">
-        <div class="filters-card__heading">
-          <h2 class="filters-card__title">{{ t('Wardrobe.assets.filters') }}</h2>
-          <button class="filters-card__clear" type="button" @click="clearFilters">
-            {{ t('Wardrobe.assets.clear') }}
-          </button>
-        </div>
-
-        <section class="filter-group">
-          <h3 class="filter-group__title">{{ t('Wardrobe.assets.categories') }}</h3>
-          <div class="filter-group__line"></div>
-          <div class="filter-group__options">
-            <button
-              v-for="option in categories"
-              :key="option.value"
-              class="filter-option"
-              type="button"
-              :class="{ 'is-active': isCategoryActive(option.value) }"
-              @click="toggleCategory(option.value)"
-            >
-              <span class="filter-option__box">
-                <span class="filter-option__tick"></span>
-              </span>
-              <span class="filter-option__label">{{ option.label }}</span>
-            </button>
-          </div>
-        </section>
-
-        <section class="filter-group">
-          <h3 class="filter-group__title">{{ t('Wardrobe.assets.gender') }}</h3>
-          <div class="filter-group__line"></div>
-          <div class="filter-group__options">
-            <button
-              v-for="option in genders"
-              :key="option.value"
-              class="filter-option"
-              type="button"
-              :class="{ 'is-active': filters.gender === option.value }"
-              @click="setGender(option.value)"
-            >
-              <span class="filter-option__box">
-                <span class="filter-option__tick"></span>
-              </span>
-              <span class="filter-option__label">{{ option.label }}</span>
-            </button>
-          </div>
-        </section>
-      </div>
-    </aside>
+		<FilterSidebar
+			:categories="categories"
+			:genders="genders"
+			:filters="filters"
+			@update:filters="updateFilters"
+		/>

 		<section
 			class="wardrobe-assets__content flex flex-1 flex-col"
@@ -82,11 +38,11 @@
 					</div>
 				</div>
 			</div>
-      <div v-if="dataList.length" class="data-list-container">
+			<div ref="assetsScrollRef" v-if="dataList.length" class="data-list-container" @scroll.passive="handleAssetsScroll">
 				<div ref="dataListRef" class="data-list">
 					<div
 						v-for="(item, index) in dataList"
-            :key="item.url"
+						:key="item.listingId"
 						class="item"
 						:class="{ 'is-last-column': isLastColumn(index) }"
 					>
@@ -96,12 +52,15 @@
 							@click="handleSelectItem(item)"
 							class="checkbox"
 						/>
-            <div v-show="!item.checked" class="checkbox" @click="handleSelectItem(item)" />
+						<div
+							v-show="!item.checked"
+							class="checkbox"
+							@click="handleSelectItem(item)"
+						/>
 						<CommodityItem
 							download
-              :url="item.url"
-              :name="item.title"
-              :price="item.price"
+							:url="item.thumbnailUrl"
+							:name="item.listingName"
 							:showPrice="false"
 						></CommodityItem>
 					</div>
@@ -113,12 +72,27 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
+	import {
+		computed,
+		nextTick,
+		onMounted,
+		onUnmounted,
+		reactive,
+		ref,
+		shallowRef,
+		watch
+	} from 'vue'
 	import { useI18n } from 'vue-i18n'
 	import { useRouter } from 'vue-router'
 	import { useClothesCategories } from '@/utils/ClothesCategory'
-import img from '@/assets/images/collectionStory/Rectangle.png'
 	import Empty from './Empty.vue'
+	import FilterSidebar from './FilterSidebar.vue'
+	import { fetchMyWardrobe } from '@/api/user'
+	import { useUserInfoStore } from '@/stores'
+
+	import { debounce } from 'lodash-es'
+
+	const buyerId = useUserInfoStore().state.userInfo?.userId

 	interface FilterOption {
 		label: string
@@ -147,70 +121,78 @@ const categoryValues = computed(() =>
 		categories.value.filter((option) => option.value !== 'all').map((option) => option.value)
 	)

-const filters = reactive({
-  categories: ['skirt'] as string[],
-  gender: 'all'
-})
+	const genderValues = computed(() =>
+		genders.value.filter((option) => option.value !== 'all').map((option) => option.value)
+	)

-const dataList = ref([
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  },
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  },
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  },
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  },
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  },
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  },
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  },
-  {
-    url: img,
-    title: 'Windswept Burden',
-    price: '$100.00',
-    checked: false
-  }
-])
+	const dataList = ref([])
 	const dataListRef = ref<HTMLDivElement | null>(null)
+	const assetsScrollRef = ref<HTMLDivElement | null>(null)
 	const gridColumnCount = shallowRef(1)
 	let gridResizeObserver: ResizeObserver | null = null
+	const assetsRequestId = ref(0)
+	const isLoadingAssets = ref(false)
+	const hasMoreAssets = ref(true)
+
+	const filters = reactive({
+		categories: [
+			'blouse',
+			'dress',
+			'trousers',
+			'skirt',
+			'tops',
+			'bottoms',
+			'outwear',
+			'others'
+		],
+		genders: ['male', 'female']
+	})
+	const pageParams = reactive({
+		page: 1,
+		size: 10
+	})
+	const handleGetAssets = async () => {
+		if (isLoadingAssets.value || !hasMoreAssets.value) return
+		isLoadingAssets.value = true
+		const requestId = ++assetsRequestId.value
+
+		try {
+			const res = await fetchMyWardrobe({
+				buyerId: buyerId,
+				categories: [],
+				designFor: filters.genders.length > 1 ? 'all' : filters.genders[0] || 'all',
+				page: pageParams.page,
+				size: pageParams.size
+			})
+
+			if (requestId !== assetsRequestId.value) return
+
+			const content = res.content ?? []
+			if (pageParams.page === 1) {
+				dataList.value = content
+			} else {
+				dataList.value = [...dataList.value, ...content]
+			}
+
+			hasMoreAssets.value = content.length >= pageParams.size
+			if (hasMoreAssets.value) {
+				pageParams.page += 1
+			}
+		} finally {
+			if (requestId === assetsRequestId.value) {
+				isLoadingAssets.value = false
+			}
+		}
+	}

 	watch(
 		() => filters,
-  (val) => {
-    console.log(val)
-  },
+		debounce(() => {
+			pageParams.page = 1
+			hasMoreAssets.value = true
+			assetsRequestId.value += 1
+			handleGetAssets()
+		}, 500),
 		{ deep: true }
 	)

@@ -224,6 +206,13 @@ const allCategoriesSelected = computed(() => {
 		)
 	})

+	const allGendersSelected = computed(() => {
+		return (
+			filters.genders.length === genderValues.value.length &&
+			genderValues.value.every((value) => filters.genders.includes(value))
+		)
+	})
+
 	const isCategoryActive = (value: string) => {
 		if (value === 'all') {
 			return allCategoriesSelected.value
@@ -246,17 +235,34 @@ const toggleCategory = (value: string) => {
 		filters.categories = [...filters.categories, value]
 	}

-const setGender = (value: string) => {
-  filters.gender = value
+	const isGenderActive = (value: string) => {
+		if (value === 'all') {
+			return allGendersSelected.value
 		}

-const clearFilters = () => {
-  filters.categories = [...categoryValues.value]
-  filters.gender = 'all'
+		return filters.genders.includes(value)
+	}
+
+	const toggleGender = (value: string) => {
+		if (value === 'all') {
+			filters.genders = allGendersSelected.value ? [] : [...genderValues.value]
+			return
+		}
+
+		if (filters.genders.includes(value)) {
+			filters.genders = filters.genders.filter((item) => item !== value)
+			return
+		}
+
+		filters.genders = [...filters.genders, value]
+	}
+
+	const updateFilters = (value: { categories: string[]; genders: string[] }) => {
+		filters.categories = value.categories
+		filters.genders = value.genders
 	}

 	const handleSelectItem = (item) => {
-  console.log('111', item)
 		item.checked = !item.checked
 	}

@@ -271,6 +277,16 @@ const handleDownloadSelected = () => {
 		console.log(items)
 	}

+	const handleAssetsScroll = () => {
+		const el = assetsScrollRef.value
+		if (!el || isLoadingAssets.value || !hasMoreAssets.value) return
+
+		const reachBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 120
+		if (reachBottom) {
+			handleGetAssets()
+		}
+	}
+
 	const updateGridColumnCount = () => {
 		if (!dataListRef.value) {
 			gridColumnCount.value = 1
@@ -294,19 +310,29 @@ const goToDigitalItems = () => {
 		router.push('/digitalItem')
 	}

-onMounted(() => {
-  nextTick(() => {
+	watch(
+		() => dataList.value.length,
+		async (len) => {
+			if (!len) return
+
+			await nextTick()
+
 			updateGridColumnCount()

-    if (!dataListRef.value || typeof ResizeObserver === 'undefined') {
-      return
-    }
+			gridResizeObserver?.disconnect()

+			if (dataListRef.value) {
 				gridResizeObserver = new ResizeObserver(() => {
 					updateGridColumnCount()
 				})
+
 				gridResizeObserver.observe(dataListRef.value)
-  })
+			}
+		},
+		{ immediate: true }
+	)
+	onMounted(() => {
+		handleGetAssets()
 	})

 	onUnmounted(() => {
@@ -521,7 +547,7 @@ onUnmounted(() => {
 					flex: 1;
 					display: grid;
 					align-content: start;
-        grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
+					grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
 					border-top: 0.05rem solid #585858;
 					border-left: 0.05rem solid #585858;

--- a/src/views/wardrobe/FilterSidebar.vue
+++ b/src/views/wardrobe/FilterSidebar.vue
@@ -0,0 +1,301 @@
+<template>
+	<aside class="wardrobe-assets__filters">
+		<div class="filters-card">
+			<div class="filters-card__heading">
+				<h2 class="filters-card__title">{{ t('Wardrobe.assets.filters') }}</h2>
+				<button class="filters-card__clear" type="button" @click="clearFilters">
+					{{ t('Wardrobe.assets.clear') }}
+				</button>
+			</div>
+
+			<section class="filter-group">
+				<h3 class="filter-group__title">{{ t('Wardrobe.assets.categories') }}</h3>
+				<div class="filter-group__line"></div>
+				<div class="filter-group__options">
+					<button
+						v-for="option in categories"
+						:key="option.value"
+						class="filter-option"
+						type="button"
+						:class="{ 'is-active': isCategoryActive(option.value) }"
+						@click="toggleCategory(option.value)"
+					>
+						<span class="filter-option__box">
+							<span class="filter-option__tick"></span>
+						</span>
+						<span class="filter-option__label">{{ option.label }}</span>
+					</button>
+				</div>
+			</section>
+
+			<section class="filter-group">
+				<h3 class="filter-group__title">{{ t('Wardrobe.assets.gender') }}</h3>
+				<div class="filter-group__line"></div>
+				<div class="filter-group__options">
+					<button
+						v-for="option in genders"
+						:key="option.value"
+						class="filter-option"
+						type="button"
+						:class="{ 'is-active': isGenderActive(option.value) }"
+						@click="toggleGender(option.value)"
+					>
+						<span class="filter-option__box">
+							<span class="filter-option__tick"></span>
+						</span>
+						<span class="filter-option__label">{{ option.label }}</span>
+					</button>
+				</div>
+			</section>
+		</div>
+	</aside>
+</template>
+
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { useI18n } from 'vue-i18n'
+	import type { PropType } from 'vue'
+
+	interface FilterOption {
+		label: string
+		value: string
+	}
+
+	interface FilterState {
+		categories: string[]
+		genders: string[]
+	}
+
+	const props = defineProps({
+		categories: {
+			type: Array as PropType<FilterOption[]>,
+			required: true
+		},
+		genders: {
+			type: Array as PropType<FilterOption[]>,
+			required: true
+		},
+		filters: {
+			type: Object as PropType<FilterState>,
+			required: true
+		}
+	})
+
+	const emit = defineEmits<{
+		(e: 'update:filters', payload: FilterState): void
+	}>()
+
+	const { t } = useI18n({ useScope: 'global' })
+
+	const categoryValues = computed(() =>
+		props.categories.filter((option) => option.value !== 'all').map((option) => option.value)
+	)
+
+	const genderValues = computed(() =>
+		props.genders.filter((option) => option.value !== 'all').map((option) => option.value)
+	)
+
+	const allCategoriesSelected = computed(() => {
+		return (
+			props.filters.categories.length === categoryValues.value.length &&
+			categoryValues.value.every((value) => props.filters.categories.includes(value))
+		)
+	})
+
+	const allGendersSelected = computed(() => {
+		return (
+			props.filters.genders.length === genderValues.value.length &&
+			genderValues.value.every((value) => props.filters.genders.includes(value))
+		)
+	})
+
+	const currentFilters = computed<FilterState>(() => ({
+		categories: [...props.filters.categories],
+		genders: [...props.filters.genders]
+	}))
+
+	const updateFilters = (updated: Partial<FilterState>) => {
+		emit('update:filters', {
+			categories: updated.categories ?? currentFilters.value.categories,
+			genders: updated.genders ?? currentFilters.value.genders
+		})
+	}
+
+	const isCategoryActive = (value: string) => {
+		if (value === 'all') {
+			return allCategoriesSelected.value
+		}
+
+		return props.filters.categories.includes(value)
+	}
+
+	const toggleCategory = (value: string) => {
+		if (value === 'all') {
+			updateFilters({
+				categories: allCategoriesSelected.value ? [] : [...categoryValues.value]
+			})
+			return
+		}
+
+		if (props.filters.categories.includes(value)) {
+			updateFilters({
+				categories: props.filters.categories.filter((item) => item !== value)
+			})
+			return
+		}
+
+		updateFilters({
+			categories: [...props.filters.categories, value]
+		})
+	}
+
+	const isGenderActive = (value: string) => {
+		if (value === 'all') {
+			return allGendersSelected.value
+		}
+
+		return props.filters.genders.includes(value)
+	}
+
+	const toggleGender = (value: string) => {
+		if (value === 'all') {
+			updateFilters({
+				genders: allGendersSelected.value ? [] : [...genderValues.value]
+			})
+			return
+		}
+
+		if (props.filters.genders.includes(value)) {
+			updateFilters({
+				genders: props.filters.genders.filter((item) => item !== value)
+			})
+			return
+		}
+
+		updateFilters({
+			genders: [...props.filters.genders, value]
+		})
+	}
+
+	const clearFilters = () => {
+		updateFilters({
+			categories: [...categoryValues.value],
+			genders: [...genderValues.value]
+		})
+	}
+</script>
+
+<style lang="less" scoped>
+	.wardrobe-assets__filters {
+		width: 26.4rem;
+		border-right: 0.1rem solid var(--wardrobe-border-color);
+		overflow-y: auto;
+
+		.filters-card {
+			padding: 3rem 2.4rem 4rem;
+
+			.filters-card__heading {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin-bottom: 3.2rem;
+
+				.filters-card__title {
+					margin: 0;
+					font-family: 'KaiseiOpti-Bold';
+					font-size: 2.4rem;
+					line-height: 1.2;
+					color: var(--wardrobe-text-main);
+				}
+
+				.filters-card__clear {
+					border: 0;
+					padding: 0;
+					background: transparent;
+					font-family: 'KaiseiOpti-Regular';
+					font-size: 1.4rem;
+					line-height: 1.3;
+					color: #9a9185;
+					text-decoration: underline;
+					cursor: pointer;
+				}
+			}
+
+			.filter-group {
+				& + .filter-group {
+					margin-top: 3.4rem;
+				}
+
+				.filter-group__title {
+					margin: 0 0 1rem;
+					font-family: 'KaiseiOpti-Bold';
+					font-size: 1.8rem;
+					line-height: 1.3;
+					color: #5e5851;
+				}
+
+				.filter-group__line {
+					width: 100%;
+					height: 0.1rem;
+					background: var(--wardrobe-border-color);
+					margin-bottom: 2rem;
+				}
+
+				.filter-group__options {
+					display: flex;
+					flex-direction: column;
+					gap: 1.2rem;
+
+					.filter-option {
+						display: inline-flex;
+						align-items: center;
+						gap: 1.2rem;
+						width: fit-content;
+						padding: 0;
+						border: 0;
+						background: transparent;
+						font-family: 'KaiseiOpti-Regular';
+						font-size: 1.5rem;
+						line-height: 1.4;
+						color: #6e665d;
+						cursor: pointer;
+						text-align: left;
+
+						> .filter-option__box {
+							width: 1.6rem;
+							height: 1.6rem;
+							border: 0.1rem solid var(--wardrobe-border-dark);
+							display: inline-flex;
+							align-items: center;
+							justify-content: center;
+							background: #ffffff;
+							flex-shrink: 0;
+
+							.filter-option__tick {
+								width: 0.9rem;
+								height: 0.5rem;
+								border-left: 0.18rem solid #ffffff;
+								border-bottom: 0.18rem solid #ffffff;
+								transform: rotate(-45deg) translateY(-0.05rem);
+								opacity: 0;
+							}
+						}
+
+						&.is-active {
+							color: var(--wardrobe-text-main);
+
+							.filter-option__box {
+								border-color: var(--wardrobe-text-main);
+								background: var(--wardrobe-text-main);
+
+								.filter-option__tick {
+									opacity: 1;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
--- a/src/views/wardrobe/Orders.vue
+++ b/src/views/wardrobe/Orders.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="wardrobe-orders">
+	<div ref="ordersScrollRef" class="wardrobe-orders" @scroll="handleOrdersScroll">
 		<div class="orders-toolbar">
 			<button
 				v-for="status in statusOptions"
@@ -7,22 +7,30 @@
 				class="orders-toolbar__chip"
 				type="button"
 				:class="{ 'is-active': activeStatus === status.key }"
-        @click="activeStatus = status.key"
+				@click="setActiveStatus(status.key)"
 			>
 				{{ status.label }}
 			</button>
 		</div>

 		<div class="orders-list">
-      <article v-for="order in filteredOrders" :key="order.id" class="order-card">
-        <button class="order-card__toggle" type="button" @click="toggleOrder(order.id)">
-          <span :class="{ 'is-expanded': expandedOrderId === order.id }"></span>
+			<article v-for="order in filteredOrders" :key="order.orderId" class="order-card">
+				<button
+					class="order-card__toggle"
+					type="button"
+					@click="toggleOrder(order.orderId)"
+				>
+					<span :class="{ 'is-expanded': expandedOrderId === order.orderId }"></span>
 				</button>

 				<div class="order-card__summary">
 					<div class="order-card__meta">
-            <h3 class="order-card__id">{{ order.id }}</h3>
-            <p class="order-card__date">{{ order.date }}</p>
+						<h3 class="order-card__id">{{ order.orderId }}</h3>
+						<div class="brand flex align-center">
+							<span class="icon"><svg-icon name="order-shop" size="24" /></span>
+							<span class="text">{{ order.shopName }}</span>
+						</div>
+						<p class="order-card__date">{{ order.formatUpdatetime }}</p>
 					</div>

 					<div class="order-card__preview" aria-hidden="true">
@@ -30,41 +38,46 @@
 							v-for="item in order.items.slice(0, 2)"
 							:key="item.id"
 							class="order-card__thumb"
-              :style="{ backgroundColor: item.color }"
+							:style="{ backgroundImage: `url(${item.thumbnailUrl})` }"
 						></span>
 						<span v-if="getExtraCount(order)" class="order-card__extra">
 							{{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }}
 						</span>
 					</div>

-          <div class="order-card__status" :class="`is-${order.status}`">
-            {{ getStatusBadgeLabel(order.status) }}
+					<div class="order-card__status" :class="`is-${getOrderStatus(order)}`">
+						{{ getStatusBadgeLabel(getOrderStatus(order)) }}
 					</div>

 					<div class="order-card__amount">
-            <span>${{ order.amount }}</span>
-            <small>{{ t('Wardrobe.common.currencyHkd') }}</small>
+						<span>${{ order.totalPrice }}</span>
+						<small>HKD</small>
 					</div>

 					<button
 						class="order-card__action"
 						type="button"
-            :class="{ 'is-primary': order.status === 'unpaid' }"
+						:class="{ 'is-primary': getOrderStatus(order) === 'unpaid' }"
 					>
-            <svg-icon v-if="order.status === 'paid'" name="Invoice" size="20" color="#232323" />
-            <span>{{ getOrderActionLabel(order.status) }}</span>
+						<svg-icon
+							v-if="getOrderStatus(order) === 'paid'"
+							name="Invoice"
+							size="20"
+							color="#232323"
+						/>
+						<span>{{ getOrderActionLabel(getOrderStatus(order)) }}</span>
 					</button>
 				</div>

-        <div v-if="expandedOrderId === order.id" class="order-card__details">
+				<div v-if="expandedOrderId === order.orderId" class="order-card__details">
 					<ScItem
 						v-for="item in order.items"
 						:key="item.id"
 						class="order-card__item"
-            :style="{ '--order-item-placeholder': item.color }"
-            :info="item"
+						:info="getOrderItemInfo(item, order)"
 						:show-date="false"
 						:show-remove="false"
+						:show-brand="false"
 						order-actions-layout
 					/>
 				</div>
@@ -74,7 +87,7 @@
 </template>

 <script setup lang="ts">
-import { computed, shallowRef, onMounted,ref } from 'vue'
+	import { computed, onMounted, ref, shallowRef } from 'vue'
 	import { useI18n } from 'vue-i18n'
 	import { fetchMyOrders } from '@/api/user'
 	import ScItem from '@/views/shoppingCart/sc-item.vue'
@@ -85,114 +98,60 @@ type ActualOrderStatus = Exclude<OrderStatus, 'all'>
 	interface StatusOption {
 		key: OrderStatus
 		label: string
+		value?: number
 	}

 	interface OrderItem {
-  id: number
-  url: string
-  title: string
-  brand: string
-  fileSize: number
-  date: string
-  amount: number
-  tags: string[]
-  checked: boolean
-  color: string
+		id: string
+		listingName: string
+		price: number
+		productCategory: string[]
+		thumbnailUrl: string
+		orderId: string
+		shopName: string
+		status: number
+		totalPrice: number
+		updateTime: string
 	}

 	interface OrderRecord {
-  id: string
-  date: string
-  status: ActualOrderStatus
-  amount: number
+		orderId: string
+		shopName: string
+		totalPrice: number
+		updateTime: string
 		items: OrderItem[]
 	}

-const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
-const { t } = useI18n({ useScope: 'global' })
+	interface DisplayOrderRecord extends OrderRecord {
+		formatUpdatetime: string
+	}
+
+	const { t, locale } = useI18n({ useScope: 'global' })

 	const statusOptions = computed<StatusOption[]>(() => [
 		{ key: 'all', label: t('Wardrobe.orders.statuses.all') },
-  { key: 'paid', label: t('Wardrobe.orders.statuses.paid') },
-  { key: 'unpaid', label: t('Wardrobe.orders.statuses.unpaid') },
-  { key: 'cancelled', label: t('Wardrobe.orders.statuses.cancelled') }
+		{ key: 'paid', label: t('Wardrobe.orders.statuses.paid'), value: 1 },
+		{ key: 'unpaid', label: t('Wardrobe.orders.statuses.unpaid'), value: 0 },
+		{ key: 'cancelled', label: t('Wardrobe.orders.statuses.cancelled'), value: 2 }
 	])

-const createOrderItem = (
-  id: number,
-  title: string,
-  brand: string,
-  amount: number,
-  color: string
-): OrderItem => {
-  return {
-    id,
-    url: placeholderImage,
-    title,
-    brand,
-    fileSize: 1024 * (id + 2),
-    date: '2026-02-16 23:34',
-    amount,
-    color,
-    checked: false,
-    tags: ['female', 'dress', 'blouse', 'outwear']
-  }
-}
-const orders: OrderRecord[] = [
-  {
-    id: 'SP897772698',
-    date: 'Feb 23, 2026, 3:00 PM',
-    status: 'paid',
-    amount: 45,
-    items: [
-      createOrderItem(1, 'North Outfit Set', 'Roaming Clouds', 15, '#e7e1d7'),
-      createOrderItem(2, 'Velvet Night Dress', 'Ivory Muse Studio', 16, '#5d2f5e'),
-      createOrderItem(3, 'Maison Contour Suit', 'Ivory Muse Studio', 14, '#dcd8d1')
-    ]
-  },
-  {
-    id: 'SP893872698',
-    date: 'Feb 21, 2026, 10:20 AM',
-    status: 'unpaid',
-    amount: 15,
-    items: [createOrderItem(4, 'Silver Drape Dress', 'Roaming Clouds', 15, '#d8d3ca')]
-  },
-  {
-    id: 'SP897262698',
-    date: 'Feb 16, 2026, 11:34 PM',
-    status: 'paid',
-    amount: 29,
-    items: [
-      createOrderItem(5, 'North Outfit Set', 'Roaming Clouds', 15, '#ece8df'),
-      createOrderItem(6, 'North Outfit Set', 'Ivory Muse Studio', 5, '#d5ddd7'),
-      createOrderItem(7, 'North Outfit Set', 'Ivory Muse Studio', 9, '#e5e1d9')
-    ]
-  },
-  {
-    id: 'SP892072692',
-    date: 'Feb 2, 2026, 9:34 PM',
-    status: 'paid',
-    amount: 15,
-    items: [
-      createOrderItem(8, 'Cream Jacket Set', 'Roaming Clouds', 7, '#eee3d3'),
-      createOrderItem(9, 'White Linen Dress', 'Ivory Muse Studio', 8, '#d8d8d8')
-    ]
-  },
-  {
-    id: 'SP892972603',
-    date: 'Jan 4, 2026, 8:22 PM',
-    status: 'cancelled',
-    amount: 15,
-    items: [createOrderItem(10, 'Soft Utility Knit', 'Urban Line Edit', 15, '#d8c2a4')]
-  }
-]
-
 	const activeStatus = shallowRef<OrderStatus>('all')
-const expandedOrderId = shallowRef('SP897262698')
+	const expandedOrderId = shallowRef('')
+	const orders = ref<OrderRecord[]>([])
+	const ordersScrollRef = ref<HTMLElement | null>(null)
+	const isLoadingOrders = shallowRef(false)
+	const hasMoreOrders = shallowRef(true)
+	const ordersRequestId = shallowRef(0)
+	const orderParams = ref({
+		page: 1,
+		size: 10
+	})

-const filteredOrders = computed(() => {
-  if (activeStatus.value === 'all') return orders
-  return orders.filter((order) => order.status === activeStatus.value)
+	const filteredOrders = computed<DisplayOrderRecord[]>(() => {
+		return orders.value.map((order) => ({
+			...order,
+			formatUpdatetime: formatOrderUpdateTime(order.updateTime)
+		}))
 	})

 	const toggleOrder = (orderId: string) => {
@@ -213,24 +172,127 @@ const getOrderActionLabel = (status: ActualOrderStatus) => {
 		return t('Wardrobe.orders.actions.buyAgain')
 	}

-const orderParams =ref({
-  page: 1,
-  pageSize: 10,
-  status: ''
+	const getOrderStatusValue = (status: unknown): ActualOrderStatus => {
+		if (status === 0 || status === '0' || status === 'unpaid') return 'unpaid'
+		if (status === 2 || status === '2' || status === 'cancelled') return 'cancelled'
+		return 'paid'
+	}
+
+	const getOrderStatus = (order: OrderRecord) => {
+		return getOrderStatusValue(order.items[0]?.status)
+	}
+
+	const formatOrderUpdateTime = (dateStr: string) => {
+		if (!dateStr) return ''
+
+		const date = new Date(dateStr)
+		if (Number.isNaN(date.getTime())) return dateStr
+
+		const isChinese = locale.value === 'CHINESE_SIMPLIFIED' || locale.value.startsWith('zh')
+		const dateLocale = isChinese ? 'zh-CN' : 'en-US'
+		const options: Intl.DateTimeFormatOptions = isChinese
+			? {
+				year: 'numeric',
+				month: 'long',
+				day: 'numeric',
+				hour: '2-digit',
+				minute: '2-digit',
+				hour12: false
+			}
+			: {
+				month: 'short',
+				day: 'numeric',
+				year: 'numeric',
+				hour: 'numeric',
+				minute: '2-digit',
+				hour12: true
+			}
+
+		return new Intl.DateTimeFormat(dateLocale, options).format(date)
+	}
+
+	const getOrderItemInfo = (item: OrderItem, order: OrderRecord) => ({
+		status: item.status,
+		title: item.listingName,
+		brand: order.shopName,
+		tags: item.productCategory,
+		date: item.updateTime,
+		amount: item.price,
+		cover: item.thumbnailUrl
 	})
-const fetchAllOrders = () => {
-  fetchMyOrders(orderParams.value)
+
+	const fetchAllOrders = async () => {
+		if (isLoadingOrders.value || !hasMoreOrders.value) return
+
+		const requestId = ordersRequestId.value
+		isLoadingOrders.value = true
+
+		try {
+			const params: { page: number; size: number; status?: number } = {
+				page: orderParams.value.page,
+				size: orderParams.value.size
+			}
+			const currentStatus = statusOptions.value.find((option) => option.key === activeStatus.value)
+
+			if (currentStatus?.value !== undefined) {
+				params.status = currentStatus.value
+			}
+
+			const res = await fetchMyOrders(params)
+			if (requestId !== ordersRequestId.value) return
+
+			const content = res.content ?? []
+
+			orders.value = orderParams.value.page === 1 ? content : [...orders.value, ...content]
+			hasMoreOrders.value = content.length >= orderParams.value.size
+
+			if (hasMoreOrders.value) {
+				orderParams.value.page += 1
+			}
+		} finally {
+			if (requestId === ordersRequestId.value) {
+				isLoadingOrders.value = false
+			}
+		}
+	}
+
+	const resetOrders = () => {
+		ordersRequestId.value += 1
+		orders.value = []
+		expandedOrderId.value = ''
+		isLoadingOrders.value = false
+		hasMoreOrders.value = true
+		orderParams.value.page = 1
+
+		if (ordersScrollRef.value) {
+			ordersScrollRef.value.scrollTop = 0
+		}
+	}
+
+	const setActiveStatus = (status: OrderStatus) => {
+		activeStatus.value = status
+		resetOrders()
+		fetchAllOrders()
+	}
+
+	const handleOrdersScroll = () => {
+		const el = ordersScrollRef.value
+		if (!el) return
+
+		const reachBottom = el.scrollTop + el.clientHeight >= el.scrollHeight - 120
+		if (reachBottom) {
+			fetchAllOrders()
+		}
 	}

 	onMounted(() => {
 		fetchAllOrders()
 	})
-
 </script>

 <style lang="less" scoped>
 	.c-svg {
-  width: initial;
+		width: fit-content;
 		height: initial;
 	}
 	.wardrobe-orders {
@@ -326,6 +388,9 @@ onMounted(() => {
 					font-size: 1.4rem;
 					color: #808080;
 				}
+				.brand {
+					column-gap: 1rem;
+				}
 			}

 			.order-card__preview {
@@ -337,9 +402,10 @@ onMounted(() => {
 					height: 10rem;
 					display: block;
 					margin-right: 1.2rem;
-        img {
-          width: 100%;
-        }
+					background-color: #f6f6f6;
+					background-position: center;
+					background-repeat: no-repeat;
+					background-size: cover;
 				}

 				.order-card__extra {