749 lines
17 KiB
Vue
749 lines
17 KiB
Vue
<template>
|
||
<view class="content" v-if="!loding">
|
||
<!-- 上传凭证弹出 -->
|
||
<view class="canBack" v-if="canForm"></view>
|
||
<view class="canPop" v-if="canForm">
|
||
<block v-if="voucher">
|
||
<image class="canPop-tips" @click="canForm = false" src="/static/user/order-cancelPay.png" mode="widthFix"></image>
|
||
<view class="canPop-cont">打款凭证</view>
|
||
<image class="canPop-cover" v-if="voucher.status.value === 3" :src="canFromImg.showpath || require('@/static/icons/add-icon.png')" @click="updImg()" mode="aspectFill" />
|
||
<image class="canPop-cover" v-else :src="canFromImg.showpath || require('@/static/icons/add-icon.png')" @click="preImg()" mode="aspectFill" />
|
||
<view class="canPop-status">状态：{{voucher.status.text}}</view>
|
||
<view class="canPop-remark" v-if="voucher.remark && voucher.status.value === 3">驳回原因：{{voucher.remark}}
|
||
</view>
|
||
<view class="canPop-btn" v-if="voucher.status.value === 3" @click="canSubmitEdit(voucher.voucher_id)">重新提交</view>
|
||
</block>
|
||
<block v-else>
|
||
<image class="canPop-tips" @click="canForm = false" 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>
|
||
</block>
|
||
</view>
|
||
<swiper class="vip-container" previous-margin="55rpx" next-margin="55rpx" :current="tabsIndex" circular @change="swiperChange">
|
||
<swiper-item class="swiper-item" v-for="(item, index) in identitiesData" :key="index">
|
||
<view class="vip-item">
|
||
<image class="vip-back" :src="item.card_cover" mode="scaleToFill"></image>
|
||
<view class="vip-cont">
|
||
<view class="vip-name">
|
||
{{ item.name }}
|
||
<uni-icons class="vip-help" type="help-filled" @click="showRemark(item.name, item.node_definition)" color="rgba(255,255,255,.5)" size="20"></uni-icons>
|
||
</view>
|
||
<view class="currentInfo" v-if="user.identity.identity_id === item.identity_id">当前身份</view>
|
||
<view class="vip-tips">
|
||
<view
|
||
class="vip-tips-text"
|
||
:class="{'vip-tips-color-01': item.identity_id === 2, 'vip-tips-color-02': item.identity_id === 3, 'vip-tips-color-03': item.identity_id === 4, 'vip-tips-color-04': item.identity_id === 5 }"
|
||
>{{ 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>
|
||
{{ identitiesData[tabsIndex].description }}
|
||
</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="identitiesData[tabsIndex].is_activity">
|
||
<view class="privilege-price">折扣价：{{identitiesData[tabsIndex].price}}元</view>
|
||
<view class="privilege-price lineation">日常价：{{identitiesData[tabsIndex].cost}}元</view>
|
||
<view class="privilege-label">活动名额剩余{{identitiesData[tabsIndex].count.residue}}/{{identitiesData[tabsIndex].count.stock}}</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="privilege-price">{{identitiesData[tabsIndex].cost}}元</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 identitiesData[tabsIndex].rights" :key="index">&{{ item.remark }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 用户协议 -->
|
||
<view class="agree-btn" v-if="identitiesData[tabsIndex].can.show_button">
|
||
<checkbox-group @change="selected = !selected">
|
||
<checkbox :checked="selected" id="vipAgree" style="transform: scale(.7);" color="#7c52fc"></checkbox>
|
||
</checkbox-group>
|
||
<label for="vipAgree">请认真阅读并确认</label>
|
||
<text @click="$Router.push({ name: 'vipAgree', params: { type: 'vipAgree' } })">【会员服务协议】</text>
|
||
</view>
|
||
<!-- 开通按钮 -->
|
||
<view class="footer">
|
||
<image class="footer-btn" v-if="identitiesData[tabsIndex].can.show_button && voucher === ''" :src="identitiesData[tabsIndex].button_cover" mode="widthFix" @click="openOrder" />
|
||
<view class="current-btn-sh" v-if="identitiesData[tabsIndex].can.show_button && voucher !== ''" @click="openOrder">
|
||
{{voucher.status.value === 1?'申请审核中':''}}{{voucher.status.value === 3?'申请被驳回查看原因':''}}
|
||
</view>
|
||
<!-- <view class="current-btn-sh" v-if="!identitiesData[tabsIndex].can.show_button && voucher === ''">已开通</view> -->
|
||
<view class="ios-bottom"></view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { identities, vipOrder, vipWechatPay, vipCont, vipVoucherUpdate, vipVoucher } from '@/apis/interfaces/vip';
|
||
import { getAliPayConfig } from '@/apis/interfaces/alipay'
|
||
import { uploads } from '@/apis/interfaces/uploading';
|
||
import cashierPay from '@/public/cashierPay'
|
||
export default {
|
||
data() {
|
||
return {
|
||
loding : true,
|
||
user : {},
|
||
tabsIndex : 0,
|
||
identitiesData : [],
|
||
selected : false,
|
||
canForm : false,
|
||
voucher : '',
|
||
canFromImg : {
|
||
showpath: '',
|
||
path : ''
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
// 获取当前用户信息
|
||
this.idenInfo()
|
||
},
|
||
methods: {
|
||
// 当前用户信息
|
||
idenInfo(type) {
|
||
identities().then(res => {
|
||
this.user = res.user
|
||
this.identitiesData = res.identities
|
||
if(!type && type != 'refresh'){
|
||
this.tabsIndex = res.identities.findIndex(val => val.identity_id == this.$Route.query.identity_id)
|
||
}
|
||
this.swiperChange()
|
||
this.loding = false
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
|
||
// 切换开通身份
|
||
swiperChange(e) {
|
||
if(e){
|
||
this.tabsIndex = e.detail.current
|
||
}
|
||
this.voucher = this.identitiesData[this.tabsIndex].voucher ? this.identitiesData[this.tabsIndex].voucher : ''
|
||
if(this.voucher){
|
||
this.canFromImg = this.identitiesData[this.tabsIndex].voucher.cover
|
||
}else{
|
||
this.canFromImg = {
|
||
path : '',
|
||
showpath: ''
|
||
}
|
||
}
|
||
},
|
||
|
||
// 开通会员
|
||
openOrder() {
|
||
let can = this.identitiesData[this.tabsIndex].can,
|
||
identitiesId = this.identitiesData[this.tabsIndex].identity_id;
|
||
|
||
if (!this.selected) {
|
||
uni.showToast({
|
||
title: '请勾选用户协议',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (can.on_line) {
|
||
uni.showActionSheet({
|
||
itemList: ['微信支付', '支付宝支付'],
|
||
success: res => {
|
||
this.payAppConfig(res.tapIndex)
|
||
}
|
||
})
|
||
} else {
|
||
this.canForm = true
|
||
}
|
||
},
|
||
// 创建订单
|
||
payAppConfig(payType) {
|
||
let identity = this.identitiesData[this.tabsIndex].identity_id
|
||
vipOrder(identity, {
|
||
year: 1,
|
||
}).then(res => {
|
||
if (payType === 0) this.wechatAppPay(res.id)
|
||
if (payType === 1) this.aliPayConfig(res.id)
|
||
}).catch(err => {
|
||
console.log(err)
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 支付
|
||
aliPayConfig(orderId) {
|
||
getAliPayConfig(orderId, {
|
||
type: 'app'
|
||
}).then(res => {
|
||
cashierPay.pay('alipay', res.wechat.original.data, 'vip').then(payRes => {
|
||
this.idenInfo('refresh')
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
// 微信支付 APP
|
||
wechatAppPay(orderId) {
|
||
vipWechatPay(orderId, {
|
||
type: 'app'
|
||
}).then(res => {
|
||
let payConfig = JSON.parse(res)
|
||
cashierPay.pay('wxpay', payConfig, 'vip').then(payRes => {
|
||
this.idenInfo('refresh')
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
// 会员权益介绍
|
||
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'
|
||
})
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 预览图片
|
||
preImg() {
|
||
uni.previewImage({
|
||
current: this.voucher.cover.showpath,
|
||
urls: [this.voucher.cover.showpath]
|
||
})
|
||
},
|
||
|
||
// 打款凭证提交
|
||
canSubmit() {
|
||
let newCover = this.canFromImg.path,
|
||
newId = this.identitiesData[this.tabsIndex].identity_id;
|
||
|
||
vipVoucher({
|
||
cover: newCover,
|
||
identity_id: newId
|
||
}).then(res => {
|
||
this.$Router.push({
|
||
name: 'Examine'
|
||
})
|
||
this.canForm = !this.canForm
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
})
|
||
},
|
||
// 编辑凭证
|
||
canSubmitEdit(id) {
|
||
let newCover = this.canFromImg.path
|
||
vipVoucherUpdate(id, {
|
||
cover: newCover
|
||
}).then(res => {
|
||
this.$Router.push({
|
||
name: 'Examine'
|
||
})
|
||
this.canForm = !this.canForm
|
||
}).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, 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: 40rpx auto 20rpx auto;
|
||
width: 240rpx;
|
||
height: 240rpx;
|
||
border: 2rpx solid #f3f3f3;
|
||
}
|
||
|
||
.canPop-remark {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.canPop-status {
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.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 * 1.5;
|
||
}
|
||
|
||
.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: 38rpx;
|
||
color: #ffffff;
|
||
font-weight: bold;
|
||
.vip-help{
|
||
margin-left: 10rpx;
|
||
margin-top: 6rpx;
|
||
}
|
||
}
|
||
|
||
.currentInfo {
|
||
position: absolute;
|
||
right: 82rpx;
|
||
top: 20rpx;
|
||
color: #fff;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.vip-tips {
|
||
font-size: 30rpx;
|
||
background-color: white;
|
||
display: inline-block;
|
||
border-radius: 80rpx;
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
padding: 0 30rpx;
|
||
margin-top: 100rpx;
|
||
|
||
.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: 30rpx;
|
||
display: flex;
|
||
|
||
.privilege-img {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin-top: 5rpx;
|
||
}
|
||
|
||
.privilege-text {
|
||
width: calc(100% - 50rpx);
|
||
padding-left: 20rpx;
|
||
font-size: 30rpx;
|
||
color: $text-gray-m;
|
||
line-height: 40rpx;
|
||
|
||
.privilege-name {
|
||
font-size: 34rpx;
|
||
color: #333;
|
||
margin: 10rpx 0 20rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.privilege-price{
|
||
color: #f6b338;
|
||
font-weight: bold;
|
||
line-height: 50rpx;
|
||
&.lineation{
|
||
text-decoration:line-through;
|
||
color: $text-gray-m;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
|
||
.privilege-label{
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.privilege-right {
|
||
color: $mian-color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 用户协议
|
||
.agree {
|
||
margin: 0 0 10rpx 0;
|
||
text-align: center;
|
||
|
||
.agree-tips {
|
||
background-color: #cacaca;
|
||
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;
|
||
text{
|
||
color: $mian-color;
|
||
}
|
||
}
|
||
|
||
// 开通须知
|
||
.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;
|
||
margin-bottom: 30rpx;
|
||
|
||
.footer-btn {
|
||
width: 74%;
|
||
}
|
||
|
||
.current-btn {
|
||
width: 74%;
|
||
height: 80rpx;
|
||
background-image: linear-gradient(to right, #7c52fc, #976dff);
|
||
color: #fff;
|
||
margin-left: 13%;
|
||
border-radius: 80rpx;
|
||
line-height: 80rpx;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.current-btn-sh {
|
||
background-color: $border-color-lg;
|
||
width: 74%;
|
||
height: 100rpx;
|
||
color: $text-gray;
|
||
margin-left: 13%;
|
||
border-radius: 80rpx;
|
||
line-height: 100rpx;
|
||
font-size: 36rpx;
|
||
}
|
||
}
|
||
|
||
// 会员权限
|
||
.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: 0.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: 0.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: 0.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>
|