uniapp微信小程序开发 结合uview实现绑定银行卡ui，包含接口请求

<template>
	<view class="flex-col page">
		<view class="flex-col group_5">
			<view class="flex-col group_6">
				<view class="flex-col group_7">
					<view class="top-section flex-row view">
						<text class="text_6">真实姓名：</text>
						<input type="text_7" placeholder="请输入您真实姓名" v-model="realname" />
					</view>
					<view class="top-section flex-row">
						<text class="text_9">开户银行：</text>
						<input type="text_7" placeholder="请输入开户行名称" v-model="bankname" />
					</view>
					<view class="top-section flex-row">
						<text class="text_11">银行账号：</text>
						<input type="text_7" placeholder="请输入银行卡账号" v-model="bankaccount" />
					</view>
				</view>
				<view @click="dobind" class="flex-col items-center button">
					<text>立刻绑定</text>
				</view>
			</view>
			<view class="flex-row section_1">
				<div class="infos">
					<u-icon name="star-fill" color="red"></u-icon>
					<text class="text_14">请认真填写资料，绑定成功后，如需更换请联系客服</text>
				</div>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		dobind
	} from '../../config/api.js'
	export default {
		data() {
			return {
				realname: '',
				bankname: '',
				bankaccount: '',
			};
		},
		methods: {
			dobind() {
				var that = this;
				if (!that.realname) {
					uni.showToast({
						title: '请输入真实姓名'
					})
					return
				}
				if (!that.bankname) {
					uni.showToast({
						title: '请输入开户行名称'
					})
					return
				}
				if (!that.bankaccount) {
					uni.showToast({
						title: '请输入银行卡账号'
					})
					return
				}
				dobind({
					realname: that.realname,
					bankname: that.bankname,
					bankaccount: that.bankaccount,
				}, {
					custom: {
						auth: true
					}
				}).then(res => {
					if (res.code == 1) {
						this.$refs.uToast.show({
							type: 'success',
							title: '提示',
							message: "添加成功",
							complete() {
								uni.navigateBack({})
							}
						})
					}
				}).catch(err => {

				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: rgb(255, 255, 255);
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.group_5 {
			flex: 1 1 auto;
			overflow-y: auto;

			.group_6 {
				padding: 0 22rpx 51rpx 23rpx;

				.group_7 {
					padding: 36rpx 0;

					.top-section {
						margin-top: 14rpx;
						padding: 30rpx 9rpx;
						border-radius: 10rpx;
						border: solid 2rpx rgb(242, 242, 242);
						display: flex;
						justify-content: flex-start;
						align-items: center;
						flex-wrap: nowrap;
						flex-direction: row;

						input {
							margin-left: 45rpx;
							color: rgb(185, 185, 185);
							font-size: 24rpx;
							line-height: 23rpx;
							white-space: nowrap;
							font-size: 26rpx;
							color: #000;
						}

						.text_6 {
							color: rgb(36, 35, 35);
							font-size: 26rpx;
							line-height: 25rpx;
							white-space: nowrap;
						}


						.text_9 {
							color: rgb(36, 35, 35);
							font-size: 26rpx;
							line-height: 24rpx;
							white-space: nowrap;
						}

						.text_11 {
							color: rgb(36, 35, 35);
							font-size: 26rpx;
							line-height: 25rpx;
							white-space: nowrap;
						}
					}

					.view {
						margin-top: 0;
					}
				}

				.button {
					margin: 41rpx 27rpx 0 26rpx;
					padding: 29rpx 0 30rpx;
					color: rgb(255, 255, 255);
					font-size: 30rpx;
					line-height: 29rpx;
					white-space: nowrap;
					background-color: rgb(255, 176, 0);
					border-radius: 15rpx;
				}
			}

			.section_1 {
				padding: 40rpx 33rpx 600rpx;
				color: rgb(172, 170, 170);
				font-size: 24rpx;
				line-height: 24rpx;
				white-space: nowrap;
				background-color: rgb(242, 242, 242);

				.image_6 {
					width: 27rpx;
					height: 25rpx;
				}
			}
		}
	}

	.infos {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;

		.text_14 {
			margin-left: 12rpx;
		}
	}
</style>