118 lines
2.4 KiB
Vue
118 lines
2.4 KiB
Vue
<template>
|
||
<view class="vip">
|
||
<view class="vip-card">
|
||
<view class="user-nickname">唐明阳</view>
|
||
<view class="user-date">到期日期：2023-06-07</view>
|
||
<view class="user-cards">
|
||
<view class="vip-lv">践行者</view>
|
||
<view class="vip-loding">1/3 在邀请3个家庭成员可升级</view>
|
||
<navigator class="vip-more">成长体系<uni-icons size="14" type="forward" color="#9f5529"></uni-icons></navigator>
|
||
</view>
|
||
</view>
|
||
<view class="vip-content">
|
||
<view class="">会员成长值</view>
|
||
<view class="">会员权益</view>
|
||
</view>
|
||
<view class="footer-vip">
|
||
<button @click="onOpenVip">开通会员</button>
|
||
<view class="footer-text">开通即表示同意共力生态<navigator url="./agreement">《会员开通协议》</navigator></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
},
|
||
methods: {
|
||
onOpenVip(){
|
||
uni.requestPayment({
|
||
provider : "wxpay",
|
||
success: res => {
|
||
console.log(res)
|
||
},
|
||
fail: err=> {
|
||
console.log(err)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// 会员卡
|
||
.vip-card{
|
||
background-color: #242430;
|
||
padding: $padding $padding 0;
|
||
.user-nickname{
|
||
color: #fcc590;
|
||
font-weight: bold;
|
||
}
|
||
.user-date{
|
||
color: rgba(255, 255, 255, .5);
|
||
font-size: 26rpx;
|
||
}
|
||
.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;
|
||
margin-top: $margin;
|
||
border-radius: $radius;
|
||
color: #9f5529;
|
||
.vip-lv{
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
}
|
||
.vip-more{
|
||
font-size: 28rpx;
|
||
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;
|
||
}
|
||
// 会员支付
|
||
.footer-vip{
|
||
padding: $padding;
|
||
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;
|
||
text-align: center;
|
||
padding: $padding 0;
|
||
navigator{
|
||
display: inline-block;
|
||
color: #fcc590;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
</style>
|