427 lines
10 KiB
Vue
427 lines
10 KiB
Vue
<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 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="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__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">
|
|
+{{ getExtraCount(order) }} more
|
|
</span>
|
|
</div>
|
|
|
|
<div class="order-card__status" :class="`is-${order.status}`">
|
|
{{ order.status.toUpperCase() }}
|
|
</div>
|
|
|
|
<div class="order-card__amount">
|
|
<span>${{ order.amount }}</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 v-if="order.status === 'paid'">Invoice</span>
|
|
<span v-else-if="order.status === 'unpaid'">Complete Payment</span>
|
|
<span v-else>Buy Again</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-size="false"
|
|
:show-size-date="false"
|
|
:show-remove="false"
|
|
order-actions-layout
|
|
/>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, shallowRef } from 'vue'
|
|
import ScItem from '@/views/shoppingCart/sc-item.vue'
|
|
|
|
type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
|
|
type ActualOrderStatus = Exclude<OrderStatus, 'all'>
|
|
|
|
interface StatusOption {
|
|
key: OrderStatus
|
|
label: string
|
|
}
|
|
|
|
interface OrderItem {
|
|
id: number
|
|
url: string
|
|
title: string
|
|
brand: string
|
|
fileSize: number
|
|
date: string
|
|
amount: number
|
|
tags: string[]
|
|
checked: boolean
|
|
color: string
|
|
}
|
|
|
|
interface OrderRecord {
|
|
id: string
|
|
date: string
|
|
status: ActualOrderStatus
|
|
amount: number
|
|
items: OrderItem[]
|
|
}
|
|
|
|
const placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='
|
|
|
|
const statusOptions: StatusOption[] = [
|
|
{ key: 'all', label: 'All' },
|
|
{ key: 'paid', label: 'Paid' },
|
|
{ key: 'unpaid', label: 'Unpaid' },
|
|
{ key: 'cancelled', label: 'Canceled' }
|
|
]
|
|
|
|
const createOrderItem = (
|
|
id: number,
|
|
title: string,
|
|
brand: string,
|
|
amount: number,
|
|
color: string
|
|
): OrderItem => {
|
|
return {
|
|
id,
|
|
url: placeholderImage,
|
|
title,
|
|
brand,
|
|
fileSize: 1024 * (id + 2),
|
|
date: '2026-02-16 23:34',
|
|
amount,
|
|
color,
|
|
checked: false,
|
|
tags: ['female', 'dress', 'blouse', 'outwear']
|
|
}
|
|
}
|
|
const orders: OrderRecord[] = [
|
|
{
|
|
id: 'SP897772698',
|
|
date: 'Feb 23, 2026, 3:00 PM',
|
|
status: 'paid',
|
|
amount: 45,
|
|
items: [
|
|
createOrderItem(1, 'North Outfit Set', 'Roaming Clouds', 15, '#e7e1d7'),
|
|
createOrderItem(2, 'Velvet Night Dress', 'Ivory Muse Studio', 16, '#5d2f5e'),
|
|
createOrderItem(3, 'Maison Contour Suit', 'Ivory Muse Studio', 14, '#dcd8d1')
|
|
]
|
|
},
|
|
{
|
|
id: 'SP893872698',
|
|
date: 'Feb 21, 2026, 10:20 AM',
|
|
status: 'unpaid',
|
|
amount: 15,
|
|
items: [createOrderItem(4, 'Silver Drape Dress', 'Roaming Clouds', 15, '#d8d3ca')]
|
|
},
|
|
{
|
|
id: 'SP897262698',
|
|
date: 'Feb 16, 2026, 11:34 PM',
|
|
status: 'paid',
|
|
amount: 29,
|
|
items: [
|
|
createOrderItem(5, 'North Outfit Set', 'Roaming Clouds', 15, '#ece8df'),
|
|
createOrderItem(6, 'North Outfit Set', 'Ivory Muse Studio', 5, '#d5ddd7'),
|
|
createOrderItem(7, 'North Outfit Set', 'Ivory Muse Studio', 9, '#e5e1d9')
|
|
]
|
|
},
|
|
{
|
|
id: 'SP892072692',
|
|
date: 'Feb 2, 2026, 9:34 PM',
|
|
status: 'paid',
|
|
amount: 15,
|
|
items: [
|
|
createOrderItem(8, 'Cream Jacket Set', 'Roaming Clouds', 7, '#eee3d3'),
|
|
createOrderItem(9, 'White Linen Dress', 'Ivory Muse Studio', 8, '#d8d8d8')
|
|
]
|
|
},
|
|
{
|
|
id: 'SP892972603',
|
|
date: 'Jan 4, 2026, 8:22 PM',
|
|
status: 'cancelled',
|
|
amount: 15,
|
|
items: [createOrderItem(10, 'Soft Utility Knit', 'Urban Line Edit', 15, '#d8c2a4')]
|
|
}
|
|
]
|
|
|
|
const activeStatus = shallowRef<OrderStatus>('all')
|
|
const expandedOrderId = shallowRef('SP897262698')
|
|
|
|
const filteredOrders = computed(() => {
|
|
if (activeStatus.value === 'all') return orders
|
|
return orders.filter((order) => order.status === activeStatus.value)
|
|
})
|
|
|
|
const toggleOrder = (orderId: string) => {
|
|
expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId
|
|
}
|
|
|
|
const getExtraCount = (order: OrderRecord) => {
|
|
return Math.max(order.items.length - 2, 0)
|
|
}
|
|
</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;
|
|
|
|
.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;
|
|
|
|
&.is-active {
|
|
background: #232323;
|
|
border-color: #232323;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.orders-list {
|
|
padding-bottom: 8rem;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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__date {
|
|
margin: 0.8rem 0 0;
|
|
font-family: 'KaiseiOpti-Regular';
|
|
font-size: 1.4rem;
|
|
color: #808080;
|
|
}
|
|
}
|
|
|
|
.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__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;
|
|
|
|
&.is-paid {
|
|
background: #e8f2ec;
|
|
color: #769591;
|
|
}
|
|
|
|
&.is-unpaid {
|
|
background: #fef3e2;
|
|
color: #b48230;
|
|
}
|
|
|
|
&.is-cancelled {
|
|
background: #fff2f2;
|
|
color: #c65f5a;
|
|
}
|
|
}
|
|
|
|
.order-card__amount {
|
|
white-space: nowrap;
|
|
color: #232323;
|
|
font-family: 'KaiseiOpti-Bold';
|
|
|
|
span {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
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;
|
|
|
|
&.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;
|
|
|
|
: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;
|
|
}
|
|
}
|
|
}
|
|
</style>
|