sadjv3/anmo-user/my/wallet/yinhangka.vue

<template>
	<view class="container">
		<!-- <view class="tui-line-cell">
			<view class="tui-title">收款银行</view>
			<picker @change="bindPickerChange" :value="index_zj" :range="zhengjian">
				<view class="tui-input">{{ userName }}</view>
			</picker>
		</view> -->

		<!-- <view class="flex">
			<picker @change="bindPickerChange" :value="index_zj" :range="zhengjian">
				<view class="uni-input">{{ zhengjian[index_zj] }}</view>
			</picker>
		</view> -->
		<view class="cu-form-group" style="margin: 30upx;border: 2upx solid whitesmoke;margin-bottom: 20px;border-radius: 30px">
			<view class="title">用户名</view>
			<input type="text" placeholder="请输入用户名" v-model="bankCarUserName" />
		</view>
		<view class="cu-form-group" style="margin: 30upx;border: 2upx solid whitesmoke;margin-bottom: 20px;border-radius: 30px">
			<view class="title">银行卡号</view>
			<input type="text" placeholder="请输入要绑定的银行卡号" v-model="mobile" />
		</view>
		<view class="cu-form-group" style="margin: 30upx;border: 2upx solid whitesmoke;margin-bottom: 20px;border-radius: 30px">
			<view class="title">银行名称</view>
			<input type="text" placeholder="请输入要绑定的银行名称" v-model="userName" />
		</view>
		<view class="cu-form-group" style="margin: 30upx;border: 2upx solid whitesmoke;margin-bottom: 20px;border-radius: 30px">
			<view class="title">开户行</view>
			<input type="text" placeholder="请输入要绑定的银行开户行" v-model="bankCardAddress" />
		</view>
		<view class="btn" :rotate="logining" @click="toLogin">绑定账户</view>
		<view style="padding: 0 64upx;font-size: 24upx;color: #999999;">提示：请正确填写收款人的银行卡账户和真实的收款人姓名，否则将无法正常收款</view>
		
	</view>
</template>

<script>
	import listCell from '@/components/com-input';
	import wButton from '../components/watch-login/watch-button.vue'; //button
	export default {
		components: {
			listCell,
			wButton
		},
		data() {
			return {
				bankCardAddress: '',
				bankCarUserName: '',
				zhengjian: [],
				index_zj: 0,
				mobile: '',
				userName: '',
				logining: false
			}
		},
		onLoad() {
			let userId = this.$queue.getData("userId");
			if (userId) {
				this.$Request.get("/app/user/selectUserById").then(res => {
					if (res.code == 0) {
						if (res.data.bankCard) {
							this.mobile = res.data.bankCard;
						}
						if (res.data.bankCardName) {
							this.userName = res.data.bankCardName;
						}

						if (res.data.bankCardUserName) {
							this.bankCarUserName = res.data.bankCardUserName;
						}

						if (res.data.bankCardAddress) {
							this.bankCardAddress = res.data.bankCardAddress;
						}
					}
				});
			}

			// this.$Request.getT('/selfActivity/state?state=20').then(res => {
			// 	if (res.status == 0) {
			// 		this.zhengjianList = res.data;
			// 		res.data.forEach(d => {
			// 			this.zhengjian.push(d.title);
			// 		});
			// 		this.userName = this.zhengjian[0];
			// 	}
			// });

		},
		methods: {
			bindPickerChange: function(e) {
				console.log(e)
				this.index_zj = e.target.value;
				this.userName = this.zhengjian[this.index_zj];
			},
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				uni.navigateBack();
			},

			toLogin() {
				let userId = this.$queue.getData("userId");
				let token = uni.getStorageSync("token");
				const {
					mobile,
					bankCarUserName,
					userName,
					bankCardAddress
				} = this;
				if (!mobile) {
					this.$queue.showToast("请设置收款人银行卡账号");
				} else if (!userName) {
					this.$queue.showToast("请设置收款人银行姓名");
				} else if (!bankCarUserName) {
					this.$queue.showToast("请设置收款人姓名");
				} else if (!bankCardAddress) {
					this.$queue.showToast("请设置收款人银行开户行");
				} else {
					this.$queue.showLoading("修改中...");
					let data = {
						userId: userId,
						bankCard: mobile,
						bankCardName: userName,
						bankCardUserName: bankCarUserName,
						bankCardAddress: bankCardAddress
					}
					this.$Request.postJson("/app/user/updateUser", data).then(
						res => {
							if (res.code === 0) {
								this.$queue.showToast('修改成功！');
								setTimeout(d => {
									this.navBack();
								}, 1000)
							} else {
								this.$queue.showToast(res.msg)
							}
							uni.hideLoading();
						});
				}
			},
		},

	}
</script>

<style lang='scss'>
	page {
		background: #FFFFFF;
	}
	.cu-form-group{
		background-color: #f7f7f7;
	}
	.cu-form-group .title{
		font-size: 29rpx;
		color: #333;
	}
	.cu-form-group uni-input{
		font-size: 29rpx;
		color: #999999;
	}
	.btn {
		background: linear-gradient(to right, #223845, #00a85b);
		color: #FFFFFF;
		margin: 30upx auto;
		width: 90%;
		border-radius: 50rpx;
		height: 78rpx;
		line-height: 78rpx;
		font-size: 30rpx;
		text-align: center;
	}
	.tui-line-cell {
		width: 80%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		border-bottom: 2upx solid #f2f2f2;
		font-size: 34rpx;
		padding: 0 60rpx 16upx;
	}

	.tui-title {
		line-height: 32rpx;
		min-width: 120rpx;
		flex-shrink: 0;
	}

	.tui-input {
		font-size: 32rpx;
		color: #333;
		padding-left: 40rpx;
		flex: 1;
	}

	.container {
		padding-top: 32upx;
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: #fff;
	}

	.confirm-btn {
		width: 300px;
		height: 42px;
		line-height: 42px;
		border-radius: 30px;
		margin-top: 70upx;
		background: #e10a07;
		color: #fff;
		font-size: 24rpx;

		&:after {
			border-radius: 60px;
		}
	}
</style>