aidlab/Aida_Purchaser_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
李志鹏
2026-05-22 13:36:53 +08:00
parent c8fa11aa25 c576d050db
commit ecf53c8353
24 changed files with 1620 additions and 1041 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
.prettierrc.json
View File

@@ -1,8 +1,10 @@
{ {
"$schema": "https://json.schemastore.org/prettierrc", "$schema": "https://json.schemastore.org/prettierrc",
"semi": false, "semi": false,
"tabWidth": 2, "tabWidth": 4,
"singleQuote": true, "singleQuote": true,
"printWidth": 100, "printWidth": 100,
"trailingComma": "none" "useTabs": true,
"trailingComma": "none",
"vueIndentScriptAndStyle": true
} }

13
package-lock.json generated
View File

@@ -13,6 +13,7 @@
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"element-plus": "^2.13.2", "element-plus": "^2.13.2",
"gsap": "^3.13.0", "gsap": "^3.13.0",
"lodash-es": "^4.18.1",
"markdown-it": "^14.1.0", "markdown-it": "^14.1.0",
"md5": "^2.3.0", "md5": "^2.3.0",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
@@ -4790,9 +4791,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/lodash-es": { "node_modules/lodash-es": {
"version": "4.17.23", "version": "4.18.1",
"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.23.tgz", "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
"integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==", "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/lodash-unified": { "node_modules/lodash-unified": {
@@ -12111,9 +12112,9 @@
"integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==" "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="
}, },
"lodash-es": { "lodash-es": {
"version": "4.17.23", "version": "4.18.1",
"resolved": "https://registry.npmmirror.com/lodash-es/-/lodash-es-4.17.23.tgz", "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
"integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg==" "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A=="
}, },
"lodash-unified": { "lodash-unified": {
"version": "1.0.3", "version": "1.0.3",

1
package.json
View File

@@ -17,6 +17,7 @@
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"element-plus": "^2.13.2", "element-plus": "^2.13.2",
"gsap": "^3.13.0", "gsap": "^3.13.0",
"lodash-es": "^4.18.1",
"markdown-it": "^14.1.0", "markdown-it": "^14.1.0",
"md5": "^2.3.0", "md5": "^2.3.0",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",

10
src/api/user.ts
View File

@@ -16,15 +16,19 @@ export const fetchMyWardrobe = (data: WardrobeItem): Promise<ApiResponse> => {
} }
export interface OrderItem { export interface OrderItem {
status: number // 0未支付 1已支付 2已取消 不穿查全部 status?: number // 0未支付 1已支付 2已取消 不传查全部
page: number page: number
size: number size: number
} }
export const fetchMyOrders = (data: OrderItem): Promise<ApiResponse> => {
export interface OrdersPageResponse {
content: any[]
}
export const fetchMyOrders = (data: OrderItem): Promise<OrdersPageResponse> => {
return request({ return request({
url: '/buyer/buyer/order/page', url: '/buyer/buyer/order/page',
method: 'get', method: 'get',
params: data params: data
}) })
} }

BIN
src/assets/images/avatar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 128 KiB

BIN
src/assets/images/brand/brandDetailBg.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 713 KiB

After

Width:  |  Height:  |  Size: 121 KiB

26
src/components/checked.vue
View File

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

27
src/directives/avatarLoad.js Normal file
View File

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

3
src/lang/en.ts
View File

@@ -133,7 +133,6 @@ export default {
subtitle: 'Your digital pieces, all in one place', subtitle: 'Your digital pieces, all in one place',
common: { common: {
all: 'All', all: 'All',
currencyHkd: 'HKD'
}, },
tabs: { tabs: {
ariaLabel: 'Wardrobe tabs', ariaLabel: 'Wardrobe tabs',
@@ -187,7 +186,7 @@ export default {
} }
}, },
ClothesCategories: { ClothesCategories: {
blouses: 'Blouse', blouse: 'Blouse',
dress: 'Dress', dress: 'Dress',
trousers: 'Trousers', trousers: 'Trousers',
skirt: 'Skirt', skirt: 'Skirt',

3
src/lang/zh-cn.ts
View File

@@ -133,7 +133,6 @@ export default {
subtitle: '你的数字单品尽在此处', subtitle: '你的数字单品尽在此处',
common: { common: {
all: '全部', all: '全部',
currencyHkd: 'HKD'
}, },
tabs: { tabs: {
ariaLabel: '衣橱标签页', ariaLabel: '衣橱标签页',
@@ -187,7 +186,7 @@ export default {
} }
}, },
ClothesCategories: { ClothesCategories: {
blouses: '衬衫', blouse: '衬衫',
dress: '连衣裙', dress: '连衣裙',
trousers: '裤子', trousers: '裤子',
skirt: '短裙', skirt: '短裙',

4
src/utils/ClothesCategory.ts
View File

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

2
src/views/brand/brand-item.vue
View File

@@ -25,7 +25,7 @@ const {} = toRefs(data);
<div class="item"> <div class="item">
<div class="left"> <div class="left">
<div class="portrait"> <div class="portrait">
<img :src="item.avatar" alt=""> <img v-avatarLoad="item.avatar" alt="">
</div> </div>
<div class="info"> <div class="info">
<div class="name">{{ item.shopName }}</div> <div class="name">{{ item.shopName }}</div>

2
src/views/brand/index.vue
View File

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

4
src/views/brandDetail/commodity-list.vue
View File

@@ -1,6 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue"; import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import img from "@/assets/images/collectionStory/Rectangle.png";
import { getlistingListApi } from "@/api/listing"; import { getlistingListApi } from "@/api/listing";
const props = defineProps({ const props = defineProps({
@@ -150,10 +149,9 @@ defineExpose({})
// align-content: start; // align-content: start;
// grid-template-columns: repeat(3, 1fr); // grid-template-columns: repeat(3, 1fr);
overflow: hidden; overflow: hidden;
display: grid; display: grid;
align-content: start; 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; border-top: 0.5px solid #585858;
padding: .5px 0 0 .5px; padding: .5px 0 0 .5px;
/* 垂直线（右边框） */ /* 垂直线（右边框） */

3
src/views/brandDetail/index.vue
View File

@@ -7,6 +7,7 @@ import myEvent from '@/utils/myEvent'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { getDesignerDetail } from '@/api/brand' import { getDesignerDetail } from '@/api/brand'
import { AddShoppingCart } from '@/api/shoppingCart' import { AddShoppingCart } from '@/api/shoppingCart'
import brandDetailBg from '@/assets/images/brand/brandDetailBg.png'
//const props = defineProps({ //const props = defineProps({
//}) //})
@@ -54,7 +55,7 @@ defineExpose({})
<template> <template>
<div class="brand"> <div class="brand">
<div class="header-img"> <div class="header-img">
<img :src="designerDetail.brandBanner || '@/assets/images/brand/brandDetailBg.png'" alt=""> <img :src="designerDetail.brandBanner || brandDetailBg" alt="">
</div> </div>
<div class="content"> <div class="content">
<div class="merchant-info"> <div class="merchant-info">

2
src/views/brandDetail/merchant-info.vue
View File

@@ -31,7 +31,7 @@ const {} = toRefs(data);
<template> <template>
<div class="merchantInfo"> <div class="merchantInfo">
<div class="profile"> <div class="profile">
<img :src="designerDetail.avatar || '@/assets/images/collectionStory/Rectangle.png'" alt=""> <img v-avatarLoad="designerDetail.avatar" alt="">
</div> </div>
<div class="info"> <div class="info">
<div class="detail"> <div class="detail">

168
src/views/digitalDetail/index.vue
View File

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

144
src/views/digitalItem/commodity-list.vue
View File

@@ -1,68 +1,103 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue"; import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import img from "@/assets/images/collectionStory/Rectangle.png"; import { getListingMallListApi } from '@/api/listing'
//const props = defineProps({
//}) const props = defineProps({
getListData: {
type: Object,
default: () => ({
designFor: '',
categories: [],
sortField: '',
})
}
})
const emit = defineEmits([ const emit = defineEmits([
'addShopping', 'addShopping',
'openDetail' 'openDetail',
'getListingMallList'
]) ])
let data = reactive({ 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) => { const addShopping = (item) => {
emit('addShopping', item) emit('addShopping', item)
} }
const openDetail = (item) => { const openDetail = (item) => {
emit('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(()=>{ onMounted(()=>{
}) })
onUnmounted(()=>{ onUnmounted(()=>{
}) })
defineExpose({}) defineExpose({reset,commodityList,getListingListData})
const {} = toRefs(data); const {} = toRefs(data);
</script> </script>
<template> <template>
<div class="commodityList"> <div class="commodityList">
<div class="list"> <div class="list">
<div class="item" v-for="item in list" :key="item.url"> <div class="item" v-for="item in commodityList" :key="item.url">
<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)" @openDetail="openDetail(item)"></CommodityItem> <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> </div>
</div> </div>
@@ -81,12 +116,12 @@ const {} = toRefs(data);
// align-content: start; // align-content: start;
// grid-template-columns: repeat(3, 1fr); // grid-template-columns: repeat(3, 1fr);
overflow: hidden; overflow: hidden;
display: grid; display: grid;
align-content: start; 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; border-top: 0.5px solid #585858;
padding: .5px 0 0 .5px; padding: .5px 0 0 .5px;
/* 垂直线（右边框） */ /* 垂直线（右边框） */
.item{ .item{
position: relative; position: relative;
@@ -96,6 +131,25 @@ const {} = toRefs(data);
margin-right: -1px; margin-right: -1px;
margin-bottom: -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> </style>

53
src/views/digitalItem/index.vue
View File

@@ -10,47 +10,45 @@ import { getListingMallListApi } from '@/api/listing'
defineOptions({ defineOptions({
name: 'digitalItem' name: 'digitalItem'
}) })
const categories = ref([''])
const gender = ref([''])
//const props = defineProps({ //const props = defineProps({
//}) //})
//const emit = defineEmits([ //const emit = defineEmits([
//]) //])
const categories = ref(['all'])
const gender = ref(['all'])
const digitalItemRef = ref(null) const digitalItemRef = ref(null)
const scrollTop = ref(0) const scrollTop = ref(0)
const router = useRouter() const router = useRouter()
const commodityListRef = ref(null)
const searechTypeList = ref([ const searechTypeList = ref([
{ {
value:'Best Selling', value:'salesVolume',
label:'Best Selling' label:'Best Selling'
},{ },{
value:'Price: Low to High', value:'price',
label:'Price: Low to High' label:'Price: Low to High'
},{ },{
value:'Newest First', value:'updateTime',
label:'Newest First' label:'Newest First'
}, },
]) ])
const searechType = ref('Newest First')
const searechType = ref('updateTime')
const addShopping = (item) => {} const addShopping = (item) => {}
const openDetail = (item) => { const openDetail = (item) => {
scrollTop.value = digitalItemRef.value.scrollTop scrollTop.value = digitalItemRef.value.scrollTop
router.push({ router.push({
path: '/digitalItem/' + 123, path: '/digitalItem/' + item.id,
}) })
} }
const handleChange = (val) => { const handleChange = (val) => {
categories.value = val.categories
gender.value = val.gender
commodityListRef.value.reset()
} }
const getListingMallList = ()=>{ const updateSort = () => {
let data = { commodityListRef.value.reset()
// designFor
}
// getListingMallListApi().then(res => {
// })
} }
onActivated(()=>{ onActivated(()=>{
digitalItemRef.value.scrollTop = scrollTop.value digitalItemRef.value.scrollTop = scrollTop.value
@@ -72,13 +70,13 @@ defineExpose({})
</div> </div>
<div class="filters"> <div class="filters">
<div class="filter-item"> <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 }"> <template #label="{ label }">
<span class="header-label">Sort By</span> <span class="header-label">Sort By</span>
<span class="header-value">{{ label }}</span> <span class="header-value">{{ label }}</span>
</template> </template>
<el-option <el-option
v-for="item in categoriesList" v-for="item in searechTypeList"
:key="item.label" :key="item.label"
:value="item.value" :value="item.value"
:label="item.label" :label="item.label"
@@ -91,8 +89,17 @@ defineExpose({})
<MerchantInfo @change="handleChange"></MerchantInfo> <MerchantInfo @change="handleChange"></MerchantInfo>
</div> </div>
<div class="commodity-list"> <div class="commodity-list">
<CommodityList v-if="true" @addShopping="addShopping" @openDetail="openDetail"></CommodityList> <CommodityList
<div v-else class="null"> 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 <sc-list-null
nullImage="shopping-cart" nullImage="shopping-cart"
:showButton="false" :showButton="false"
@@ -100,6 +107,7 @@ defineExpose({})
tip="Try adjusting your filters or refreshing the page." tip="Try adjusting your filters or refreshing the page."
/> />
</div> </div>
</div> </div>
</div> </div>
<Footer></Footer> <Footer></Footer>
@@ -220,8 +228,13 @@ defineExpose({})
border-right: 0.5px solid #585858; border-right: 0.5px solid #585858;
margin-right: 9rem; margin-right: 9rem;
display: flex; display: flex;
position: relative;
.null{ .null{
flex: 1; flex: 1;
position: absolute;
width: 100%;
height: 100%;
background-color: #fff;
} }
} }
} }

8
src/views/digitalItem/merchant-info.vue
View File

@@ -16,12 +16,12 @@ const genderList = computed(() => [
{ label: t('Wardrobe.assets.genders.male'), value: 'male' }, { label: t('Wardrobe.assets.genders.male'), value: 'male' },
{ label: t('Wardrobe.assets.genders.female'), value: 'female' } { label: t('Wardrobe.assets.genders.female'), value: 'female' }
]) ])
const categories = ref(['']) const categories = ref(['all'])
const gender = ref(['']) const gender = ref(['all'])
const clearFilters = () => { const clearFilters = () => {
categories.value = [''] categories.value = ['all']
gender.value = [''] gender.value = ['all']
handleChange() handleChange()
} }
const handleChange = () => { const handleChange = () => {

3
src/views/shoppingCart/sc-item.vue
View File

@@ -10,7 +10,7 @@
<img :src="info.cover" /> <img :src="info.cover" />
<div class="content"> <div class="content">
<div class="title">{{ info.title }}</div> <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="icon"><svg-icon name="order-shop" size="24" /></span>
<span class="text">{{ info.brand }}</span> <span class="text">{{ info.brand }}</span>
</div> </div>
@@ -56,6 +56,7 @@
showDate: { type: Boolean, default: true }, showDate: { type: Boolean, default: true },
showRemove: { type: Boolean, default: true }, showRemove: { type: Boolean, default: true },
orderActionsLayout: { type: Boolean, default: false }, orderActionsLayout: { type: Boolean, default: false },
showBrand: { type: Boolean, default: true },
info: { info: {
type: Object as () => { type: Object as () => {
status: number status: number

1016
src/views/wardrobe/Assets.vue
View File

File diff suppressed because it is too large Load Diff

301
src/views/wardrobe/FilterSidebar.vue Normal file
View File

@@ -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>

852
src/views/wardrobe/Orders.vue
View File

@@ -1,450 +1,516 @@
<template> <template>
<div class="wardrobe-orders"> <div ref="ordersScrollRef" class="wardrobe-orders" @scroll="handleOrdersScroll">
<div class="orders-toolbar"> <div class="orders-toolbar">
<button <button
v-for="status in statusOptions" v-for="status in statusOptions"
:key="status.key" :key="status.key"
class="orders-toolbar__chip" class="orders-toolbar__chip"
type="button" type="button"
:class="{ 'is-active': activeStatus === status.key }" :class="{ 'is-active': activeStatus === status.key }"
@click="activeStatus = status.key" @click="setActiveStatus(status.key)"
> >
{{ status.label }} {{ status.label }}
</button> </button>
</div> </div>
<div class="orders-list"> <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"
</button> type="button"
@click="toggleOrder(order.orderId)"
>
<span :class="{ 'is-expanded': expandedOrderId === order.orderId }"></span>
</button>
<div class="order-card__summary"> <div class="order-card__summary">
<div class="order-card__meta"> <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">
</div> <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"> <div class="order-card__preview" aria-hidden="true">
<span <span
v-for="item in order.items.slice(0, 2)" v-for="item in order.items.slice(0, 2)"
:key="item.id" :key="item.id"
class="order-card__thumb" class="order-card__thumb"
:style="{ backgroundColor: item.color }" :style="{ backgroundImage: `url(${item.thumbnailUrl})` }"
></span> ></span>
<span v-if="getExtraCount(order)" class="order-card__extra"> <span v-if="getExtraCount(order)" class="order-card__extra">
{{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }} {{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }}
</span> </span>
</div> </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>
<div class="order-card__amount"> <div class="order-card__amount">
<span>${{ order.amount }}</span> <span>${{ order.totalPrice }}</span>
<small>{{ t('Wardrobe.common.currencyHkd') }}</small> <small>HKD</small>
</div> </div>
<button <button
class="order-card__action" class="order-card__action"
type="button" 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'"
</button> name="Invoice"
</div> 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 <ScItem
v-for="item in order.items" v-for="item in order.items"
:key="item.id" :key="item.id"
class="order-card__item" class="order-card__item"
:style="{ '--order-item-placeholder': item.color }" :info="getOrderItemInfo(item, order)"
:info="item" :show-date="false"
:show-date="false" :show-remove="false"
:show-remove="false" :show-brand="false"
order-actions-layout order-actions-layout
/> />
</div> </div>
</article> </article>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <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 key: OrderStatus
label: string label: string
} value?: number
}
interface OrderItem { interface OrderItem {
id: number id: string
url: string listingName: string
title: string price: number
brand: string productCategory: string[]
fileSize: number thumbnailUrl: string
date: string orderId: string
amount: number shopName: string
tags: string[] status: number
checked: boolean totalPrice: number
color: string updateTime: string
} }
interface OrderRecord { interface OrderRecord {
id: string orderId: string
date: string shopName: string
status: ActualOrderStatus totalPrice: number
amount: number updateTime: string
items: OrderItem[] 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' })
{ 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') }
])
const createOrderItem = ( const statusOptions = computed<StatusOption[]>(() => [
id: number, { key: 'all', label: t('Wardrobe.orders.statuses.all') },
title: string, { key: 'paid', label: t('Wardrobe.orders.statuses.paid'), value: 1 },
brand: string, { key: 'unpaid', label: t('Wardrobe.orders.statuses.unpaid'), value: 0 },
amount: number, { key: 'cancelled', label: t('Wardrobe.orders.statuses.cancelled'), value: 2 }
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 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(() => { const filteredOrders = computed<DisplayOrderRecord[]>(() => {
if (activeStatus.value === 'all') return orders return orders.value.map((order) => ({
return orders.filter((order) => order.status === activeStatus.value) ...order,
}) formatUpdatetime: formatOrderUpdateTime(order.updateTime)
}))
})
const toggleOrder = (orderId: string) => { const toggleOrder = (orderId: string) => {
expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId
} }
const getExtraCount = (order: OrderRecord) => { const getExtraCount = (order: OrderRecord) => {
return Math.max(order.items.length - 2, 0) return Math.max(order.items.length - 2, 0)
} }
const getStatusBadgeLabel = (status: ActualOrderStatus) => { const getStatusBadgeLabel = (status: ActualOrderStatus) => {
return t(`Wardrobe.orders.statusBadges.${status}`) 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 === 'paid') return t('Wardrobe.orders.actions.invoice')
if (status === 'unpaid') return t('Wardrobe.orders.actions.completePayment') if (status === 'unpaid') return t('Wardrobe.orders.actions.completePayment')
return t('Wardrobe.orders.actions.buyAgain') 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) => {
fetchAllOrders() 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.c-svg { .c-svg {
width: initial; width: fit-content;
height: initial; height: initial;
} }
.wardrobe-orders { .wardrobe-orders {
height: 100%; height: 100%;
min-height: 0; min-height: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0 9rem; padding: 0 9rem;
overflow-y: auto; overflow-y: auto;
.orders-toolbar { .orders-toolbar {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1.2rem; gap: 1.2rem;
padding: 3.6rem 0 2.8rem; padding: 3.6rem 0 2.8rem;
flex-wrap: wrap; flex-wrap: wrap;
.orders-toolbar__chip { .orders-toolbar__chip {
height: 4rem; height: 4rem;
min-width: 8rem; min-width: 8rem;
padding: 0 3rem; padding: 0 3rem;
border: 0.1rem solid #232323; border: 0.1rem solid #232323;
border-radius: 2rem; border-radius: 2rem;
background: #ffffff; background: #ffffff;
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.6rem; font-size: 1.6rem;
color: #585858; color: #585858;
font-weight: 400; font-weight: 400;
cursor: pointer; cursor: pointer;
&.is-active { &.is-active {
background: #232323; background: #232323;
border-color: #232323; border-color: #232323;
color: #ffffff; color: #ffffff;
} }
} }
} }
.orders-list { .orders-list {
padding-bottom: 8rem; padding-bottom: 8rem;
} }
} }
.order-card { .order-card {
position: relative; position: relative;
border-bottom: 0.1rem solid #c4c4c4; border-bottom: 0.1rem solid #c4c4c4;
.order-card__toggle { .order-card__toggle {
position: absolute; position: absolute;
top: 5.8rem; top: 5.8rem;
left: 4.2rem; left: 4.2rem;
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
padding: 0; padding: 0;
border: 0; border: 0;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
span { span {
display: block; display: block;
width: 0.9rem; width: 0.9rem;
height: 0.9rem; height: 0.9rem;
border-right: 0.1rem solid #585858; border-right: 0.1rem solid #585858;
border-bottom: 0.1rem solid #585858; border-bottom: 0.1rem solid #585858;
transform: rotate(-45deg); transform: rotate(-45deg);
transition: transform 0.2s ease; transition: transform 0.2s ease;
&.is-expanded { &.is-expanded {
transform: rotate(45deg); transform: rotate(45deg);
} }
} }
} }
.order-card__summary { .order-card__summary {
min-height: 12.4rem; min-height: 12.4rem;
display: grid; display: grid;
grid-template-columns: 25rem minmax(24rem, 1fr) 14rem 12rem 18rem; grid-template-columns: 25rem minmax(24rem, 1fr) 14rem 12rem 18rem;
align-items: center; align-items: center;
column-gap: 2rem; column-gap: 2rem;
padding-left: 9rem; padding-left: 9rem;
.order-card__meta { .order-card__meta {
.order-card__id { .order-card__id {
font-family: 'KaiseiOpti-Bold'; font-family: 'KaiseiOpti-Bold';
font-size: 2rem; font-size: 2rem;
line-height: 3rem; line-height: 3rem;
color: #232323; color: #232323;
} }
.order-card__date { .order-card__date {
margin: 0.8rem 0 0; margin: 0.8rem 0 0;
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem; font-size: 1.4rem;
color: #808080; color: #808080;
} }
} .brand {
column-gap: 1rem;
}
}
.order-card__preview { .order-card__preview {
display: flex; display: flex;
align-items: center; align-items: center;
.order-card__thumb { .order-card__thumb {
width: 8rem; width: 8rem;
height: 10rem; height: 10rem;
display: block; display: block;
margin-right: 1.2rem; margin-right: 1.2rem;
img { background-color: #f6f6f6;
width: 100%; background-position: center;
} background-repeat: no-repeat;
} background-size: cover;
}
.order-card__extra { .order-card__extra {
margin-left: 1.2rem; margin-left: 1.2rem;
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem; font-size: 1.4rem;
color: #808080; color: #808080;
} }
} }
.order-card__status { .order-card__status {
justify-self: start; justify-self: start;
min-width: 8.8rem; min-width: 8.8rem;
height: 2.4rem; height: 2.4rem;
padding: 0 1.6rem; padding: 0 1.6rem;
border-radius: 2.4rem; border-radius: 2.4rem;
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem; font-size: 1.4rem;
line-height: 2.4rem; line-height: 2.4rem;
text-align: center; text-align: center;
&.is-paid { &.is-paid {
background: #e8f2ec; background: #e8f2ec;
color: #769591; color: #769591;
} }
&.is-unpaid { &.is-unpaid {
background: #fef3e2; background: #fef3e2;
color: #b48230; color: #b48230;
} }
&.is-cancelled { &.is-cancelled {
background: #fff2f2; background: #fff2f2;
color: #c65f5a; color: #c65f5a;
} }
} }
.order-card__amount { .order-card__amount {
white-space: nowrap; white-space: nowrap;
color: #232323; color: #232323;
font-family: 'KaiseiOpti-Bold'; font-family: 'KaiseiOpti-Bold';
span { span {
font-size: 2rem; font-size: 2rem;
} }
small { small {
margin-left: 0.4rem; margin-left: 0.4rem;
font-size: 1.4rem; font-size: 1.4rem;
} }
} }
.order-card__action { .order-card__action {
justify-self: center; justify-self: center;
width: 14rem; width: 14rem;
height: 3.8rem; height: 3.8rem;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 1rem; gap: 1rem;
border: 0.1rem solid #c4c4c4; border: 0.1rem solid #c4c4c4;
background: #f6f6f6; background: #f6f6f6;
font-family: 'KaiseiOpti-Bold'; font-family: 'KaiseiOpti-Bold';
font-size: 1.6rem; font-size: 1.6rem;
color: #232323; color: #232323;
cursor: pointer; cursor: pointer;
&.is-primary { &.is-primary {
width: 16rem; width: 16rem;
border-color: #232323; border-color: #232323;
background: #232323; background: #232323;
color: #ffffff; color: #ffffff;
font-size: 1.4rem; font-size: 1.4rem;
} }
} }
} }
> .order-card__details { > .order-card__details {
margin-left: 9rem; margin-left: 9rem;
padding: 0 2.4rem; padding: 0 2.4rem;
background: #fafafa; background: #fafafa;
:deep(.sc-item) { :deep(.sc-item) {
--sc-item-img-width: 9.5rem; --sc-item-img-width: 9.5rem;
--sc-item-img-height: 12rem; --sc-item-img-height: 12rem;
--sc-item-padding: 1.2rem 2.4rem; --sc-item-padding: 1.2rem 2.4rem;
--sc-item-content-margin: 0 4rem; --sc-item-content-margin: 0 4rem;
--sc-item-title-font-size: 2rem; --sc-item-title-font-size: 2rem;
--sc-item-brand-font-size: 1.4rem; --sc-item-brand-font-size: 1.4rem;
--sc-item-amount-font-size: 2.2rem; --sc-item-amount-font-size: 2.2rem;
--sc-item-currency-font-size: 1.2rem; --sc-item-currency-font-size: 1.2rem;
--sc-item-tag-min-width: 8.8rem; --sc-item-tag-min-width: 8.8rem;
--sc-item-tag-height: 2.4rem; --sc-item-tag-height: 2.4rem;
--sc-item-tag-radius: 2.4rem; --sc-item-tag-radius: 2.4rem;
--sc-item-tag-font-size: 1.4rem; --sc-item-tag-font-size: 1.4rem;
--sc-item-order-amount-width: 12rem; --sc-item-order-amount-width: 12rem;
--sc-item-order-action-width: 18rem; --sc-item-order-action-width: 18rem;
--sc-item-order-column-gap: 2rem; --sc-item-order-column-gap: 2rem;
--sc-item-order-actions-offset: 4.8rem; --sc-item-order-actions-offset: 4.8rem;
border-bottom-color: #e2e2e2; border-bottom-color: #e2e2e2;
} }
:deep(.sc-item:last-child) { :deep(.sc-item:last-child) {
border-bottom: 0; border-bottom: 0;
} }
} }
} }
</style> </style>