瀏覽代碼

添加会员标识

wkw 6 月之前
父節點
當前提交
7f2dd490b3
共有 1 個文件被更改,包括 41 次插入6 次删除
  1. 41 6
      pages/my/VIP/benefits.vue

+ 41 - 6
pages/my/VIP/benefits.vue

@@ -52,8 +52,10 @@
 			    <view class="header-cell basic">基础权益</view>
 			    <view v-for="(vip, index) in viplist" :key="vip.id"
 			          :class="['header-cell', index === 0 ? 'active' : index === 1 ? 'vip' : 'recommended']">
-			      <view v-if="vip.vipName === '年度版'" class="plan-tag">推荐</view>
+				  <view v-if="vip.vipName === vipName" class="plan-tag-left">生效中</view>
+			      <view v-if="vip.vipName === '年度版'" class="plan-tag-right">推荐</view>
 			      <view class="plan-name">{{ vip.vipName }}</view>
+				  <view v-if="vip.vipName === vipName" style="font-size: 20rpx;">{{ endTimeStr ? endTimeStr.split(' ')[0] : '' }}到期</view>
 			    </view>
 			  </view>
 			
@@ -267,7 +269,8 @@
 					vip: 1599,
 					flagship: 2599
 				},
-				nonVipInfo:{}
+				nonVipInfo:{},
+				endTimeStr:''
 			}
 		},
 		onLoad() {
@@ -747,17 +750,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, createTimeStr });
 								    this.remainingDays = 0;
 								    this.vipStatus = "已过期";
 								
@@ -1102,7 +1105,7 @@
 					color: rgba(212, 131, 0, 1);
 				}
 
-				.plan-tag {
+				.plan-tag-right {
 					position: absolute;
 					top: 0rpx;
 					right: 0rpx;
@@ -1134,6 +1137,38 @@
 						z-index: -1;
 					}
 				}
+				.plan-tag-left {
+					position: absolute;
+					top: 0rpx;
+					left: 0rpx;
+					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: 12rpx;
+					font-weight: 400;
+					line-height: 14rpx;
+					letter-spacing: 0px;
+					text-align: left;
+					padding: 4rpx 12rpx;
+					border-radius: 16rpx 0rpx 16rpx 0rpx;
+					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;
+					}
+				}
 
 				.plan-name {
 					font-size: 24rpx;