<script setup>
	// 添加银行卡
	import {
		reactive
	} from 'vue';
	import getCode from '@/components/getCode/getCode'

	// 银行卡列表
	const bankList = reactive([
		{
			name: '银行卡1',
		},
		{
			name: '银行卡2',
		},
		{
			name: '银行卡3',
		},
	])
</script>

<template>
	<view class="appbw">
		<!-- 表单 -->
		<view class="form mtb30 mlr40">

			<view class="line">
				<view class="title">银行卡类型</view>
				<view class="inputBox">
					<picker :range="bankList" range-key="name">
						<view class="rows">
							<input class="input" disabled type="text" placeholder="请选择银行卡类型" />
							<uni-icons type="bottom" />
						</view>
					</picker>
				</view>
			</view>

			<view class="line">
				<view class="title">银行卡卡号</view>
				<view class="inputBox">
					<input class="input" type="text" placeholder="请输入银行卡卡号" />
				</view>
			</view>

			<view class="line">
				<view class="title">姓名</view>
				<view class="inputBox">
					<input class="input" type="text" placeholder="请输入姓名" />
				</view>
			</view>

			<view class="line">
				<view class="title">身份证号</view>
				<view class="inputBox">
					<input class="input" type="text" placeholder="请输入身份证号" />
				</view>
			</view>

			<view class="line">
				<view class="title">手机号（银行绑定的手机号）</view>
				<view class="inputBox rows">
					<input class="input" type="text" placeholder="请输入手机号" />

					<view class="getCode btn black plr30">
						<getCode />
					</view>
				</view>
			</view>

			<view class="line">
				<view class="title">验证码</view>
				<view class="inputBox">
					<input class="input" type="text" placeholder="请输入验证码" />
				</view>
			</view>

			<view class="btn lg black mt50">绑定</view>
		</view>

		<view class="fill"></view>
	</view>
</template>

<style lang="scss" scoped>
	// 图表
	.form {

		// 
		.line {
			margin: 30rpx 0;

			// 
			.title {
				color: #111;
				font-size: 32rpx;
			}

			// 
			.inputBox {
				margin-top: 15rpx;
				padding: 10rpx 30rpx;
			}
		}
	}
</style>