同步版本
This commit is contained in:
唐明明
@@ -1,22 +1,287 @@
|
||||
<template>
|
||||
<view>
|
||||
开通会员
|
||||
<view class="content" v-if="!loding">
|
||||
<!-- 会员类型 -->
|
||||
<view class="tabs">
|
||||
<view class="item" :class="{'show': index === tabsIndex}" v-for="(item, index) in identities" :key="index" @click="onTabs(index)">{{item.name}}</view>
|
||||
</view>
|
||||
<!-- 会员信息 -->
|
||||
<view class="cards">
|
||||
<view class="card">
|
||||
<view class="card-content">
|
||||
<image class="cover" src="@/static/dev/good_cover_01.png" mode="aspectFill"></image>
|
||||
<view class="user nowrap">{{user.username}}</view>
|
||||
<view class="sub-time nowrap">{{user.identity.name}}至{{user.identity.ended_at}}</view>
|
||||
<view class="btn" @click="openOrder">开通/续费</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cards-back"></view>
|
||||
<image class="cards-angle" src="@/static/imgs/vip-angle-back.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<!-- 会员权限 -->
|
||||
<view class="privilege">
|
||||
<view class="title">开通会员享特权</view>
|
||||
<view class="privilege-box">
|
||||
<view class="item" v-for="(item, index) in rights" :key="index" @click="showRemark(item.name, item.remark)">
|
||||
<image class="icon" :src="item.cover" mode="aspectFill"></image>
|
||||
<view class="text">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 会员 -->
|
||||
<view class="footer">
|
||||
<button class="footer-btn" type="default" @click="openOrder">￥{{identities[tabsIndex].price}}/年 开通</button>
|
||||
</view>
|
||||
<!-- 会员服务信息 -->
|
||||
<view class="notice">
|
||||
<view class="title">开通须知</view>
|
||||
<view class="item">
|
||||
<text>{{description}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { identities, vipOrder, vipWechatPay } from '@/apis/interfaces/vip'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
loding : true,
|
||||
tabsIndex : 0,
|
||||
user : {},
|
||||
identities : [],
|
||||
rights : [],
|
||||
description : ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
identities().then(res => {
|
||||
this.loding = false
|
||||
this.user = res.user
|
||||
this.description= res.description
|
||||
this.identities = res.identities
|
||||
this.rights = res.identities[0].rights
|
||||
}).catch(err =>{
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 切换开通身份
|
||||
onTabs(index){
|
||||
if(this.tabsIndex === index) return
|
||||
this.tabsIndex = index
|
||||
this.rights = this.identities[index].rights
|
||||
},
|
||||
// 会员权益介绍
|
||||
showRemark(title, text){
|
||||
uni.showModal({
|
||||
title : title + '说明',
|
||||
content : text,
|
||||
showCancel : false
|
||||
})
|
||||
},
|
||||
// 开通会员
|
||||
openOrder(){
|
||||
let identitiesId = this.identities[this.tabsIndex].identity_id
|
||||
vipOrder(identitiesId).then(res => {
|
||||
let verifyForm = res
|
||||
this.wechatPay(res.id)
|
||||
}).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)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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 $padding*2;
|
||||
.footer-btn{
|
||||
background-color: #201212;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
color: #f7d79c;
|
||||
font-size: $title-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
// 会员权限
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user