|
|
@@ -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;
|