690 lines
19 KiB
Vue
690 lines
19 KiB
Vue
<template>
|
||
<view class="content">
|
||
<swiper class="vip-container" previous-margin="45rpx" next-margin="45rpx" circular @change="swiperChange">
|
||
<swiper-item class="swiper-item" v-for="(item, index) in identities" :key="index">
|
||
<image class="swiper-item-bg" src="/static/imgs/account-bg.png" mode="widthFix" />
|
||
<view class="vip-item" :class="tabsIndex == index ? 'color-item-img' : ''">
|
||
<view class="vip-top">
|
||
<view :class="tabsIndex == index ? 'vip-name' : 'vip-name1'">
|
||
<image class="vip-name-icon" src="../../static/icons/vip_icon.png" mode="aspectFill" />
|
||
{{item.name}}
|
||
</view>
|
||
<view class="vip-price">
|
||
{{identities[tabsIndex].price}}/年
|
||
</view>
|
||
</view>
|
||
<view class="vip-time">
|
||
{{identityTime}}
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<!-- 轮播点 -->
|
||
<view class="vip-spot">
|
||
<view class="vip-spot-label" :class="tabsIndex == index ? 'vip-spot-color' : ''" v-for="(item, index) in identities" :key="index"></view>
|
||
</view>
|
||
|
||
<!-- 选择开通年限 -->
|
||
<view class="vip-years">
|
||
<view class="vip-years-name">
|
||
<image class="vip-years-icon" src="../../static/icons/vip_yearsIcon.png" mode="aspectFill"></image>
|
||
选择开通年限
|
||
</view>
|
||
<view class="vip-years-tool">
|
||
<view class="vip-years-btn" @click="yearsBtn('remove')">-</view>
|
||
<view class="vip-years-input">{{sumNumber}}</view>
|
||
<view class="vip-years-btn" @click="yearsBtn('plus')">+</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 会员特权 -->
|
||
<view class="privilege">
|
||
<image class="privilege-img" src="../../static/icons/vip_privilege_tittle.png" mode="heightFix"></image>
|
||
<view class="privilege-list">
|
||
<view class="privilege-label" v-for="(item, index) in rights" :key="index">
|
||
<image class="privilege-label-tips" src="../../static/icons/vip_privilege_tips.png" mode="heightFix"></image>
|
||
<view class="privilege-label-text">
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 支付方式 -->
|
||
<view class="privilege payWay">
|
||
<image class="privilege-img" src="../../static/icons/vip_pay_title.png" mode="heightFix"></image>
|
||
<view class="payWay-way">
|
||
<radio-group @change="radioChange">
|
||
<view class="payWay-way-label">
|
||
<view class="payWay-way-name">
|
||
<image class="payWay-way-img" src="../../static/icons/payWay_icon_00.png"></image>
|
||
<text>微信支付</text>
|
||
</view>
|
||
<radio class="radio" value="weChat" checked style="transform: scale(.8);" color="#ff2828"></radio>
|
||
</view>
|
||
<view class="payWay-way-label">
|
||
<view class="payWay-way-name">
|
||
<image class="payWay-way-img" src="../../static/icons/payWay_icon_01.png"></image>
|
||
<text>余额支付</text>
|
||
</view>
|
||
<radio class="radio" value="balance" style="transform: scale(.8);" color="#9b9b9b"></radio>
|
||
</view>
|
||
</radio-group>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 用户协议 -->
|
||
<view class="agree">
|
||
<view class="agree-tips" @click="$Router.push({name: 'vipAgree'})">
|
||
请仔细阅读并确认服务协议
|
||
</view>
|
||
</view>
|
||
<view class="agree-btn" @click="agreeChange">
|
||
<radio :checked="selected" style="transform: scale(.7);" color="#ff2828"></radio>会员服务协议
|
||
</view>
|
||
|
||
|
||
<!-- 开通按钮 -->
|
||
<view class="footer">
|
||
<button class="footer-btn" type="default" @click="openOrder" :disabled="payChecked">
|
||
<view class="footer-btn-num">
|
||
合计：{{total}}
|
||
</view>
|
||
<view class="footer-btn-pay">
|
||
立即支付
|
||
</view>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { identities, vipOrder, vipWechatPay, vipCont } from '@/apis/interfaces/vip'
|
||
export default {
|
||
data() {
|
||
return {
|
||
loding : true,
|
||
tabsIndex : 0,
|
||
user : {},
|
||
identities : [],
|
||
rights : [],
|
||
description : '',
|
||
identityTime: '', // 到期时间
|
||
valuePay : 'weChat', // 支付方式
|
||
sumNumber : 1, // 开通年限
|
||
total : '', // 开通年限总资金额
|
||
selected : false, // 用户协议
|
||
payChecked : false // 支付选择
|
||
}
|
||
},
|
||
created() {
|
||
// 获取当前用户信息
|
||
identities().then(res => {
|
||
console.log(res)
|
||
this.loding = false
|
||
this.user = res.user
|
||
this.description= res.description
|
||
this.identities = res.identities
|
||
this.rights = res.identities[0].rights
|
||
this.total = res.identities[0].price
|
||
}).catch(err =>{
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
|
||
// 获取支付总金额 默认传VIP会员id=2
|
||
this.totalData(2);
|
||
},
|
||
methods: {
|
||
// 切换开通身份
|
||
swiperChange(e) {
|
||
this.tabsIndex = e.detail.current
|
||
this.total = this.identities[e.detail.current].price
|
||
this.rights = this.identities[e.detail.current].rights
|
||
this.totalData(this.identities[e.detail.current].identity_id);
|
||
this.sumNumber = 1
|
||
},
|
||
|
||
// 开通会员
|
||
openOrder(){
|
||
if(this.selected == false) {
|
||
uni.showToast({
|
||
title: '请勾选用户协议',
|
||
icon : 'none'
|
||
})
|
||
return
|
||
}
|
||
let identitiesId = this.identities[this.tabsIndex].identity_id
|
||
vipOrder(identitiesId,{
|
||
year: this.sumNumber
|
||
}).then(res => {
|
||
if(!res.test){
|
||
let verifyForm = res
|
||
this.wechatPay(res.id)
|
||
}else{
|
||
// 测试环境
|
||
uni.showModal({
|
||
title : '开通提示',
|
||
content : '会员开通成功，是否继续完成企业认证',
|
||
showCancel : true,
|
||
cancelText : '稍后认证',
|
||
confirmText : '立即认证',
|
||
success : modalRes => {
|
||
if(modalRes.confirm){
|
||
this.$Router.replace({name: 'Approve'})
|
||
return
|
||
}
|
||
this.$Router.back()
|
||
},
|
||
fail(err) {
|
||
console.log(err)
|
||
}
|
||
})
|
||
}
|
||
}).catch(err =>{
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 选择权限
|
||
yearsBtn(val) {
|
||
let newNumber = this.sumNumber
|
||
if (val == 'plus'){
|
||
newNumber ++;
|
||
}else{
|
||
if (newNumber > 1){
|
||
newNumber --;
|
||
}else{
|
||
uni.showToast({
|
||
title : '商品数量不能小于1',
|
||
icon : 'none'
|
||
})
|
||
}
|
||
}
|
||
this.sumNumber = newNumber
|
||
this.totalData(this.identities[this.tabsIndex].identity_id);
|
||
},
|
||
|
||
// 支付总金额数据
|
||
totalData(id) {
|
||
vipCont(id,{
|
||
year: this.sumNumber
|
||
}).then(res => {
|
||
this.identityTime = res.identity.description
|
||
this.total = res.identity.price
|
||
}).catch(err =>{
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 微信支付
|
||
wechatPay(id){
|
||
vipWechatPay(id).then(res => {
|
||
let payConfig = JSON.parse(res.wechat),
|
||
payIdentity = res.identity
|
||
uni.requestPayment({
|
||
provider : "wxpay",
|
||
orderInfo : payConfig,
|
||
success : payRes => {
|
||
console.log(payRes)
|
||
},
|
||
fail : payErr => {
|
||
console.log(payErr)
|
||
}
|
||
})
|
||
})
|
||
},
|
||
|
||
// 支付选择
|
||
radioChange(val) {
|
||
let valuePay = val.detail.value
|
||
if( val.detail.value == 'balance') {
|
||
uni.showToast({
|
||
title: '抱歉暂未开通',
|
||
icon : 'none'
|
||
})
|
||
this.payChecked = true
|
||
return
|
||
}
|
||
this.payChecked = false
|
||
},
|
||
|
||
// 勾选协议
|
||
agreeChange() {
|
||
this.selected = !this.selected
|
||
},
|
||
|
||
// 会员权益介绍
|
||
showRemark(title, text){
|
||
uni.showModal({
|
||
title : title + '说明',
|
||
content : text,
|
||
showCancel : false
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
page {
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.vip-container {
|
||
width: 750rpx;
|
||
height: 300rpx;
|
||
margin-top: $margin;
|
||
}
|
||
|
||
.swiper-item {
|
||
width: 630rpx;
|
||
height: 280rpx;
|
||
display: flex;
|
||
position: relative;
|
||
.swiper-item-bg{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
z-index: 10;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
|
||
.vip-item {
|
||
width: 630rpx;
|
||
height: 280rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #c7c7c7;
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
color: #cacaca;
|
||
.vip-top {
|
||
display: flex;
|
||
position: relative;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
margin: $margin + 20 0 $margin + 20;
|
||
.vip-name {
|
||
font-size: $title-size + 6;
|
||
border-radius: 60rpx;
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
background-image: linear-gradient(to bottom ,#e93340,#e8252f);
|
||
display: flex;
|
||
.vip-name-icon {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin: $margin - 15 $margin - 10 0 0;
|
||
}
|
||
}
|
||
.vip-name1{
|
||
font-size: $title-size + 6;
|
||
border-radius: 60rpx;
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
background-image: linear-gradient(to bottom ,#cacaca,#cacaca);
|
||
display: flex;
|
||
color: #fff;
|
||
.vip-name-icon {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin: $margin - 15 $margin - 10 0 0;
|
||
}
|
||
}
|
||
.vip-price {
|
||
font-size: $title-size + 10;
|
||
font-weight: 600;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
}
|
||
}
|
||
.vip-time {
|
||
font-size: $title-size-lg;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.color-item-img {
|
||
background-color: #e93340;
|
||
background-image: linear-gradient(to bottom ,#e93340,#e8252f);
|
||
color: #FFFFFF;
|
||
box-shadow: 0 0 20rpx 4rpx rgba($color: #e93340, $alpha: 1.0);
|
||
}
|
||
|
||
// 轮播点
|
||
.vip-spot {
|
||
margin-bottom: $margin;
|
||
text-align: center;
|
||
.vip-spot-label {
|
||
display: inline-block;
|
||
background-color: #e8ecf1;
|
||
width: 80rpx;
|
||
height: 8rpx;
|
||
margin: 0 10rpx;
|
||
&.vip-spot-color {
|
||
background-color: #fb560a;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 选择年限
|
||
.vip-years {
|
||
display: flex;
|
||
line-height: 60rpx;
|
||
padding: $padding + 10 $padding + 20;
|
||
box-sizing: border-box;
|
||
border-top: $padding - 10 solid #f8fbfe;
|
||
border-bottom: $padding - 10 solid #f8fbfe;
|
||
.vip-years-name {
|
||
flex: 1;
|
||
display: flex;
|
||
color: #c2c2c2;
|
||
.vip-years-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
.vip-years-tool {
|
||
display: flex;
|
||
.vip-years-btn {
|
||
background-color: #ff9f43;
|
||
color: #ffffff;
|
||
border-radius: 10rpx;
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
line-height: 40rpx;
|
||
text-align: center;
|
||
border: 2rpx solid #f8fbfe;
|
||
font-size: $title-size + 4;
|
||
font-weight: 600;
|
||
}
|
||
.vip-years-input {
|
||
line-height: 48rpx;
|
||
padding: 0 $padding;
|
||
color: #000000;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 会员特权
|
||
.privilege {
|
||
text-align: center;
|
||
.privilege-img {
|
||
height: 40rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
.privilege-list {
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
text-align: left;
|
||
margin-top: $margin * 0.5;
|
||
.privilege-label {
|
||
border-bottom: 2rpx #e6eaef dashed;
|
||
font-size: 30rpx;
|
||
padding: $padding 0;
|
||
display: flex;
|
||
.privilege-label-tips {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 20rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
.privilege-label-text {
|
||
width: calc(100% - 60rpx);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 支付方式
|
||
.payWay {
|
||
.payWay-way {
|
||
padding: 0 $padding;
|
||
box-sizing: border-box;
|
||
margin-top: $margin;
|
||
.payWay-way-label {
|
||
display: flex;
|
||
border-bottom: 2rpx #e6eaef dashed;
|
||
padding: $padding 0;
|
||
.payWay-way-name {
|
||
font-size: $title-size;
|
||
line-height: 58rpx;
|
||
flex: 1;
|
||
display: flex;
|
||
.payWay-way-img {
|
||
width: 58rpx;
|
||
height: 58rpx;
|
||
margin-right: $margin - 10;
|
||
}
|
||
}
|
||
}
|
||
.radio[type="radio"].disabled {
|
||
background-color: #007aff;
|
||
border-color: #007aff;
|
||
color: #007aff;
|
||
|
||
&::before {
|
||
background-color: #007aff;
|
||
border-color: #007aff;
|
||
}
|
||
|
||
&::after {
|
||
background-color: #007aff;
|
||
border-color: #007aff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 用户协议
|
||
.agree {
|
||
margin: $margin 0;
|
||
text-align: center;
|
||
.agree-tips {
|
||
background-color: #d9d9d9;
|
||
display: inline-block;
|
||
padding: 14rpx $padding;
|
||
color: #FFFFFF;
|
||
border-radius: 60rpx;
|
||
}
|
||
}
|
||
.agree-btn {
|
||
display: flex;
|
||
font-size: $title-size-lg;
|
||
text-align: left;
|
||
color: #999999;
|
||
padding: $padding;
|
||
}
|
||
|
||
// .content{
|
||
// min-height: 100vh;
|
||
// background: #fefaef;
|
||
// }
|
||
// 开通须知
|
||
.notice{
|
||
font-size: $title-size-m;
|
||
color: $text-gray;
|
||
padding: $padding $padding*2 $padding*2;
|
||
.title{
|
||
padding-bottom: $padding/2;
|
||
font-weight: bold;
|
||
}
|
||
.item{
|
||
padding-bottom: $padding/2;
|
||
line-height: 40rpx;
|
||
text-align: justify;
|
||
}
|
||
}
|
||
// footer
|
||
.footer{
|
||
padding: $padding;
|
||
box-sizing: border-box;
|
||
.footer-btn{
|
||
padding: 0 $padding + 10;
|
||
box-sizing: border-box;
|
||
background-color: #e93340;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
border-radius: 60rpx;
|
||
color: #ececec;
|
||
font-size: $title-size;
|
||
font-weight: bold;
|
||
text-align: left;
|
||
display: flex;
|
||
.footer-btn-num {
|
||
flex: 1;
|
||
}
|
||
.footer-btn-pay {
|
||
color: rgba($color: #ff0, $alpha: .8);
|
||
}
|
||
&[disabled] {
|
||
background-color: #b1b1b1;
|
||
}
|
||
}
|
||
}
|
||
// 会员权限
|
||
.privilege{
|
||
padding: $padding;
|
||
.title{
|
||
font-weight: bold;
|
||
color: #322711;
|
||
font-size: $title-size;
|
||
text-align: center;
|
||
line-height: 90rpx;
|
||
}
|
||
.privilege-box{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: $padding 0;
|
||
.item{
|
||
width: 25%;
|
||
padding: $padding/2;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
.icon{
|
||
width: 78rpx;
|
||
height: 78rpx;
|
||
background: #bd995d;
|
||
border-radius: 50%;
|
||
vertical-align: top;
|
||
}
|
||
.text{
|
||
font-size: $title-size-sm;
|
||
color: #201212;
|
||
line-height: 60rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 会员卡
|
||
.cards{
|
||
position: relative;
|
||
background: #1f1b1c;
|
||
.card{
|
||
position: relative;
|
||
margin: 0 $margin;
|
||
background: linear-gradient(to right, #3b3d4a, #231d1f);
|
||
padding: 15rpx;
|
||
border-radius: $radius/2;
|
||
z-index: 2;
|
||
.card-content{
|
||
position: relative;
|
||
border:solid 1rpx rgba($color: white, $alpha: .4);
|
||
border-radius: $radius/2;
|
||
padding: 30rpx 180rpx 60rpx 148rpx;
|
||
min-height: 98rpx;
|
||
.cover{
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 30rpx;
|
||
width: 98rpx;
|
||
height: 98rpx;
|
||
border-radius: 50%;
|
||
}
|
||
.user{
|
||
color: rgba($color: white, $alpha: .7);
|
||
line-height: 58rpx;
|
||
font-size: $title-size-lg;
|
||
}
|
||
.sub-time{
|
||
line-height: 40rpx;
|
||
color: #e6ce9e;
|
||
font-size: $title-size-sm;
|
||
}
|
||
.btn{
|
||
position: absolute;
|
||
color: #261f0f;
|
||
background: #e6ce9e;
|
||
width: 160rpx;
|
||
border-radius: 30rpx;
|
||
font-size: $title-size-m;
|
||
right: 30rpx;
|
||
top: 50rpx;
|
||
line-height: 58rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
.cards-angle{
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 100%;
|
||
z-index: 3;
|
||
}
|
||
&::after{
|
||
content: " ";
|
||
height: 70rpx;
|
||
background: #b29671;
|
||
position: absolute;
|
||
width: 100%;
|
||
bottom: 0;
|
||
border-radius: $radius/2;
|
||
z-index: 0;
|
||
}
|
||
}
|
||
// tabs
|
||
.tabs{
|
||
background: #1f1b1c;
|
||
color: white;
|
||
padding: 0 0 $padding 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: $title-size-lg;
|
||
.item{
|
||
margin: 0 $margin;
|
||
line-height: 70rpx;
|
||
height: 70rpx;
|
||
color: rgba($color: white, $alpha: .6);
|
||
&.show{
|
||
position: relative;
|
||
font-weight: bold;
|
||
font-size: $title-size;
|
||
color: white;
|
||
&::after{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 20%;
|
||
width: 60%;
|
||
height: 6rpx;
|
||
border-radius: 3rpx;
|
||
content: " ";
|
||
background: white;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|