MiniScm/subpkg/updateIdNumber/updateIdNumber.vue

<template>
	<view>
		<text class="top-tip">姓名仅允许修改一次；所填信息须与身份证上姓名一致</text>
		<view class="infoItem">
			<text class="tip">身份证</text>
			<uni-easyinput class="info-disabled" v-model="idNumber" :inputBorder="false" type="idcard" />
		</view>
		<view class="infoItem">
			<text class="tip">手机号</text>
			<uni-easyinput class="info" v-model="phone" :inputBorder="false" disabled />
		</view>
		<view class="infoItem">
			<text class="tip">验证码</text>
			<uni-easyinput class="info" v-model="verificationCode" :inputBorder="false" placeholder="请输入验证码"
				maxlength="4" />
			<text class="get-code-text" @click="getVerificationCode" :style="{color:codeColor,}">{{codeText}}</text>
		</view>
		<button class="btn" type="primary" @click="updateIdNumber">确定</button>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				phone: '',
				phoneOrigin: '',
				verificationCode: '',
				idNumber: '',
				codeColor: "#0271c1",
				codeText: "获取验证码",
				countDownTime: 6,
				timeNum: 6,
				timer: {},
			};
		},
		computed: {
			...mapState('m_user', ['token', 'userInfo'])
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo']),
			async getVerificationCode() {
				var pattern = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (!pattern.test(this.phoneOrigin)) {
					uni.$showMsg("手机号格式错误! ")
					return;
				}
				if (this.countDownTime == this.timeNum) {
					const res = await uni.$http.get(`/verificationCode/${this.phoneOrigin}`)
					// this.verificationCode = res.data.data
					if (res.data.data === true) {
						uni.$showMsg('验证码发送成功！')
						// this.verificationCode = res.data.data;
						this.codeColor = "#e6252b";
						this.timer = setInterval(this.codeCallback, 1000)
						this.codeText = this.countDownTime + "s";
					} else {
						uni.$showMsg('验证码发送失败！')
					}
				} else {
					uni.$showMsg('操作频繁！请一分钟后重试！')
				}
			},
			//防止重复点击获取验证码及倒计时显示
			codeCallback() {
				this.countDownTime--
				if (this.countDownTime < 1) {
					clearInterval(this.timer)
					this.codeColor = "#0271c1";
					this.codeText = "获取验证码";
					this.countDownTime = this.timeNum
				} else {
					this.codeColor = "#e6252b";
					this.codeText = this.countDownTime + "s";
				}
			},
			async updateIdNumber() {
				if (this.idNumber.length < 4) {
					uni.$showMsg('身份证格式错误！')
					return;
				}
				let res = uni.$http.put('/userIdNumber', {
					idNumber: this.idNumber,
					verificationCode: this.verificationCode,
					phone: this.phoneOrigin
				});

				res.then(value => {
					if (value.data.success) {
						uni.$showMsg('修改成功！');
						let info = this.userInfo;
						info.idNumber = this.idNumber;
						this.updateUserInfo(info);
						setTimeout(() => {
						// 	uni.navigateTo({
						// 		url: '/subpkg/myAccount/myAccount'
						// 	})
						uni.navigateBack();
						}, 1000);
					} else {
						uni.$showMsg('修改失败：' + value.data.msg);
					};
				}, reason => {
					// console.log(reason);
				})
			}
		},
		created() {
			this.phoneOrigin = this.userInfo.phone.slice(0, this.userInfo.phone.length)
			this.phone = this.phoneOrigin.slice(0, 3) + '****' + this.phoneOrigin.slice(7, 11)
		}
	}
</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;
		background-color: #F7F6F6;
	}

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

	.btn {
		width: 80%;
		margin-top: 40rpx;
	}

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