MiniScm/subpkg/updateNameAndIdNumber/updateNameAndIdNumber.vue

<template>
	<view>
		<view class="top">
			<!-- #ifdef MP-WEIXIN -->
			<NavigateBar title="修改个人信息" control="back" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<NavigateBar title="修改个人信息" bgcolor="#a09cc4"></NavigateBar>
			<!-- #endif -->
		</view>
		<view class="infoItem">
			<view class="tip">
				<u-text text="姓名："></u-text>
			</view>
			<u-input placeholder="请输入姓名" border="surround" v-model="name" clearable></u-input>
		</view>
		<view class="infoItem">
			<view class="tip">
				<u-text text="身份证："></u-text>
			</view>
			<u-input placeholder="请输入身份证号" border="surround" v-model="idNumber" type="idcard" clearable
				:maxlength="18"></u-input>
		</view>
		<view class="btn">
			<u-button text="确定" color="#a09cc4" @click="updateNameAndIdNumber"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		stringHasText
	} from '../../utils/commonUtils.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import NavigateBar from "../../components/navigateBar/navigate-bar.vue";
	export default {
		components: {
			NavigateBar
		},
		data() {
			return {
				idNumber: '',
				name: '',
			};
		},
		computed: {
			...mapState('m_user', ['token', 'userInfo'])
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo']),
			async updateNameAndIdNumber() {
				console.log(stringHasText(this.idNumber))
				if (!stringHasText(this.idNumber) || this.idNumber.length < 18) {
					uni.$showMsg('身份证格式错误！')
					return;
				}
				if (!stringHasText(this.name) || this.name.length < 2) {
					uni.$showMsg('姓名格式错误！')
					return;
				}
				let res = await uni.$http.put('/user', {
					idNumber: this.idNumber,
					name: this.name
				});

				if (res.data.code === 200 && res.data.success === true) {
					uni.$showMsg('修改成功！');
					let info = this.userInfo;
					info.idNumber = this.idNumber;
					info.name = this.name;
					this.updateUserInfo(info);
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/home'
						});
					}, 1000);
				} else {
					uni.$showMsg('修改失败：' + res.data.msg);
				}
			}
		},
		onLoad() {
			var pages = getCurrentPages(); // 当前页面
			var beforePage = pages[pages.length - 2]; // 前一个页面
			// console.log(beforePage)
			this.name = this.userInfo.name
			this.idNumber = this.userInfo.idNumber
		},
		// #ifdef MP-WEIXIN
		onShareAppMessage(info) {
			return {
				title: '源享住',
				path: 'pages/login/login',
				imageUrl: "/static/logo.png"
			}
		}
		// #endif
	}
</script>

<style lang="scss">
	.top-tip {
		padding-left: 20rpx;
		font-size: 12px;
		color: darkgray
	}

	.infoItem {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 40rpx;
		border-bottom: black 1px solid;
	}

	.get-code-text,
	.tip {
		margin: 0 20rpx;
		width: 120rpx;
	}

	.u-input {
		width: 70vw;
	}

	.btn {
		margin: 40rpx auto;
		width: 80vw;
		color: #FFFFFF;
	}

	::v-deep .is-disabled {
		color: black !important;
	}
</style>