vip功能修改

This commit is contained in:
liuyuan
2025-02-19 10:19:18 +08:00
parent 6d86076b90
commit 341321af5f
6 changed files with 267 additions and 1024 deletions

View File

@@ -17,30 +17,31 @@
<view style="width: 120rpx; height: 120rpx; display: inline-block;">
<image @click="goUserInfo" :src="userMes.avatar" v-if="userMes.avatar"
class="per_mes_img color_shandow"></image>
<image src="@/static/icon/home_icon_logo.png" v-else="userMes.avatar"
<image src="@/static/icon/home_icon_logo.png" v-else
class="per_mes_img color_shandow"></image>
</view>
<view class="user_vip_box" v-if="hasVipType1 || hasVipType2">
<view class="user_vip_box" v-if="isAndorid&&hasVipType1 || isAndorid&&hasVipType2">
<view class="user_vip super" :style="hasVipType2?'width: 170rpx;':''">
<view class="user_vip_item" v-if="hasVipType1"><text>医学</text><image src="@/static/icon/chao_svip.png"></image></view>
<view class="user_vip_item" v-if="hasVipType2"><text>国学心理学</text><image src="@/static/icon/chao_svip.png"></image></view>
</view>
</view>
</view>
<view class="userInfoBox" style="width: calc(100% - 180rpx)" :style="hasVipType2?'margin-left: 30rpx;':''">
<view class="userInfoBox" style="margin-left: 30rpx;">
<template>
<view class="name">{{ userMes.nickname ? userMes.nickname : "未设置" }}</view>
</template>
<template v-if="userMes.tel">
<view class="phone">手机号({{ userMes.tel }})</view>
</template>
<template v-if="textList.length>0">
<template v-if="isAndorid&&textList.length>0">
<view class="vip_type">
<view class="vip_type_item" v-for="(item,index) in textList" :key="index">{{item}}<image src="@/static/icon/chao_vip.png"></image></view>
<view class="vip_type_item" v-for="(item,index) in textList" :key="index">
{{item}}<image src="@/static/icon/chao_vip.png"></image>
</view>
</view>
</template>
</view>
<br clear="both" />
</view>
</view>
@@ -53,25 +54,21 @@
<view v-if="isAndorid" class="chong_zhi boxShadow box_fillet vip_box"
@click="onPageJump('/pages/mine/vip/index')">
<view class="noVip">
<view class="zhanghu PM_font" style="text-align: left">
<image class="vip_image" style="margin-left: 10rpx;" src="@/static/vip.png" mode="aspectFit">
</image>
<text style="color: #fff; font-size: 60rpx;" v-if="vipList.length==0">VIP</text>
</view>
<view class="vip_infor" style="width:calc(100% - 200rpx);" v-if="vipList&&vipList.length>0">
<!-- <text class="vip_infor_item" v-if="vipList.includes(1)">医学SVIP</text>
<text class="vip_infor_item" v-if="vipList.includes(2)">国学心理学SVIP</text>
<view class="vip_infor_item" v-for="(item, index) in textList" :key="index">
<text>{{item}}VIP</text>{{vipList[index].endTime.split(' ')[0]}} 到期
</view> -->
<view class="vip_infor_item" v-for="(item, index) in vipList" :key="index">
<text>{{item.text}}VIP</text>{{item.endTime.split(' ')[0]}} 到期
<view style="display: flex; align-items: center;">
<view class="zhanghu PM_font" style="text-align: left">
<image class="vip_image" style="width:80rpx;height:80rpx;margin-left: 10rpx;" src="@/static/vip.png" mode="aspectFit"></image>
<text style="color: #fff; font-size: 60rpx;" v-if="vipList.length==0">VIP</text>
</view>
<view class="vip_infor" v-if="vipList&&vipList.length>0">
<view class="vip_infor_item" v-for="(item, index) in vipList" :key="index" :class="{expired: isExpired(item.endTime.split(' ')[0])}">
<text>{{item.text}}VIP</text>
<text v-if="isExpired(item.endTime.split(' ')[0])">{{item.endTime.split(' ')[0]}} 已到期</text>
<text v-else>有效期到 {{item.endTime.split(' ')[0]}})</text>
</view>
</view>
<view v-else class="vip_null" style=" padding-left: 30rpx;">办理VIP畅享更多专属权益</view>
</view>
<view v-else class="vip_null">定制VIP畅享更多专属权益</view>
<view class="vip_btn"><button>定制</button></view>
<view class="vip_btn"><button v-if="vipList.length==0">办理</button><button v-else>续费</button></view>
</view>
</view>
<!-- end -->
@@ -251,10 +248,8 @@
onLoad(e) {
// 隐藏原生的tabbar
uni.hideTabBar();
// #ifdef APP-PLUS
this.getOS();
this.platform = uni.getSystemInfoSync().platform;
// #endif
},
computed: {
...mapState(["userInfo"]),
@@ -388,6 +383,12 @@
url: url,
});
},
//判断过期的vip
isExpired(dateString){
const date = new Date(dateString);
const now = new Date();
return date < now;
},
// 获取用户的角色信息
getUserRole() {
this.$http.post("common/class/getRoleType").then((res) => {
@@ -532,36 +533,54 @@
this.vipList = res.list;
this.hasVipType1 = this.vipList.some(item => item.type === 1);
this.hasVipType2 = this.vipList.some(item => item.type === 2);
//普通 vip 角色展示逻辑
let text = '';
if(this.vipList.length>0){
this.vipList.forEach((item, index) => {
if(item.type=='4'){
item.text = '中医学';
this.textList.push(item.text);
}else if(item.type=='5'){
item.text = '针灸学';
this.textList.push(item.text);
}else if(item.type=='6'){
item.text = '肿瘤学';
this.textList.push(item.text);
}else if(item.type=='7'){
item.text = '国学';
this.textList.push(item.text);
}else if(item.type=='8'){
item.text = '心理学';
this.textList.push(item.text);
}else if(item.type=='1'){
item.text = '医学S';
}else if(item.type=='2'){
item.text = '国学心理学S';
}
});
//筛选出来已过期的
let listAll = this.vipList;
let list = this.vipList.filter(item => !this.isExpired(item.endTime.split(' ')[0]));
//全部的 vip模块展示
if(listAll.length>0){
listAll = this.showDataList(listAll);
}
console.log('-------listAll',listAll)
//筛选过期以后的 昵称模块展示需要
if(list.length>0){
list = this.showDataList(list);
}
console.log('-------list',list)
}
});
},
},
//分情况展示逻辑
showDataList(list){
this.textList = [];
list.forEach((item, index) => {
if(item.type=='4'){
item.text = '中医学';
this.textList.push(item.text);
}else if(item.type=='5'){
item.text = '针灸学';
this.textList.push(item.text);
}else if(item.type=='6'){
item.text = '肿瘤学';
this.textList.push(item.text);
}else if(item.type=='7'){
item.text = '国学';
this.textList.push(item.text);
}else if(item.type=='8'){
item.text = '心理学';
this.textList.push(item.text);
}else if(item.type=='1'){
item.text = '医学S';
}else if(item.type=='2'){
item.text = '国学心理学S';
}
});
return this.textList;
},
}
};
</script>
<style lang="scss" scoped>
@@ -579,7 +598,6 @@
align-items: center;
display: flex;
align-items: center;
justify-content: space-between;
.per_mes_img {
width: 120rpx;
@@ -831,7 +849,7 @@
background-color: transparent !important;
}
.bg_top {
padding: 0 30rpx;
padding: 0 20rpx;
padding-top: 80rpx;
margin-bottom: 60rpx;
}
@@ -960,7 +978,7 @@
display: flex;
align-items: center;
justify-content: center;
padding: 0 12rpx;
padding: 0 10rpx;
background: linear-gradient(90deg, #258feb 0%, #00e1ec 100%);
border-radius: 20rpx;
font-size: 20rpx;
@@ -970,17 +988,20 @@
color: #fff;
margin-right: 10rpx;
}
.vip_type_item:last-child{
margin-right: 0;
}
.vip_type_item image{
width: 34rpx;
height: 24rpx;
}
.vip_infor{
padding-left: 22rpx;
padding-left: 20rpx;
}
.vip_infor_item{
display: block;
color: #fff;
font-size: 27rpx;
font-size: 26rpx;
line-height: 36rpx;
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
font-weight: normal;
@@ -989,17 +1010,16 @@
color: #fff;
}
.vip_btn{
margin-right: 20rpx;
margin-right: 15rpx;
height: 50rpx;
}
.vip_btn button{
background: none;
border: 2rpx solid #f9ae3d;
border-radius: 40rpx;
font-size: 26rpx;
width: 90rpx;
height: 45rpx;
line-height: 45rpx;
font-size: 24rpx;
width: 82rpx;
line-height: 42rpx;
color: #f9ae3d;
font-weight: bold;
}
@@ -1008,4 +1028,7 @@
font-size: 26rpx;
line-height: 34rpx;
}
.expired{
opacity: 0.55;
}
</style>