添加标识

src/components/header/header.vue

@@ -16,7 +16,7 @@
 						</div> -->
 						<div class="flex align-center myVip" v-if="userType == 2">
 							<el-image style="width: 22px; height: 22px;margin-right: 10px;"
-								src="/images/index/vipIcon.png" fit="cover" />
+								src="/images/index/vipIcon.png"/>
 							{{isUserVip?'会员用户':'开通会员'}}
 						</div>
 					</template>
@@ -162,7 +162,10 @@
 									<div v-for="(vip, index) in viplist" :key="index"
 										class="myVipCon-li-con-items myVipCon-li-con-itemscolor2"
 										style="font-weight: 500;">
-										{{ vip.vipName }}
+										<div v-if="vip.vipName === vipName" class="plan-tag-left">生效中</div>
+										<div>{{ vip.vipName }}</div>
+										<div v-if="vip.vipName === vipName" style="font-size: 8px;">{{ endTimeStr ?
+											endTimeStr.split(' ')[0] : '' }}到期</div>
 									</div>
 								</div>
 
@@ -762,7 +765,8 @@
 				proofFileList: [],
 				dialogImageUrl: '', // 预览图片URL
 				dialogVisible: false, // 预览图片是否可见
-				nonVipInfo: {}
+				nonVipInfo: {},
+				endTimeStr:''
 			}
 		},
 		created() {
@@ -890,17 +894,17 @@
 				this.$Request.get("/app/UserVip/selectUserVip").then((res) => {
 					if (res.code == 0) {
 						if (res.data) {
-							const endTimeStr = res.data.endTime; // 到期时间（格式：yyyy-MM-dd HH:mm:ss 或 yyyy-MM-dd）
+							this.endTimeStr = res.data.endTime; // 到期时间（格式：yyyy-MM-dd HH:mm:ss 或 yyyy-MM-dd）
 							const createTimeStr = res.data.createTime; // 创建时间（格式同上）
 
 							// 1. 时间字符串转时间戳（兼容不同格式）
-							const endTime = this.formatTimeToTimestamp(endTimeStr);
+							const endTime = this.formatTimeToTimestamp(this.endTimeStr);
 							const createTime = this.formatTimeToTimestamp(createTimeStr);
 							const currentTime = new Date().getTime(); // 当前时间戳
 
 							// 2. 验证时间有效性
 							if (!endTime || !createTime) {
-								console.error("时间格式错误", { endTimeStr, createTimeStr });
+								console.error("时间格式错误", { endTimeStr:this.endTimeStr, createTimeStr });
 								this.remainingDays = 0;
 								// this.vipStatus = "已过期";
 
@@ -2039,6 +2043,7 @@
 					color: #333333;
 					font-weight: 400;
 					font-size: 13px;
+					position: relative;
 				}
 			}
 		}
@@ -2186,4 +2191,36 @@
 			padding: 0 16px;
 		}
 	}
+	.plan-tag-left {
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		background: linear-gradient(90.00deg, rgba(13, 39, 247, 1), rgba(19, 193, 234, 1) 100%);
+		color: rgba(255, 255, 255, 1);
+		font-family: DM Sans;
+		font-size: 6px;
+		font-weight: 400;
+		line-height: 7px;
+		letter-spacing: 0px;
+		text-align: left;
+		padding: 2px 6px;
+		border-radius: 8px 0 8px 0;
+		transform-origin: center;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+
+		&::before {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			background: inherit;
+			transform: rotate(-45deg);
+			z-index: -1;
+		}
+	}
 </style>