130 lines
3.5 KiB
Vue
130 lines
3.5 KiB
Vue
<template>
|
|
<view>
|
|
<view v-if="identity != null" :style="(identity.open || identity.renew) ? 'padding-bottom:230rpx': 'padding-bottom:110rpx'">
|
|
<image class="vip-cover" :src="identity.cover" mode="widthFix"></image>
|
|
<view class="vip-footer">
|
|
<view class="vip-text">
|
|
<text class="vip-text-item">{{identity.identity_name}}</text>
|
|
<text class="vip-text-item">到期时间: {{identity.end_at || '长期'}}</text>
|
|
</view>
|
|
<button class="vip-btn" v-if="identity.open || identity.renew" @click="vipShow = true">{{identity.open ? '开通': ''}}{{identity.renew ? '续费': ''}} (￥{{identity.price}}/{{identity.years}}年)</button>
|
|
</view>
|
|
</view>
|
|
<!-- 弹出层 -->
|
|
<u-popup :show="vipShow" mode="center" :round="10" closeable @close="vipShow = false">
|
|
<view class="vip-tips" v-if="identity != null">
|
|
<view class="vip-tips-title">开通会员</view>
|
|
<view class="vip-tips-price"><text class="vip-tips-price-sm">￥</text>{{identity.price}}</view>
|
|
<view class="vip-tips-text">年限{{identity.years}}年</view>
|
|
<input class="vip-tips-input" placeholder="请输入真实姓名" v-model="nickname" />
|
|
<button class="vip-tips-btn" @click="onOpen">去支付</button>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { identity, vip } from '@/apis/interfaces/user'
|
|
export default {
|
|
data() {
|
|
return {
|
|
vipShow : false,
|
|
identity: null,
|
|
nickname: ""
|
|
};
|
|
},
|
|
onShow(){
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
mask : true
|
|
})
|
|
identity().then(res => {
|
|
this.identity = res;
|
|
uni.hideLoading()
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
onOpen(){
|
|
if(this.nickname == ''){
|
|
uni.showToast({
|
|
title: '请输入真实姓名',
|
|
icon : 'none'
|
|
})
|
|
return
|
|
}
|
|
uni.showLoading({
|
|
title: "获取支付...",
|
|
mask : true
|
|
})
|
|
vip({ real_name: this.nickname }).then(res => {
|
|
uni.hideLoading()
|
|
let { order_type, order_id } = res
|
|
this.$Router.push({
|
|
name: "Pay",
|
|
params: {
|
|
orderId : order_id,
|
|
orderType : order_type
|
|
}
|
|
})
|
|
}).catch(err => {
|
|
uni.showToast({
|
|
title: err.message,
|
|
icon : 'none'
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.vip-cover{ width: 100%; vertical-align: top; }
|
|
.vip-footer{
|
|
padding: 30rpx;
|
|
background: #d2382c;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
.vip-text{
|
|
color: #fff5e9;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
line-height: 50rpx;
|
|
.vip-text-item{ padding: 0 15rpx; }
|
|
}
|
|
.vip-btn{
|
|
margin-top: 30rpx;
|
|
background: linear-gradient(to right, #fffefc, #fff0d9);
|
|
color: #d2382c;
|
|
font-weight: bold;
|
|
font-size: 34rpx;
|
|
border-radius: 45rpx;
|
|
line-height: 90rpx;
|
|
&::after{ display: none; }
|
|
}
|
|
}
|
|
// 开通会员弹出层
|
|
.vip-tips{
|
|
width: 75vw;
|
|
padding: 50rpx;
|
|
box-sizing: border-box;
|
|
.vip-tips-title{ text-align: center; font-weight: bold; font-size: 36rpx; padding-bottom: 30rpx; }
|
|
.vip-tips-price{
|
|
text-align: center;
|
|
font-weight: bold;
|
|
font-size: 50rpx;
|
|
color: #d2382c;
|
|
&-sm{ font-size: 80%; }
|
|
}
|
|
.vip-tips-text{ font-size: 30rpx; color: gray; padding-bottom: 50rpx; text-align: center; }
|
|
.vip-tips-input{ background: #f7f8f9; border-radius: 45rpx; height: 90rpx; margin-bottom: 30rpx; padding: 0 30rpx; text-align: center; font-size: 32rpx; }
|
|
.vip-tips-btn{ background: #d2382c; color: white; line-height: 90rpx; border-radius: 45rpx; font-weight: bold; font-size: 34rpx; }
|
|
}
|
|
</style>
|