xiaochengxu/pages/TiXian/TiXian.vue

<template>
	<view class="main">
		<u-navbar
			title="提现"
			:safeAreaInsetTop="true"
			:fixed="true"
			bgColor="#FFFFFF"
			:placeholder="true"
			@leftClick="onBackTouched"
		/>
		<view class="top">
			<text class="text_28_unbold">到账银行卡</text>
			<view class="bank_box">
				<image v-if="pageData.banklogo != ''" class="bank_icon" :src="pageData.banklogo" />
				<text class="bank_text">{{onPlusXingOfBankInfo()}}</text>
				<text class="bank_info" style="left: 24rpx;top: 114rpx;">预计两小时到账</text>
			</view>
		</view>
		<view class="center">
			<text class="text_28_unbold" style="left: 0rpx;top: 30rpx;position: absolute;">提现金额</text>
			<text class="money_big" style="position: absolute;left: 24rpx;bottom: 100rpx;">￥</text>
			<input :adjust-position="true"
					type="digit"
					value=""
					placeholder="0.00"
					@blur="onInputEnd"
					class="input_money"
			></input>
			<view style="width: 662rpx;height: 1rpx;border: 1rpx solid #E2E2E2;position: absolute;left: 24rpx;bottom: 90rpx;" />
			<text class="bank_info" style="left: 24rpx;bottom: 38rpx;">
				{{getMaxmonenyInfoText()}}
			</text>
		</view>
		<button class="button" @click="onConfirmTiXian">提现</button>
		<u-modal :show="isShowPopup" title="提示" 
				:content="content" 
				:closeOnClickOverlay="true" 
				:showCancelButton="true"
				@confirm="onPopConfirm"
				@cancel="onPopCancel"
				@close="onPopCancel"
				/>
	</view>
</template>

<script>
	import {post} from '@/common/api.js'
	var pageData = {
		///银行logo地址
		banklogo : '',
		///银行名字
		bankname : '',
		///银行卡号
		bankno	: '',
		///可以提现得金额
		maxmoneny	: 0,
	};
	var Define = getApp().globalData.Define;
	export default {
		onLoad() {
			//进来的时候直接先初始化啊
			var self = this;
			post('users/getwithdrawalinfo',{}).then(res=>{
				var info = Define.onNetMessage(res);
				if(!info){
					return;
				}
				self.pageData = info;
				console.log('获取到提现信息：',info)
			});
		},
		data() {
			return {
				pageData,
				///需要提现的数量
				txNumber : 0,
				///是否显示弹出框
				isShowPopup : false,
				///显示在弹出框中的内容
				content : '',
			};
		},
		methods:{
			/**
			 * 点击了导航上的返回按钮
			 */
			onBackTouched(){
				uni.navigateBack({
					
				});
			},
			/**
			 * @param {Object} obj 输入框失去焦点
			 */
			onInputEnd(obj){
				//console.log();
				var xd = Number(obj.detail.value);
				if(!xd){
					uni.$u.toast('请输入数字');
					return;
				}
				this.txNumber = xd;
			},
			
			async onPopConfirm(){
				this.isShowPopup 	= false;
				var xd				= this.txNumber * 100;
				var data			= {
					score : xd
				};
				uni.showLoading({
					
				})
				var res = await post('users/applywithdrawal',data);
				uni.hideLoading();
				var info	= Define.onNetMessage(res);
				console.log("提现请求返回：",info);
				uni.$u.toast("提现成功，请等待工作人员审核");
				this.txNumber			= 0;
				this.pageData.maxmoneny -= xd;
				//设置刷新，提现会导致钱包界面的数据有增加，返回以后需要从新获取数据
				getApp().globalData.isNeedRefreshWallet = true;
			},
			onPopCancel(){
				this.isShowPopup 	= false;
				this.txNumber		= 0;
			},
			/**
			 * 把银行信息隐藏了以后传递回去
			 */
			onPlusXingOfBankInfo(){
				var bankname 	= this.pageData.bankname;
				var bankno		= this.pageData.bankno;
				if(bankname == '' || bankno == ''){
					return '没有银行卡信息';
				}
				var len			= bankno.length;
				var showLen		= 8;
				bankno			= bankno.substr(len-8,8);
				bankno			= this.$utils.plusXing(bankno,0,4);
				return " (" + bankno+")";//bankname + 
			},
			///获取可提现金额的文字描述
			getMaxmonenyInfoText(){
				return "可提现金额 ￥" + this.$utils.formatMoney(this.pageData.maxmoneny / 100); 
			},
			///开始提现
			onConfirmTiXian(){
				var xd	= this.txNumber;
				xd		= xd * 100;
				if(xd > this.pageData.maxmoneny){
					uni.$u.toast('可用金额不足');
					this.txNumber = 0;
					return;
				}
				
				this.content		= "确认提现[￥"+this.txNumber+"]吗？";
				this.isShowPopup	= true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.top{
		width: 750rpx;
		height: 202rpx;
		//background-color: #1CBBB4;
		border-radius: 20rpx;
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.text_28_unbold{
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		opacity: 1;
		margin-left: 24rpx;
	}
	
	.bank_box{
		width: 550rpx;
		height: 202rpx;
		//background-color: #2979FF;
		border-radius: 20rpx;
		margin-right: 24rpx;
		position: relative;
	}
	.bank_text{
		height: 42rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
		opacity: 1;
		position: absolute;
		left: 150rpx;
		top: 64rpx;
	}
	.bank_info{
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
		color: #999999;
		opacity: 1;
		position: absolute;
	}
	.bank_icon{
		width: 126rpx;
		height: 36rpx;
		position: absolute;
		left: 24rpx;
		top: 69rpx;
	}
	
	.center{
		width: 702rpx;
		height: 360rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		position: relative;
		left: 24rpx;
		top: 20rpx;
	}
	.money_big{
		height: 92rpx;
		font-size: 66rpx;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}
	.input_money{
		position: absolute;left: 85rpx;
		bottom: 100rpx;
		width: 590rpx;
		height: 92rpx;
		font-size: 66rpx;
		font-weight: bold;
		color: #333333;
	}
	.button{
		position: relative;
		
		top: 50rpx;
		width: 702rpx;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 93rpx;
		background: #D49B4B;
		font-size: 36rpx;
		color: #FFFFFF;
		font-weight: 400;
	}
</style>