xinyongguanlishi/pages/mine/bank_card.vue

<template>
	<view class="main">
		<view class="u-margin-left-20 u-margin-right-20 body_style">
			<u-form :model="form" ref="uForm">
				<u-form-item label="真实姓名" label-width="125" :border-bottom="true">
					<u-input placeholder="请输入您的真实姓名" v-model="form.real_name" />
				</u-form-item>
				<u-form-item label="开户行" label-width="125" :border-bottom="true">
					<u-input placeholder="请输入您的开户行" v-model="form.bank_name" />
				</u-form-item>
				<u-form-item label="银行卡号" label-width="125" :border-bottom="true">
					<u-input placeholder="请输入您的银行卡号" v-model="form.bank_card" />
				</u-form-item>
				<u-form-item label="预留手机" label-width="125" :border-bottom="true">
					<u-input placeholder="请输入银行预留的手机号" v-model="form.bank_phone" />
				</u-form-item>
			</u-form>
			<u-button shape="circle" @click="submit_bank" hover-class="none"
				:custom-style="{...customStyle,width:'500rpx',height:'66rpx'}" throttle-time="1000">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					real_name: '',
					bank_name: '',
					bank_card: '',
					bank_phone: ''
				},
				customStyle: {
					width: '214rpx',
					height: '52rpx',
					color: '#fff',
					background: '#FBC600',
					border: 'none',
					marginTop: '30rpx'
				},
			}
		},
		onLoad() {
			if (this.vuex_user.real_name != null) {
				this.form.real_name = this.vuex_user.real_name
				this.form.bank_card = this.vuex_user.bank_card
				this.form.bank_name = this.vuex_user.bank_name
				this.form.bank_phone = this.vuex_user.bank_phone
			}
		},
		methods: {
			async submit_bank() {
				if (!this.$u.test.chinese(this.form.real_name)) {
					uni.showToast({
						title: "请输入正确的姓名",
						icon: "none",
					})
					return false
				}
				if (!this.$u.test.chinese(this.form.bank_name)) {
					uni.showToast({
						title: "请输入正确的开户行",
						icon: "none",
					})
					return false
				}
				if (this.form.bank_card == '') {
					uni.showToast({
						title: "请输入正确的银行卡号",
						icon: "none",
					})
					return false
				}
				if (!this.$u.test.mobile(this.form.bank_phone)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none",
					})
					return false
				}
				let res = await this.$u.post('manager/updateBank', {
					...this.form
				})
				if (res.code == 200) {
					this.$u.vuex('vuex_user.real_name',this.form.real_name)
					this.$u.vuex('vuex_user.bank_card',this.form.bank_card)
					this.$u.vuex('vuex_user.bank_name',this.form.bank_name)
					this.$u.vuex('vuex_user.bank_phone',this.form.bank_phone)
					console.log(this.vuex_user)
					uni.showToast({
						title: "绑定成功",
						icon: "none",
						duration: 1000
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}
			}
		}
	}
</script>

<style>
	.main {
		min-height: 100vh;
		padding-top: 40rpx;
	}

	.body_style {
		background: #fff;
		border-radius: 16rpx;
		padding: 10rpx 30rpx;
		/* margin-top: 20rpx; */
		box-shadow: 6rpx 6rpx 10rpx rgba(122, 122, 122, 0.2);
		padding-bottom: 30rpx;
	}
</style>