bocai_supplyChain_uni/root/person/bindBankCard.vue

<template>
	<view class="g_p_10 g_text_c">
		<view class="g_bg_f g_p_18 g_radius_8" hover-class="none" hover-stop-propagation="false">
			<view class="g_flex_row_between g_border_e_b g_pb_18 g_fs_16">
				<view class="" hover-class="none" hover-stop-propagation="false"> 持卡人 </view>
				<input class="g_text_r" v-model="submitInfo.realName" placeholder="请输入持卡人" placeholder-class="weui-input__placeholder" />
			</view>
			<view class="g_flex_row_between g_border_e_b g_pt_18 g_pb_18 g_fs_16">
				<view class="" hover-class="none" hover-stop-propagation="false"> 卡号 </view>
				<input class="g_text_r" v-model="submitInfo.cardNum" placeholder="请输入持卡人本人的银行卡号" placeholder-class="weui-input__placeholder" />
			</view>
			<view class="g_flex_row_between g_pt_18 g_fs_16">
				<view class="" hover-class="none" hover-stop-propagation="false"> 开户省市 </view>
				<view class="g_flex_row_end flex_center" @click="pickerShow = true" hover-class="none" hover-stop-propagation="false">
					<view class="g_text_r" :class="submitInfo.province ? 'g_c_3' : 'g_c_9'" hover-class="none" hover-stop-propagation="false">{{ submitInfo.province ? `${submitInfo.province}, ${submitInfo.city}` : "请选择地区" }}</view>
					<i class="iconfont icon-gengduo11 g_fs_17 g_c_9" style="padding-left: 8px"></i>
					<u-picker mode="region" v-model="pickerShow" :params="{ province: true, city: true }" @confirm="getPicker"></u-picker>
				</view>
			</view>
		</view>
		<view class="g_mt_64" hover-class="none" hover-stop-propagation="false">
			<g-button btnText="确认绑定" type="primary" size="default" class="" @clickBtn="sureBind" />
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user: uni.getStorageSync("apply-userinfo").user,
			pickerShow: false,
			submitInfo: {
				realName: "",
				cardNum: "",
				province: "",
				city: "",
			},
		};
	},
	created() {},
	onLoad() {
		this.submitInfo.realName = this.user.realName;
	},
	methods: {
		getPicker(e) {
			console.log(e);
			this.submitInfo.province = e.province.label;
			this.submitInfo.city = e.city.label;
			this.submitInfo.provinceId = e.province.value.toString().padEnd(6, "0");
			this.submitInfo.cityId = e.city.value.toString().padEnd(6, "0");
			console.log(this.submitInfo);
		},
		sureBind() {
			var that = this;
			console.log(this.submitInfo);
			if (!this.submitInfo.cardNum) {
				uni.showToast({
					title: "请输入银行卡号",
					icon: "none",
				});
				return false;
			}
			let params = {
				cityId: this.submitInfo.cityId,
				provinceId: this.submitInfo.provinceId,
				bankNo: this.submitInfo.cardNum,
			};
			that.G.Post(this.api.person_addUserBank, params, (res) => {
				console.log(res);
			});
		},
	},
};
</script>

<style>
page {
	background-color: #f5f5f5;
}
.bgTest {
	background-image: url("//matripe.oss-cn-beijing.aliyuncs.com/dagouAgency/bg.png");
	width: 100%;
	height: 90px;
	background-size: cover;
	border-radius: 8px;
	overflow: hidden;
}

.cardbgTest {
	background-image: url("//matripe.oss-cn-beijing.aliyuncs.com/dagouAgency/cardbg.png");
	width: 100%;
	height: 90px;
	background-size: cover;
	border-radius: 8px;
	overflow: hidden;
}

.cardName {
	font-size: 18px;
	font-weight: 601;
	color: #ffffff;
	line-height: 26px;
	margin-left: 12px;
}

.addcard {
	background-color: #ff44001a;
	border-radius: 8px;
	height: 80px;
	font-size: 20px;
	font-weight: 601;
	color: #ff4400;
	line-height: 26px;
}

.cardlogo {
	width: 46px;
	height: 46px;
	background-color: #fff;
	border-radius: 50%;
	margin-left: 20px;
	display: inline-block;
}

.cardbgTest image {
	width: 28px;
	height: 28px;
	margin-left: 9px;
	margin-top: 9px;
}
</style>