TmOct5/BlockChainH5
1
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

会员中心我的伙伴

Browse Source
This commit is contained in:
zhangmanman
2021-09-26 09:56:16 +08:00
parent 9d9cf4c580
commit 2f75c30bac
163 changed files with 33588 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

541
pages/vip/vip.vue Normal file
View File

@@ -0,0 +1,541 @@
<template>
<view class="content" v-if="!loding">
<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-00">
{{item.title}}
</view>
<!-- 会员 -->
<view v-else-if="item.identity_id == 3" class="vip-tips-text vip-tips-color-01">
{{item.title}}
</view>
<!-- VIP节点 -->
<view v-else-if="item.identity_id == 4" class="vip-tips-text vip-tips-color-02">
{{item.title}}
</view>
<!-- 主节点 -->
<view v-else-if="item.identity_id == 5" class="vip-tips-text vip-tips-color-03">
{{item.title}}
</view>
<!-- 超级节点 -->
<view v-else-if="item.identity_id == 6" 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>
<view class="privilege-label" :class="{'active' : item.finish == true}" v-for="(item, index) in identitie[tabsIndex].get_condition">
&{{item.message}}
</view>
</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">
&{{item.remark}}
</view>
</view>
</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="#7c52fc"></radio>会员服务协议
</view>
<!-- 开通按钮 -->
<view class="footer">
<block v-if="identitie[tabsIndex].identity_id == 2">
<image class="footer-btn" :src="identitie[tabsIndex].button_cover" mode="widthFix" @click="openUrl"></image>
</block>
<block v-else>
<image class="footer-btn" :src="identitie[tabsIndex].button_cover" mode="widthFix" @click="openOrder"></image>
</block>
<!-- <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 } from '@/apis/interfaces/vip'
export default {
data() {
return {
loding : true,
tabsIndex : 0,
user : {},
identitie : [],
rights : [],
description : '',
identityTime: '', // 到期时间
sumNumber : 1, // 开通年限
total : '', // 开通年限总资金额
selected : false, // 用户协议
}
},
created() {
// 获取当前用户信息
this.idenInfo();
},
methods: {
// 当前用户信息
idenInfo(){
identities().then(res => {
console.log(res.identities)
this.loding = false
this.identitie = res.identities
this.rights = res.identities[this.tabsIndex].rights
this.total = res.identities[this.tabsIndex].price
}).catch(err =>{
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
// 切换开通身份
swiperChange(e) {
this.tabsIndex = e.detail.current
// 获取当前用户信息
this.idenInfo();
},
// 开通会员
openOrder(){
if(this.selected == false) {
uni.showToast({
title: '请勾选用户协议',
icon : 'none'
})
return
}
let identitiesId = this.identitie[this.tabsIndex].identity_id
vipOrder(identitiesId,{
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'
})
})
},
// 轻节点身份-跳转个人认证
openUrl() {
this.$Router.push({name: 'Personal'})
},
// 微信支付
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
})
}
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #FFFFFF;
}
.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;
}
}
}
}