feat: wardrobe assets

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

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

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',

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: '短裙',

src/utils/ClothesCategory.ts

@@ -6,8 +6,8 @@ type Translate = (key: string) => string
 
 const clothesCategoryConfigs = [
   {
-    key: 'blouses',
+    key: 'blouse',
-    value: 'blouses'
+    value: 'blouse'
   },
   {
     key: 'dress',

src/views/shoppingCart/sc-item.vue

@@ -11,7 +11,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>
@@ -57,6 +57,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

src/views/wardrobe/Assets.vue

@@ -1,55 +1,11 @@
 <template>
 	<div class="wardrobe-assets flex">
-    <aside class="wardrobe-assets__filters">
+		<FilterSidebar
-      <div class="filters-card">
+			:categories="categories"
-        <div class="filters-card__heading">
+			:genders="genders"
-          <h2 class="filters-card__title">{{ t('Wardrobe.assets.filters') }}</h2>
+			:filters="filters"
-          <button class="filters-card__clear" type="button" @click="clearFilters">
+			@update:filters="updateFilters"
-            {{ 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>
 
 		<section
 			class="wardrobe-assets__content flex flex-1 flex-col"
@@ -86,7 +42,7 @@
 				<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"
+							:url="item.thumbnailUrl"
-              :name="item.title"
+							:name="item.listingName"
-              :price="item.price"
 							:showPrice="false"
 						></CommodityItem>
 					</div>
@@ -113,126 +72,134 @@
 	</div>
 </template>
 <script setup lang="ts">
-import { computed, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
+	import {
-import { useI18n } from 'vue-i18n'
+		computed,
-import { useRouter } from 'vue-router'
+		nextTick,
-import { useClothesCategories } from '@/utils/ClothesCategory'
+		onMounted,
-import img from '@/assets/images/collectionStory/Rectangle.png'
+		onUnmounted,
-import Empty from './Empty.vue'
+		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'
 
-interface FilterOption {
+	const buyerId = useUserInfoStore().state.userInfo?.userId
+
+	interface FilterOption {
 		label: string
 		value: string
-}
+	}
 
-const router = useRouter()
+	const router = useRouter()
-const { t } = useI18n({ useScope: 'global' })
+	const { t } = useI18n({ useScope: 'global' })
-const clothesCategories = useClothesCategories()
+	const clothesCategories = useClothesCategories()
 
-const categories = computed<FilterOption[]>(() => [
+	const categories = computed<FilterOption[]>(() => [
 		{ label: t('Wardrobe.common.all'), value: 'all' },
 		...clothesCategories.value.map((option) => ({
 			label: option.label,
 			value: option.value
 		}))
-])
+	])
 
-const genders = computed<FilterOption[]>(() => [
+	const genders = computed<FilterOption[]>(() => [
 		{ label: t('Wardrobe.common.all'), value: 'all' },
 		{ label: t('Wardrobe.assets.genders.male'), value: 'male' },
 		{ label: t('Wardrobe.assets.genders.female'), value: 'female' }
-])
+	])
 
-const categoryValues = computed(() =>
+	const categoryValues = computed(() =>
 		categories.value.filter((option) => option.value !== 'all').map((option) => option.value)
-)
+	)
 
-const filters = reactive({
+	const genderValues = computed(() =>
-  categories: ['skirt'] as string[],
+		genders.value.filter((option) => option.value !== 'all').map((option) => option.value)
-  gender: 'all'
+	)
-})
 
-const dataList = ref([
+	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 dataListRef = ref<HTMLDivElement | null>(null)
+	const dataListRef = ref<HTMLDivElement | null>(null)
-const gridColumnCount = shallowRef(1)
+	const gridColumnCount = shallowRef(1)
-let gridResizeObserver: ResizeObserver | null = null
+	let gridResizeObserver: ResizeObserver | null = null
 
-watch(
+	const filters = reactive({
+		categories: [
+			'blouse',
+			'dress',
+			'trousers',
+			'skirt',
+			'tops',
+			'bottoms',
+			'outwear',
+			'others'
+		],
+		genders: ['male', 'female']
+	})
+	const pageParams= reactive({
+		page: 1,
+		size: 10
+	})
+	const handleGetAssets = () => {
+		fetchMyWardrobe({
+			buyerId: buyerId,
+			categories: [],
+			designFor: filters.genders.length > 1 ? 'all' : filters.genders[0],
+			page: pageParams.page,
+			size: pageParams.size
+		}).then(res => {
+			console.log(res)
+			dataList.value = res.content
+		})
+	}
+
+	watch(
 		() => filters,
 		(val) => {
 			console.log(val)
 		},
 		{ deep: true }
-)
+	)
 
-const selectedCount = computed(() => {
+	const selectedCount = computed(() => {
 		return dataList.value.filter((el) => el.checked === true).length
-})
+	})
-const allCategoriesSelected = computed(() => {
+	const allCategoriesSelected = computed(() => {
 		return (
 			filters.categories.length === categoryValues.value.length &&
 			categoryValues.value.every((value) => filters.categories.includes(value))
 		)
-})
+	})
 
-const isCategoryActive = (value: string) => {
+	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
 		}
 
 		return filters.categories.includes(value)
-}
+	}
 
-const toggleCategory = (value: string) => {
+	const toggleCategory = (value: string) => {
 		if (value === 'all') {
 			filters.categories = allCategoriesSelected.value ? [] : [...categoryValues.value]
 			return
@@ -244,34 +211,51 @@ const toggleCategory = (value: string) => {
 		}
 
 		filters.categories = [...filters.categories, value]
-}
+	}
 
-const setGender = (value: string) => {
+	const isGenderActive = (value: string) => {
-  filters.gender = value
+		if (value === 'all') {
-}
+			return allGendersSelected.value
+		}
 
-const clearFilters = () => {
+		return filters.genders.includes(value)
-  filters.categories = [...categoryValues.value]
+	}
-  filters.gender = 'all'
-}
 
-const handleSelectItem = (item) => {
+	const toggleGender = (value: string) => {
-  console.log('111', item)
+		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) => {
 		item.checked = !item.checked
-}
+	}
 
-const handleSelectAll = (flag) => {
+	const handleSelectAll = (flag) => {
 		dataList.value.forEach((item) => {
 			item.checked = flag
 		})
-}
+	}
 
-const handleDownloadSelected = () => {
+	const handleDownloadSelected = () => {
 		const items = dataList.value.filter((item) => item.checked)
 		console.log(items)
-}
+	}
 
-const updateGridColumnCount = () => {
+	const updateGridColumnCount = () => {
 		if (!dataListRef.value) {
 			gridColumnCount.value = 1
 			return
@@ -284,17 +268,18 @@ const updateGridColumnCount = () => {
 				: 1
 
 		gridColumnCount.value = Math.max(columnCount, 1)
-}
+	}
 
-const isLastColumn = (index: number) => {
+	const isLastColumn = (index: number) => {
 		return (index + 1) % gridColumnCount.value === 0
-}
+	}
 
-const goToDigitalItems = () => {
+	const goToDigitalItems = () => {
 		router.push('/digitalItem')
-}
+	}
 
-onMounted(() => {
+	onMounted(() => {
+		handleGetAssets()
 		nextTick(() => {
 			updateGridColumnCount()
 
@@ -307,18 +292,18 @@ onMounted(() => {
 			})
 			gridResizeObserver.observe(dataListRef.value)
 		})
-})
+	})
 
-onUnmounted(() => {
+	onUnmounted(() => {
 		gridResizeObserver?.disconnect()
-})
+	})
 </script>
 <style lang="less" scoped>
-.c-svg {
+	.c-svg {
 		width: initial;
 		height: initial;
-}
+	}
-.wardrobe-assets {
+	.wardrobe-assets {
 		--wardrobe-border-color: #d9d4cd;
 		--wardrobe-border-dark: #c8c0b4;
 		--wardrobe-text-main: #232323;
@@ -521,7 +506,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;
 
@@ -555,5 +540,5 @@ onUnmounted(() => {
 				}
 			}
 		}
-}
+	}
 </style>

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>

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">
+			<article v-for="order in filteredOrders" :key="order.orderId" class="order-card">
-        <button class="order-card__toggle" type="button" @click="toggleOrder(order.id)">
+				<button
-          <span :class="{ 'is-expanded': expandedOrderId === order.id }"></span>
+					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>
+						<h3 class="order-card__id">{{ order.orderId }}</h3>
-            <p class="order-card__date">{{ order.date }}</p>
+						<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}`">
+					<div class="order-card__status" :class="`is-${getOrderStatus(order)}`">
-            {{ getStatusBadgeLabel(order.status) }}
+						{{ getStatusBadgeLabel(getOrderStatus(order)) }}
 					</div>
 
 					<div class="order-card__amount">
-            <span>${{ order.amount }}</span>
+						<span>${{ order.totalPrice }}</span>
-            <small>{{ t('Wardrobe.common.currencyHkd') }}</small>
+						<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" />
+						<svg-icon
-            <span>{{ getOrderActionLabel(order.status) }}</span>
+							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="getOrderItemInfo(item, order)"
-            :info="item"
 						:show-date="false"
 						:show-remove="false"
+						:show-brand="false"
 						order-actions-layout
 					/>
 				</div>
@@ -74,166 +87,215 @@
 </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 { useI18n } from 'vue-i18n'
-import { fetchMyOrders } from '@/api/user'
+	import { fetchMyOrders } from '@/api/user'
-import ScItem from '@/views/shoppingCart/sc-item.vue'
+	import ScItem from '@/views/shoppingCart/sc-item.vue'
 
-type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
+	type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
-type ActualOrderStatus = Exclude<OrderStatus, 'all'>
+	type ActualOrderStatus = Exclude<OrderStatus, 'all'>
 
-interface StatusOption {
+	interface StatusOption {
 		key: OrderStatus
 		label: string
-}
+		value?: number
+	}
 
-interface OrderItem {
+	interface OrderItem {
-  id: number
-  url: string
-  title: string
-  brand: string
-  fileSize: number
-  date: string
-  amount: number
-  tags: string[]
-  checked: boolean
-  color: string
-}
-
-interface OrderRecord {
 		id: string
-  date: string
+		listingName: string
-  status: ActualOrderStatus
+		price: number
-  amount: number
+		productCategory: string[]
+		thumbnailUrl: string
+		orderId: string
+		shopName: string
+		status: number
+		totalPrice: number
+		updateTime: string
+	}
+
+	interface OrderRecord {
+		orderId: string
+		shopName: string
+		totalPrice: number
+		updateTime: string
 		items: OrderItem[]
-}
+	}
 
-const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
+	interface DisplayOrderRecord extends OrderRecord {
-const { t } = useI18n({ useScope: 'global' })
+		formatUpdatetime: string
+	}
 
-const statusOptions = computed<StatusOption[]>(() => [
+	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: 'paid', label: t('Wardrobe.orders.statuses.paid'), value: 1 },
-  { key: 'unpaid', label: t('Wardrobe.orders.statuses.unpaid') },
+		{ key: 'unpaid', label: t('Wardrobe.orders.statuses.unpaid'), value: 0 },
-  { key: 'cancelled', label: t('Wardrobe.orders.statuses.cancelled') }
+		{ key: 'cancelled', label: t('Wardrobe.orders.statuses.cancelled'), value: 2 }
-])
+	])
 
-const createOrderItem = (
+	const activeStatus = shallowRef<OrderStatus>('all')
-  id: number,
+	const expandedOrderId = shallowRef('')
-  title: string,
+	const orders = ref<OrderRecord[]>([])
-  brand: string,
+	const ordersScrollRef = ref<HTMLElement | null>(null)
-  amount: number,
+	const isLoadingOrders = shallowRef(false)
-  color: string
+	const hasMoreOrders = shallowRef(true)
-): OrderItem => {
+	const ordersRequestId = shallowRef(0)
-  return {
+	const orderParams = ref({
-    id,
+		page: 1,
-    url: placeholderImage,
+		size: 10
-    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 filteredOrders = computed<DisplayOrderRecord[]>(() => {
-const expandedOrderId = shallowRef('SP897262698')
+		return orders.value.map((order) => ({
+			...order,
+			formatUpdatetime: formatOrderUpdateTime(order.updateTime)
+		}))
+	})
 
-const filteredOrders = computed(() => {
+	const toggleOrder = (orderId: string) => {
-  if (activeStatus.value === 'all') return orders
-  return orders.filter((order) => order.status === activeStatus.value)
-})
-
-const toggleOrder = (orderId: string) => {
 		expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId
-}
+	}
 
-const getExtraCount = (order: OrderRecord) => {
+	const getExtraCount = (order: OrderRecord) => {
 		return Math.max(order.items.length - 2, 0)
-}
+	}
 
-const getStatusBadgeLabel = (status: ActualOrderStatus) => {
+	const getStatusBadgeLabel = (status: ActualOrderStatus) => {
 		return t(`Wardrobe.orders.statusBadges.${status}`)
-}
+	}
 
-const getOrderActionLabel = (status: ActualOrderStatus) => {
+	const getOrderActionLabel = (status: ActualOrderStatus) => {
 		if (status === 'paid') return t('Wardrobe.orders.actions.invoice')
 		if (status === 'unpaid') return t('Wardrobe.orders.actions.completePayment')
 		return t('Wardrobe.orders.actions.buyAgain')
-}
+	}
 
-const orderParams =ref({
+	const getOrderStatusValue = (status: unknown): ActualOrderStatus => {
-  page: 1,
+		if (status === 0 || status === '0' || status === 'unpaid') return 'unpaid'
-  pageSize: 10,
+		if (status === 2 || status === '2' || status === 'cancelled') return 'cancelled'
-  status: ''
+		return 'paid'
-})
+	}
-const fetchAllOrders = () => {
-  fetchMyOrders(orderParams.value)
-}
 
-onMounted(() => {
+	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 = 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 {
+	.c-svg {
-  width: initial;
+		width: fit-content;
 		height: initial;
-}
+	}
-.wardrobe-orders {
+	.wardrobe-orders {
 		height: 100%;
 		min-height: 0;
 		display: flex;
@@ -272,9 +334,9 @@ onMounted(() => {
 		.orders-list {
 			padding-bottom: 8rem;
 		}
-}
+	}
 
-.order-card {
+	.order-card {
 		position: relative;
 		border-bottom: 0.1rem solid #c4c4c4;
 
@@ -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 {
+					background-color: #f6f6f6;
-          width: 100%;
+					background-position: center;
-        }
+					background-repeat: no-repeat;
+					background-size: cover;
 				}
 
 				.order-card__extra {
@@ -446,5 +512,5 @@ onMounted(() => {
 				border-bottom: 0;
 			}
 		}
-}
+	}
 </style>