frontend-app/pages/mine_package/mine_bank_add/mine_bank_add.vue

<template>
	<view class="bank_add_warp">
		<view class="add_form">
			<view class="add_bank_form_item" v-for="item in formList" :key="item.id">
				<view class="add_title">{{ item.title }}</view>
				<up-input :placeholder="item.placeholder" border="surround" v-model="form[item.formName]"
					:customStyle="inputCss" :type="item.type"></up-input>
			</view>
			<view class="add_bank_form_item">
				<view class="add_title">银行</view>
				<view class="bank_warp" @click="bankShowCheck(true)">
					<view style="color: #808080;margin-left: 22rpx;font-size: 28rpx;">{{ form.bankName || "选择银行" }}</view>
					<up-image src="/static/common/right_soild.png" width="14" height="14" bgColor="#f1f6ff00"></up-image>
				</view>
			</view>
		</view>
		<view class="add_but" @click="addBank">
			添加
		</view>
		<up-toast ref="uToastRef"></up-toast>
		<up-picker :show="bankShow" :columns="bankOption" keyName="bankName" itemHeight="34" @confirm="bankConfirm"
			:loading="bankLoading" @close="bankShow = false" @cancel="bankShow = false"></up-picker>
	</view>
</template>

<script>
import { bindBank } from '@/pages/mine_package/api/bank.js';
import { getSupportBank } from '@/api/common.js';

export default {
	data() {
		return {
			inputCss: {
				"height": '80rpx',
				"background": "#F5F5F5",
				"border-radius": "30rpx",
				"border": "0rpx",
				"padding-left": "16px",
			},
			form: {
				bankNo: null,//银行卡号
				bankId: null,// 银行ID
				bankName: null,// 银行ID
				bankUsername: null,//银行卡开户姓名
				bankPhone: null,//银行卡预留手机号码
			},
			formList: [
				{
					id: 1,
					title: "银行卡开户姓名",
					formName: "bankUsername",
					placeholder: "请输入银行卡开户姓名",
					type: 'text',
				}, {
					id: 3,
					title: "银行卡预留手机号码",
					formName: "bankPhone",
					placeholder: "请输入银行卡预留手机号码",
					type: 'number',
				}, {
					id: 2,
					title: "银行卡账号/卡号",
					formName: "bankNo",
					placeholder: "请输入账号",
					type: 'number',
				},
			],
			bankOption: [],// 银行列表选择
			bankShow: false,
			bankLoading: false,
		}
	},
	onLoad() {
	},
	methods: {
		// 选择银行的弹框
		async bankShowCheck(status) {
			if (status) {
				const resp = await getSupportBank();
				if (resp && resp.bizcode === 100) {
					this.bankOption = [resp.data];
				}
			} else {
				this.bankOption = [[]];
			}
			this.bankShow = status;
		},
		// 提交地址
		bankConfirm(e) {
			const {
				columnIndex,
				value,
				values,
				index,
			} = e;
			if (!value || value.length === 0) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请先选择银行",
				});
				return;
			}
			const data = value[0];
			this.form.bankId = data.id;
			this.form.bankName = data.bankName;
			this.bankShowCheck(false);
		},
		async addBank() {
			const param = {
				...this.form
			};
			if (!param.bankUsername) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入银行卡开户姓名",
				});
				return;
			}
			if (!param.bankPhone) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入银行卡预留手机号码",
				});
				return;
			}
			if (!param.bankNo) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请输入银行卡账号/卡号",
				});
				return;
			}
			if (!param.bankId) {
				this.$refs.uToastRef.show({
					type: 'error',
					message: "请选择银行",
				});
				return;
			}
			delete param.bankName;
			const resp = await bindBank(param);
			if (resp && resp.bizcode === 100) {
				this.$refs.uToastRef.show({
					type: 'sesses',
					message: "绑定成功",
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/mine_package/mine_bank_card/mine_bank_card',
					})
				}, 2000)
			}
		},

	}
}
</script>

<style lang="scss" scoped>
.bank_add_warp {
	height: calc(100vh - 58rpx);
	background-color: $app-bj;
	padding: 30rpx;
}

.add_form {
	background: #FFFFFF;
	border-radius: 30rpx;
	padding: 30rpx;
}

.add_bank_form_item {
	margin-bottom: 30rpx;

	.add_title {
		font-weight: bold;
		font-size: 32rpx;
		color: #111111;
		margin-bottom: 30rpx;
	}
}

.bank_warp {
	display: flex;
	justify-content: space-between;
	width: 100%;
}
</style>