forked from zhongyuanhaiju/uniapp
350 lines
9.1 KiB
Vue
350 lines
9.1 KiB
Vue
<template>
|
||
<page-meta :page-style="themeColor"></page-meta>
|
||
<view class="container">
|
||
<view class="withdraw-wrap">
|
||
<view class="withdraw-wrap-title">账号：</view>
|
||
<view class="money-wrap">
|
||
<input type="text" class="withdraw-money" style="font-size: 16px;" placeholder="请输入会员账号或手机号" v-model="username" />
|
||
<view class="delete" @click="removeUsername" v-if="username">
|
||
<image :src="$util.img('public/uniapp/member/apply_withdrawal/close.png')" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="empty-box"></view>
|
||
<view class="withdraw-wrap">
|
||
<view class="withdraw-wrap-title">转账：</view>
|
||
<view class="money-wrap">
|
||
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
|
||
<input type="digit" class="withdraw-money" v-model="withdrawMoney" />
|
||
<view class="delete" @click="remove" v-if="withdrawMoney">
|
||
<image :src="$util.img('public/uniapp/member/apply_withdrawal/close.png')" mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
<view class="bootom">
|
||
<view>
|
||
<text class="color-tip">可用余额：{{ $lang('common.currencySymbol') }}{{ withdrawInfo.member_info.balance | moneyFormat }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="empty-box"></view>
|
||
<view class="withdraw-wrap">
|
||
<view class="withdraw-wrap-title">支付密码：</view>
|
||
<view class="money-wrap">
|
||
<input type="password" class="withdraw-money" v-model="buy_password" />
|
||
</view>
|
||
</view>
|
||
<view class="btn color-base-border ns-gradient-otherpages-member-widthdrawal-withdrawal" :class="{ disabled: withdrawMoney == '' || withdrawMoney == 0 || username==''}" @click="withdraw">
|
||
确认转账
|
||
</view>
|
||
<loading-cover ref="loadingCover"></loading-cover>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
||
export default {
|
||
components: {
|
||
uniPopup
|
||
},
|
||
data() {
|
||
return {
|
||
username:'',
|
||
withdrawInfo: {
|
||
config: {
|
||
is_use: 0,
|
||
min: 1,
|
||
rate: 0
|
||
},
|
||
member_info: {
|
||
balance_money: 0,
|
||
balance_withdraw: 0,
|
||
balance_withdraw_apply: 0
|
||
}
|
||
},
|
||
bankAccountInfo: {},
|
||
withdrawMoney: '',
|
||
buy_password: '',
|
||
isSub: false
|
||
};
|
||
},
|
||
onShow() {
|
||
// 刷新多语言
|
||
this.$langConfig.refresh();
|
||
if (uni.getStorageSync('token')) {
|
||
this.getWithdrawInfo();
|
||
} else {
|
||
this.$util.redirectTo('/pages_tool/login/login');
|
||
}
|
||
},
|
||
methods: {
|
||
// 删除提现金额
|
||
remove() {
|
||
this.withdrawMoney = '';
|
||
},
|
||
removeUsername(){
|
||
this.username = '';
|
||
},
|
||
/**
|
||
* 获取提现信息
|
||
*/
|
||
getWithdrawInfo() {
|
||
let _this = this;
|
||
this.$api.sendRequest({
|
||
url: '/api/memberwithdraw/info',
|
||
success: res => {
|
||
if (res.code >= 0 && res.data) {
|
||
this.withdrawInfo = res.data;
|
||
if (this.withdrawInfo.config.is_user_transfer == 0) {
|
||
this.$util.redirectTo('/pages/member/index', {}, 'reLaunch');
|
||
}
|
||
if (this.withdrawInfo.member_info.is_pay_password == 0) {
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '您未设置支付密码，需设置支付密码后进行转账，点击确定前往支付密码设置',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
_this.$util.redirectTo('/pages_tool/member/pay_password',{'back':'/pages_tool/member/balance_transfer'});
|
||
} else if (res.cancel) {
|
||
_this.isSub = false;
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||
},
|
||
fail: res => {
|
||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||
}
|
||
});
|
||
},
|
||
verify() {
|
||
if (this.username == '') {
|
||
this.$util.showToast({
|
||
title: '请输入转入账号'
|
||
});
|
||
return false;
|
||
}
|
||
if (this.withdrawMoney == '' || this.withdrawMoney == 0 || isNaN(parseFloat(this.withdrawMoney))) {
|
||
this.$util.showToast({
|
||
title: '请输入提现金额'
|
||
});
|
||
return false;
|
||
}
|
||
if (parseFloat(this.withdrawMoney) > parseFloat(this.withdrawInfo.member_info.balance)) {
|
||
this.$util.showToast({
|
||
title: '转出金额超出可用现金额'
|
||
});
|
||
return false;
|
||
}
|
||
// if (parseFloat(this.withdrawMoney) < parseFloat(this.withdrawInfo.config.min)) {
|
||
// this.$util.showToast({
|
||
// title: '转出金额小于最低转账金额'
|
||
// });
|
||
// return false;
|
||
// }
|
||
return true;
|
||
},
|
||
withdraw() {
|
||
if (this.verify()) {
|
||
if (this.isSub) return;
|
||
this.isSub = true;
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '您的账号余额将转让他人账号!',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
_this.$api.sendRequest({
|
||
url: '/api/memberwithdraw/balanceTransfer',
|
||
data: {
|
||
username: _this.username,
|
||
apply_money: _this.withdrawMoney,
|
||
password: _this.buy_password,
|
||
},
|
||
success: res => {
|
||
if (res.code >= 0) {
|
||
_this.$util.showToast({
|
||
title: '转账成功'
|
||
});
|
||
setTimeout(() => {
|
||
_this.$util.redirectTo('/pages_tool/member/balance', {}, 'redirectTo');
|
||
}, 1500);
|
||
} else {
|
||
_this.isSub = false;
|
||
if (res.code == -801) {
|
||
uni.showModal({
|
||
title: '温馨提示',
|
||
content: '您未设置支付密码，需设置支付密码后进行转账，点击确定前往支付密码设置',
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
_this.$util.redirectTo('/pages_tool/member/info_edit', {action: 'pay_password'}, '');
|
||
} else if (res.cancel) {
|
||
_this.isSub = false;
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
_this.$util.showToast({
|
||
title: res.data || res.message
|
||
});
|
||
}
|
||
}
|
||
},
|
||
fail: res => {
|
||
_this.isSub = false;
|
||
}
|
||
});
|
||
}
|
||
else if (res.cancel) {
|
||
_this.isSub = false;
|
||
console.log('用户点击取消');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
},
|
||
filters: {
|
||
/**
|
||
* 金额格式化输出
|
||
* @param {Object} money
|
||
*/
|
||
moneyFormat(money) {
|
||
return parseFloat(money).toFixed(2);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: #fff;
|
||
}
|
||
|
||
.empty-box {
|
||
height: 20rpx;
|
||
}
|
||
|
||
.bank-account-wrap {
|
||
margin: 0 20rpx;
|
||
padding: 20rpx 30rpx;
|
||
border-bottom: 1px solid #f7f7f7;
|
||
position: relative;
|
||
|
||
.tx-wrap {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-right: 60rpx;
|
||
|
||
.tx-bank {
|
||
margin-right: 60rpx;
|
||
flex: 1;
|
||
margin-left: 10rpx;
|
||
text-align: right;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.tx-img {
|
||
position: absolute;
|
||
right: 100rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.iconfont {
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
|
||
.withdraw-wrap {
|
||
margin: 0 20rpx;
|
||
padding: 30rpx;
|
||
border-radius: 16rpx;
|
||
box-shadow: rgba(110, 110, 110, 0.09) 0 0 20rpx 0;
|
||
.money-wrap {
|
||
padding: 20rpx 0;
|
||
border-bottom: 1px solid #eee;
|
||
display: flex;
|
||
.unit {
|
||
font-size: 60rpx;
|
||
line-height: 1;
|
||
}
|
||
.withdraw-money {
|
||
height: 60rpx;
|
||
line-height: 1;
|
||
min-height: 60rpx;
|
||
padding-left: 20rpx;
|
||
font-size: 60rpx;
|
||
flex: 1;
|
||
font-weight: bolder;
|
||
}
|
||
.delete {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
.bootom {
|
||
display: flex;
|
||
padding-top: 20rpx;
|
||
text {
|
||
line-height: 1;
|
||
flex: 2;
|
||
}
|
||
.all-tx {
|
||
padding-left: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn {
|
||
margin: 0 30rpx;
|
||
margin-top: 60rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: $border-radius;
|
||
color: #fff;
|
||
text-align: center;
|
||
background-color: var(--main-color);
|
||
&.disabled {
|
||
background: #ccc;
|
||
border-color: #ccc;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.recoend {
|
||
margin-top: 40rpx;
|
||
|
||
.recoend-con {
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.desc {
|
||
font-size: $font-size-tag;
|
||
color: #999;
|
||
}
|
||
</style>
|