feat: 7月迭代

components/NotificationPopup.vue

@@ -10,6 +10,7 @@
 				<swiper-item v-for="item in items" :key="item.id">
 					<view class="notification-content">
 						<view class="notification-title">{{ item.title || '业务通知' }}</view>
+						<view class="notification-severity">{{ getNotificationMeta(item) }}</view>
 						<view class="notification-time">{{ formatDate(item.created_at) }}</view>
 						<scroll-view scroll-y class="notification-body">
 							<text>{{ item.body || '暂无通知内容' }}</text>
@@ -47,6 +48,20 @@
 		if (!value) return '-';
 		return value.replace('T', ' ').slice(0, 16);
 	};
+
+	const getNotificationMeta = (item) => {
+		const category = {
+			expiry: '套餐临期',
+			exchange: '换货'
+		}[item?.category] || '业务通知';
+		const severity = {
+			info: '提示',
+			warning: '警告',
+			error: '错误',
+			critical: '严重'
+		}[item?.severity];
+		return severity ? `${category} · ${severity}` : category;
+	};
 </script>
 
 <style scoped lang="scss">
@@ -108,6 +123,12 @@
 		line-height: 1.45;
 	}
 
+	.notification-severity {
+		margin-top: 10rpx;
+		color: var(--primary);
+		font-size: 22rpx;
+	}
+
 	.notification-time {
 		margin-top: 12rpx;
 		color: var(--text-tertiary);

components/UserInfoCard.vue

@@ -6,7 +6,10 @@
 					<view class="title">{{ currentCardNo || '-' }}</view>
 				</view>
 				<view class="caption">套餐名称：{{ deviceInfo.packageName || '-' }}</view>
-				<view class="caption">套餐到期时间：{{ deviceInfo.expireDate || '-' }}</view>
+				<view class="caption" :class="{ 'expiry-warning': isExpiring }">
+					套餐到期时间：{{ deviceInfo.expireDate || '-' }}
+					<text v-if="isExpiring && expiryDays !== null">（剩余 {{ expiryDays }} 天）</text>
+				</view>
 			</view>
 			<view v-if="isDevice" class="tag-apple" :class="onlineStatus === '在线' ? 'tag-success' : 'tag-warning'">
 				{{ onlineStatus }}
@@ -24,7 +27,9 @@
 		deviceInfo: { type: Object, default: () => ({}) },
 		onlineStatus: { type: String, default: '离线' },
 		networkStatus: { type: [String, Number], default: '离线' },
-		isDevice: { type: Boolean, default: true }
+		isDevice: { type: Boolean, default: true },
+		isExpiring: { type: Boolean, default: false },
+		expiryDays: { type: [Number, String], default: null }
 	});
 
 </script>
@@ -33,6 +38,8 @@
 	.user-info-card {
 		color: var(--text-primary);
 
+		.expiry-warning { color: var(--danger); }
+
 		.user-details {
 			flex: 1;
 		}