<template>
	<view class="bank_search">
		<view class="title">如何查询开户银行支行？</view>
		<view class="second_title">方法一：登录手机银行APP查询</view>
		<view class="second_title">方法二：拨打银行客服电话查询</view>
		<view class="bank_con">
			<view v-for="item in bankList" :key="item.id">
				<text>{{ item.id }}.</text>
				<text>{{ item.name }},客服电话是</text>
				<text @click="callPhone(item.phone)">{{ item.phone }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			bankList: [
				{ id: 1, name: '工商银行', phone: '95588' },
				{ id: 2, name: '建设银行', phone: '95533' },
				{ id: 3, name: '农业银行', phone: '95599' },
				{ id: 4, name: '邮政储蓄银行', phone: '95580' },
				{ id: 5, name: '中国银行', phone: '95566' },
				{ id: 6, name: '交通银行', phone: '95559' },
				{ id: 7, name: '民生银行', phone: '95568' },
				{ id: 8, name: '光大银行', phone: '95595' },
				{ id: 9, name: '中信银行', phone: '95558' },
				{ id: 10, name: '兴业银行', phone: '95561' },
				{ id: 11, name: '华夏银行', phone: '95577' },
				{ id: 12, name: '平安银行', phone: '95511' },
				{ id: 13, name: '招商银行', phone: '95555' },
				{ id: 14, name: '浦发银行', phone: '95528' },
				{ id: 15, name: '北京银行', phone: '95526' },
				{ id: 16, name: '宁波银行', phone: '95574' },
				{ id: 17, name: '广发银行', phone: '4008-308-003' }
			]
		};
	},
	methods: {
		callPhone(phone) {
			uni.makePhoneCall({
				phoneNumber: phone,
				success: res => {
					console.log(res, '调用成功!');
				},
				// 失败回调
				fail: res => {
					console.log(res, '调用失败!');
					this.callPhone(); //重复调用一次
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.bank_search {
	width: 100%;
	min-height: 100%;
	background: #fff;
	padding: 20rpx 30rpx 40rpx;
	.title {
		font-size: 32rpx;
		font-weight: bold;
		padding: 30rpx 0;
	}
	.second_title {
		font-size: 30rpx;
		font-weight: bold;
		padding: 20rpx 0;
	}
	.bank_con {
		margin-top: 30rpx;
		> view {
			margin-bottom: 40rpx;
			text {
				font-size: 32rpx;
			}
			text:last-child {
				font-size: 40rpx;
				font-weight: bold;
				color: #4185f5;
				margin-left: 10rpx;
			}
		}
	}
}
</style>
