sdjk-h5/src/views/drawByBank/index.vue

<template>
	<div style="background: #f5f5f5">
		<m-nav-bar  title="银行卡提现"  style="color: #333;background:#fff;" />
		<div class="rect1"></div>
		<van-form @submit="onSubmit" ref="drawByBank" class="custom-from">
			<van-cell-group inset>
				<van-field v-model="form.encTrueName" name="提现户名" label="提现户名" placeholder="提现户名" :rules="[{ required: true, message: '请填写提现户名' }]" />
				<van-field v-model="form.encBankNo" type="number" name="提现至账户" label="提现至账户" placeholder="提现至账户" :rules="[{ required: true, message: '请填写提现至账户' }]" />
				<van-field
					@click="
						() => {
							bankVisible = true;
						}
					"
					readonly
					is-link
					v-model="form.bankName"
					type="text"
					name="银行"
					label="银行"
					placeholder="银行"
					:rules="[{ required: true, message: '请选择银行' }]" />
			</van-cell-group>
			<van-popup v-model:show="bankVisible">
				<van-picker
					:columns-field-names="{
						text: 'bankName',
						value: 'bankCode',
					}"
					@confirm="selectBank"
					@cancel="
						() => {
							bankVisible = false;
						}
					"
					title="选择银行"
					:columns="wxBankList" />
			</van-popup>

			<div class="rect1"></div>
			<div class="money">
				<div class="header">提现金额</div>
				<div class="mid"><span>¥</span> 
                <!-- <input v-model="form.amount" class="money-input" type="text" /> -->
                <van-field style="font-size:25px;" :rules="[{ required: true, message: '请填写金额' }]" v-model="form.amount" type="number" />
                </div>
				<div class="bottom">
					<span>（可提现余额{{ profitPrice }}元）</span>
					<span
						style="color: #498ef5"
						@click="
							() => {
								form.amount = profitPrice;
							}
						"
						class=""
						>全部提现</span
					>
				</div>
			</div>
			<div style="margin: 16px">
				<van-button round block type="primary" native-type="primary"> 提交 </van-button>
			</div>
		</van-form>
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import type { FormInstance } from "vant";
import { useProfitPrice } from "@/hooks/user";
import { cashOut } from "@/api";
import { Dialog } from "vant";
import { useRouter } from "vue-router";
import { useWxBank } from "@/hooks/bank/wxBank"

const query = useRouter().currentRoute.value.query
const drawByBank = ref<FormInstance>();

const { profitPrice } = useProfitPrice();
const bankVisible = ref(false);
const { wxBankList,getBankNameByCode } = useWxBank()
// const wxBankList = reactive([
// 	{ bankName: "工商银行", bankCode: 1002 },
// 	{ bankName: "农业银行", bankCode: 1005 },
// 	{ bankName: "建设银行", bankCode: 1003 },
// 	{ bankName: "中国银行", bankCode: 1026 },
// 	{ bankName: "交通银行", bankCode: 1020 },
// 	{ bankName: "招商银行", bankCode: 1001 },
// 	{ bankName: "邮储银行", bankCode: 1066 },
// 	{ bankName: "民生银行", bankCode: 1006 },
// 	{ bankName: "平安银行", bankCode: 1010 },
// 	{ bankName: "中信银行", bankCode: 1021 },
// 	{ bankName: "浦发银行", bankCode: 1004 },
// 	{ bankName: "兴业银行", bankCode: 1009 },
// 	{ bankName: "光大银行", bankCode: 1022 },
// 	{ bankName: "广发银行", bankCode: 1027 },
// 	{ bankName: "华夏银行", bankCode: 1025 },
// 	{ bankName: "宁波银行", bankCode: 1056 },
// 	{ bankName: "北京银行", bankCode: 4836 },
// 	{ bankName: "上海银行", bankCode: 1024 },
// 	{ bankName: "南京银行", bankCode: 1054 },
// 	{ bankName: "长子县融汇村镇银行", bankCode: 475 },
// 	{ bankName: "长沙银行", bankCode: 4216 },
// 	{ bankName: "浙江泰隆商业银行", bankCode: 4051 },
// 	{ bankName: "中原银行", bankCode: 4753 },
// 	{ bankName: "企业银行（中国）", bankCode: 4761 },
// 	{ bankName: "顺德农商银行", bankCode: 4036 },
// 	{ bankName: "衡水银行", bankCode: 4752 },
// 	{ bankName: "长治银行", bankCode: 4756 },
// 	{ bankName: "大同银行", bankCode: 4767 },
// 	{ bankName: "河南省农村信用社", bankCode: 4115 },
// 	{ bankName: "宁夏黄河农村商业银行", bankCode: 4150 },
// 	{ bankName: "山西省农村信用社", bankCode: 4156 },
// 	{ bankName: "安徽省农村信用社", bankCode: 4166 },
// 	{ bankName: "甘肃省农村信用社", bankCode: 4157 },
// 	{ bankName: "天津农村商业银行", bankCode: 4153 },
// 	{ bankName: "广西壮族自治区农村信用社", bankCode: 4113 },
// 	{ bankName: "陕西省农村信用社", bankCode: 4108 },
// 	{ bankName: "深圳农村商业银行", bankCode: 4076 },
// 	{ bankName: "宁波鄞州农村商业银行", bankCode: 4052 },
// 	{ bankName: "浙江省农村信用社联合社", bankCode: 4764 },
// 	{ bankName: "江苏省农村信用社联合社", bankCode: 4217 },
// 	{ bankName: "江苏紫金农村商业银行股份有限公司", bankCode: 4072 },
// 	{ bankName: "北京中关村银行股份有限公司", bankCode: 4769 },
// 	{ bankName: "星展银行（中国）有限公司", bankCode: 4778 },
// 	{ bankName: "枣庄银行股份有限公司", bankCode: 4766 },
// 	{ bankName: "海口联合农村商业银行股份有限公司", bankCode: 4758 },
// 	{ bankName: "南洋商业银行（中国）有限公司", bankCode: 4763 },
// ]);
const form = reactive({
	encTrueName: "",
	encBankNo: "",
	bankName: "",
	bankCode: 0,
	amount: 0,
});
const selectBank = (item: any) => {
	form.bankCode = item.bankCode;
	form.bankName = item.bankName;
	bankVisible.value = false;
};
onMounted(()=>{
	if(query.encTrueName&&query.bankCode&&query.encBankNo){
		form.encTrueName = query.encTrueName as string
        form.bankCode = Number(query.bankCode) 
        form.encBankNo = query.encBankNo as string
        form.bankName = getBankNameByCode(form.bankCode)

	}

})
const onSubmit = () => {
	// drawByBank.drawByBank
	let submitForm = {
		...form,
	};
    submitForm.amount = Number(submitForm.amount) * 100;
	// console.log(drawByBank,"drawByBank")
	drawByBank.value.validate(["encTrueName", "encBankNo", "bankCode","amount"]).then(() => {
		cashOut.studentWxExtractWxwithbankdrawal(submitForm).then((res) => {
			if (res.data.code == 200) {
				Dialog({ title: "成功", message: "提现成功,1到3个工作日到账" });
			} else {
				Dialog({ title: "失败", message: "提现失败,请检查输入的值" });
			}
		});
	});
	
};
</script>

<style lang="scss" scoped>
.rect1 {
	width: 100%;
	height: 13px;
	background: #f5f5f5;
}
.custom-from {
	:deep .van-cell-group {
		margin: 0;
	}
}
.money {
	width: 100%;
	height: 152px;
	background: #fff;
	padding: 0px 15px;

	.header {
		font-size: 13px;

		height: 44px;
		line-height: 44px;
		border-bottom: 1px solid #e8e8e8;
	}
	.mid {
		height: 64px;
		display: flex;
		align-content: center;
		align-items: center;
		.money-input {
			border: 0;
			width: 250px;
		}
	}
	.bottom {
		border-top: 1px solid #e8e8e8;
		width: 100%;
		color: #8a9099;
		font-size: 13px;
		display: flex;
		justify-content: space-between;
		align-content: center;
		line-height: 44px;
		align-items: center;
	}
}
</style>