708 lines
21 KiB
Vue
708 lines
21 KiB
Vue
<template>
|
||
<view class="content" v-if="!loding">
|
||
<!-- 上传凭证弹出 -->
|
||
<view class="canBack" v-if="canForm"></view>
|
||
<view class="canPop" v-if="canForm">
|
||
<image class="canPop-tips" @click="canClick" src="/static/user/order-cancelPay.png" mode="widthFix"></image>
|
||
<view class="canPop-cont">上传打款凭证</view>
|
||
<image class="canPop-cover" :src="canFromImg.showpath || require('@/static/icons/add-icon.png')" @click="updImg()" mode="aspectFill"></image>
|
||
<view class="canPop-btn" @click="canSubmit">提交</view>
|
||
</view>
|
||
|
||
<swiper class="vip-container" previous-margin="55rpx" next-margin="55rpx" circular @change="swiperChange">
|
||
<swiper-item class="swiper-item" v-for="(item, index) in identitie" :key="index">
|
||
<view class="vip-item" :class="tabsIndex == index ? 'color-item-img' : ''">
|
||
<image class="vip-back" :src="item.card_cover" mode="scaleToFill"></image>
|
||
<view class="vip-cont">
|
||
<view class="vip-name">
|
||
{{item.name}}<image class="vip-name-img" @click="showRemark(item.name, item.node_definition)" src="../../static/user/vip_privilege_03.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="vip-number" v-if="item.count">
|
||
{{item.count.stock > 0 ? '剩余名额：' + item.count.residue : '不限名数'}}
|
||
</view>
|
||
<view class="vip-tips">
|
||
<!-- 会员 -->
|
||
<view v-if="item.identity_id == 2" class="vip-tips-text vip-tips-color-01">
|
||
{{item.title}}
|
||
</view>
|
||
|
||
<!-- VIP节点 -->
|
||
<view v-else-if="item.identity_id == 3" class="vip-tips-text vip-tips-color-02">
|
||
{{item.title}}
|
||
</view>
|
||
|
||
<!-- 主节点 -->
|
||
<view v-else-if="item.identity_id == 4" class="vip-tips-text vip-tips-color-03">
|
||
{{item.title}}
|
||
</view>
|
||
|
||
<!-- 超级节点 -->
|
||
<view v-else-if="item.identity_id == 5" class="vip-tips-text vip-tips-color-04">
|
||
{{item.title}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<!-- 会员特权 -->
|
||
<view class="privilege">
|
||
<view class="privilege-list">
|
||
<image class="privilege-img" src="/static/user/vip_privilege_00.png" mode=""></image>
|
||
<view class="privilege-text">
|
||
<view class="privilege-name">
|
||
节点定义
|
||
</view>
|
||
{{identitie[tabsIndex].node_definition}}
|
||
</view>
|
||
</view>
|
||
<view class="privilege-list">
|
||
<image class="privilege-img" src="/static/user/vip_privilege_01.png" mode=""></image>
|
||
<view class="privilege-text">
|
||
<view class="privilege-name">
|
||
升级条件
|
||
</view>
|
||
<block v-if="openCondition.energy_shard">
|
||
<view class="privilege-label" :class="{'active' : openCondition.energy_shard.finish}">{{openCondition.energy_shard.message}}<uni-icons v-if="openCondition.energy_shard.finish" type="checkmarkempty" size="17" color="#f6b338"></uni-icons></view>
|
||
<view class="privilege-label" :class="{'active' : openCondition.price.finish}" v-if="!openCondition.energy_shard.finish">{{openCondition.price.message}}</view>
|
||
<view class="privilege-label" v-else>{{openCondition.service_charge.message}}</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="privilege-label" :class="{'active' : openCondition.price.finish}">{{openCondition.price.message}}</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
<view class="privilege-list">
|
||
<image class="privilege-img" src="/static/user/vip_privilege_02.png" mode=""></image>
|
||
<view class="privilege-text">
|
||
<view class="privilege-name">
|
||
节点权益
|
||
</view>
|
||
<view class="privilege-label privilege-right" v-for="(item, index) in identitie[tabsIndex].rights" :key="index">
|
||
&{{item.remark}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 用户协议 -->
|
||
<view class="agree">
|
||
<view class="agree-tips" @click="$Router.push({name: 'vipAgree', params: {type : 'vipAgree'}})">
|
||
请仔细阅读并确认服务协议
|
||
</view>
|
||
</view>
|
||
<view class="agree-btn" @click="agreeChange">
|
||
<radio :checked="selected" style="transform: scale(.7);" color="#7c52fc"></radio>会员服务协议
|
||
</view>
|
||
|
||
|
||
<!-- 开通按钮 -->
|
||
<view class="footer">
|
||
<image class="footer-btn" :src="identitie[tabsIndex].button_cover" mode="widthFix" @click="openOrder"></image>
|
||
<!-- <button class="footer-btn" type="default" >
|
||
<view class="footer-btn-num">
|
||
合计：{{total}}
|
||
</view>
|
||
<view class="footer-btn-pay">
|
||
立即支付
|
||
</view>
|
||
</button> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { identities, vipOrder, vipWechatPay, vipCont, vipVoucher } from '@/apis/interfaces/vip'
|
||
import { wxConfig } from '@/apis/interfaces/wx'
|
||
import { uploads } from '@/apis/interfaces/uploading'
|
||
export default {
|
||
data() {
|
||
return {
|
||
loding : true,
|
||
tabsIndex : 0,
|
||
user : {},
|
||
identitie : [],
|
||
rights : [],
|
||
description : '',
|
||
identityTime: '', // 到期时间
|
||
sumNumber : 1, // 开通年限
|
||
total : '', // 开通年限总资金额
|
||
selected : false, // 用户协议
|
||
canBtn : '', // 按钮操作
|
||
canForm : false, // 凭证弹出
|
||
canFromImg : {
|
||
showpath: '',
|
||
path : ''
|
||
},
|
||
openCondition: {}
|
||
}
|
||
},
|
||
created() {
|
||
// 获取当前用户信息
|
||
this.idenInfo();
|
||
// 微信鉴权
|
||
wxConfig({
|
||
url : window.location.href,
|
||
jsApiList : ['chooseWXPay']
|
||
}).then(res => {
|
||
let payConfig = JSON.parse(res)
|
||
let jweixin = require('jweixin-module')
|
||
|
||
jweixin.ready(res=>{
|
||
// res
|
||
})
|
||
jweixin.error(err => {
|
||
console.log(err)
|
||
uni.showToast({
|
||
title: err,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
jweixin.config({...payConfig})
|
||
}).catch(err => {
|
||
console.log(err)
|
||
})
|
||
},
|
||
methods: {
|
||
// 当前用户信息
|
||
idenInfo(){
|
||
identities().then(res => {
|
||
res.identities.map(item => {
|
||
item.obj_condition = new Object
|
||
for(let val of item.get_condition){
|
||
item.obj_condition[val.name] = {
|
||
message: val.message,
|
||
finish: val.finish
|
||
}
|
||
}
|
||
return item
|
||
})
|
||
|
||
this.identitie = res.identities
|
||
this.openCondition = res.identities[this.tabsIndex].obj_condition
|
||
this.rights = res.identities[this.tabsIndex].rights
|
||
this.total = res.identities[this.tabsIndex].price
|
||
this.canBtn = res.identities[this.tabsIndex].can
|
||
this.loding = false
|
||
}).catch(err =>{
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 切换开通身份
|
||
swiperChange(e) {
|
||
this.tabsIndex = e.detail.current
|
||
// 获取当前用户信息
|
||
this.idenInfo();
|
||
},
|
||
|
||
// 开通会员
|
||
openOrder(){
|
||
let can = this.canBtn,
|
||
identitiesId = this.identitie[this.tabsIndex].identity_id
|
||
if(this.selected == false) {
|
||
uni.showToast({
|
||
title: '请勾选用户协议',
|
||
icon : 'none'
|
||
})
|
||
return
|
||
}
|
||
if(can.on_line) {
|
||
if(can.buy) {
|
||
// 开通vip提交
|
||
console.log('开通vip提交')
|
||
this.vipSubmitr(identitiesId);
|
||
} else {
|
||
uni.showToast({
|
||
title: can.message,
|
||
icon : 'none'
|
||
})
|
||
}
|
||
} else {
|
||
if(can.buy) {
|
||
// 上传凭证
|
||
this.canClick();
|
||
} else {
|
||
uni.showToast({
|
||
title: can.message,
|
||
icon : 'none'
|
||
})
|
||
}
|
||
}
|
||
return
|
||
},
|
||
// 开通vip提交
|
||
vipSubmitr(id) {
|
||
// vipOrder(id,{
|
||
// year: 1
|
||
// }).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) {
|
||
// }
|
||
// })
|
||
// }
|
||
// }).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)
|
||
}
|
||
})
|
||
}).catch(err =>{
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 勾选协议
|
||
agreeChange() {
|
||
this.selected = !this.selected
|
||
},
|
||
|
||
// 会员权益介绍
|
||
showRemark(title, val){
|
||
uni.showModal({
|
||
title : title,
|
||
content : val,
|
||
showCancel : false
|
||
})
|
||
},
|
||
|
||
// 上传打款凭证图片
|
||
updImg(){
|
||
uni.chooseImage({
|
||
count : 1,
|
||
success : path => {
|
||
uploads([{
|
||
uri : path.tempFilePaths[0]
|
||
}]).then(res => {
|
||
this.canFromImg = {
|
||
showpath: res.url[0],
|
||
path: res.path[0]
|
||
}
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 打款凭证弹出状态
|
||
canClick() {
|
||
this.canForm = !this.canForm
|
||
},
|
||
|
||
// 打款凭证提交
|
||
canSubmit() {
|
||
let newCover = this.canFromImg.path,
|
||
newId = this.identitie[this.tabsIndex].identity_id
|
||
vipVoucher({
|
||
cover: newCover,
|
||
identity_id: newId
|
||
}).then(res => {
|
||
this.$Router.push({name: "Examine"})
|
||
}).catch(err =>{
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon : 'none'
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #FFFFFF;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.canBack {
|
||
position: fixed;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba(0,0,0,.5);
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 99;
|
||
}
|
||
.canPop {
|
||
position: absolute;
|
||
background-color: #FFFFFF;
|
||
left: 100rpx;
|
||
right: 100rpx;
|
||
top: 30%;
|
||
z-index: 101;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 10rpx;
|
||
text-align: center;
|
||
.canPop-tips {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 32rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
z-index: 1002;
|
||
}
|
||
.canPop-cont {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
}
|
||
.canPop-cover {
|
||
margin: 60rpx auto 40rpx;
|
||
width: 240rpx;
|
||
height: 240rpx;
|
||
border: 2rpx solid #f3f3f3;
|
||
}
|
||
.canPop-btn {
|
||
text-align: center;
|
||
background: $mian-color;
|
||
border-radius: 0;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: $title-size;
|
||
color: white;
|
||
&::after{
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.vip-container {
|
||
width: 750rpx;
|
||
height: 340rpx;
|
||
margin-top: $margin;
|
||
}
|
||
|
||
.swiper-item {
|
||
width: 640rpx;
|
||
height: 340rpx;
|
||
display: flex;
|
||
}
|
||
|
||
.vip-item {
|
||
width: 640rpx;
|
||
height: 340rpx;
|
||
border-radius: 20rpx;
|
||
position: relative;
|
||
.vip-back {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.vip-cont {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 9;
|
||
padding: 45rpx 70rpx;
|
||
box-sizing: border-box;
|
||
.vip-name {
|
||
display: flex;
|
||
font-size: 46rpx;
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
.vip-name-img {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
margin: 12rpx 20rpx;
|
||
}
|
||
}
|
||
.vip-number {
|
||
margin: 10rpx 0 40rpx;
|
||
color: #FFFFFF;
|
||
font-size: 32rpx;
|
||
opacity: .8;
|
||
}
|
||
.vip-tips {
|
||
font-size: 30rpx;
|
||
background-color: #e8ebf6;
|
||
display: inline-block;
|
||
border-radius: 80rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
padding: 0 30rpx;
|
||
.vip-tips-text {
|
||
font-weight: 700;
|
||
background-clip: text;
|
||
color: transparent;
|
||
}
|
||
.vip-tips-color-00 {
|
||
background-image: linear-gradient(to bottom,#6189f0,#b6b9c1);
|
||
}
|
||
.vip-tips-color-01 {
|
||
background-image: linear-gradient(to top,#ffd459,#ff6c52);
|
||
}
|
||
.vip-tips-color-02 {
|
||
background-image: linear-gradient(to top,#e0c9fe,#892edb);
|
||
}
|
||
.vip-tips-color-03 {
|
||
background-image: linear-gradient(to top,#f6b237,#f035e3);
|
||
}
|
||
.vip-tips-color-04 {
|
||
background-image: linear-gradient(to top,#c455ec,#5f76e9);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 会员特权
|
||
.privilege {
|
||
padding: 20rpx 30rpx 80rpx;
|
||
box-sizing: border-box;
|
||
.privilege-list {
|
||
margin-bottom: 50rpx;
|
||
display: flex;
|
||
.privilege-img {
|
||
width: 74rpx;
|
||
height: 74rpx;
|
||
}
|
||
.privilege-text {
|
||
width: calc(100% - 74rpx);
|
||
padding-left: 40rpx;
|
||
font-size: 32rpx;
|
||
color: #999999;
|
||
line-height: 52rpx;
|
||
.privilege-name {
|
||
font-size: 40rpx;
|
||
color: #000000;
|
||
margin: 10rpx 0 20rpx;
|
||
}
|
||
.privilege-label.active {
|
||
color: #f6b338;
|
||
}
|
||
.privilege-right {
|
||
color: #7877eb;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 用户协议
|
||
.agree {
|
||
margin: $margin 0;
|
||
text-align: center;
|
||
.agree-tips {
|
||
background-color: #999999;
|
||
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: 0 $padding;
|
||
box-sizing: border-box;
|
||
text-align: center;
|
||
.footer-btn{
|
||
width: 74%;
|
||
}
|
||
}
|
||
// 会员权限
|
||
.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>
|