youngee_c_web_v2/pages/mycenter/myinformation/mybank.vue

<template>
	<view style="position: relative;">
		<!-- 胶囊 -->
		<mvBar :mysNavConfig="mysNavConfig"></mvBar>
		<view style="margin-top: 160rpx;"></view>
		<view>
			<!-- 银行卡信息绑定 -->
			<view style="margin: 0 20rpx;">
				<font style="margin: 30rpx 20rpx 20rpx;color: #878994;">银行卡信息绑定</font>
				<uni-forms :modelValue="formData" err-show-type="undertext">
					<uni-forms-item name="name" required label="户主姓名">
						<uni-easyinput type="text" :inputBorder="false" v-model="formData.name" placeholder="姓名">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="cardid" required label="身份证号">
						<uni-easyinput type="text" :inputBorder="false" v-model="formData.bank_card_id"
							placeholder="18位身份证号">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="bankcard" required label="银行卡号">
						<uni-easyinput type="number" maxlength="19" :inputBorder="false"
							v-model="formData.bank_card_number" placeholder="请填写卡号">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="bank" required label="银行">
						<picker @change="bindPickerChange1" :value="index1" :range="array1" range-key="name">
							<view>{{ array1[index1].name }}</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item name="vregion" required label="开户地">
						<picker class="picker" mode="multiSelector" :range="region" range-key="name"
							:value="regionIndex" @change="pickerChange" @columnchange="pickerColumnchange">
							<view class="pbox" :class="{'pbox_hover':regionStr != '请选择省市区'}">
								<view>{{regionStr}}</view>
								<text class="iconfont icon-you"></text>
							</view>
						</picker>
					</uni-forms-item>
					<uni-forms-item name="phone" required label="手机号">
						<uni-easyinput type="number" maxlength="11" :inputBorder="false" v-model="formData.phone"
							placeholder="请填写手机号">
						</uni-easyinput>
					</uni-forms-item>
					</uni-group>
				</uni-forms>
			</view>
			<view>
				<button class="btn1" @click="submitForm()">保存</button>
			</view>
			<view style="margin: 30rpx;padding: 30rpx 10rpx;background-color: #eaeaea;border-radius: 5rpx;">
				<p style="color: #878994;">样叽严格按照《用户协议》及《隐私政策;</p>
				<p style="color: #878994;">用户输入的银行卡号和支付宝账号信息仅在用户提现时使用。</p>
			</view>

		</view>


	</view>
</template>

<script>
	import region from '@/components/pca-code.json';
	import mvBar from "@/components/mys_navBar/mysNavBar";
	export default {
		components: {
			mvBar,
		},
		data() {
			return {
				index1: 0,
				formData: {
					name: '',
					phone: '',
					bank_id: '',
					bank_card_number: '',
					bank_open_address: '',
					bank_card_id: '',
					alipay_number: '',
					alipay_real_name: '',
					alipay_card_id: '',
				},
				oldRegion: region,
				region: [
					[],
					[],
					[]
				],
				// 选择省市区的下标Index  传则默认选中传递的
				regionIndex: [0, 0, 0],
				// 省市区字符串
				regionStr: '请选择省市区',
				array1: [{
					name: '请选择',
					id: 0
				}, {
					name: '中国农业银行',
					id: 1
				}, {
					name: '中国工商银行',
					id: 2
				}],
				mysNavConfig: {
					/* 开启单页显示首页图标 */
					isHome: true,
					/* 固定导航  */
					navFixed: true,
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "银行卡信息绑定",
						color: "",
						fontSize: "32rpx", // px upx rpx
						fontWeight: "normal", // 100 - 700
					},
					btnType: "type2",
					onLeftClick: '',
					/* type2 按钮 */
					type2Config: {
						// 左图标
						leftPath: "/static/img/png2.png",
						// 右图标
						rightPath: "/static/img/png4.png",
						// 圆角
						radius: "40rpx",
					},
				},
			}
		},
		onShow() {
			this.getInfo();
			this.initRegion();
		},
		methods: {
			initRegion() {
				// 声明城市数组
				let cityArr = [];
				let countyArr = [];
				// 设置下标
				this.regionIndex = [0, 0, 0];
				// 改变城市列表
				this.region[1] = this.oldRegion[0].children.map(item => {
					cityArr.push({
						name: item.name,
						code: item.code
					});
				})
				this.$set(this.region, 1, cityArr);
				// 改变县区列表
				this.oldRegion[0].children[0].children.map(item => {
					countyArr.push({
						name: item.name,
						code: item.code
					});
				})
				this.$set(this.region, 2, countyArr);
			},
			// 默认信息表，获取平台logo
			getInfo() {
				this.$https.get('/youngee/c/g/get-info-tables')
					.then(res => {
						this.array1 = res.data.data.Bank
					})
				this.getBankInfo()
			},
			getBankInfo() {
				this.$https.get('/youngee/c/t/g/get-talent-bank-info')
					.then(res => {
						console.log(res)
						if (res.data.data != null) {
							this.formData = res.data.data
							if (this.formData.bank_id != '') {
								this.index1 = this.formData.bank_id
							}
							if (this.formData.bank_open_address == 0) {
								this.formData.bank_open_address = ''
							} else {
								let a = this.formData.bank_open_address.toString().slice(0, 2)
								let b = this.formData.bank_open_address.toString().slice(0, 4)
								let c = 0
								for (var i = 0; i < region.length; i++) {
									if (region[i].code == a) {
										a = region[i].name
										for (var j = 0; j < region[i].children.length; j++) {
											if (region[i].children[j].code == b) {
												b = region[i].children[j].name
												for (var o = 0; o < region[i].children[j].children.length; o++) {
													if (region[i].children[j].children[o].code == this.formData
														.bank_open_address) {
														c = region[i].children[j].children[o].name
													}
												}
											}
										}
									}
								}
								this.regionStr = a + ' ' + b + ' ' + c
							}
						}
					})
			},
			submitForm() {
				let f1 = true
				let message1 = ""
				// 检查是否填写银行卡信息
				if (this.formData.name == "") {
					f1 = false;
					message1 = "请输入正确的户主姓名"
				} else if (this.formData.bank_card_id.length != 18) {
					f1 = false;
					message1 = "请输入正确的身份证号"
				} else if (this.formData.bank_card_number == "" || (this.formData.bank_card_number.length != 16 && this
						.formData.bank_card_number.length != 17 && this.formData.bank_card_number.length != 19)) {
					f1 = false;
					message1 = "请输入正确的银行卡号"
				} else if (this.formData.bank_id == 0) {
					f1 = false;
					message1 = "请选择银行"
				} else if (this.formData.bank_open_address == "") {
					f1 = false;
					message1 = "请选择开户地"
				} else if (this.formData.phone == "" || this.formData.phone.length != 11) {
					f1 = false;
					message1 = "请输入正确的手机号"
				};

				if (f1) {
					console.log(this.formData)
					console.log(message1)
					this.$https.post('/youngee/c/t/p/add-talent-bank', this.formData)
						.then(res => {
							console.log(res)
							uni.showToast({
								title: "提现信息绑定成功",
								icon: 'none'
							})
							let pages = getCurrentPages(); // 当前页面
							let beforePage = pages[pages.length - 2]; // 上一页
							uni.navigateBack({
								success: function() {
									beforePage
										.onLoad(); // 执行上一页的onLoad方法
								}
							})
						})
				} else {
					uni.showToast({
						title: message1,
						icon: 'none'
					})
				}

			},
			bindPickerChange1: function(e) {
				console.log(e)
				this.index1 = e.detail.value;
				this.formData.bank_id = this.array1[this.index1].id
				console.log(this.formData.bank_id)
			},

			//城市选择
			pickerChange(e) {
				// console.log(e, '1');
				this.regionIndex = e.detail.value;
				this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[
						1]]
					.name + ' ' +
					this.region[2][this.regionIndex[2]].name;

				// 组件传值
				this.$emit('region', [this.region[0][this.regionIndex[0]].code, this.region[1][this.regionIndex[1]]
					.code,
					this.region[
						2][this.regionIndex[2]].code
				]);
				this.formData.bank_open_address = this.region[2][this.regionIndex[2]].code;

			},
			pickerColumnchange(e) {
				// console.log(e);
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)

				if (e.detail.column === 0) {
					// 声明城市数组
					let cityArr = [];
					let countyArr = [];
					// 设置下标
					this.regionIndex = [e.detail.value, 0, 0];
					// 改变城市列表
					this.region[1] = this.oldRegion[e.detail.value].children.map(item => {
						cityArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 1, cityArr);
					// 改变县区列表
					this.oldRegion[e.detail.value].children[0].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 2, countyArr);
				}
				if (e.detail.column === 1) {
					this.regionIndex[1] = e.detail.value;
					this.regionIndex[2] = 0;
					let countyArr = [];
					this.oldRegion[this.regionIndex[0]].children[this.regionIndex[1]].children.map(item => {
						countyArr.push({
							name: item.name,
							code: item.code
						});
					})
					this.$set(this.region, 2, countyArr);
				}
				if (e.detail.column === 2) {
					this.regionIndex[2] = e.detail.value;
				}
			}

		},
		created() {
			let provinceArr = [];
			let cityArr = [];
			this.oldRegion.map((item, index) => {
				this.region[0].push({
					name: item.name,
					code: item.code
				});
				if (this.previnceId == item.code) {
					provinceArr = item.children;
					this.regionIndex[0] = index;
				}
			})
			// console.log(provinceArr);
			provinceArr.map((item, index) => {
				this.region[1].push({
					name: item.name,
					code: item.code
				});
				if (this.cityId == item.code) {
					cityArr = item.children;
					this.regionIndex[1] = index;
				}
			})
			cityArr.map((item, index) => {
				this.region[2].push({
					name: item.name,
					code: item.code
				});
				if (this.countyId == item.code)
					this.regionIndex[2] = index;
			})
			if (this.isRevise)
				this.regionStr = this.region[0][this.regionIndex[0]].name + ' ' + this.region[1][this.regionIndex[1]]
				.name + ' ' + this.region[2][this.regionIndex[2]].name;
			else
				this.regionStr = '请选择省市区';
		}
	}
</script>


<style>
	picker {
		position: relative;
		display: block;
		cursor: pointer;
		padding-left: 20rpx !important;
		padding-top: 14rpx !important;
		color: grey !important;
	}

	/deep/.uni-forms-item__inner {
		border-bottom: none !important;
		margin-bottom: 0 !important;
	}
</style>
<style lang="scss" scoped>
	view {
		font-size: 14px;
		line-height: inherit;
	}

	.menu {
		position: fixed;
		top: 180rpx;
		border-bottom: #FCCF41;
		background-color: #FFFFFF;
		justify-content: space-around;
		height: 5%;
		width: 100%;
		display: flex;
		z-index: 10;
	}

	.menu-item p {
		font-weight: 600;

		&.lor {
			border-bottom: 5rpx solid #F0D232;
			color: #F0D232;
			padding-bottom: 15rpx;
		}
	}

	.btn1 {
		margin: 30rpx;
		font-size: 35rpx;
		color: #000;
		background-color: #F0D232;
		border: none;
		border-radius: 0;
	}

	.uni-input-border,
	.uni-textarea-border {
		flex: 1;
		font-size: 14px;
		color: #666;
		border: 1px #FFFFFF solid;
		border-radius: 5px;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
	}

	.uni-input-border {
		padding: 0 10px;
		height: 35px;
	}

	.uni-textarea-border {
		padding: 10px;
		height: 80px;
	}

	.label-box {
		margin-right: 10px;
	}

	.transform-scale {
		transform: scale(0.7);
	}

	.butto {
		text-align: center;
	}

	.option {
		padding: 20rpx;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.signup {
		box-shadow: 0rpx 5rpx 40rpx #ccc;
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		display: flex;
		height: 90rpx;
		padding-top: 2%;
		background-color: #FFFFFF;
		justify-content: space-around;
	}

	.signuptext {
		text-align: center;
		margin-top: 2%;

	}

	.signuptext p {
		font-size: 60%;
		color: #333333;
	}

	.signupbut {
		text-align: center;
		margin-top: 2%;
	}

	.but1 {
		width: 120%;
		text-align: center;
		background-color: #FCCF41;
		border-radius: 10rpx;
		color: #464100;
		font-size: 28rpx;
		line-height: 156%;

		font-weight: 500;
		height: 65%;
	}

	/deep/.uni-searchbar__box {
		border-color: #267CFF !important;
		border-width: 2rpx !important;
	}

	/deep/.uni-searchbar__box {
		background-color: #FFFFFF !important;
	}

	/deep/.uni-searchbar__text-placeholder {
		font-size: 30rpx !important;
	}

	/deep/.segmented-control__text {
		font-size: 34rpx !important;
	}

	/deep/.uni-data-checklist {
		padding-left: 20upx;
	}

	uni-picker {
		position: relative;
		display: block;
		cursor: pointer;
		padding-left: 20rpx !important;
		padding-top: 14rpx !important;
		color: grey !important;
	}

	/deep/.uni-date-x--border {
		border: 0px solid #dcdfe6 !important;
	}

	/deep/.is-input-border {
		border: 0px solid #c8c7cc !important;
	}

	/deep/.uni-progress-info {
		font-size: 25rpx !important;
	}

	/deep/.uni-error-message {
		position: absolute;
		bottom: -20rpx !important;
		left: 20rpx !important;
		text-align: left;
	}

	/deep/.uni-forms-item__inner {
		padding-bottom: 0rpx !important;
		margin-bottom: 30rpx !important;
		border-bottom: 0.5rpx solid #CCCCCC;
	}

	/deep/.uni-group__title {
		background-color: #FFFFFF !important;
	}

	/deep/.uni-list-item__content-title {
		font-size: 30rpx !important;
		color: #111111 !important;
	}

	/deep/.uni-progress-bar {
		border-radius: 10rpx !important;
	}

	/deep/.uni-progress-inner-bar {
		border-radius: 10rpx !important;
	}


	/deep/.is-input-border {
		border-radius: 20px !important;
		background-color: #fff;
	}

	.uni-easyinput__content-input {
		font-size: 30upx !important;
	}

	.content-clear-icon {
		font-size: 40upx !important;
	}

	/deep/.input-box {
		padding: 50upx;
		font-size: 30upx;

		.input-item {
			display: flex;

			border: 1upx solid #F8F8F8;
			line-height: 90upx;
			height: 90upx;
			margin-top: 20upx;
			background: #F8F8F8;
			border-radius: 48upx;

			.input-label {
				width: 150upx;
				text-align: center;
			}

			.input-body {
				position: relative;
				height: 100upx;
				width: calc(100% - 150upx);

				.input {
					line-height: 90upx;
					height: 90upx;
					position: relative;
					font-size: 28upx;
				}

				.eye {
					position: absolute;
					height: 50upx;
					width: 50upx;
					right: 20upx;
					top: 50%;
					transform: translateY(-50%);
				}

				.btn-code {
					position: absolute;
					right: 0upx;
					top: 50%;
					transform: translateY(-50%);
					background: none;
					color: #205592;
					width: 160upx;
					font-size: 24upx;
					box-sizing: border-box;
					text-align: center;
					padding: 0;
					height: 100upx;
					line-height: 100upx;
				}
			}
		}

		.select {
			// padding-top: 40upx;
			display: flex;
			justify-content: space-between;
			color: #003B67;
		}
	}

	/deep/.title-left {
		width: 3px;
		height: 16px;
		background: #267CFF;
		display: inline-block;
		border-radius: 3px;
		margin-top: 3px;
		vertical-align: top;
		margin-right: 10px;
	}
</style>