You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
589 lines
13 KiB
589 lines
13 KiB
<template>
|
|
<view class="pages" v-if="upgrade_list.length>0">
|
|
<view class="top">
|
|
<image :src="userInfo.headUrl" mode=""></image>
|
|
<view class="user_info">
|
|
<view :class="userInfo.level == 0? 'user_row m-t-32': 'user_row'">
|
|
<text class="user_name">{{userInfo.nickName}}</text>
|
|
<view class="lv" v-if="userInfo.level ==0">
|
|
<image :src="img_url+'vip/0.png'" mode=""></image>
|
|
</view>
|
|
<view class="lv" v-if="userInfo.level ==1">
|
|
<image :src="img_url+'vip/1.png'" mode=""></image>
|
|
</view>
|
|
<view class="lv" v-if="userInfo.level ==2">
|
|
<image :src="img_url+'vip/2.png'" mode=""></image>
|
|
</view>
|
|
<view class="lv" v-if="userInfo.level ==3">
|
|
<image :src="img_url+'vip/3.png'" mode=""></image>
|
|
</view>
|
|
<view class="lv" v-if="userInfo.level ==4">
|
|
<image :src="img_url+'vip/4.png'" mode=""></image>
|
|
</view>
|
|
</view>
|
|
<text class="expire_time" v-if="userInfo.level !==0 && userInfo.levelTime" >到期时间：{{userInfo.levelTime}}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="card">
|
|
<view class="title">
|
|
<image :src="img_url+'member/min.png'" mode=""></image>
|
|
<text>耀实惠 等级越高，实惠更多！</text>
|
|
</view>
|
|
<view class="select_pic_video">
|
|
<u-subsection mode="subsection" :list="listPicVideo" fontSize="36" height="64" :current="curNow"
|
|
@change="sectionChange"></u-subsection>
|
|
</view>
|
|
<!-- 升级 -->
|
|
<view v-if="curNow == 0">
|
|
<view class="upgrade">
|
|
<view class="item" v-for="(item,index) in upgrade_list" :key="index">
|
|
<view :class="index== status? 'item select_item ': 'item'" @click="changeStatus(index)">
|
|
<text class="title">{{item.title}}</text>
|
|
<view class="momey_box">
|
|
<text class="icons">￥</text>
|
|
<text class="price">{{item.money}}</text>
|
|
</view>
|
|
<view class="old_money">
|
|
<text>原价：</text>
|
|
<text class="through">¥{{item.oldMoney}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 权益 -->
|
|
<view class="equities">
|
|
<view class="title">
|
|
<image :src="img_url+'member/max.png'" mode=""></image>
|
|
<text>{{upgrade_list[status].name}}</text>
|
|
</view>
|
|
<view class="item">
|
|
<rich-text :nodes="upgrade_list[status].concert"></rich-text>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 续费 -->
|
|
<view v-if="curNow == 1">
|
|
<view class="select">
|
|
<view class="item" v-for="(item,index) in select_list" :key="index">
|
|
<view :class="index== status_tow? 'item select_item ': 'item'" @click="changeStatus(index)">
|
|
<text class="title">{{item.name}}</text>
|
|
<text class="price" v-if="index == 0">￥{{item.money}}/{{item.overdue}}{{ item.overdueType==0?'天':'h'}}</text>
|
|
<text class="price" v-else>￥{{item.money}}/年</text>
|
|
<view class="old_money">
|
|
<text>原价：</text>
|
|
<text class="through">¥{{item.oldMoney}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 权益 -->
|
|
<view class="equities">
|
|
<view class="title">
|
|
<image :src="img_url+'member/max.png'" mode=""></image>
|
|
<text v-if="curNow == 0">{{upgrade_list[status].title}}</text>
|
|
<text v-else>{{select_list[status_tow].title}}</text>
|
|
</view>
|
|
<rich-text v-if="curNow == 0"> :nodes="upgrade_list[status].concert"></rich-text>
|
|
<rich-text v-else :nodes="select_list[status_tow].concert"></rich-text>
|
|
<!-- <view class="item" v-for="(item,index) in select_list[status].equitiesList" :key="index">
|
|
<image :src="img_url+'member/dot.png'" mode=""></image>
|
|
<text>{{item}}</text>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<!-- 按钮 -->
|
|
<view class="btn">
|
|
<view class="left">
|
|
<text class="icons">￥</text>
|
|
<text class="num" v-if="curNow == 0">{{upgrade_list[status].money}}</text>
|
|
<text class="num" v-else>{{select_list[status_tow].money}}</text>
|
|
<!-- <text class="info_text">开通即享特权</text> -->
|
|
</view>
|
|
<text v-if="curNow == 0" class="right" @click="toDredge">升级</text>
|
|
<text v-else class="right" @click="toDredge">续费</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config_img from "@/utils/js/config.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
img_url: config_img.img_url,
|
|
status: 0,
|
|
status_tow: 0,
|
|
listPicVideo: ['升级', '续费'],
|
|
curNow: 0,
|
|
upgrade_list: [],
|
|
select_list: [],
|
|
userInfo: {},
|
|
url: null, //从哪里来
|
|
}
|
|
},
|
|
onUnload() {
|
|
uni.navigateBack({
|
|
delta: 3
|
|
})
|
|
},
|
|
onLoad() {
|
|
this.userInfo = uni.getStorageSync("__user_info");
|
|
this.getVipRoleList();
|
|
|
|
},
|
|
methods: {
|
|
// 刷新用户个人信息
|
|
getUserInfo () {
|
|
uni.showLoading();
|
|
this.$api('getUserInfo')
|
|
.then(res => {
|
|
let { code, result, message } = res
|
|
uni.hideLoading();
|
|
if (code === 200) {
|
|
const userInfo = {...result.userInfo,...result.account}
|
|
this.$storage.setStorage("__user_info",userInfo)
|
|
console.log(userInfo)
|
|
} else {
|
|
this.$Toast(message)
|
|
|
|
}
|
|
})
|
|
.catch(err => {
|
|
this.$Toast(err.message)
|
|
uni.hideLoading();
|
|
})
|
|
},
|
|
sectionChange(index) {
|
|
console.log(index)
|
|
this.curNow = index
|
|
if(index == 0) {
|
|
// 升级
|
|
this.getVipRoleList();
|
|
}else {
|
|
// 续费
|
|
this.getVipList();
|
|
}
|
|
// this.rightList[index].show_pic_video = !this.rightList[index].show_pic_video
|
|
// if(index == 0) {
|
|
// this.show_pic_video = true
|
|
// }else {
|
|
// this.show_pic_video = false
|
|
// }
|
|
// this.curNow = index;
|
|
},
|
|
getVipList() {
|
|
// 续费
|
|
uni.showLoading();
|
|
this.$api('getVipList').then(res => {
|
|
let { code, result, message } = res;
|
|
uni.hideLoading();
|
|
if(code == 200) {
|
|
console.log(result)
|
|
this.select_list = result.records
|
|
}else {
|
|
this.$Toast(message);
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading();
|
|
this.$Toast(err.message);
|
|
})
|
|
},
|
|
getVipRoleList() {
|
|
// 升级
|
|
uni.showLoading();
|
|
this.$api('getVipRoleList').then(res => {
|
|
let { code, result, message } = res;
|
|
uni.hideLoading();
|
|
if(code == 200) {
|
|
console.log(result)
|
|
this.upgrade_list = result.records
|
|
}else {
|
|
this.$Toast(message);
|
|
}
|
|
}).catch(err => {
|
|
uni.hideLoading();
|
|
this.$Toast(err.message);
|
|
})
|
|
},
|
|
changeStatus(index) {
|
|
console.log(index,this.curNow)
|
|
if(this.curNow == 0) {
|
|
this.status = index
|
|
} else {
|
|
this.status_tow = index
|
|
}
|
|
},
|
|
toDredge() {
|
|
if(this.curNow == 0) {
|
|
// 升级 0
|
|
const id = this.upgrade_list[this.status].id;
|
|
if(this.userInfo.cardType == 0) {
|
|
uni.navigateTo({
|
|
url: "./../dredge/index?type=0&id="+id
|
|
})
|
|
}else{
|
|
this.toUpgradesRenewals(0,id)
|
|
}
|
|
} else {
|
|
// 续费 1
|
|
const id = this.select_list[this.status_tow].id;
|
|
if(this.userInfo.cardType == 0) {
|
|
uni.navigateTo({
|
|
url: "../dredge/index?type=1&id="+id
|
|
})
|
|
}else{
|
|
this.toUpgradesRenewals(1,id)
|
|
}
|
|
}
|
|
},
|
|
toUpgradesRenewals(type,id) {
|
|
let url = type == 0 ? 'vipRolePay': 'vipPay'
|
|
this.$api(url,{id}).then(res =>{
|
|
const { code, result, message } = res
|
|
console.log(res)
|
|
if (code == 200) {
|
|
uni.requestPayment({
|
|
provider: 'wxpay',
|
|
timeStamp: result.timeStamp,
|
|
nonceStr: result.nonceStr,
|
|
package: result.packageValue,
|
|
signType: result.signType,
|
|
paySign: result.paySign,
|
|
success: res => {
|
|
this.$Toast('支付成功');
|
|
// 刷新用户数据
|
|
this.getUserInfo();
|
|
setTimeout(() => {
|
|
this.$tools.navigateTo({
|
|
url: './../upgrades_renewals/index'
|
|
})
|
|
},1500)
|
|
},
|
|
fail:error=>{
|
|
this.$Toast('取消支付')
|
|
}
|
|
})
|
|
} else{
|
|
this.$Toast(message)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.pages {
|
|
position: relative;
|
|
.top {
|
|
background-color: #000;
|
|
height: 404rpx;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
border-bottom-left-radius: 49rpx;
|
|
border-bottom-right-radius: 49rpx;
|
|
|
|
image {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
border-radius: 50%;
|
|
margin-top: 31rpx;
|
|
margin-left: 45rpx;
|
|
}
|
|
|
|
.user_info {
|
|
display: flex;
|
|
padding-left: 17rpx;
|
|
flex-direction: column;
|
|
|
|
.user_row {
|
|
padding-top: 53rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #fff;
|
|
|
|
.user_name {
|
|
font-size: 38rpx;
|
|
}
|
|
|
|
.lv {
|
|
position: relative;
|
|
margin-left: 20rpx;
|
|
width: 144rpx;
|
|
height: 42rpx;
|
|
image {
|
|
position: absolute;
|
|
width: 144rpx;
|
|
height: 42rpx;
|
|
border-radius: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
text {
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 144rpx;
|
|
padding-top: 10rpx;
|
|
padding-left: 45rpx;
|
|
box-sizing: border-box;
|
|
font-size: 20rpx;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.expire_time {
|
|
padding-top: 20rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
|
|
text {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.card {
|
|
position: absolute;
|
|
top: 224rpx;
|
|
left: 12rpx;
|
|
right: 12rpx;
|
|
width: 729rpx;
|
|
border-top-left-radius: 70rpx;
|
|
border-top-right-radius: 70rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.title {
|
|
margin-top: 42rpx;
|
|
margin-bottom: 42rpx;
|
|
|
|
image {
|
|
width: 55rpx;
|
|
height: 40rpx;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
}
|
|
|
|
.select_pic_video {
|
|
background-color: #fff;
|
|
border-radius: 25rpx;
|
|
width: 693rpx;
|
|
height: 64rpx;
|
|
margin: 0 auto;
|
|
background-color: #F5F5F5;
|
|
font-size: 32rpx;
|
|
|
|
/deep/ .u-subsection {
|
|
border-radius: 25rpx !important;
|
|
width: 700rpx !important;
|
|
|
|
.u-item {
|
|
width: 346rpx !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.u-item-bg {
|
|
width: 350rpx !important;
|
|
background-color: #F6D27F !important;
|
|
border-radius: 25rpx !important;
|
|
color: #FFF;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.upgrade {
|
|
margin-top: 51rpx;
|
|
display: flex;
|
|
// justify-content: space-between;
|
|
.item {
|
|
width: 200rpx;
|
|
// height: 224rpx;
|
|
margin: 0 15rpx;
|
|
background-color: #F5F5F5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-radius: 15rpx;
|
|
// padding-bottom: 20rpx;
|
|
.title {
|
|
margin-top: 31rpx;
|
|
margin-bottom: 0;
|
|
color: #8B5B13;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.momey_box {
|
|
margin-top: 20rpx;
|
|
margin-bottom: 22rpx;
|
|
.icons {
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.price {
|
|
font-size: 49rpx;
|
|
}
|
|
}
|
|
|
|
.old_money {
|
|
margin-bottom: 35rpx;
|
|
font-size: 25rpx;
|
|
|
|
.through {
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
|
|
.select_item {
|
|
background-color: #FFEDCF;
|
|
color: #8B5B13;
|
|
}
|
|
}
|
|
|
|
|
|
.select {
|
|
width: 605rpx;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
background-color: #F5F5F5;
|
|
margin-top: 33rpx;
|
|
color: #000000;
|
|
width: 285rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-radius: 15rpx;
|
|
|
|
.title {
|
|
margin-top: 0rpx;
|
|
margin-bottom: 0;
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.price {
|
|
font-size: 40rpx;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 22rpx;
|
|
}
|
|
|
|
.old_money {
|
|
margin-bottom: 35rpx;
|
|
font-size: 25rpx;
|
|
|
|
.through {
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
|
|
.select_item {
|
|
background-color: #FFEDCF;
|
|
margin: 0;
|
|
padding-top: 32rpx;
|
|
color: #8B5B13;
|
|
}
|
|
}
|
|
|
|
.equities {
|
|
margin-top: 57rpx;
|
|
margin-left: 65rpx;
|
|
width: 596rpx;
|
|
|
|
.title {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
|
|
image {
|
|
width: 61rpx;
|
|
height: 41rpx;
|
|
}
|
|
|
|
text {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
}
|
|
image {
|
|
width: 31rpx;
|
|
height: 35rpx;
|
|
margin-top: 8rpx;
|
|
margin-right: 17rpx;
|
|
}
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.btn {
|
|
width: 642rpx;
|
|
height: 93rpx;
|
|
border-radius: 47rpx;
|
|
overflow: hidden;
|
|
margin-top: 140rpx;
|
|
margin-bottom: 47rpx;
|
|
display: flex;
|
|
|
|
.left {
|
|
width: 309rpx;
|
|
background-color: #302F2D;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.icons {
|
|
font-size: 24rpx;
|
|
padding-top: 10rpx;
|
|
color: #FFDA85;
|
|
}
|
|
|
|
.num {
|
|
font-size: 43rpx;
|
|
color: #FFDA85;
|
|
}
|
|
|
|
.info_text {
|
|
font-size: 14rpx;
|
|
padding-left: 10rpx;
|
|
padding-top: 20rpx;
|
|
color: #C2B09A;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 38rpx;
|
|
font-weight: bold;
|
|
color: #6F4920;
|
|
background-color: #F6D27F;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|