wangluohuoyun-huozhuapp/pages/mine/myAccount/withdrawal.vue

<template>
	<view class="center">
		<view class="formData">
			<view class="formData_top">
				<view class="flex row">
					<view class="left-text">提现金额</view>
					<view class="flex right-text">
						<u--input placeholder="输入提现金额" inputAlign='right' border="none" clearable
							v-model="formInfo.amountMoney" type="number">
						</u--input>
					</view>
				</view>
				<view class="tips flex">
					
					<view style="width: 60%;">
						<span class="qian">￥</span>
						可提现{{usableMoney}}元
					</view>
					<view style="color: #007AFF;text-align: right;width: 40%;margin-top: 30rpx;" @click="writeIn">全部提现</view>
				</view>
			</view>
			<view class="formData_bottom">
				<view class="flex row">
				<view class="left-text">提现到银行卡</view>
				<view class="flex right-text" @click="bankChange">
					{{formInfo.bankDeposit?formInfo.bankDeposit:"请选择收款账户"}} {{bankNo}}
					<image src="../../../static/images/myimg/gengduo1@3x.png" mode=""
						style="width: 20rpx;height: 30rpx;top: 10rpx;margin-left: 10rpx;"></image>
				</view>
			</view>
			<view class="flex row">
				<view class="left-text">开户行</view>
				<view class="flex right-text">
					<u--input placeholder="自动获取" inputAlign='right' border="none" clearable
						v-model="formInfo.bankDeposit">
					</u--input>
				</view>
			</view>
			<view class="flex row">
				<view class="left-text">开户支行</view>
				<view class="flex right-text">
					<u--input placeholder="自动获取" inputAlign='right' border="none" clearable
						v-model="formInfo.bankDepositBranch">
					</u--input>
				</view>
			</view>
			<view class="flex row ">
				<view class="left-text">账号</view>
				<view class="flex right-text">
					<u--input placeholder="自动获取" inputAlign='right' border="none" clearable v-model="formInfo.bankCard">
					</u--input>
				</view>
			</view>
			<view class="flex row">
				<view class="left-text">收款方</view>
				<view class="flex right-text">
					<u--input placeholder="自动获取" inputAlign='right' border="none" clearable
						v-model="formInfo.payeeName">
					</u--input>
				</view>
			</view>
			</view>

			
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="isShowAlert" :title="alertTitle" :content='alertContent' :closeOnClickOverlay='true'
			:showCancelButton='showCancelButton' confirmColor='#F5BA3C' @confirm="$u.throttle(confirmClick(), 1000)" @close="cancelClick"
			@cancel="cancelClick"></u-modal>
			<view @click="$u.throttle(submit, 1000)" class='newlyIncreased'>提交</view>
		<!-- <u-button type="primary" text="提交" @click="submit" class="btn_css"></u-button> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				formInfo: {},
				bankNo: "",
				flag: "", //1个人2公司
				id: "",
				usableMoney: 0, //可提现的
				isShowAlert: false,
				alertTitle: "",
				alertContent: "",
				showCancelButton: true,
				enterprise:""//企业名称
			}
		},
		onLoad(options) {
			this.flag = options.flag
			this.id = options.id
			this.getList()
		},
		onShow() {
			if (uni.getStorageSync("bankInfo")) {
				let obj = uni.getStorageSync("bankInfo")
				this.formInfo.bankDeposit = obj.bankDeposit
				this.formInfo.bankDepositBranch = obj.bankDepositBranch
				this.formInfo.bankCard = obj.bankCard
				this.formInfo.payeeName = obj.cardholderName
				this.bankNo = obj.bankCard.substring(obj.bankCard.length - 4)
			} else {
				this.defaultBank()
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		methods: {
			defaultBank() { //查询默认银行卡
				this.$request.baseRequest('get', '/hyCargoOwnerPayeeInfo/getPayee', {
					commonId: this.userInfo.id
				}).then(res => {
					if (res.data) {
						this.formInfo.bankDeposit = res.data.bankDeposit
						this.formInfo.bankDepositBranch = res.data.bankDepositBranch
						this.formInfo.bankCard = res.data.bankCard
						this.formInfo.payeeName = res.data.cardholderName
						this.bankNo = res.data.bankCard.substring(res.data.bankCard.length - 4)
					}
					this.$forceUpdate()
				})
			},
			bankChange() { //选择银行卡
				uni.$u.route("/pages/mine/myAccount/bankList?enterprise=" + this.enterprise)
			},
			getList() {
				this.$request.baseRequest('get', '/cargoOwnerInfo/selectAccountBalance', {
					id: this.id,
					flag: this.flag
				}).then(res => {
					if(res.data){
						this.usableMoney = Number(res.data.accountBalance)
						this.enterprise = res.data.companyName
					}
					
				})
			},
			writeIn() {
				this.formInfo.amountMoney = this.usableMoney
				this.$forceUpdate()
			},
			validate() {
				if (uni.$u.test.isEmpty(this.formInfo.amountMoney)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "提现金额不能为空！",
					})
					return true
				}
				if (this.formInfo.amountMoney <= 0) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请输入提现金额！",
					})
					return true
				}
				if (Number(this.usableMoney) < Number(this.formInfo.amountMoney)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "提现金额超出可用余额！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.formInfo.bankDeposit)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "收款开户行不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.formInfo.bankDepositBranch)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "收款开户支行不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.formInfo.bankCard)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "收款卡号不能为空！",
					})
					return true
				}
				if (uni.$u.test.isEmpty(this.formInfo.payeeName)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "收款人姓名不能为空！",
					})
					return true
				}
			},
			cancelClick() {
				this.isShowAlert = false
			},
			submit() {
				if (this.validate()) return
				this.formInfo.flag = this.flag //个人1   企业2
				this.isShowAlert = true
				this.alertTitle = "确定提现？"

			},
			confirmClick() {
				if (this.flag == 1) {
					this.formInfo.commonId = this.userInfo.id //用户id
					this.formInfo.accountId = this.id //个人  个人信息id
				} else if (this.flag == 2) {
					this.formInfo.companyId = this.id //公司id
					this.formInfo.accountId = this.id //公司id
				}
				this.$request.baseRequest('post', '/hyCargoOwnerCapitalInfo/api/withdrawal', this.formInfo).then(res => {
					if (res.code == 200) {
						this.isShowAlert = false
						this.$refs.uToast.show({
							type: 'success',
							message: "提现成功！",
							complete() {
								uni.navigateBack({
									delta: 1
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.center {
		padding: 20rpx;
		background: #F5F6FA;
		height: calc(100vh - 9.9vh);

		.btn_css{
			margin-top: 45rpx;
		}
		.formData {
			.formData_top {
				background: #ffffff;
				height: 200rpx;
				padding: 10rpx 30rpx;
				border-radius: 20rpx;

				.tips {
					width: 100%;
					height: 60rpx;
					color: #C6CBD5 ;
					.qian {
						font-size: 62rpx;
						color: #333333 ;
					}
				}
			}
			.formData_bottom{
					background: #ffffff;
					padding: 10rpx 30rpx;
					border-radius: 20rpx;
					margin-top: 20rpx;
			}


			.row {
				margin: 30rpx 0;
			}

			.left-text {
				// background: red;
				width: 40%;
				color: #333333;
				display: flex;
				align-items: center;
			}

			.right-text {
				width: 60%;
				justify-content: flex-end;
			}
		}

	}
	.newlyIncreased {
		width: 100%;
		height: 80rpx;
		margin: 20px auto;
		text-align: center;
		color: #fff;
		background: #F5BA3C;
		background-size: 100%;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>