285 lines
6.6 KiB
Vue
285 lines
6.6 KiB
Vue
<template>
|
|
<view>
|
|
<navBar leftText="会员中心"></navBar>
|
|
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
|
|
<view v-if="memberInfo" class="vipC" :style="'margin-top:'+navH+'px;'">
|
|
<view class="vipInfoC relative">
|
|
<image v-if="memberInfo.is_member" class="bg" src="/pagesMine/static/image/vip/vipTopBg.png" mode="widthFix"></image>
|
|
<image v-else class="bg" src="/pagesMine/static/image/vip/noVipTopBg.png" mode="widthFix"></image>
|
|
<view v-if="memberInfo.is_member" class="infoC vip absolute">
|
|
<view class="title">尊贵的{{memberInfo.subscription_type}}会员</view>
|
|
<view class="tips">{{memberInfo.days_left}}天后到期</view>
|
|
</view>
|
|
<view v-else class="infoC absolute">
|
|
<view class="title">价值前沿</view>
|
|
<view class="tips">您还不是会员 加入尊享N项服务</view>
|
|
</view>
|
|
</view>
|
|
<view class="privilegeCompareC relative">
|
|
<view class="titleC flexCenter">
|
|
<image v-if="memberInfo.is_member" class="icon" src="/pagesMine/static/icon/vip/titleLeft_v.png" mode="widthFix"></image>
|
|
<image v-else class="icon" src="/pagesMine/static/icon/vip/titleLeft.png" mode="widthFix"></image>
|
|
<view class="title">特权对比</view>
|
|
<image v-if="memberInfo.is_member" class="icon" src="/pagesMine/static/icon/vip/titleRight_v.png" mode="widthFix"></image>
|
|
<image v-else class="icon" src="/pagesMine/static/icon/vip/titleRight.png" mode="widthFix"></image>
|
|
</view>
|
|
<view :class="'privilegeList '+(memberInfo.is_member?'vip':'')">
|
|
<view class="header flex">
|
|
<view class="privilege item">专属特权</view>
|
|
<view class="item free">pro会员</view>
|
|
<view class="item vip">max会员</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item flex" v-for="(item,index) in privilegeList" :key="index">
|
|
<view class="optionItem privilege flex">{{item}}</view>
|
|
<view class="optionItem free flexCenter">
|
|
<block v-if="index>5">
|
|
<image class="notContain" src="/pagesMine/static/icon/vip/notContain.png" mode="widthFix"></image>
|
|
</block>
|
|
<!-- <block v-if="index==3||index==4">
|
|
<block v-if="index==3">限制查看数量</block>
|
|
<block v-if="index==4">每日查看2只</block>
|
|
</block> -->
|
|
<block v-else>
|
|
<image class="contain" src="/pagesMine/static/icon/vip/contain.png" mode="widthFix"></image>
|
|
</block>
|
|
</view>
|
|
<view class="optionItem vip flexCenter">
|
|
<image class="contain" src="/pagesMine/static/icon/vip/contain.png" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="memberInfo" class="joinVipC fixed" @click="clickJoinVip()">{{memberInfo.is_member?('您已是'+memberInfo.subscription_type+'会员'):'立即加入年度会员'}}</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { inject } from 'vue';
|
|
import { membershipStatus } from '@/request/api';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
navH:inject('navHeight'),
|
|
memberInfo:null, //会员信息
|
|
privilegeList:['事件关联股票深度分析','历史事件智能对比复盘','事件概念关联与挖掘','概念板块个股追踪','概念深深度研报与解读','个股异动实时预警',
|
|
'事件传导链路智能分析','概念演变时间轴追溯','个股全方位深度研究','价小前投研助手无限使用','新功能优先体验权','专属客服一对一服务']
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getMemberStatus()
|
|
},
|
|
methods: {
|
|
/**
|
|
* 点击加入vip
|
|
*/
|
|
clickJoinVip()
|
|
{
|
|
if(!this.memberInfo.is_member)
|
|
{
|
|
//如果不是会员
|
|
uni.showModal({
|
|
content:'请点击下方按钮复制链接并在浏览器中打开以完成会员购买流程',
|
|
showCancel:false,
|
|
confirmText:'复制',
|
|
success(res) {
|
|
if(res.confirm)
|
|
{
|
|
uni.setClipboardData({
|
|
data:"https://valuefrontier.cn/home/pages/account/subscription"
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
/**
|
|
* 获取会员状态
|
|
*/
|
|
getMemberStatus()
|
|
{
|
|
membershipStatus().then(res=>{
|
|
if (res.code==200) {
|
|
this.memberInfo = res.data
|
|
} else
|
|
uni.showToast({
|
|
title:res.message,
|
|
icon:'none'
|
|
})
|
|
}).catch(error=>{
|
|
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.topBg
|
|
{
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.vipC
|
|
{
|
|
padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
|
|
.vipInfoC
|
|
{
|
|
margin: 0 25rpx;
|
|
.bg
|
|
{
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
.infoC
|
|
{
|
|
top: 130rpx;
|
|
left: 38rpx;
|
|
.title
|
|
{
|
|
font-size: 40rpx;
|
|
font-weight: bold;
|
|
color: #556B87;
|
|
}
|
|
.tips
|
|
{
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #65758A;
|
|
}
|
|
}
|
|
.infoC.vip
|
|
{
|
|
.title
|
|
{
|
|
color: #AB3D1A;
|
|
}
|
|
.tips
|
|
{
|
|
color: #AB3D1A;
|
|
}
|
|
}
|
|
}
|
|
.privilegeCompareC
|
|
{
|
|
background-color: white;
|
|
margin-top: -70rpx;
|
|
padding-top: 40rpx;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
.titleC
|
|
{
|
|
.icon
|
|
{
|
|
width: 54rpx;
|
|
height: auto;
|
|
}
|
|
.title
|
|
{
|
|
margin: 0 20rpx;
|
|
font-size: 50rpx;
|
|
font-weight: bold;
|
|
color: #222;
|
|
}
|
|
}
|
|
.privilegeList
|
|
{
|
|
margin: 0 25rpx;
|
|
padding: 0 30rpx;
|
|
box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
|
|
border-radius: 10rpx;
|
|
.header
|
|
{
|
|
margin-top: 50rpx;
|
|
padding-top: 14rpx;
|
|
border-bottom: solid 1rpx #F3F4F6;
|
|
.item
|
|
{
|
|
line-height: 90rpx;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #555;
|
|
}
|
|
.item.privilege
|
|
{
|
|
padding-left: 24rpx;
|
|
width: 300rpx;
|
|
}
|
|
.item.free
|
|
{
|
|
width: 174rpx;
|
|
text-align: center;
|
|
}
|
|
.item.vip
|
|
{
|
|
width: 160rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.list
|
|
{
|
|
.item
|
|
{
|
|
.optionItem
|
|
{
|
|
height: 90rpx;
|
|
border-bottom: solid 1rpx #F3F4F6;
|
|
.contain
|
|
{
|
|
width: 21rpx;
|
|
height: auto;
|
|
}
|
|
.notContain
|
|
{
|
|
width: 17rpx;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
.optionItem.privilege
|
|
{
|
|
width: 300rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #222;
|
|
}
|
|
.optionItem.free
|
|
{
|
|
width: 174rpx;
|
|
font-size: 20rpx;
|
|
color: #555;
|
|
text-align: center;
|
|
}
|
|
.optionItem.vip
|
|
{
|
|
width: 160rpx;
|
|
}
|
|
}
|
|
}
|
|
.privilegeList.vip
|
|
{
|
|
box-shadow: 0px 0px 9px 0px rgba(249,115,22,0.4);
|
|
}
|
|
}
|
|
}
|
|
|
|
.joinVipC
|
|
{
|
|
background-color: #F97316;
|
|
margin: 0 25rpx;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
line-height: 80rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
</style>
|