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.
322 lines
6.9 KiB
322 lines
6.9 KiB
<template>
|
|
<view class="pages">
|
|
<view class="top flex align-center">
|
|
<image :src="userInfo.headUrl" mode=""></image>
|
|
<text class="font-30 font-weight-bold">{{userInfo.nickName}}</text>
|
|
</view>
|
|
<view class="card">
|
|
<view class="title">
|
|
<image :src="img_url+'member/min.png'" mode=""></image>
|
|
<!-- <text>会员购物 更省钱、更实惠</text> -->
|
|
<text>等级越高，实惠更多！</text>
|
|
</view>
|
|
<view class="select">
|
|
<view class="item" v-for="(item,index) in select_list" :key="index">
|
|
<view :class="index== status? 'item select ': 'item'" @click="changeStatus(index)">
|
|
<text class="title">{{item.name}}</text>
|
|
<text class="price" v-if="index==0">￥{{item.money}}/{{'计算'}}</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>{{select_list[status].title}}</text>
|
|
</view>
|
|
<rich-text :nodes="select_list[status].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 class="btn">
|
|
<view class="left">
|
|
<text class="icons">￥</text>
|
|
<text class="num">{{select_list[status].money}}</text>
|
|
<text class="info_text">开通即享特权</text>
|
|
</view>
|
|
<text class="right" @click="toDredge">立即开通</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config_img from "@/utils/js/config.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
status: 0,
|
|
img_url: config_img.img_url,
|
|
select_list: [],
|
|
userInfo:{}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getVipList();
|
|
this.userInfo = uni.getStorageSync("__user_info");
|
|
console.log(this.userInfo)
|
|
},
|
|
methods: {
|
|
changeStatus(index) {
|
|
this.status = 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);
|
|
})
|
|
},
|
|
// 获取用户信息
|
|
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();
|
|
})
|
|
},
|
|
toDredge() {
|
|
const id = this.select_list[this.status].id
|
|
if(this.userInfo.cardType == 0){
|
|
uni.navigateTo({
|
|
url: "./dredge/index?id="+id
|
|
})
|
|
}else {
|
|
|
|
this.$api('vipPay',{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: 270rpx;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
border-bottom-left-radius: 70rpx;
|
|
border-bottom-right-radius: 70rpx;
|
|
image{
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
margin-top: 31rpx;
|
|
margin-left: 45rpx;
|
|
}
|
|
text{
|
|
color: #fff;
|
|
padding-top: 65rpx;
|
|
padding-left: 17rpx;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.card{
|
|
position: absolute;
|
|
top: 175rpx;
|
|
left: 10rpx;
|
|
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: 23rpx;
|
|
margin-bottom: 30rpx;
|
|
image{
|
|
width: 45rpx;
|
|
height: 30rpx;
|
|
}
|
|
text{
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
}
|
|
.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: 37rpx;
|
|
margin-bottom: 0;
|
|
font-size: 35rpx;
|
|
font-weight: bold;
|
|
}
|
|
.price{
|
|
font-size: 30rpx;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 22rpx;
|
|
}
|
|
.old_money{
|
|
margin-bottom: 35rpx;
|
|
font-size: 16rpx;
|
|
.through{
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
}
|
|
.select{
|
|
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: 32rpx;
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
}
|
|
.item{
|
|
margin-top: 18rpx;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
image{
|
|
width: 21rpx;
|
|
height: 25rpx;
|
|
margin-top: 8rpx;
|
|
margin-right: 17rpx;
|
|
}
|
|
text{
|
|
display: inline-block;
|
|
width: 557rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
.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: 28rpx;
|
|
font-weight: bold;
|
|
color: #6F4920;
|
|
background-color: #F6D27F;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
</style>
|