<template>
|
<view class="cash-vip">
|
<!-- #ifdef MP-WEIXIN || APP-PLUS -->
|
<view class="ww100" :style="'height:'+topBarTop()+'px;'"></view>
|
<view class="tc head_top" :style="topBarHeight() == 0 ? '': 'height:'+topBarHeight()+'px;'">
|
<view class="reg180" @click="goback"><text class="icon iconfont icon-jiantou"></text></view>
|
<view class="fb">{{titel}}</view>
|
</view>
|
<!-- #endif -->
|
|
<view class="cash-header">
|
<view class="header-bg">
|
<image :src="background" mode="aspectFill"></image>
|
</view>
|
<view class="header-content">
|
<view class="money-label">可提现金额</view>
|
<view class="money">¥{{ vip.money || '0.00' }}</view>
|
<view class="freeze-money">冻结金额：¥{{ vip.freeze_money || '0.00' }}</view>
|
</view>
|
</view>
|
|
<view class="cash-form">
|
<view class="form-title">提现金额</view>
|
<view class="form-input">
|
<view class="prefix">¥</view>
|
<input type="digit" v-model="cashForm.money" placeholder="请输入提现金额" />
|
</view>
|
<view class="form-min">最低提现金额：¥{{ settlement.min_money || '0.00' }}</view>
|
|
<view class="form-title mt30">提现方式</view>
|
<view class="pay-type">
|
<view class="type-item" :class="{ active: cashForm.pay_type === 10 }" @click="selectPayType(10)">
|
<view class="type-icon wechat"></view>
|
<view class="type-name">微信</view>
|
</view>
|
<view class="type-item" :class="{ active: cashForm.pay_type === 20 }" @click="selectPayType(20)">
|
<view class="type-icon alipay"></view>
|
<view class="type-name">支付宝</view>
|
</view>
|
</view>
|
|
<view class="form-title mt30">账户信息</view>
|
<view class="form-item" v-if="cashForm.pay_type === 20">
|
<input type="text" v-model="cashForm.alipay_name" placeholder="请输入支付宝姓名" />
|
</view>
|
<view class="form-item" v-if="cashForm.pay_type === 20">
|
<input type="text" v-model="cashForm.alipay_account" placeholder="请输入支付宝账号" />
|
</view>
|
|
<view class="submit-btn">
|
<button class="btn-gcred" @click="submitCash">申请提现</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
titel: '申请提现',
|
background: '',
|
vip: {},
|
settlement: {},
|
cashForm: {
|
money: '',
|
pay_type: 10, // 10微信 20支付宝
|
alipay_name: '',
|
alipay_account: ''
|
}
|
};
|
},
|
onLoad() {
|
this.getData();
|
},
|
methods: {
|
getData() {
|
let self = this;
|
uni.showLoading({ title: '加载中' });
|
|
self._get('plus.vip.cash/setting', {}, function(res) {
|
self.background = res.data.background || '';
|
self.vip = res.data.vip || {};
|
self.settlement = res.data.settlement || {};
|
uni.hideLoading();
|
});
|
},
|
|
selectPayType(type) {
|
this.cashForm.pay_type = type;
|
},
|
|
submitCash() {
|
let self = this;
|
let formData = { ...self.cashForm };
|
|
// 数据验证
|
if (!formData.money) {
|
uni.showToast({ title: '请输入提现金额', icon: 'none' });
|
return;
|
}
|
|
if (parseFloat(formData.money) < parseFloat(this.settlement.min_money || 0)) {
|
uni.showToast({ title: `最低提现金额为¥${this.settlement.min_money}`, icon: 'none' });
|
return;
|
}
|
|
if (parseFloat(formData.money) > parseFloat(this.vip.money || 0)) {
|
uni.showToast({ title: '提现金额不能大于可提现金额', icon: 'none' });
|
return;
|
}
|
|
if (formData.pay_type === 20) {
|
if (!formData.alipay_name) {
|
uni.showToast({ title: '请输入支付宝姓名', icon: 'none' });
|
return;
|
}
|
|
if (!formData.alipay_account) {
|
uni.showToast({ title: '请输入支付宝账号', icon: 'none' });
|
return;
|
}
|
}
|
|
// 提交申请
|
uni.showLoading({ title: '提交中' });
|
self._postForm('plus.vip.cash/submit', formData, function(res) {
|
uni.hideLoading();
|
if (res.code === 1) {
|
uni.showToast({ title: '申请提交成功' });
|
setTimeout(() => {
|
uni.redirectTo({
|
url: '/pages/plus/vip/cash/list'
|
});
|
}, 1500);
|
} else {
|
uni.showToast({ title: res.msg, icon: 'none' });
|
}
|
});
|
},
|
|
goback() {
|
uni.navigateBack();
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.cash-vip {
|
min-height: 100vh;
|
background: #f5f5f5;
|
}
|
|
.head_top {
|
position: absolute;
|
width: 100%;
|
padding-top: var(--status-bar-height);
|
height: 30px;
|
line-height: 30px;
|
color: #FFFFFF;
|
font-size: 32rpx;
|
z-index: 2;
|
}
|
|
.reg180 {
|
padding-right: 20rpx;
|
text-align: right;
|
transform: rotateY(180deg);
|
position: absolute;
|
bottom: 0;
|
}
|
|
.icon-jiantou {
|
color: #FFFFFF;
|
font-size: 30rpx;
|
}
|
|
.cash-header {
|
position: relative;
|
height: 300rpx;
|
margin-bottom: 20rpx;
|
|
.header-bg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.header-content {
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
height: 100%;
|
z-index: 1;
|
color: #fff;
|
|
.money-label {
|
font-size: 28rpx;
|
margin-bottom: 10rpx;
|
}
|
|
.money {
|
font-size: 60rpx;
|
font-weight: bold;
|
margin-bottom: 10rpx;
|
}
|
|
.freeze-money {
|
font-size: 26rpx;
|
}
|
}
|
}
|
|
.cash-form {
|
background: #fff;
|
margin: 0 20rpx 20rpx;
|
border-radius: 20rpx;
|
padding: 30rpx;
|
|
.form-title {
|
font-size: 30rpx;
|
color: #333;
|
margin-bottom: 20rpx;
|
}
|
|
.mt30 {
|
margin-top: 30rpx;
|
}
|
|
.form-input {
|
display: flex;
|
align-items: center;
|
border: 1rpx solid #eee;
|
border-radius: 10rpx;
|
padding: 0 20rpx;
|
margin-bottom: 10rpx;
|
|
.prefix {
|
font-size: 36rpx;
|
color: #333;
|
margin-right: 10rpx;
|
}
|
|
input {
|
flex: 1;
|
height: 80rpx;
|
font-size: 32rpx;
|
}
|
}
|
|
.form-min {
|
font-size: 24rpx;
|
color: #999;
|
}
|
|
.form-item {
|
border: 1rpx solid #eee;
|
border-radius: 10rpx;
|
padding: 0 20rpx;
|
margin-bottom: 20rpx;
|
|
input {
|
height: 80rpx;
|
font-size: 28rpx;
|
}
|
}
|
|
.pay-type {
|
display: flex;
|
|
.type-item {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 30rpx 0;
|
border: 1rpx solid #eee;
|
border-radius: 10rpx;
|
margin-right: 20rpx;
|
|
&:last-child {
|
margin-right: 0;
|
}
|
|
&.active {
|
border-color: #FF5649;
|
}
|
|
.type-icon {
|
width: 60rpx;
|
height: 60rpx;
|
margin-bottom: 10rpx;
|
|
&.wechat {
|
background-size: contain;
|
}
|
|
&.alipay {
|
|
background-size: contain;
|
}
|
}
|
|
.type-name {
|
font-size: 28rpx;
|
color: #333;
|
}
|
}
|
}
|
|
.submit-btn {
|
margin-top: 50rpx;
|
|
.btn-gcred {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
border-radius: 44rpx;
|
background: #FF5649;
|
border-color: #FF5649;
|
color: #fff;
|
font-size: 32rpx;
|
}
|
}
|
}
|
</style>
|
