421 lines
9.7 KiB
Vue
421 lines
9.7 KiB
Vue
<template>
|
||
<view :class="{'vip': isOpen}">
|
||
<view class="vip-card">
|
||
<view class="vip-user">
|
||
<image class="user-cover" :src="user.avatar || user.figure_path" mode="aspectFill"></image>
|
||
<view class="user-nickname">{{user.nickname}}</view>
|
||
<view class="user-date">到期日期：{{endedAt}}</view>
|
||
<view class="vip-renewal" @click="onOpenVip" v-if="!isOpen">续费</view>
|
||
</view>
|
||
<view class="user-cards">
|
||
<image class="vip-icon" :src="identity.cover_url" mode="widthFix"></image>
|
||
<view>
|
||
<view class="vip-lv">{{identity.identity_text}}</view>
|
||
<block>
|
||
<view class="vip-progress">
|
||
<view class="vip-progress-loding" :style="'width:' + firstRule.rate + '%'"></view>
|
||
</view>
|
||
<view class="vip-loding">
|
||
<view>{{firstRule.current}}/{{firstRule.need}}{{firstRule.title}}</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<navigator class="vip-more" url="/pages/vip/agreement?id=2" hover-class="none">成长体系<uni-icons size="14" type="forward" color="#9f5529"></uni-icons></navigator>
|
||
</view>
|
||
</view>
|
||
<view class="vip-content">
|
||
<block v-if="secondRule.length > 0">
|
||
<view class="vip-content-title">距离<text>{{nextIdentity.identity_text}}</text>还需条件</view>
|
||
<view class="vip-up-conditions">
|
||
<view class="vip-up-conditions-item"><text>10/10</text>家庭会员</view>
|
||
<view class="vip-up-conditions-item"><text>9/100</text>邀请家族会员员</view>
|
||
<view class="vip-up-conditions-item"><text>10/10000</text>伙伴</view>
|
||
</view>
|
||
</block>
|
||
<view class="vip-content-title">会员特权</view>
|
||
<view class="vip-privilege">
|
||
<view class="vip-privilege-item" v-for="(item, index) in rights" :key="index">
|
||
<image class="vip-privilege-icon" :src="item.cover" mode="aspectFill"></image>
|
||
<view class="vip-privilege-text">{{item.name}}</view>
|
||
<view class="vip-privilege-sub">{{item.remark}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="vip-content-title">会员折扣说明</view>
|
||
<view class="vip-content-rich">
|
||
<view class="vip-content-rich-flex vip-content-rich-header">
|
||
<view class="item">名额</view>
|
||
<view class="item">折扣价</view>
|
||
<view class="item">剩余名额</view>
|
||
</view>
|
||
<view class="vip-content-rich-flex" v-for="(item,index) in prices" :key="index">
|
||
<view class="item">{{item.open_number}} - {{item.open_number + item.stock}}</view>
|
||
<view class="item">{{item.price}}</view>
|
||
<view class="item">{{item.margin === 0 ? '满员': item.margin}}</view>
|
||
</view>
|
||
<view class="vip-content-rich-flex">
|
||
<view class="item">10000后</view>
|
||
<view class="item">199.00</view>
|
||
<view class="item">-</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="footer-vip" v-if="isOpen">
|
||
<button @click="onOpenVip">开通会员</button>
|
||
<view class="footer-text">开通即表示同意共力生态<navigator url="/pages/vip/agreement?id=1">《会员开通协议》</navigator></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { vip, vipPay, payInfo } from '@/apis/interfaces/vip.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 用户信息
|
||
user: {
|
||
username: '-',
|
||
nickname: '-',
|
||
avatar : '-',
|
||
},
|
||
// 当前身份
|
||
identity: {
|
||
identity_text: '',
|
||
cover_url: '',
|
||
},
|
||
// 到期时间
|
||
endedAt: '',
|
||
// 下级身份
|
||
nextIdentity:{
|
||
identity_text: ''
|
||
},
|
||
// 升级条件
|
||
secondRule: [],
|
||
// 会员特权
|
||
rights: [],
|
||
// 会员折扣说明
|
||
prices: [],
|
||
// 是否可续费
|
||
isOpen: true,
|
||
// 卡片信息
|
||
firstRule: {
|
||
title : '-',
|
||
need : '-',
|
||
current: '-',
|
||
rate: 0
|
||
}
|
||
};
|
||
},
|
||
onShow() {
|
||
this.getVipInfo()
|
||
},
|
||
methods: {
|
||
// 获取会员信息
|
||
getVipInfo(){
|
||
vip().then(res =>{
|
||
this.firstRule = res.first_rule
|
||
this.isOpen = res.is_open
|
||
this.prices = res.prices
|
||
this.rights = res.rights
|
||
this.secondRule = res.second_rule
|
||
this.nextIdentity = res.next_identity
|
||
this.identity = res.identity
|
||
this.endedAt = res.identity_ended_at
|
||
this.user = res.user
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
// 提交订单
|
||
onOpenVip(){
|
||
// 获取订单
|
||
uni.showLoading({
|
||
title: '提交订单'
|
||
})
|
||
vipPay().then(res => {
|
||
// 支付参数
|
||
if(res.id) {
|
||
uni.showLoading({
|
||
title: '获取支付信息'
|
||
})
|
||
this.wxPay(res.id)
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
// 微信支付
|
||
wxPay(orderId){
|
||
payInfo(orderId).then(orderInfo => {
|
||
uni.requestPayment({
|
||
provider : "wxpay",
|
||
orderInfo: JSON.parse(orderInfo),
|
||
success: res => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '开通成功',
|
||
showCancel: false,
|
||
success: ()=> {
|
||
this.getVipInfo()
|
||
}
|
||
})
|
||
},
|
||
fail(err) {
|
||
let showToast = err.message
|
||
if(err.errMsg === 'requestPayment:fail [payment微信:-2]User canceled'){
|
||
showToast = '支付被取消'
|
||
}
|
||
uni.showToast({
|
||
title: showToast,
|
||
icon : 'none'
|
||
})
|
||
}
|
||
})
|
||
}).catch(err =>{
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// 会员卡
|
||
.vip-card{
|
||
background-color: #242430;
|
||
padding: $padding $padding 0;
|
||
.vip-user{
|
||
position: relative;
|
||
padding: 6rpx 200rpx $padding 120rpx;
|
||
.user-cover{
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
background: white;
|
||
border-radius: 50%;
|
||
width: 92rpx;
|
||
height: 92rpx;
|
||
}
|
||
.user-nickname{
|
||
color: #fcc590;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
line-height: 50rpx;
|
||
}
|
||
.user-date{
|
||
line-height: 30rpx;
|
||
color: rgba(255, 255, 255, .5);
|
||
font-size: 26rpx;
|
||
}
|
||
.vip-renewal{
|
||
background: linear-gradient(to bottom right, #fce3c5, #fcc590);
|
||
color: #9f5529;
|
||
line-height: 60rpx;
|
||
width: 170rpx;
|
||
border-radius: 30rpx;
|
||
text-align: center;
|
||
position: absolute;
|
||
top: 16rpx;
|
||
right: 0;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
.user-cards{
|
||
padding: $padding;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
z-index: 1;
|
||
background: linear-gradient(to bottom right, #fce3c5, #fcc590);
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
height: 300rpx;
|
||
padding-right: 260rpx;
|
||
margin-top: $margin;
|
||
border-radius: $radius;
|
||
color: #9f5529;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.vip-icon{
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 50rpx;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
}
|
||
.vip-lv{
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
padding-bottom: 30rpx;
|
||
}
|
||
.vip-progress{
|
||
height: 10rpx;
|
||
background-color: #feefe0;
|
||
border-radius: 5rpx;
|
||
overflow: hidden;
|
||
&-loding{
|
||
background: #9c5125;
|
||
height: 10rpx;
|
||
border-radius: 5rpx;
|
||
}
|
||
}
|
||
.vip-loding{
|
||
font-size: 26rpx;
|
||
padding-top: 15rpx;
|
||
}
|
||
.vip-more{
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
display: inline-block;
|
||
}
|
||
}
|
||
}
|
||
// 会员权益
|
||
.vip-content{
|
||
padding: 180rpx $padding $padding $padding;
|
||
margin-top: -150rpx;
|
||
background-color: white;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
box-sizing: border-box;
|
||
.vip-content-title{
|
||
position: relative;
|
||
font-weight: bold;
|
||
font-size: 30rpx;
|
||
line-height: 70rpx;
|
||
padding-left: 30rpx;
|
||
color: #333;
|
||
&::after{
|
||
position: absolute;
|
||
top: 20rpx;
|
||
left: 0;
|
||
content: " ";
|
||
background: #fcc590;
|
||
width: 10rpx;
|
||
height: 30rpx;
|
||
}
|
||
text{
|
||
color: #fcc590;
|
||
padding: 0 10rpx;
|
||
}
|
||
}
|
||
.vip-up-conditions{
|
||
padding-top: 10rpx;
|
||
padding-bottom: $padding;
|
||
&-item{
|
||
font-size: 28rpx;
|
||
line-height: 60rpx;
|
||
color: gray;
|
||
text{
|
||
color: #fcc590;
|
||
margin-right: $margin/2;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
.vip-content-rich{
|
||
margin-top: 20rpx;
|
||
font-size: 28rpx;
|
||
line-height: 50rpx;
|
||
color: gray;
|
||
border:solid 1rpx #fce3c5;
|
||
.vip-content-rich-flex{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
line-height: 60rpx;
|
||
font-size: 28rpx;
|
||
& > .item{
|
||
width: 33.33%;
|
||
border-top: solid 1rpx #fce3c5;
|
||
text-align: center;
|
||
color: #9f5529;
|
||
border-right: solid 1rpx #fce3c5;
|
||
box-sizing: border-box;
|
||
&:last-child{
|
||
border-right: none;
|
||
}
|
||
}
|
||
}
|
||
.vip-content-rich-header{
|
||
background: #fce3c5;
|
||
color: #9f5529;
|
||
}
|
||
}
|
||
.vip-privilege{
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
padding: 10rpx 0;
|
||
&-item{
|
||
padding: 20rpx 10rpx;
|
||
box-sizing: border-box;
|
||
width: 25%;
|
||
text-align: center;
|
||
}
|
||
&-icon{
|
||
background: #fce3c5;
|
||
border-radius: 50%;
|
||
width: 82rpx;
|
||
height: 82rpx;
|
||
}
|
||
&-text{
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
@extend .nowrap;
|
||
}
|
||
&-sub{
|
||
font-size: 24rpx;
|
||
color: gray;
|
||
@extend .nowrap;
|
||
}
|
||
}
|
||
}
|
||
// 会员
|
||
.vip{
|
||
padding-bottom: ($padding*3) + 140;
|
||
}
|
||
// 会员支付
|
||
.footer-vip{
|
||
position: fixed;
|
||
bottom: 0;
|
||
width: 100%;
|
||
padding: $padding;
|
||
box-sizing: border-box;
|
||
background: linear-gradient(to bottom, rgba(255,255,255,.0), #FFFFFF);
|
||
button{
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
padding: 0;
|
||
border-radius: 45rpx;
|
||
border: none;
|
||
background: linear-gradient(to right, #fce3c5, #fcc590);
|
||
color: #31364a;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
&::after{
|
||
display: none;
|
||
}
|
||
}
|
||
.footer-text{
|
||
font-size: 26rpx;
|
||
color: #888;
|
||
line-height: 50rpx;
|
||
text-align: center;
|
||
padding: $padding 0;
|
||
navigator{
|
||
display: inline-block;
|
||
color: #fcc590;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
</style>
|