frontend-app/pages/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 '@/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_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>