524 lines
12 KiB
Vue
524 lines
12 KiB
Vue
<template>
|
|
<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" v-if="filteredOrders.length">
|
|
<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.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="{ backgroundImage: `url(${item.thumbnailUrl})` }"
|
|
/>
|
|
<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-${getOrderStatus(order)}`">
|
|
{{ getStatusBadgeLabel(getOrderStatus(order)) }}
|
|
</div>
|
|
|
|
<div class="order-card__amount">
|
|
<span>${{ order.totalPrice }}</span>
|
|
<small>HKD</small>
|
|
</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.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"
|
|
is-order
|
|
order-actions-layout
|
|
/>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<Empty v-else />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
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'
|
|
import Empty from './Empty.vue'
|
|
|
|
type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
|
|
type ActualOrderStatus = Exclude<OrderStatus, 'all'>
|
|
|
|
interface StatusOption {
|
|
key: OrderStatus
|
|
label: string
|
|
value?: number
|
|
}
|
|
|
|
interface OrderItem {
|
|
id: string
|
|
listingName: string
|
|
price: number
|
|
productCategory: string[]
|
|
thumbnailUrl: string
|
|
orderId: string
|
|
shopName: string
|
|
status: number
|
|
totalPrice: number
|
|
updateTime: string
|
|
}
|
|
|
|
interface OrderRecord {
|
|
orderId: string
|
|
shopName: string
|
|
totalPrice: number
|
|
updateTime: string
|
|
items: OrderItem[]
|
|
}
|
|
|
|
interface DisplayOrderRecord extends OrderRecord {
|
|
formatUpdatetime: string
|
|
}
|
|
|
|
const { t, locale } = useI18n({ useScope: 'global' })
|
|
|
|
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('')
|
|
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<DisplayOrderRecord[]>(() => {
|
|
return orders.value.map((order) => ({
|
|
...order,
|
|
formatUpdatetime: formatOrderUpdateTime(order.updateTime)
|
|
}))
|
|
})
|
|
|
|
const toggleOrder = (orderId: string) => {
|
|
expandedOrderId.value = expandedOrderId.value === orderId ? '' : orderId
|
|
}
|
|
|
|
const getExtraCount = (order: OrderRecord) => {
|
|
return Math.max(order.items.length - 2, 0)
|
|
}
|
|
|
|
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 getOrderStatusValue = (status: unknown): ActualOrderStatus => {
|
|
if (status === 0 || status === '0' || status === 'unpaid') return 'unpaid'
|
|
if (status === 2 || status === '2' || status === 'cancelled') return 'cancelled'
|
|
return 'paid'
|
|
}
|
|
|
|
const getOrderStatus = (order: OrderRecord) => {
|
|
return getOrderStatusValue(order.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: 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__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;
|
|
}
|
|
.brand {
|
|
column-gap: 1rem;
|
|
}
|
|
}
|
|
|
|
.order-card__preview {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.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__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>
|