252 lines
5.5 KiB
Vue
252 lines
5.5 KiB
Vue
<template>
|
||
<view class="vip">
|
||
<view class="vip-card">
|
||
<view class="vip-user">
|
||
<image class="user-cover" src="" mode="aspectFill"></image>
|
||
<view class="user-nickname">唐明阳</view>
|
||
<view class="user-date">到期日期：2023-06-07</view>
|
||
<view class="vip-renewal">续费</view>
|
||
</view>
|
||
<view class="user-cards">
|
||
<image class="vip-icon" src="/static/vip/lv_04.png" mode="widthFix"></image>
|
||
<view>
|
||
<view class="vip-lv">共力践行者</view>
|
||
<view class="vip-progress">
|
||
<view class="vip-progress-loding" style="width: 50%;"></view>
|
||
</view>
|
||
<view class="vip-loding">
|
||
<view>1/3 邀请家庭会员</view>
|
||
<view>3/100 邀请家族会员员</view>
|
||
</view>
|
||
</view>
|
||
<navigator class="vip-more">成长体系<uni-icons size="14" type="forward" color="#9f5529"></uni-icons></navigator>
|
||
</view>
|
||
</view>
|
||
<view class="vip-content">
|
||
<view class="vip-content-title">会员成长值</view>
|
||
<view class="vip-privilege">
|
||
<view class="vip-privilege-item" v-for="(item, index) in 8" :key="index">
|
||
<image class="vip-privilege-icon" src="" mode="widthFix"></image>
|
||
<view class="vip-privilege-text">特权名称{{index}}</view>
|
||
<view class="vip-privilege-sub">特权名称{{index}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="vip-content-title">会员折扣说明</view>
|
||
<view class="vip-content-rich">
|
||
<view>前1000名会员享受会员费5折优惠</view>
|
||
<view>前1001-2000名会员享受会员费5折优惠</view>
|
||
<view>前2001-5000名会员享受会员费5折优惠</view>
|
||
</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;
|
||
.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;
|
||
}
|
||
}
|
||
.vip-content-rich{
|
||
padding: 30rpx 0 0;
|
||
font-size: 28rpx;
|
||
line-height: 50rpx;
|
||
color: gray;
|
||
}
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
// 会员支付
|
||
.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>
|