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

<template>
	<view>
		<!-- 顶部操作条 -->
		<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 === '0' ? 'curTab' : ''" data-type="0" @click="changAccountType">支付宝</view> -->
				<view class="padding-lr padding-tb-sm" :class="curAccountType === '1' ? 'curTab' : ''" data-type="1" @click="changAccountType">银行卡</view>
			</view>
			<!-- 支付宝 -->
			<!-- <view v-if="curAccountType == '0'" class="bg-white padding text-lg">
				<view>
					<view class="margin-bottom-sm">开户人姓名</view>
					<input type="digit" placeholder="请输入开户人姓名" placeholder-style="color:#989898" v-model="formData.name">
				</view>
				<view class="margin-top">
					<view class="margin-bottom-sm">支付宝账户</view>
					<input type="digit" placeholder="请输入支付宝账户" placeholder-style="color:#989898" v-model="formData.account">
				</view>
			</view> -->
			<!-- 银行卡 -->
			<view v-if="curAccountType === '1'" class="bg-white padding text-lg">
				<view>
					<view class="margin-bottom-sm">开户人姓名<text class="margin-left-xs text-red">*</text></view>
					<input type="text" placeholder="请输入开户人姓名" placeholder-style="color:#989898" v-model="formData.name">
				</view>
				<view class="margin-top">
					<view class="margin-bottom-sm">身份证号<text class="margin-left-xs text-red">*</text></view>
					<input type="idcard" placeholder="请输入身份证号" placeholder-style="color:#989898" v-model="formData.certId">
				</view>
				<view class="margin-top">
					<view class="margin-bottom-sm">手机号<text class="margin-left-xs text-red">*</text></view>
					<input type="number" placeholder="请输入开卡时所绑定的手机号码" placeholder-style="color:#989898" v-model="formData.phone">
				</view>
				<view class="margin-top">
					<view class="margin-bottom-sm">银行卡号<text class="margin-left-xs text-red">*</text></view>
					<input type="number" placeholder="请输入银行卡号" placeholder-style="color:#989898" v-model="formData.bankNum">
				</view>
				<!-- <view class="margin-top">
					<view class="margin-bottom-sm">银行卡号开户城市</view>
					<view class="flex">
						<my-uni-combox class="flex-sub margin-right-xs" :candidates="provinceList"
							:showField="'areaName'" placeholder="选择省份" v-model="formData.provinceObj"
							@input="chooseRegion($event)"></my-uni-combox>
						<my-uni-combox class="flex-sub margin-right-xs" :candidates="cityList"
							:showField="'areaName'" placeholder="选择城市" v-model="formData.cityObj"></my-uni-combox>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 操作按钮 -->
		<view class="margin-lr">
			<button class="cu-btn lg bg-main-color long-btn shadow-blur" @click="submit">提交</button>
		</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;
			},
			validData() {
				if (!this.formData.name || !this.formData.certId || !this.formData.phone || !this.formData.bankNum) {
					return false;
				}
				return true;
			},
			async submit() {
				if (this.curAccountType === '1') {
					if (!this.validData()) {
						uni.showToast({
							icon: 'none',
							title: '请完成必填项的填写',
							duration: 2000
						})
						return;
					}
					let params = {
						...this.formData,
						customerId: this.curUserInfo.customerId
					}
					let res = await this.$request.bindBankCard(params);
					if (res && res.code === 0) {
						uni.navigateBack({
							delta: -1
						})
					} else if (res && res.msg) {
						uni.showToast({
							icon: 'none',
							title: res.msg,
							duration: 4000
						})
					} else {
						uni.showToast({
							title: '绑定失败',
							icon: 'error'
						})
					}
				}
			}
		},
	}
</script>

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