vip功能修改
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user