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",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 4,
"singleQuote": true,
"printWidth": 100,
"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 {
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
})
}

3
src/lang/en.ts
View File

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

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

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

4
src/utils/ClothesCategory.ts
View File

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

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

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

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>
<div class="wardrobe-orders">
<div class="orders-toolbar">
<button
v-for="status in statusOptions"
:key="status.key"
class="orders-toolbar__chip"
type="button"
:class="{ 'is-active': activeStatus === status.key }"
@click="activeStatus = status.key"
>
{{ status.label }}
</button>
</div>
<div ref="ordersScrollRef" class="wardrobe-orders" @scroll="handleOrdersScroll">
<div class="orders-toolbar">
<button
v-for="status in statusOptions"
:key="status.key"
class="orders-toolbar__chip"
type="button"
:class="{ 'is-active': activeStatus === status.key }"
@click="setActiveStatus(status.key)"
>
{{ status.label }}
</button>
</div>
<div class="orders-list">
<article v-for="order in filteredOrders" :key="order.id" class="order-card">
<button class="order-card__toggle" type="button" @click="toggleOrder(order.id)">
<span :class="{ 'is-expanded': expandedOrderId === order.id }"></span>
</button>
<div class="orders-list">
<article v-for="order in filteredOrders" :key="order.orderId" class="order-card">
<button
class="order-card__toggle"
type="button"
@click="toggleOrder(order.orderId)"
>
<span :class="{ 'is-expanded': expandedOrderId === order.orderId }"></span>
</button>
<div class="order-card__summary">
<div class="order-card__meta">
<h3 class="order-card__id">{{ order.id }}</h3>
<p class="order-card__date">{{ order.date }}</p>
</div>
<div class="order-card__summary">
<div class="order-card__meta">
<h3 class="order-card__id">{{ order.orderId }}</h3>
<div class="brand flex align-center">
<span class="icon"><svg-icon name="order-shop" size="24" /></span>
<span class="text">{{ order.shopName }}</span>
</div>
<p class="order-card__date">{{ order.formatUpdatetime }}</p>
</div>
<div class="order-card__preview" aria-hidden="true">
<span
v-for="item in order.items.slice(0, 2)"
:key="item.id"
class="order-card__thumb"
:style="{ backgroundColor: item.color }"
></span>
<span v-if="getExtraCount(order)" class="order-card__extra">
{{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }}
</span>
</div>
<div class="order-card__preview" aria-hidden="true">
<span
v-for="item in order.items.slice(0, 2)"
:key="item.id"
class="order-card__thumb"
:style="{ backgroundImage: `url(${item.thumbnailUrl})` }"
></span>
<span v-if="getExtraCount(order)" class="order-card__extra">
{{ t('Wardrobe.orders.moreItems', { count: getExtraCount(order) }) }}
</span>
</div>
<div class="order-card__status" :class="`is-${order.status}`">
{{ getStatusBadgeLabel(order.status) }}
</div>
<div class="order-card__status" :class="`is-${getOrderStatus(order)}`">
{{ getStatusBadgeLabel(getOrderStatus(order)) }}
</div>
<div class="order-card__amount">
<span>${{ order.amount }}</span>
<small>{{ t('Wardrobe.common.currencyHkd') }}</small>
</div>
<div class="order-card__amount">
<span>${{ order.totalPrice }}</span>
<small>HKD</small>
</div>
<button
class="order-card__action"
type="button"
:class="{ 'is-primary': order.status === 'unpaid' }"
>
<svg-icon v-if="order.status === 'paid'" name="Invoice" size="20" color="#232323" />
<span>{{ getOrderActionLabel(order.status) }}</span>
</button>
</div>
<button
class="order-card__action"
type="button"
:class="{ 'is-primary': getOrderStatus(order) === 'unpaid' }"
>
<svg-icon
v-if="getOrderStatus(order) === 'paid'"
name="Invoice"
size="20"
color="#232323"
/>
<span>{{ getOrderActionLabel(getOrderStatus(order)) }}</span>
</button>
</div>
<div v-if="expandedOrderId === order.id" class="order-card__details">
<ScItem
v-for="item in order.items"
:key="item.id"
class="order-card__item"
:style="{ '--order-item-placeholder': item.color }"
:info="item"
:show-date="false"
:show-remove="false"
order-actions-layout
/>
</div>
</article>
</div>
</div>
<div v-if="expandedOrderId === order.orderId" class="order-card__details">
<ScItem
v-for="item in order.items"
:key="item.id"
class="order-card__item"
:info="getOrderItemInfo(item, order)"
:show-date="false"
:show-remove="false"
:show-brand="false"
order-actions-layout
/>
</div>
</article>
</div>
</div>
</template>
<script setup lang="ts">
import { computed, shallowRef, onMounted,ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { fetchMyOrders } from '@/api/user'
import ScItem from '@/views/shoppingCart/sc-item.vue'
import { computed, onMounted, ref, shallowRef } from 'vue'
import { useI18n } from 'vue-i18n'
import { fetchMyOrders } from '@/api/user'
import ScItem from '@/views/shoppingCart/sc-item.vue'
type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
type ActualOrderStatus = Exclude<OrderStatus, 'all'>
type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
type ActualOrderStatus = Exclude<OrderStatus, 'all'>
interface StatusOption {
key: OrderStatus
label: string
}
interface StatusOption {
key: OrderStatus
label: string
value?: number
}
interface OrderItem {
id: number
url: string
title: string
brand: string
fileSize: number
date: string
amount: number
tags: string[]
checked: boolean
color: string
}
interface OrderItem {
id: string
listingName: string
price: number
productCategory: string[]
thumbnailUrl: string
orderId: string
shopName: string
status: number
totalPrice: number
updateTime: string
}
interface OrderRecord {
id: string
date: string
status: ActualOrderStatus
amount: number
items: OrderItem[]
}
interface OrderRecord {
orderId: string
shopName: string
totalPrice: number
updateTime: string
items: OrderItem[]
}
const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
const { t } = useI18n({ useScope: 'global' })
interface DisplayOrderRecord extends OrderRecord {
formatUpdatetime: string
}
const statusOptions = computed<StatusOption[]>(() => [
{ key: 'all', label: t('Wardrobe.orders.statuses.all') },
{ key: 'paid', label: t('Wardrobe.orders.statuses.paid') },
{ key: 'unpaid', label: t('Wardrobe.orders.statuses.unpaid') },
{ key: 'cancelled', label: t('Wardrobe.orders.statuses.cancelled') }
])
const { t, locale } = useI18n({ useScope: 'global' })
const createOrderItem = (
id: number,
title: string,
brand: string,
amount: number,
color: string
): OrderItem => {
return {
id,
url: placeholderImage,
title,
brand,
fileSize: 1024 * (id + 2),
date: '2026-02-16 23:34',
amount,
color,
checked: false,
tags: ['female', 'dress', 'blouse', 'outwear']
}
}
const orders: OrderRecord[] = [
{
id: 'SP897772698',
date: 'Feb 23, 2026, 3:00 PM',
status: 'paid',
amount: 45,
items: [
createOrderItem(1, 'North Outfit Set', 'Roaming Clouds', 15, '#e7e1d7'),
createOrderItem(2, 'Velvet Night Dress', 'Ivory Muse Studio', 16, '#5d2f5e'),
createOrderItem(3, 'Maison Contour Suit', 'Ivory Muse Studio', 14, '#dcd8d1')
]
},
{
id: 'SP893872698',
date: 'Feb 21, 2026, 10:20 AM',
status: 'unpaid',
amount: 15,
items: [createOrderItem(4, 'Silver Drape Dress', 'Roaming Clouds', 15, '#d8d3ca')]
},
{
id: 'SP897262698',
date: 'Feb 16, 2026, 11:34 PM',
status: 'paid',
amount: 29,
items: [
createOrderItem(5, 'North Outfit Set', 'Roaming Clouds', 15, '#ece8df'),
createOrderItem(6, 'North Outfit Set', 'Ivory Muse Studio', 5, '#d5ddd7'),
createOrderItem(7, 'North Outfit Set', 'Ivory Muse Studio', 9, '#e5e1d9')
]
},
{
id: 'SP892072692',
date: 'Feb 2, 2026, 9:34 PM',
status: 'paid',
amount: 15,
items: [
createOrderItem(8, 'Cream Jacket Set', 'Roaming Clouds', 7, '#eee3d3'),
createOrderItem(9, 'White Linen Dress', 'Ivory Muse Studio', 8, '#d8d8d8')
]
},
{
id: 'SP892972603',
date: 'Jan 4, 2026, 8:22 PM',
status: 'cancelled',
amount: 15,
items: [createOrderItem(10, 'Soft Utility Knit', 'Urban Line Edit', 15, '#d8c2a4')]
}
]
const statusOptions = computed<StatusOption[]>(() => [
{ key: 'all', label: t('Wardrobe.orders.statuses.all') },
{ key: 'paid', label: t('Wardrobe.orders.statuses.paid'), value: 1 },
{ key: 'unpaid', label: t('Wardrobe.orders.statuses.unpaid'), value: 0 },
{ key: 'cancelled', label: t('Wardrobe.orders.statuses.cancelled'), value: 2 }
])
const activeStatus = shallowRef<OrderStatus>('all')
const expandedOrderId = shallowRef('SP897262698')
const activeStatus = shallowRef<OrderStatus>('all')
const expandedOrderId = shallowRef('')
const orders = ref<OrderRecord[]>([])
const ordersScrollRef = ref<HTMLElement | null>(null)
const isLoadingOrders = shallowRef(false)
const hasMoreOrders = shallowRef(true)
const ordersRequestId = shallowRef(0)
const orderParams = ref({
page: 1,
size: 10
})
const filteredOrders = computed(() => {
if (activeStatus.value === 'all') return orders
return orders.filter((order) => order.status === activeStatus.value)
})
const filteredOrders = computed<DisplayOrderRecord[]>(() => {
return orders.value.map((order) => ({
...order,
formatUpdatetime: formatOrderUpdateTime(order.updateTime)
}))
})
const toggleOrder = (orderId: string) => {
expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId
}
const toggleOrder = (orderId: string) => {
expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId
}
const getExtraCount = (order: OrderRecord) => {
return Math.max(order.items.length - 2, 0)
}
const getExtraCount = (order: OrderRecord) => {
return Math.max(order.items.length - 2, 0)
}
const getStatusBadgeLabel = (status: ActualOrderStatus) => {
return t(`Wardrobe.orders.statusBadges.${status}`)
}
const getStatusBadgeLabel = (status: ActualOrderStatus) => {
return t(`Wardrobe.orders.statusBadges.${status}`)
}
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 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({
page: 1,
pageSize: 10,
status: ''
})
const fetchAllOrders = () => {
fetchMyOrders(orderParams.value)
}
const getOrderStatusValue = (status: unknown): ActualOrderStatus => {
if (status === 0 || status === '0' || status === 'unpaid') return 'unpaid'
if (status === 2 || status === '2' || status === 'cancelled') return 'cancelled'
return 'paid'
}
onMounted(() => {
fetchAllOrders()
})
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 {
width: initial;
height: initial;
}
.wardrobe-orders {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
padding: 0 9rem;
overflow-y: auto;
.c-svg {
width: fit-content;
height: initial;
}
.wardrobe-orders {
height: 100%;
min-height: 0;
display: flex;
flex-direction: column;
padding: 0 9rem;
overflow-y: auto;
.orders-toolbar {
display: flex;
align-items: center;
gap: 1.2rem;
padding: 3.6rem 0 2.8rem;
flex-wrap: wrap;
.orders-toolbar {
display: flex;
align-items: center;
gap: 1.2rem;
padding: 3.6rem 0 2.8rem;
flex-wrap: wrap;
.orders-toolbar__chip {
height: 4rem;
min-width: 8rem;
padding: 0 3rem;
border: 0.1rem solid #232323;
border-radius: 2rem;
background: #ffffff;
font-family: 'KaiseiOpti-Regular';
font-size: 1.6rem;
color: #585858;
font-weight: 400;
cursor: pointer;
.orders-toolbar__chip {
height: 4rem;
min-width: 8rem;
padding: 0 3rem;
border: 0.1rem solid #232323;
border-radius: 2rem;
background: #ffffff;
font-family: 'KaiseiOpti-Regular';
font-size: 1.6rem;
color: #585858;
font-weight: 400;
cursor: pointer;
&.is-active {
background: #232323;
border-color: #232323;
color: #ffffff;
}
}
}
&.is-active {
background: #232323;
border-color: #232323;
color: #ffffff;
}
}
}
.orders-list {
padding-bottom: 8rem;
}
}
.orders-list {
padding-bottom: 8rem;
}
}
.order-card {
position: relative;
border-bottom: 0.1rem solid #c4c4c4;
.order-card {
position: relative;
border-bottom: 0.1rem solid #c4c4c4;
.order-card__toggle {
position: absolute;
top: 5.8rem;
left: 4.2rem;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
.order-card__toggle {
position: absolute;
top: 5.8rem;
left: 4.2rem;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
span {
display: block;
width: 0.9rem;
height: 0.9rem;
border-right: 0.1rem solid #585858;
border-bottom: 0.1rem solid #585858;
transform: rotate(-45deg);
transition: transform 0.2s ease;
span {
display: block;
width: 0.9rem;
height: 0.9rem;
border-right: 0.1rem solid #585858;
border-bottom: 0.1rem solid #585858;
transform: rotate(-45deg);
transition: transform 0.2s ease;
&.is-expanded {
transform: rotate(45deg);
}
}
}
&.is-expanded {
transform: rotate(45deg);
}
}
}
.order-card__summary {
min-height: 12.4rem;
display: grid;
grid-template-columns: 25rem minmax(24rem, 1fr) 14rem 12rem 18rem;
align-items: center;
column-gap: 2rem;
padding-left: 9rem;
.order-card__summary {
min-height: 12.4rem;
display: grid;
grid-template-columns: 25rem minmax(24rem, 1fr) 14rem 12rem 18rem;
align-items: center;
column-gap: 2rem;
padding-left: 9rem;
.order-card__meta {
.order-card__id {
font-family: 'KaiseiOpti-Bold';
font-size: 2rem;
line-height: 3rem;
color: #232323;
}
.order-card__meta {
.order-card__id {
font-family: 'KaiseiOpti-Bold';
font-size: 2rem;
line-height: 3rem;
color: #232323;
}
.order-card__date {
margin: 0.8rem 0 0;
font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem;
color: #808080;
}
}
.order-card__date {
margin: 0.8rem 0 0;
font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem;
color: #808080;
}
.brand {
column-gap: 1rem;
}
}
.order-card__preview {
display: flex;
align-items: center;
.order-card__preview {
display: flex;
align-items: center;
.order-card__thumb {
width: 8rem;
height: 10rem;
display: block;
margin-right: 1.2rem;
img {
width: 100%;
}
}
.order-card__thumb {
width: 8rem;
height: 10rem;
display: block;
margin-right: 1.2rem;
background-color: #f6f6f6;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.order-card__extra {
margin-left: 1.2rem;
font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem;
color: #808080;
}
}
.order-card__extra {
margin-left: 1.2rem;
font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem;
color: #808080;
}
}
.order-card__status {
justify-self: start;
min-width: 8.8rem;
height: 2.4rem;
padding: 0 1.6rem;
border-radius: 2.4rem;
font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem;
line-height: 2.4rem;
text-align: center;
.order-card__status {
justify-self: start;
min-width: 8.8rem;
height: 2.4rem;
padding: 0 1.6rem;
border-radius: 2.4rem;
font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem;
line-height: 2.4rem;
text-align: center;
&.is-paid {
background: #e8f2ec;
color: #769591;
}
&.is-paid {
background: #e8f2ec;
color: #769591;
}
&.is-unpaid {
background: #fef3e2;
color: #b48230;
}
&.is-unpaid {
background: #fef3e2;
color: #b48230;
}
&.is-cancelled {
background: #fff2f2;
color: #c65f5a;
}
}
&.is-cancelled {
background: #fff2f2;
color: #c65f5a;
}
}
.order-card__amount {
white-space: nowrap;
color: #232323;
font-family: 'KaiseiOpti-Bold';
.order-card__amount {
white-space: nowrap;
color: #232323;
font-family: 'KaiseiOpti-Bold';
span {
font-size: 2rem;
}
span {
font-size: 2rem;
}
small {
margin-left: 0.4rem;
font-size: 1.4rem;
}
}
small {
margin-left: 0.4rem;
font-size: 1.4rem;
}
}
.order-card__action {
justify-self: center;
width: 14rem;
height: 3.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1rem;
border: 0.1rem solid #c4c4c4;
background: #f6f6f6;
font-family: 'KaiseiOpti-Bold';
font-size: 1.6rem;
color: #232323;
cursor: pointer;
.order-card__action {
justify-self: center;
width: 14rem;
height: 3.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1rem;
border: 0.1rem solid #c4c4c4;
background: #f6f6f6;
font-family: 'KaiseiOpti-Bold';
font-size: 1.6rem;
color: #232323;
cursor: pointer;
&.is-primary {
width: 16rem;
border-color: #232323;
background: #232323;
color: #ffffff;
font-size: 1.4rem;
}
}
}
&.is-primary {
width: 16rem;
border-color: #232323;
background: #232323;
color: #ffffff;
font-size: 1.4rem;
}
}
}
> .order-card__details {
margin-left: 9rem;
padding: 0 2.4rem;
background: #fafafa;
> .order-card__details {
margin-left: 9rem;
padding: 0 2.4rem;
background: #fafafa;
:deep(.sc-item) {
--sc-item-img-width: 9.5rem;
--sc-item-img-height: 12rem;
--sc-item-padding: 1.2rem 2.4rem;
--sc-item-content-margin: 0 4rem;
--sc-item-title-font-size: 2rem;
--sc-item-brand-font-size: 1.4rem;
--sc-item-amount-font-size: 2.2rem;
--sc-item-currency-font-size: 1.2rem;
--sc-item-tag-min-width: 8.8rem;
--sc-item-tag-height: 2.4rem;
--sc-item-tag-radius: 2.4rem;
--sc-item-tag-font-size: 1.4rem;
--sc-item-order-amount-width: 12rem;
--sc-item-order-action-width: 18rem;
--sc-item-order-column-gap: 2rem;
--sc-item-order-actions-offset: 4.8rem;
border-bottom-color: #e2e2e2;
}
:deep(.sc-item) {
--sc-item-img-width: 9.5rem;
--sc-item-img-height: 12rem;
--sc-item-padding: 1.2rem 2.4rem;
--sc-item-content-margin: 0 4rem;
--sc-item-title-font-size: 2rem;
--sc-item-brand-font-size: 1.4rem;
--sc-item-amount-font-size: 2.2rem;
--sc-item-currency-font-size: 1.2rem;
--sc-item-tag-min-width: 8.8rem;
--sc-item-tag-height: 2.4rem;
--sc-item-tag-radius: 2.4rem;
--sc-item-tag-font-size: 1.4rem;
--sc-item-order-amount-width: 12rem;
--sc-item-order-action-width: 18rem;
--sc-item-order-column-gap: 2rem;
--sc-item-order-actions-offset: 4.8rem;
border-bottom-color: #e2e2e2;
}
:deep(.sc-item:last-child) {
border-bottom: 0;
}
}
}
:deep(.sc-item:last-child) {
border-bottom: 0;
}
}
}
</style>