feat: hero背景&通知时间

src/router/index.ts

@@ -108,7 +108,6 @@ router.afterEach(async () => {
 
   const globalStore = useGlobalStore()
 	fetchAllUnreadMessage().then((res) => {
-		console.log(res)
     globalStore.setUnredCount(res.totalUnread)
 	})
 

src/views/notifications/index.vue

@@ -21,18 +21,68 @@
 </template>
 <script setup lang="ts">
 	import { computed, ref, onMounted } from 'vue'
+	import { useI18n } from 'vue-i18n'
 	import NotificationsList from './components/NotificationsList.vue'
 	import type { NotificationRecord } from './types'
 	import { fetchAllMessageList, markMessageAsRead, markAllMessagesAsRead } from '@/api/notification'
 
-	const notifications = ref<NotificationRecord[]>([])
+	const { locale } = useI18n()
+
+	// Store notifications with original date strings
+	interface NotificationWithOriginalDate extends NotificationRecord {
+		originalDate: string
+	}
+
+	const notificationsRaw = ref<NotificationWithOriginalDate[]>([])
 	const loading = ref(false)
 	const hasMore = ref(true)
 
+	/**
+	 * Format date based on current language
+	 * Chinese: yyyy年M月D日 (e.g., 2024年5月15日)
+	 * English: Month Day, Year (e.g., January 15, 2024)
+	 */
+	const formatDate = (dateString: string): string => {
+		if (!dateString) return ''
+		
+		const date = new Date(dateString)
+		if (isNaN(date.getTime())) return dateString
+
+		const isChinese = locale.value === 'CHINESE_SIMPLIFIED'
+
+		if (isChinese) {
+			// Chinese format: yyyy年M月D日 (without leading zeros)
+			const year = date.getFullYear()
+			const month = date.getMonth() + 1
+			const day = date.getDate()
+			return `${year}年${month}月${day}日`
+		} else {
+			// English format: Month Day, Year
+			const options: Intl.DateTimeFormatOptions = { 
+				year: 'numeric', 
+				month: 'long', 
+				day: 'numeric' 
+			}
+			return date.toLocaleDateString('en-US', options)
+		}
+	}
+
+	// Computed property that formats dates based on current locale
+	const notifications = computed<NotificationRecord[]>(() => {
+		return notificationsRaw.value.map((item) => ({
+			id: item.id,
+			title: item.title,
+			date: formatDate(item.originalDate),
+			content: item.content,
+			isUnread: item.isUnread,
+			isExpanded: item.isExpanded
+		}))
+	})
+
 	const unreadCount = computed(() => notifications.value.filter((item) => item.isUnread).length)
 
 	const handleToggleItem = async (id: NotificationRecord['id']) => {
-		const targetItem = notifications.value.find((item) => item.id === id)
+		const targetItem = notificationsRaw.value.find((item) => item.id === id)
 
 		if (!targetItem) return
 
@@ -47,7 +97,7 @@
 			}
 		}
 
-		notifications.value = notifications.value.map((item) => ({
+		notificationsRaw.value = notificationsRaw.value.map((item) => ({
 			...item,
 			isUnread: item.id === id ? false : item.isUnread,
 			isExpanded: item.id === id ? nextExpanded : false
@@ -57,7 +107,7 @@
 	const handleMarkAllAsRead = async () => {
 		try {
 			await markAllMessagesAsRead()
-			notifications.value = notifications.value.map((item) => ({
+			notificationsRaw.value = notificationsRaw.value.map((item) => ({
 				...item,
 				isUnread: false
 			}))
@@ -78,20 +128,21 @@
 		try {
 			const res = await fetchAllMessageList(params.value)
 			
-			// Transform API data to match NotificationRecord interface
+			// Transform API data to match NotificationRecord interface with original date
-			const newNotifications: NotificationRecord[] = res.content.map((item: any) => ({
+			const newNotifications: NotificationWithOriginalDate[] = res.content.map((item: any) => ({
 				id: String(item.id),
 				title: item.title,
-				date: item.createTime,
+				date: item.createTime, // This will be formatted by computed property
+				originalDate: item.createTime, // Store original date for re-formatting
 				content: item.content,
 				isUnread: item.isRead === 0,
 				isExpanded: false
 			}))
 
 			if (params.value.page === 1) {
-				notifications.value = newNotifications
+				notificationsRaw.value = newNotifications
 			} else {
-				notifications.value = [...notifications.value, ...newNotifications]
+				notificationsRaw.value = [...notificationsRaw.value, ...newNotifications]
 			}
 
 			// Check if there are more pages
@@ -134,17 +185,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		background: linear-gradient(
+		background: url('@/assets/images/wardrobe/settings_bg.jpg') no-repeat;
-				180deg,
+    background-size: cover;
-				rgba(245, 243, 240, 0.92) 0%,
-				rgba(250, 249, 246, 0.95) 100%
-			),
-			linear-gradient(
-				90deg,
-				rgba(227, 221, 212, 0.28) 0%,
-				rgba(255, 255, 255, 0.24) 50%,
-				rgba(227, 221, 212, 0.28) 100%
-			);
 		border-bottom: 0.05rem solid #dfd8d1;
 	}
 

src/views/setting/index.vue

@@ -137,8 +137,8 @@
 		justify-content: center;
 		height: 14.8rem;
 		row-gap: 1.2rem;
-		background: linear-gradient(rgba(255, 255, 255, 0.91), rgba(255, 255, 255, 0.91)),
+		background: url('@/assets/images/wardrobe/settings_bg.jpg') no-repeat;
-			linear-gradient(90deg, #f2eee8 0%, #fbfaf8 40%, #f1ede7 100%);
+		background-size: cover;
 	}
 
 	.title {

src/views/wardrobe/Orders.vue

@@ -290,11 +290,9 @@
 				brand: order.shopName,
 				cover: item.thumbnailUrl,
 				amount: item.price,
-				status:1
+				status: 1
 			})
 		})
-		// 2060253365078691800
-		// "https://checkout.stripe.com/c/pay/cs_test_a1zdyl7iR9sIEWArSQyUaOFIax6Pia0S7GJNXqvLOFfy2w57JVlVAV5Jlm#fidnandhYHdWcXxpYCc%2FJ2FgY2RwaXEnKSdpamZkaWAnPydgaycpJ2JwZGZkaGppYFNkd2xka3EnPydmamtxd2ppJyknZHVsTmB8Jz8ndW5acWB2cVowNFUxX19JNTdrNFFAfGF8S2lwbXEzU0F9a0dIakdyPVYwNzFqcX9pXVM2RkhGX0w9TWhuZlB3NkZOfD1fNWBUN1J2dlZPPHZEZF9rTFRPTDUxY0RXTU1PbDU1dWZMRzF2TlAnKSdjd2poVmB3c2B3Jz9xd3BgKSdnZGZuYndqcGthRmppancnPycmY2NjY2NjJyknaWR8anBxUXx1YCc%2FJ3Zsa2JpYFpscWBoJyknYGtkZ2lgVWlkZmBtamlhYHd2Jz9xd3BgeCUl"
 
 		console.log(list)
 		const params = btoa(encodeURIComponent(JSON.stringify(list)))
@@ -302,9 +300,8 @@
 			name: 'pay',
 			query: {
 				list: params,
-				paymentLink:
+				paymentLink: order.paymentLink || '',
-					'https://checkout.stripe.com/c/pay/cs_test_a1zdyl7iR9sIEWArSQyUaOFIax6Pia0S7GJNXqvLOFfy2w57JVlVAV5Jlm#fidnandhYHdWcXxpYCc%2FJ2FgY2RwaXEnKSdpamZkaWAnPydgaycpJ2JwZGZkaGppYFNkd2xka3EnPydmamtxd2ppJyknZHVsTmB8Jz8ndW5acWB2cVowNFUxX19JNTdrNFFAfGF8S2lwbXEzU0F9a0dIakdyPVYwNzFqcX9pXVM2RkhGX0w9TWhuZlB3NkZOfD1fNWBUN1J2dlZPPHZEZF9rTFRPTDUxY0RXTU1PbDU1dWZMRzF2TlAnKSdjd2poVmB3c2B3Jz9xd3BgKSdnZGZuYndqcGthRmppancnPycmY2NjY2NjJyknaWR8anBxUXx1YCc%2FJ3Zsa2JpYFpscWBoJyknYGtkZ2lgVWlkZmBtamlhYHd2Jz9xd3BgeCUl',
+				paymentId: order.paymentId || ''
-				paymentId: '2060253365078691800'
 			}
 		})
 	}

src/views/wardrobe/index.vue

@@ -113,7 +113,7 @@
 		.wardrobe-hero {
 			height: 14.8rem;
 			// background-color: #f5f5f5;
-			background: url('@/assets/images/background.png') no-repeat;
+			background: url('@/assets/images/wardrobe/settings_bg.jpg') no-repeat;
 			background-size: cover;
 			position: relative;
 			// &::before {
@@ -208,10 +208,11 @@
 						line-height: 2.4rem;
 						color: #7d766f;
 						white-space: nowrap;
+						flex-shrink: 0;
 					}
 
 					:deep(.el-select) {
-						width: 13rem;
+						min-width: 13rem;
 					}
 
 					:deep(.el-select__wrapper) {
@@ -225,6 +226,8 @@
 						font-family: 'KaiseiOpti-Regular';
 						font-size: 1.4rem;
 						color: #232323;
+						min-width: 13rem;
+						padding-right:1rem;
 					}
 				}
 			}