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

feat: wardrobe assets

Browse Source
This commit is contained in:
zhangyahui
2026-05-22 11:39:17 +08:00
parent d772cae6bc
commit 4c22311e08
9 changed files with 1262 additions and 905 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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