1

pages/index/index.vue

@@ -117,6 +117,7 @@
 						<view class="menu-list world-luck" @tap="goDetail('4')">
 							<view class="world-light"></view>
 							<view class="world-dot world-dot-c"></view>
+							<view class="planet-reminder-badge" v-if="planetHasReminder"></view>
 							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/41cfb56caff4419b94b69d0f2303b602.png"
 								alt="" />
 							<view class="menu-name">白嫖星球</view>
@@ -124,6 +125,9 @@
 						</view>
 						<view class="menu-list world-fish" @tap="goDetail('5')">
 							<view class="world-light"></view>
+							<view class="planet-reminder-badge ie-badge" v-if="ieHasReminder">
+								<text v-if="ieUnreadCount > 0">{{ieUnreadCount > 99 ? '99+' : ieUnreadCount}}</text>
+							</view>
 							<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/a083b7d159264bbc967034088fa7eb3a.png"
 								alt="" />
 							<view class="menu-name">i/e星球</view>
@@ -724,6 +728,7 @@
 				waimaiCount: 0,
 				kuaidiCount: 0,
 				paotuiCount: 0,
+				homeReminders: {},
 				productData: [],
 				zhipaiCount: 0,
 				searchForm: {
@@ -792,6 +797,17 @@
 					const title = item.title ? String(item.title).toLowerCase() : ''
 					return title.indexOf(keyword) > -1
 				})
+			},
+			planetHasReminder() {
+				return !!(this.homeReminders && this.homeReminders.planet)
+			},
+			ieHasReminder() {
+				return !!(this.homeReminders && this.homeReminders.ie)
+			},
+			ieUnreadCount() {
+				const count = this.homeReminders && this.homeReminders.ieUnreadCount
+				const num = Number(count || 0)
+				return isNaN(num) ? 0 : num
 			}
 		},
 		filters: {
@@ -1123,6 +1139,7 @@
 				this.tui.request("/mall/delivery/page", "POST", this.searchForm, false, false).then((res) => {
 					that.loadStatus = 'nomore';
 					if (res.code == 200) {
+						that.homeReminders = res.result.homeReminders || {}
 						that.mallAds = res.result.mallAds
 						for(let i=0;i<that.mallAds.length;i++){
 							if(that.mallAds[i].position == 'home_top'){
@@ -2031,6 +2048,66 @@
 		z-index: 2;
 	}
 
+	.planet-reminder-badge {
+		position: absolute;
+		right: 18rpx;
+		top: 14rpx;
+		min-width: 28rpx;
+		height: 28rpx;
+		padding: 0 8rpx;
+		border-radius: 999rpx;
+		background: rgba(255, 214, 229, 0.86);
+		border: 2rpx solid rgba(255, 255, 255, 0.9);
+		box-shadow: 0 8rpx 18rpx rgba(255, 136, 180, 0.18);
+		color: #c94c75;
+		font-size: 18rpx;
+		font-weight: 900;
+		line-height: 28rpx;
+		text-align: center;
+		z-index: 6;
+	}
+
+	.planet-reminder-badge::after {
+		content: '';
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		width: 100%;
+		height: 100%;
+		border-radius: inherit;
+		background: rgba(255, 214, 229, 0.42);
+		transform: translate(-50%, -50%);
+		animation: reminderBadgePulse 1.8s ease-out infinite;
+		z-index: -1;
+	}
+
+	.planet-reminder-badge text {
+		position: relative;
+		z-index: 1;
+	}
+
+	.ie-badge {
+		background: rgba(198, 255, 144, 0.88);
+		box-shadow: 0 8rpx 18rpx rgba(86, 196, 110, 0.18);
+		color: #2d7c4f;
+	}
+
+	.ie-badge::after {
+		background: rgba(198, 255, 144, 0.42);
+	}
+
+	@keyframes reminderBadgePulse {
+		0% {
+			opacity: 0.72;
+			transform: translate(-50%, -50%) scale(1);
+		}
+
+		100% {
+			opacity: 0;
+			transform: translate(-50%, -50%) scale(1.9);
+		}
+	}
+
 	.menu-list:nth-child(2) img {
 		animation-delay: 0.3s;
 	}