feat: 站内通知

components/FunctionCard.vue

@@ -29,6 +29,14 @@
 				</view>
 				<view class="function-name">套餐订购</view>
 			</view>
+			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'notifications')" role="button"
+				tabindex="0">
+				<view class="function-icon function-icon-badge">
+					<image src="/static/tips.png" mode="aspectFit" alt="站内通知"></image>
+					<view v-if="unreadCount > 0" class="unread-badge">{{ unreadCount > 99 ? '99+' : unreadCount }}</view>
+				</view>
+				<view class="function-name">站内通知</view>
+			</view>
 			<view class="function-item interactive card-interactive" @tap="$emit('enter', 'order-list')" role="button"
 				tabindex="0">
 				<view class="function-icon">
@@ -132,6 +140,10 @@
 		walletBalance: {
 			type: [Number, String],
 			default: 0
+		},
+		unreadCount: {
+			type: Number,
+			default: 0
 		}
 	});
 
@@ -188,6 +200,22 @@
 					}
 				}
 
+				.function-icon-badge { position: relative; }
+				.unread-badge {
+					position: absolute;
+					top: -8rpx;
+					right: -12rpx;
+					min-width: 34rpx;
+					height: 34rpx;
+					padding: 0 8rpx;
+					border-radius: 20rpx;
+					background: var(--danger);
+					color: #fff;
+					font-size: 18rpx;
+					line-height: 34rpx;
+					text-align: center;
+				}
+
 				.function-name {
 					font-size: 28rpx;
 					font-weight: 500;