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: {
label: 'Sort by',
placeholder: 'Select',
default: 'Default',
dateAdded: 'Date Added',
selectedFirst: 'Selected First'
},

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

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

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

@@ -14,7 +14,7 @@
<div class="assets-toolbar">
<div class="assets-toolbar__selection">
<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">
{{ t('Wardrobe.assets.selectedCount', { count: selectedCount }) }}
</span>
@@ -38,7 +38,12 @@
</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
v-for="(item, index) in dataList"
@@ -67,7 +72,7 @@
</div>
</div>
<Empty v-else @explore="goToDigitalItems" />
<Empty v-else />
</section>
</div>
</template>
@@ -306,10 +311,6 @@
return (index + 1) % gridColumnCount.value === 0
}
const goToDigitalItems = () => {
router.push('/digitalItem')
}
watch(
() => dataList.value.length,
async (len) => {

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

@@ -1,60 +1,66 @@
<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<{
(event: 'explore'): void
}>()
const handleExplore = () => {
router.push('/digitalItem')
}
</script>
<template>
<div class="wardrobe-empty flex flex-col flex-center">
<img src="@/assets/images/wardrobe/empty-wardrobe.png" class="wardrobe-empty__image" alt="" />
<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">{{ t('Wardrobe.empty.title') }}</h2>
<p class="wardrobe-empty__description">
{{ t('Wardrobe.empty.description') }}
</p>
<button class="wardrobe-empty__button" type="button" @click="emit('explore')">
{{ t('Wardrobe.empty.action') }}
</button>
</div>
<h2 class="wardrobe-empty__title">{{ t('Wardrobe.empty.title') }}</h2>
<p class="wardrobe-empty__description">
{{ t('Wardrobe.empty.description') }}
</p>
<button class="wardrobe-empty__button" type="button" @click="handleExplore">
{{ t('Wardrobe.empty.action') }}
</button>
</div>
</template>
<style lang="less" scoped>
.wardrobe-empty {
flex: 1;
color: #979797;
.wardrobe-empty {
flex: 1;
color: #979797;
> .wardrobe-empty__image {
width: 14.2rem;
height: 18.8rem;
}
> .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__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__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;
}
}
> .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>

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

@@ -13,7 +13,7 @@
</button>
</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">
<button
class="order-card__toggle"
@@ -27,7 +27,9 @@
<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="icon">
<svg-icon name="order-shop" size="24" />
</span>
<span class="text">{{ order.shopName }}</span>
</div>
<p class="order-card__date">{{ order.formatUpdatetime }}</p>
@@ -39,7 +41,7 @@
: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>
@@ -83,6 +85,7 @@
</div>
</article>
</div>
<Empty v-else />
</div>
</template>
@@ -91,6 +94,7 @@
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'>
@@ -192,21 +196,21 @@
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
}
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
}
month: 'short',
day: 'numeric',
year: 'numeric',
hour: 'numeric',
minute: '2-digit',
hour12: true
}
return new Intl.DateTimeFormat(dateLocale, options).format(date)
}
@@ -232,7 +236,9 @@
page: orderParams.value.page,
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) {
params.status = currentStatus.value

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

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