feat: order页面空状态

src/views/wardrobe/Orders.vue

@@ -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