feat: wardrobe orders
This commit is contained in:
6
src/assets/icons/Invoice.svg
Normal file
6
src/assets/icons/Invoice.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.75 5.41675H6.25V6.25008H13.75V5.41675Z" fill="currentColor"/>
|
||||
<path d="M13.75 8.75H6.25V9.58333H13.75V8.75Z" fill="currentColor"/>
|
||||
<path d="M10.4167 12.0833H6.25V12.9166H10.4167V12.0833Z" fill="currentColor"/>
|
||||
<path d="M2.5 18.3334L6.25 16.6667L10 18.3334L13.75 16.6667L17.5 18.3334V1.66675H2.5V18.3334ZM3.33333 2.50008H16.6667V17.0509L14.0883 15.9051L13.75 15.7547L13.4117 15.9051L10 17.4213L6.58833 15.9051L6.25 15.7547L5.91167 15.9051L3.33333 17.0509V2.50008Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 602 B |
@@ -1,164 +1,194 @@
|
||||
<template>
|
||||
<div class="sc-item">
|
||||
<slot name="checkbox" />
|
||||
<img :src="info.url" />
|
||||
<div class="content">
|
||||
<div class="title">{{ info.title }}</div>
|
||||
<div class="brand">
|
||||
<span class="icon"><svg-icon name="order-shop" size="24" /></span>
|
||||
<span class="text">{{ info.brand }}</span>
|
||||
</div>
|
||||
<div class="tags" v-if="showTags">
|
||||
<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||
</div>
|
||||
<div class="size" v-if="showSize">
|
||||
<div class="icon"><svg-icon name="order-file" size="18" /></div>
|
||||
<div class="text">
|
||||
<span>{{ FormatBytes(info.fileSize) }}</span>
|
||||
<span v-if="showSizeDate"
|
||||
> | {{
|
||||
FormatDate(info.date, 'SM D, YYYY, h:mm A')
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="amount">${{ info.amount }}<span> HKD</span></div>
|
||||
<div class="remove" v-if="showRemove" @click="onRemove">
|
||||
<span class="icon"><svg-icon name="order-delete" size="18" /></span>
|
||||
<span class="text">Remove</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sc-item" :class="{ 'is-order-actions-layout': orderActionsLayout }">
|
||||
<slot name="checkbox" />
|
||||
<img :src="info.url" />
|
||||
<div class="content">
|
||||
<div class="title">{{ info.title }}</div>
|
||||
<div class="brand">
|
||||
<span class="icon"><svg-icon name="order-shop" size="24" /></span>
|
||||
<span class="text">{{ info.brand }}</span>
|
||||
</div>
|
||||
<div class="tags" v-if="showTags">
|
||||
<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||
</div>
|
||||
<div class="size" v-if="showSize">
|
||||
<div class="icon"><svg-icon name="order-file" size="18" /></div>
|
||||
<div class="text">
|
||||
<span>{{ FormatBytes(info.fileSize) }}</span>
|
||||
<span v-if="showSizeDate"
|
||||
> | {{
|
||||
FormatDate(info.date, 'SM D, YYYY, h:mm A')
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="amount">${{ info.amount }}<span> HKD</span></div>
|
||||
<SvgIcon v-if="orderActionsLayout" name="download" size="32" color="#232323" />
|
||||
<div class="remove" v-if="showRemove" @click="onRemove">
|
||||
<span class="icon"><svg-icon name="order-delete" size="18" /></span>
|
||||
<span class="text">Remove</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { FormatBytes, FormatDate } from '@/utils/tools'
|
||||
const emit = defineEmits(['remove'])
|
||||
const props = defineProps({
|
||||
showTags: { type: Boolean, default: true },
|
||||
showSize: { type: Boolean, default: true },
|
||||
showSizeDate: { type: Boolean, default: true },
|
||||
showRemove: { type: Boolean, default: true },
|
||||
info: { type: Object, default: () => {} }
|
||||
})
|
||||
const onRemove = () => {
|
||||
emit('remove', props.info.id)
|
||||
}
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { FormatBytes, FormatDate } from '@/utils/tools'
|
||||
const emit = defineEmits(['remove'])
|
||||
const props = defineProps({
|
||||
showTags: { type: Boolean, default: true },
|
||||
showSize: { type: Boolean, default: true },
|
||||
showSizeDate: { type: Boolean, default: true },
|
||||
showRemove: { type: Boolean, default: true },
|
||||
orderActionsLayout: { type: Boolean, default: false },
|
||||
info: { type: Object, default: () => {} }
|
||||
})
|
||||
const onRemove = () => {
|
||||
emit('remove', props.info.id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sc-item {
|
||||
border-bottom: 0.1rem solid #c4c4c4;
|
||||
padding: var(--sc-item-padding, 2.4rem 0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> img {
|
||||
width: var(--sc-item-img-width, 14.8rem);
|
||||
height: var(--sc-item-img-height, 18.8rem);
|
||||
object-fit: contain;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
> .content {
|
||||
flex: 1;
|
||||
margin: var(--sc-item-content-margin, 0 4rem);
|
||||
align-self: var(--sc-item-content-align-self, auto);
|
||||
> * {
|
||||
margin-bottom: var(--sc-item-margin-bottom, 1.6rem);
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-item-title-font-size, 2.4rem);
|
||||
color: #232323;
|
||||
}
|
||||
> .brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> .text {
|
||||
font-size: var(--sc-item-brand-font-size, 1.6rem);
|
||||
text-decoration: underline;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
> .tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
> .tag {
|
||||
min-width: var(--sc-item-tag-min-width, 8.8rem);
|
||||
height: var(--sc-item-tag-height, 2.4rem);
|
||||
line-height: var(--sc-item-tag-height, 2.4rem);
|
||||
border-radius: var(--sc-item-tag-radius, 2.4rem);
|
||||
font-size: var(--sc-item-tag-font-size, 1.4rem);
|
||||
padding: var(--sc-item-tag-padding, 0 1rem);
|
||||
text-align: center;
|
||||
color: #8f8f8f;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
> .size {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 1rem;
|
||||
color: #808080;
|
||||
}
|
||||
.sc-item {
|
||||
border-bottom: 0.1rem solid #c4c4c4;
|
||||
padding: var(--sc-item-padding, 2.4rem 0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> img {
|
||||
width: var(--sc-item-img-width, 14.8rem);
|
||||
height: var(--sc-item-img-height, 18.8rem);
|
||||
object-fit: contain;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
> .content {
|
||||
flex: 1;
|
||||
margin: var(--sc-item-content-margin, 0 4rem);
|
||||
align-self: var(--sc-item-content-align-self, auto);
|
||||
> * {
|
||||
margin-bottom: var(--sc-item-margin-bottom, 1.6rem);
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-item-title-font-size, 2.4rem);
|
||||
color: #232323;
|
||||
}
|
||||
> .brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> .text {
|
||||
font-size: var(--sc-item-brand-font-size, 1.6rem);
|
||||
text-decoration: underline;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
> .tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
> .tag {
|
||||
min-width: var(--sc-item-tag-min-width, 8.8rem);
|
||||
height: var(--sc-item-tag-height, 2.4rem);
|
||||
line-height: var(--sc-item-tag-height, 2.4rem);
|
||||
border-radius: var(--sc-item-tag-radius, 2.4rem);
|
||||
font-size: var(--sc-item-tag-font-size, 1.4rem);
|
||||
padding: var(--sc-item-tag-padding, 0 1rem);
|
||||
text-align: center;
|
||||
color: #8f8f8f;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
> .size {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 1rem;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
align-self: var(--sc-item-right-align-self, end);
|
||||
display: var(--sc-item-right-display, '');
|
||||
flex-direction: var(--sc-item-right-flex-direction, '');
|
||||
justify-content: var(--sc-item-right-justify-content, '');
|
||||
align-items: var(--sc-item-right-align-items, '');
|
||||
height: var(--sc-item-right-height, auto);
|
||||
margin-top: var(--sc-item-right-margin-top, 0);
|
||||
> .amount {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-item-amount-font-size, 2.2rem);
|
||||
color: #232323;
|
||||
> span {
|
||||
font-size: var(--sc-item-currency-font-size, 1.4rem);
|
||||
color: #585858;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
> .remove {
|
||||
margin-top: var(--sc-item-remove-margin-top, 9rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
> .icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
align-self: var(--sc-item-right-align-self, end);
|
||||
display: var(--sc-item-right-display, '');
|
||||
flex-direction: var(--sc-item-right-flex-direction, '');
|
||||
justify-content: var(--sc-item-right-justify-content, '');
|
||||
align-items: var(--sc-item-right-align-items, '');
|
||||
height: var(--sc-item-right-height, auto);
|
||||
margin-top: var(--sc-item-right-margin-top, 0);
|
||||
> .amount {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-item-amount-font-size, 2.2rem);
|
||||
color: #232323;
|
||||
> span {
|
||||
font-size: var(--sc-item-currency-font-size, 1.4rem);
|
||||
color: #585858;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
> .remove {
|
||||
margin-top: var(--sc-item-remove-margin-top, 9rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
> .icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.is-order-actions-layout {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
var(--sc-item-img-width, 14.8rem)
|
||||
minmax(0, 1fr)
|
||||
var(--sc-item-order-amount-width, 12rem)
|
||||
var(--sc-item-order-action-width, 18rem);
|
||||
column-gap: var(--sc-item-order-column-gap, 2rem);
|
||||
|
||||
> .content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
> .right {
|
||||
display: contents;
|
||||
|
||||
> .amount {
|
||||
grid-column: 3;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> .download {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -99,17 +99,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="assets-empty flex flex-col flex-center">
|
||||
<img src="@/assets/images/wardrobe/empty-wardrobe.png" class="empty-img" alt="" />
|
||||
|
||||
<h2 class="assets-empty__title">Nothing in Wardrobe yet</h2>
|
||||
<p class="assets-empty__description">
|
||||
Explore the digital item and add pieces to your collection.
|
||||
</p>
|
||||
<div class="assets-empty__button" type="button" @click="goToDigitalItems">
|
||||
Explore Digital Items
|
||||
</div>
|
||||
</div>
|
||||
<Empty v-else @explore="goToDigitalItems" />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
@@ -117,6 +107,7 @@
|
||||
import { computed, nextTick, onMounted, onUnmounted, reactive, ref, shallowRef, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import img from '@/assets/images/collectionStory/Rectangle.png'
|
||||
import Empty from './Empty.vue'
|
||||
|
||||
interface FilterOption {
|
||||
label: string
|
||||
@@ -553,39 +544,6 @@ onUnmounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.assets-empty {
|
||||
flex: 1;
|
||||
|
||||
color: #979797;
|
||||
.empty-img {
|
||||
width: 14.2rem;
|
||||
height: 18.8rem;
|
||||
}
|
||||
|
||||
.assets-empty__title {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.6rem;
|
||||
margin: 2.4rem 0 0.8rem;
|
||||
}
|
||||
|
||||
.assets-empty__description {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.assets-empty__button {
|
||||
margin-top: 3rem;
|
||||
height: 4.4rem;
|
||||
line-height: 4.4rem;
|
||||
padding: 0 3.8rem;
|
||||
border: 0.1rem solid #c4c4c4;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
color: #585858;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
56
src/views/wardrobe/Empty.vue
Normal file
56
src/views/wardrobe/Empty.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
const emit = defineEmits<{
|
||||
(event: 'explore'): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wardrobe-empty flex flex-col flex-center">
|
||||
<img src="@/assets/images/wardrobe/empty-wardrobe.png" class="wardrobe-empty__image" alt="" />
|
||||
|
||||
<h2 class="wardrobe-empty__title">Nothing in Wardrobe yet</h2>
|
||||
<p class="wardrobe-empty__description">
|
||||
Explore the digital item and add pieces to your collection.
|
||||
</p>
|
||||
<button class="wardrobe-empty__button" type="button" @click="emit('explore')">
|
||||
Explore Digital Items
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wardrobe-empty {
|
||||
flex: 1;
|
||||
color: #979797;
|
||||
|
||||
> .wardrobe-empty__image {
|
||||
width: 14.2rem;
|
||||
height: 18.8rem;
|
||||
}
|
||||
|
||||
> .wardrobe-empty__title {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.6rem;
|
||||
margin: 2.4rem 0 0.8rem;
|
||||
}
|
||||
|
||||
> .wardrobe-empty__description {
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
> .wardrobe-empty__button {
|
||||
margin-top: 3rem;
|
||||
height: 4.4rem;
|
||||
line-height: 4.4rem;
|
||||
padding: 0 3.8rem;
|
||||
border: 0.1rem solid #c4c4c4;
|
||||
background: #ffffff;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.6rem;
|
||||
text-transform: uppercase;
|
||||
color: #585858;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,257 +1,425 @@
|
||||
<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 { shallowRef } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
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
|
||||
key: OrderStatus
|
||||
label: string
|
||||
}
|
||||
|
||||
const router = useRouter()
|
||||
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: 'Cancelled' }
|
||||
{ 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 goToDigitalItems = () => {
|
||||
router.push('/digitalItem')
|
||||
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>
|
||||
|
||||
<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-empty">
|
||||
<div class="orders-empty__illustration" aria-hidden="true">
|
||||
<div class="orders-empty__hook"></div>
|
||||
<div class="orders-empty__hanger"></div>
|
||||
<div class="orders-empty__body"></div>
|
||||
<div class="orders-empty__hem"></div>
|
||||
</div>
|
||||
|
||||
<h2 class="orders-empty__title">Nothing in Wardrobe yet</h2>
|
||||
<p class="orders-empty__description">
|
||||
Explore the digital item and add pieces to your collection.
|
||||
</p>
|
||||
<button class="orders-empty__button" type="button" @click="goToDigitalItems">
|
||||
Explore Digital Items
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.wardrobe-orders {
|
||||
--wardrobe-border-color: #d9d4cd;
|
||||
--wardrobe-border-dark: #c8c0b4;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fffdf8;
|
||||
.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: 1rem;
|
||||
padding: 2.2rem 3rem 0;
|
||||
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: 3rem;
|
||||
padding: 0 1.4rem;
|
||||
border: 0.1rem solid var(--wardrobe-border-color);
|
||||
border-radius: 999rem;
|
||||
background: #ffffff;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
color: #8b8277;
|
||||
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-empty {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4rem 2rem 7rem;
|
||||
text-align: center;
|
||||
.orders-list {
|
||||
padding-bottom: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
> .orders-empty__illustration {
|
||||
position: relative;
|
||||
width: 8.8rem;
|
||||
height: 10.4rem;
|
||||
margin-bottom: 2.4rem;
|
||||
opacity: 0.55;
|
||||
.order-card {
|
||||
position: relative;
|
||||
border-bottom: 0.1rem solid #c4c4c4;
|
||||
|
||||
> .orders-empty__hook {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
border: 0.14rem solid #b8b1a5;
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-radius: 50%;
|
||||
transform: translateX(-10%) rotate(-18deg);
|
||||
}
|
||||
.order-card__toggle {
|
||||
position: absolute;
|
||||
top: 5.8rem;
|
||||
left: 4.2rem;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
> .orders-empty__hanger {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 1.2rem;
|
||||
width: 4rem;
|
||||
height: 2rem;
|
||||
border-top: 0.14rem solid #b8b1a5;
|
||||
border-left: 0.14rem solid #b8b1a5;
|
||||
border-right: 0.14rem solid #b8b1a5;
|
||||
transform: translateX(-50%) skewY(-12deg);
|
||||
}
|
||||
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;
|
||||
|
||||
> .orders-empty__body {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 3.2rem;
|
||||
width: 4.8rem;
|
||||
height: 4.8rem;
|
||||
border: 0.14rem solid #b8b1a5;
|
||||
border-top: 0;
|
||||
transform: translateX(-50%);
|
||||
&.is-expanded {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0.2rem;
|
||||
width: 1.7rem;
|
||||
height: 2.6rem;
|
||||
border: 0.14rem solid #b8b1a5;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.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;
|
||||
|
||||
&::before {
|
||||
left: -1.2rem;
|
||||
transform: skewY(22deg);
|
||||
}
|
||||
.order-card__meta {
|
||||
.order-card__id {
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -1.2rem;
|
||||
transform: skewY(-22deg);
|
||||
}
|
||||
}
|
||||
.order-card__date {
|
||||
margin: 0.8rem 0 0;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
> .orders-empty__hem {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0.8rem;
|
||||
width: 4.6rem;
|
||||
height: 2rem;
|
||||
border-left: 0.14rem solid #b8b1a5;
|
||||
border-right: 0.14rem solid #b8b1a5;
|
||||
border-bottom: 0.14rem solid #b8b1a5;
|
||||
transform: translateX(-50%);
|
||||
.order-card__preview {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 1.3rem;
|
||||
height: 100%;
|
||||
border-bottom: 0.14rem solid #b8b1a5;
|
||||
}
|
||||
.order-card__thumb {
|
||||
width: 8rem;
|
||||
height: 10rem;
|
||||
display: block;
|
||||
margin-right: 1.2rem;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: -0.1rem;
|
||||
transform: skewX(24deg);
|
||||
transform-origin: left bottom;
|
||||
}
|
||||
.order-card__extra {
|
||||
margin-left: 1.2rem;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: -0.1rem;
|
||||
transform: skewX(-24deg);
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
|
||||
> .orders-empty__title {
|
||||
margin: 0;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.3;
|
||||
color: #8c8479;
|
||||
}
|
||||
&.is-paid {
|
||||
background: #e8f2ec;
|
||||
color: #769591;
|
||||
}
|
||||
|
||||
> .orders-empty__description {
|
||||
max-width: 32rem;
|
||||
margin: 1rem 0 0;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.3rem;
|
||||
line-height: 1.7;
|
||||
color: #b1a99e;
|
||||
}
|
||||
&.is-unpaid {
|
||||
background: #fef3e2;
|
||||
color: #b48230;
|
||||
}
|
||||
|
||||
> .orders-empty__button {
|
||||
margin-top: 2rem;
|
||||
height: 3.8rem;
|
||||
padding: 0 2.4rem;
|
||||
border: 0.1rem solid var(--wardrobe-border-color);
|
||||
background: #ffffff;
|
||||
font-family: 'KaiseiOpti-Regular';
|
||||
font-size: 1.2rem;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.06rem;
|
||||
text-transform: uppercase;
|
||||
color: #6d655b;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||||
&.is-cancelled {
|
||||
background: #fff2f2;
|
||||
color: #c65f5a;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #f8f3ea;
|
||||
border-color: var(--wardrobe-border-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-card__amount {
|
||||
white-space: nowrap;
|
||||
color: #232323;
|
||||
font-family: 'KaiseiOpti-Bold';
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.wardrobe-orders {
|
||||
> .orders-toolbar {
|
||||
padding: 2rem 2rem 0;
|
||||
}
|
||||
span {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
> .orders-empty {
|
||||
padding: 5rem 2rem 7rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
border-bottom-color: #e2e2e2;
|
||||
}
|
||||
|
||||
:deep(.sc-item:last-child) {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user