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

feat: order页面空状态

Browse Source
This commit is contained in:
zhangyahui
2026-05-26 10:55:28 +08:00
parent c576d050db
commit 0d10954251
6 changed files with 298 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/lang/en.ts
View File

@@ -142,7 +142,6 @@ export default {
sort: { sort: {
label: 'Sort by', label: 'Sort by',
placeholder: 'Select', placeholder: 'Select',
default: 'Default',
dateAdded: 'Date Added', dateAdded: 'Date Added',
selectedFirst: 'Selected First' selectedFirst: 'Selected First'
}, },

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

@@ -142,7 +142,6 @@ export default {
sort: { sort: {
label: '排序', label: '排序',
placeholder: '请选择', placeholder: '请选择',
default: '默认',
dateAdded: '添加日期', dateAdded: '添加日期',
selectedFirst: '已选优先' selectedFirst: '已选优先'
}, },

15
src/views/wardrobe/Assets.vue
View File

@@ -14,7 +14,7 @@
<div class="assets-toolbar"> <div class="assets-toolbar">
<div class="assets-toolbar__selection"> <div class="assets-toolbar__selection">
<div class="select-count flex align-center"> <div class="select-count flex align-center">
<img src="@/assets/images/wardrobe/select.png" /> <img loading="lazy" src="@/assets/images/wardrobe/select.png" />
<span class="assets-toolbar__count"> <span class="assets-toolbar__count">
{{ t('Wardrobe.assets.selectedCount', { count: selectedCount }) }} {{ t('Wardrobe.assets.selectedCount', { count: selectedCount }) }}
</span> </span>
@@ -38,7 +38,12 @@
</div> </div>
</div> </div>
</div> </div>
<div ref="assetsScrollRef" v-if="dataList.length" class="data-list-container" @scroll.passive="handleAssetsScroll"> <div
ref="assetsScrollRef"
v-if="dataList.length"
class="data-list-container"
@scroll.passive="handleAssetsScroll"
>
<div ref="dataListRef" class="data-list"> <div ref="dataListRef" class="data-list">
<div <div
v-for="(item, index) in dataList" v-for="(item, index) in dataList"
@@ -67,7 +72,7 @@
</div> </div>
</div> </div>
<Empty v-else @explore="goToDigitalItems" /> <Empty v-else />
</section> </section>
</div> </div>
</template> </template>
@@ -306,10 +311,6 @@
return (index + 1) % gridColumnCount.value === 0 return (index + 1) % gridColumnCount.value === 0
} }
const goToDigitalItems = () => {
router.push('/digitalItem')
}
watch( watch(
() => dataList.value.length, () => dataList.value.length,
async (len) => { async (len) => {

96
src/views/wardrobe/Empty.vue
View File

@@ -1,60 +1,66 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
const { t } = useI18n({ useScope: 'global' }) const { t } = useI18n({ useScope: 'global' })
const router = useRouter()
const emit = defineEmits<{ const handleExplore = () => {
(event: 'explore'): void router.push('/digitalItem')
}>() }
</script> </script>
<template> <template>
<div class="wardrobe-empty flex flex-col flex-center"> <div class="wardrobe-empty flex flex-col flex-center">
<img src="@/assets/images/wardrobe/empty-wardrobe.png" class="wardrobe-empty__image" alt="" /> <img
src="@/assets/images/wardrobe/empty-wardrobe.png"
class="wardrobe-empty__image"
alt=""
/>
<h2 class="wardrobe-empty__title">{{ t('Wardrobe.empty.title') }}</h2> <h2 class="wardrobe-empty__title">{{ t('Wardrobe.empty.title') }}</h2>
<p class="wardrobe-empty__description"> <p class="wardrobe-empty__description">
{{ t('Wardrobe.empty.description') }} {{ t('Wardrobe.empty.description') }}
</p> </p>
<button class="wardrobe-empty__button" type="button" @click="emit('explore')"> <button class="wardrobe-empty__button" type="button" @click="handleExplore">
{{ t('Wardrobe.empty.action') }} {{ t('Wardrobe.empty.action') }}
</button> </button>
</div> </div>
</template> </template>
<style lang="less" scoped> <style lang="less" scoped>
.wardrobe-empty { .wardrobe-empty {
flex: 1; flex: 1;
color: #979797; color: #979797;
> .wardrobe-empty__image { > .wardrobe-empty__image {
width: 14.2rem; width: 14.2rem;
height: 18.8rem; height: 18.8rem;
} }
> .wardrobe-empty__title { > .wardrobe-empty__title {
font-family: 'KaiseiOpti-Bold'; font-family: 'KaiseiOpti-Bold';
font-size: 1.6rem; font-size: 1.6rem;
margin: 2.4rem 0 0.8rem; margin: 2.4rem 0 0.8rem;
} }
> .wardrobe-empty__description { > .wardrobe-empty__description {
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem; font-size: 1.4rem;
} }
> .wardrobe-empty__button { > .wardrobe-empty__button {
margin-top: 3rem; margin-top: 3rem;
height: 4.4rem; height: 4.4rem;
line-height: 4.4rem; line-height: 4.4rem;
padding: 0 3.8rem; padding: 0 3.8rem;
border: 0.1rem solid #c4c4c4; border: 0.1rem solid #c4c4c4;
background: #ffffff; background: #ffffff;
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.6rem; font-size: 1.6rem;
text-transform: uppercase; text-transform: uppercase;
color: #585858; color: #585858;
cursor: pointer; cursor: pointer;
} }
} }
</style> </style>

42
src/views/wardrobe/Orders.vue
View File

@@ -13,7 +13,7 @@
</button> </button>
</div> </div>
<div class="orders-list"> <div class="orders-list" v-if="filteredOrders.length">
<article v-for="order in filteredOrders" :key="order.orderId" class="order-card"> <article v-for="order in filteredOrders" :key="order.orderId" class="order-card">
<button <button
class="order-card__toggle" class="order-card__toggle"
@@ -27,7 +27,9 @@
<div class="order-card__meta"> <div class="order-card__meta">
<h3 class="order-card__id">{{ order.orderId }}</h3> <h3 class="order-card__id">{{ order.orderId }}</h3>
<div class="brand flex align-center"> <div class="brand flex align-center">
<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">{{ order.shopName }}</span> <span class="text">{{ order.shopName }}</span>
</div> </div>
<p class="order-card__date">{{ order.formatUpdatetime }}</p> <p class="order-card__date">{{ order.formatUpdatetime }}</p>
@@ -39,7 +41,7 @@
:key="item.id" :key="item.id"
class="order-card__thumb" class="order-card__thumb"
:style="{ backgroundImage: `url(${item.thumbnailUrl})` }" :style="{ backgroundImage: `url(${item.thumbnailUrl})` }"
></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>
@@ -83,6 +85,7 @@
</div> </div>
</article> </article>
</div> </div>
<Empty v-else />
</div> </div>
</template> </template>
@@ -91,6 +94,7 @@
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'
import Empty from './Empty.vue'
type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled' type OrderStatus = 'all' | 'paid' | 'unpaid' | 'cancelled'
type ActualOrderStatus = Exclude<OrderStatus, 'all'> type ActualOrderStatus = Exclude<OrderStatus, 'all'>
@@ -192,21 +196,21 @@
const dateLocale = isChinese ? 'zh-CN' : 'en-US' const dateLocale = isChinese ? 'zh-CN' : 'en-US'
const options: Intl.DateTimeFormatOptions = isChinese const options: Intl.DateTimeFormatOptions = isChinese
? { ? {
year: 'numeric', year: 'numeric',
month: 'long', month: 'long',
day: 'numeric', day: 'numeric',
hour: '2-digit', hour: '2-digit',
minute: '2-digit', minute: '2-digit',
hour12: false hour12: false
} }
: { : {
month: 'short', month: 'short',
day: 'numeric', day: 'numeric',
year: 'numeric', year: 'numeric',
hour: 'numeric', hour: 'numeric',
minute: '2-digit', minute: '2-digit',
hour12: true hour12: true
} }
return new Intl.DateTimeFormat(dateLocale, options).format(date) return new Intl.DateTimeFormat(dateLocale, options).format(date)
} }
@@ -232,7 +236,9 @@
page: orderParams.value.page, page: orderParams.value.page,
size: orderParams.value.size size: orderParams.value.size
} }
const currentStatus = statusOptions.value.find((option) => option.key === activeStatus.value) const currentStatus = statusOptions.value.find(
(option) => option.key === activeStatus.value
)
if (currentStatus?.value !== undefined) { if (currentStatus?.value !== undefined) {
params.status = currentStatus.value params.status = currentStatus.value

416
src/views/wardrobe/index.vue
View File

@@ -1,234 +1,248 @@
<template> <template>
<div class="wardrobe-page"> <div class="wardrobe-page">
<div class="wardrobe-hero flex flex-col flex-center"> <div class="wardrobe-hero flex flex-col flex-center">
<div class="wardrobe-hero__title">{{ t('Wardrobe.title') }}</div> <div class="wardrobe-hero__title">{{ t('Wardrobe.title') }}</div>
<div class="wardrobe-hero__subtitle">{{ t('Wardrobe.subtitle') }}</div> <div class="wardrobe-hero__subtitle">{{ t('Wardrobe.subtitle') }}</div>
</div> </div>
<div class="wardrobe-shell"> <div class="wardrobe-shell">
<div class="wardrobe-tabs"> <div class="wardrobe-tabs">
<div class="wardrobe-tabs__nav" role="tablist" :aria-label="t('Wardrobe.tabs.ariaLabel')"> <div
<button class="wardrobe-tabs__nav"
v-for="tab in tabs" role="tablist"
:key="tab.key" :aria-label="t('Wardrobe.tabs.ariaLabel')"
class="wardrobe-tabs__item" >
:class="{ 'is-active': activeTab === tab.key }" <button
type="button" v-for="tab in tabs"
role="tab" :key="tab.key"
:aria-selected="activeTab === tab.key" class="wardrobe-tabs__item"
@click="activeTab = tab.key" :class="{ 'is-active': activeTab === tab.key }"
> type="button"
{{ tab.label }} role="tab"
</button> :aria-selected="activeTab === tab.key"
</div> @click="activeTab = tab.key"
>
{{ tab.label }}
</button>
</div>
<div v-if="activeTab === 'assets'" class="wardrobe-tabs__sort"> <div v-if="activeTab === 'assets'" class="wardrobe-tabs__sort">
<div class="wardrobe-tabs__sort-label">{{ t('Wardrobe.sort.label') }}</div> <div class="wardrobe-tabs__sort-label">{{ t('Wardrobe.sort.label') }}</div>
<el-select v-model="activeSort" :placeholder="t('Wardrobe.sort.placeholder')"> <el-select
<el-option v-model="activeSort"
v-for="option in sortOptions" popper-class="wardrobe-sort-dropdown"
:key="option.value" :placeholder="t('Wardrobe.sort.placeholder')"
:label="option.label" >
:value="option.value" <el-option
/> v-for="option in sortOptions"
</el-select> :key="option.value"
</div> :label="option.label"
</div> :value="option.value"
/>
</el-select>
</div>
</div>
<component :is="activePanel" class="wardrobe-shell__panel" /> <component :is="activePanel" class="wardrobe-shell__panel" />
</div> </div>
<Footer /> <Footer />
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, shallowRef } from 'vue' import { computed, shallowRef } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Assets from './Assets.vue' import Assets from './Assets.vue'
import Orders from './Orders.vue' import Orders from './Orders.vue'
type WardrobeTab = 'assets' | 'orders' type WardrobeTab = 'assets' | 'orders'
interface TabItem { interface TabItem {
key: WardrobeTab key: WardrobeTab
label: string label: string
} }
interface SortOption { interface SortOption {
label: string label: string
value: number value: number
} }
const { t } = useI18n({ useScope: 'global' }) const { t } = useI18n({ useScope: 'global' })
const tabs = computed<TabItem[]>(() => [ const tabs = computed<TabItem[]>(() => [
{ {
key: 'assets', key: 'assets',
label: t('Wardrobe.tabs.assets') label: t('Wardrobe.tabs.assets')
}, },
{ {
key: 'orders', key: 'orders',
label: t('Wardrobe.tabs.orders') label: t('Wardrobe.tabs.orders')
} }
]) ])
const sortOptions = computed<SortOption[]>(() => [ const sortOptions = computed<SortOption[]>(() => [
{ {
label: t('Wardrobe.sort.default'), label: t('Wardrobe.sort.dateAdded'),
value: 0 value: 1
}, },
{ {
label: t('Wardrobe.sort.dateAdded'), label: t('Wardrobe.sort.selectedFirst'),
value: 1 value: 2
}, }
{ ])
label: t('Wardrobe.sort.selectedFirst'),
value: 2
}
])
const activeTab = shallowRef<WardrobeTab>('assets') const activeTab = shallowRef<WardrobeTab>('assets')
const activeSort = shallowRef(1) const activeSort = shallowRef(1)
const activePanel = computed(() => { const activePanel = computed(() => {
return activeTab.value === 'assets' ? Assets : Orders return activeTab.value === 'assets' ? Assets : Orders
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.wardrobe-page { .wardrobe-page {
--wardrobe-border-color: #d9d4cd; --wardrobe-border-color: #d9d4cd;
--wardrobe-text-main: #232323; --wardrobe-text-main: #232323;
--wardrobe-text-secondary: #7a746d; --wardrobe-text-secondary: #7a746d;
--wardrobe-surface: #fffdf8; --wardrobe-surface: #fffdf8;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #ffffff; background: #ffffff;
overflow: hidden; overflow: hidden;
.wardrobe-hero { .wardrobe-hero {
height: 14.8rem; height: 14.8rem;
// background-color: #f5f5f5; // background-color: #f5f5f5;
background: url('@/assets/images/background.png') no-repeat; background: url('@/assets/images/background.png') no-repeat;
background-size: cover; background-size: cover;
position: relative; position: relative;
// &::before { // &::before {
// position: absolute; // position: absolute;
// top: 0; // top: 0;
// right: 0; // right: 0;
// bottom: 0; // bottom: 0;
// left: 0; // left: 0;
// background-color: rgba(0, 0, 0, 0.2); // background-color: rgba(0, 0, 0, 0.2);
// } // }
.wardrobe-hero__title { .wardrobe-hero__title {
margin: 0; margin: 0;
font-family: 'KaiseiOpti-Bold'; font-family: 'KaiseiOpti-Bold';
font-size: 4rem; font-size: 4rem;
color: #232323; color: #232323;
line-height: 3.6rem; line-height: 3.6rem;
} }
.wardrobe-hero__subtitle { .wardrobe-hero__subtitle {
margin-top: 1rem; margin-top: 1rem;
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem; font-size: 1.4rem;
line-height: 2.4rem; line-height: 2.4rem;
color: #585858; color: #585858;
} }
} }
> .wardrobe-shell { > .wardrobe-shell {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
> .wardrobe-tabs { > .wardrobe-tabs {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 2rem; gap: 2rem;
padding: 0 9rem; padding: 0 9rem;
border-bottom: 0.1rem solid var(--wardrobe-border-color); border-bottom: 0.1rem solid var(--wardrobe-border-color);
background: #ffffff; background: #ffffff;
> .wardrobe-tabs__nav { > .wardrobe-tabs__nav {
display: flex; display: flex;
align-items: center; align-items: center;
> .wardrobe-tabs__item { > .wardrobe-tabs__item {
position: relative; position: relative;
height: 6rem; height: 6rem;
padding: 0 1.8rem; padding: 0 1.8rem;
border: 0; border: 0;
background: transparent; background: transparent;
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem; font-size: 1.4rem;
line-height: 1; line-height: 1;
color: #7d766f; color: #7d766f;
cursor: pointer; cursor: pointer;
width: 13.9rem; width: 13.9rem;
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
left: 1.8rem; left: 1.8rem;
right: 1.8rem; right: 1.8rem;
bottom: -0.1rem; bottom: -0.1rem;
height: 0.2rem; height: 0.2rem;
background: transparent; background: transparent;
transition: background-color 0.2s ease; transition: background-color 0.2s ease;
} }
&.is-active { &.is-active {
font-family: 'KaiseiOpti-Bold'; font-family: 'KaiseiOpti-Bold';
color: var(--wardrobe-text-main); color: var(--wardrobe-text-main);
&::after { &::after {
background: var(--wardrobe-text-main); background: var(--wardrobe-text-main);
} }
} }
} }
} }
> .wardrobe-tabs__sort { > .wardrobe-tabs__sort {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
flex-shrink: 0; flex-shrink: 0;
> .wardrobe-tabs__sort-label { > .wardrobe-tabs__sort-label {
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem; font-size: 1.4rem;
line-height: 2.4rem; line-height: 2.4rem;
color: #7d766f; color: #7d766f;
white-space: nowrap; white-space: nowrap;
} }
:deep(.el-select) { :deep(.el-select) {
width: 13rem; width: 13rem;
} }
:deep(.el-select__wrapper) { :deep(.el-select__wrapper) {
min-height: 3.6rem; min-height: 3.6rem;
padding: 0 1.2rem; padding: 0 1.2rem;
background: #ffffff; background: #ffffff;
box-shadow: none; box-shadow: none;
} }
:deep(.el-select__selected-item) { :deep(.el-select__selected-item) {
font-family: 'KaiseiOpti-Regular'; font-family: 'KaiseiOpti-Regular';
font-size: 1.4rem; font-size: 1.4rem;
color: #232323; color: #232323;
} }
} }
} }
> .wardrobe-shell__panel { > .wardrobe-shell__panel {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
} }
} }
} }
</style>
<style lang="less">
.wardrobe-sort-dropdown {
.el-select-dropdown__list {
.el-select-dropdown__item {
padding: 0 2rem;
}
}
}
</style> </style>