yqdsh/pages/user/account.vue

<template>
	<view class="content">
		<!-- 	<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</view> -->
		<view class="row b-b">
			<text class="tit">姓名</text>
			<input class="input" v-model="name" type="text" placeholder="请输入姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">银行卡号</text>
			<input class="input" v-model="payment" type="text" placeholder="请输入银行卡号" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号码</text>
			<input class="input" v-model="phone" type="text" placeholder="请输入手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">所属银行</text>
			<input class="input" v-model="bank" type="text" placeholder="请输入所属银行" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">所属支行</text>
			<input class="input" v-model="bank_name" type="text" placeholder="请输入所属支行" placeholder-class="placeholder" />
		</view>

		<button class="add-btn up" @click="confirm">提 交 保 存</button>
	</view>
</template>

<script>
import { setBankInfo, getBank } from '@/api/wallet.js';
export default {
	data() {
		return {
			type: 3,
			payment: '',
			name: '',
			bank: '',
			phone: '',
			bank_name: '',
			loading: false
		};
	},

	onLoad(options) {
		this.getBank();
	},

	methods: {
		// 提交保存
		confirm() {
			let obj = this;
			if (obj.loading) {
				return;
			}
			if (obj.name == '') {
				return obj.$api.msg('请输入姓名');
			}
			if (obj.payment == '') {
				return obj.$api.msg('请输入银行卡号');
			}
			if (obj.phone == '') {
				return obj.$api.msg('请输入手机号');
			}
			if (obj.bank == '') {
				return obj.$api.msg('请输入所属银行');
			}
			if (obj.bank_name == '') {
				return obj.$api.msg('请输入所属支行');
			}
			obj.loading = true;
			setBankInfo({
				type: obj.type,
				name: obj.name,
				phone: obj.phone,
				payment: obj.payment,
				bank: obj.bank,
				bank_name: obj.bank_name
			})
				.then(res => {
					obj.loading = false;
					uni.showToast({
						title: '修改成功',
						duration: 2000,
						position: 'top'
					});
					console.log('修改成功');
					obj.$api.prePage().dataUp();
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				})
				.catch(err => {
					obj.loading = false;
					this.$api.msg(err);
				});
		},
		getBank() {
			let obj = this;
			getBank().then(res => {
				if (res.data.bank.length == 0) {
					console.log('没有填信息');
				} else {
					let bank = res.data.bank;
					obj.name = bank.name;
					obj.phone = bank.phone;
					obj.payment = bank.payment;
					obj.bank = bank.bank;
					obj.bank_name = bank.bank_name;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30rpx;
	height: 110rpx;
	background: #fff;

	.tit {
		flex-shrink: 0;
		width: 200rpx;
		font-size: 30rpx;
		color: $font-color-dark;
	}

	.input {
		flex: 1;
		font-size: 30rpx;
		color: $font-color-dark;
	}

	.iconlocation {
		font-size: 36rpx;
		color: $font-color-light;
	}
}

page,
.content {
	background: $page-color-base;
	height: 100%;
}

.swiper-box {
	height: 750rpx;
}

.navbar {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;

	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 15px;
		color: $font-color-dark;
		position: relative;

		&.current {
			color: $base-color;

			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 44px;
				height: 0;
				border-bottom: 2px solid $base-color;
			}
		}
	}
}

.add-btn {
	&.up {
		background-color: #e93323;
		color: #fff;
	}

	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 80rpx;
	margin: 0 auto;
	margin-top: 30rpx;
	font-size: $font-lg;
	border-radius: 10rpx;
	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>