xingmingyi_applet/pages/user/funManage/fundCash.vue

<template>
	<view class="container">
		<picker @change="bindPickerChange" v-if="!rspData.state" :value="payIndex" :range="payList">
			<view class="header">
				<template v-if="payName">
					<image src="/static/img/pro/usme1.png" />
					<view class="header-info">
						<view class="type">{{ payName }}</view>
						<view class="acount">账号为{{ payName == '支付宝' ? zfb.alipay_num : bank.bank_num }}</view>
					</view>
				</template>
				<view class="header-info" v-if="!payName"><view class="type">请选择提现方式</view></view>
				<view class="yticon icon-you"></view>
			</view>
		</picker>
		<navigator url="/pages/user/funManage/bindMethods" class="header" v-if="rspData.state">
			<view class="header-info"><view class="type">请先绑定收款信息</view></view>
			<view class="yticon icon-you"></view>
		</navigator>
		<view class="centers">
			<view class="center-title">提现金额</view>
			<view class="center-input">
				<view class="center-icon">¥</view>
				<input type="number" placeholder-style="font-size:32rpx" v-model="num" placeholder="请输入提现金额" />
				<text @click="num = userInfo.userInfo.money" class="prosecond fontmid">全部提现</text>
			</view>
			<view class="tips">账户余额{{ userInfo.userInfo.money || '0.00' }}元,</view>
		</view>
		<view class="mt30 fontmid red">你将提现的金额为：</view>
		<view class="fontmid red">提现24小时内到账，公司会在9:00-17:00集中处理提现， 申请后请耐心等待</view>
		<navigator url="/pages/user/funManage/list?type=1" class="mt30 fontmid prosecond">提现记录></navigator>
		<u-button color="#ED742F" shape="circle" class="custom-style" @click="submitClickEvent">提现</u-button>
		<!-- <payPassWord ref="pwdKeyboard" @onConfirm="confirmEvent"></payPassWord>
		<ylx-modal ref="ylxModel" title="提示" @onConfirm="navTo('/pages/wallet/bind-colletMoney')" text="请先设置收款信息"></ylx-modal> -->
	</view>
</template>

<script>
import payPassWord from '@/components/pay-password-keyboard/pay-password-keyboard.vue';
import { mapState, mapActions } from 'vuex';
export default {
	computed: {
		...mapState({ userInfo: state => state.userInfo })
	},
	components: {
		payPassWord
	},
	data() {
		return {
			id: 0,
			total: '0.00',
			num: '',
			selCash: {},
			rspData: {},
			payList: [],
			payIndex: '',
			zfb: {},
			bank: {},
			payName: ''
		};
	},
	onLoad(opt) {
		this.total = opt.total || 0.0;
	},

	onShow() {
		console.log(this.selCash);
		this.getList();
	},

	methods: {
		getList() {
			this.$api.request(`/user_pay/payList`).then(res => {
				if (res.code == '200') {
					this.rspData.list = res.data;
					let arr = res.data;
					this.payList = [];
					arr.forEach(item => {
						if (item.alipay_num) {
							this.payList.push('支付宝');
							this.zfb = item;
						} else {
							this.payList.push('银行卡');
							this.bank = item;
						}
					});
					this.rspData.state = false;
					if (res.data.length < 1) {
						this.rspData.state = true;
					}
					console.log(this.rspData.state);
				}
			});
		},
		bindPickerChange(e) {
			let index = e.target.value;
			this.payIndex = index;
			this.payName = this.payList[index];
		},
		submitClickEvent() {
			console.log(12);
			if (this.num <= 0) {
				this.$api.toast('请输入提现金额！');
				return;
			} else if (Number(this.userInfo.userInfo.money) < Number(this.num)) {
				this.$api.toast('可提现金额不足！');
				return;
			}
			if (!this.payName) return this.$api.toast('请选择提现方式！');

			this.confirmEvent();
			// this.$refs['pwdKeyboard'].open();
		},

		async confirmEvent(psd) {
			console.log(1);
			// let psdword = await this.$api.request(`/api/users/checkMd`, {
			// 	passmd: psd
			// });
			// if (psdword.code == 200) {
			this.$api
				.request(`/withdrawal/cashUp`, {
					pay_id: this.payName == '支付宝' ? this.zfb.id : this.bank.id,
					money: this.num
				})
				.then(res => {
					// this.$refs.pwdKeyboard.pwd = '';
					// this.$refs['pwdKeyboard'].close();
					this.$api.toast(res.msg);
					if (res.code == '200') {
						setTimeout(res => {
							uni.navigateTo({
								url: '/pages/user/funManage/list?type=1'
							});
						}, 800);
					}
				});
			// } else {
			// 	this.$refs.pwdKeyboard.pwd = '';
			// 	this.$api.toast(psdword.msg);
			// }
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
page {
	background-color: #f7f7f7;
}
.custom-style {
	background: #ed742e;
	width: 690rpx;
	margintop: 600rpx;
	color: #fff;
	margin-top: 40rpx;
}
.container {
	background-color: #f7f7f7;
	padding: 20rpx 30rpx;
	// width: 100%;
	// height: auto;
	// display: flex;
	// flex-direction: column;
	// align-items: center;
}

.header {
	height: auto;
	background-color: #ffffff;
	padding: 30rpx 30rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	border-radius: 16rpx;
	image {
		width: 72rpx;
		height: 72rpx;
		margin-right: 30rpx;
	}

	.header-info {
		margin: 0 80rpx;
		flex: 1;
		display: flex;
		flex-direction: column;

		.type {
			font-size: 32rpx;
			color: #333333;
		}

		.acount {
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #999999;
		}

		.mui-icon-arrowright {
			color: #999999;
		}
	}

	.icon-you {
		color: #999999;
	}
}

.centers {
	height: auto;
	background-color: #ffffff;
	padding: 30rpx;
	margin-top: 20rpx;
	border-radius: 16rpx;

	.center-title {
		font-size: 28rpx;
	}

	.center-input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 20rpx 0;

		.center-icon {
			font-size: 68rpx;
			font-weight: 600;
			margin-right: 10rpx;
		}

		input {
			font-size: 64rpx;
			font-weight: 600;
			flex: 1;
		}
	}

	.tips {
		font-size: 28rpx;
		color: #9d9d9d;
		margin-top: 20rpx;
	}
}

.code-item {
	width: 100%;
	height: auto;
	background-color: #ffffff;
	padding: 30rpx;
	margin-top: 20rpx;
	display: flex;
	flex-direction: row;
	align-items: center;

	input {
		font-size: 32rpx;
		flex: 1;
	}

	.code-btn {
		font-size: 28rpx;
		color: #c82226;
	}

	.left {
		font-size: 28rpx;
		color: #333333;
		flex: 1;
	}

	.right {
		font-size: 28rpx;
		color: #333333;
	}
}
</style>