dingdong-master/pages/my/b-account-bind.vue

<template>
	<view v-if="curUserInfo && curUserInfo.status != -1">
		<!-- 顶部操作条 -->
		<cu-custom :bgColor="'bg-main-color'" :isBack="true">
			<block slot="backText">返回</block>
			<!-- <block slot="content"></block> -->
		</cu-custom>
		<view class="margin-lr-sm margin-tb-lg shadow-warp">
			<view class="bg-gray flex justify-start align-center text-xl padding-lr padding-top-xs">
				<view class="padding-lr padding-tb-sm" :class="curAccountType === '1' ? 'curTab' : ''" data-type="1" @click="changAccountType">银行</view>
			</view>
			<view v-if="curAccountType === '1'" class="bg-white padding text-lg">
				<view>
					<view class="margin-bottom-sm">姓名</view>
					<input type="text" placeholder="请输入开户人姓名" placeholder-style="color:#989898" v-model="formData.name">
				</view>
				<view class="margin-top">
					<view class="margin-bottom-sm">证件号码</view>
					<input type="text" placeholder="请输入证件号码" placeholder-style="color:#989898" v-model="formData.certId">
				</view>
				<view class="margin-top">
					<view class="margin-bottom-sm">手机号</view>
					<input type="text" placeholder="请输入手机号" placeholder-style="color:#989898" v-model="formData.phone">
				</view>
				<view class="margin-top">
					<view class="margin-bottom-sm">号码</view>
					<input type="text" placeholder="请输入号码" placeholder-style="color:#989898" v-model="formData.bankNum">
				</view>
			</view>
		</view>
		<!-- 操作按钮 -->
		<view class="margin-lr">
			<button class="cu-btn lg bg-main-color long-btn shadow-blur" @click="submit">提交</button>
		</view>
		<view class="text-red padding">
			工盟互联小程序承诺此账户只用于接收家政服务收益
		</view>
	</view>
</template>

<script>
	import myUniCombox from '@/components/uni-combox/my-uni-combox.vue';
	
	export default {
		components: {
			myUniCombox
		},
		data() {
			return {
				curAccountType: '1',
				provinceList: [],
				cityList: [],
				formData: {
					provinceObj: {},
					cityObj: {}
				},
				curUserInfo: {}
			}
		},
		onLoad(options) {
			this.loadData();
		},
		methods: {
			async loadData() {
				// let res = await this.$request.areaListByStep();
				// this.provinceList = res.data;
				this.curUserInfo = this.$request.getCurUserInfo();
			},
			async chooseRegion(e) {
				let res = await this.$request.areaListByStep({
					parentCode: e.areaCode
				});
				this.cityList = res.data;
				this.formData.cityObj = {}
			},
			changAccountType(e) {
				this.curAccountType = e.currentTarget.dataset.type;
			},
			async submit() {
				if (this.curAccountType === '1') {
					let params = {
						...this.formData,
						workerId: this.curUserInfo.workerId
					}
					let res = await this.$request.bindBankCard(params);
					if (res.code === 0) {
						uni.navigateBack({
							delta: -1
						})
					}
				}
			}
		},
	}
</script>

<style scoped>
	.curTab {
		background-color: #ffffff;
		color: #0081ff;
		border-radius: 15rpx 15rpx 0 0;
	}
</style>