hire-wx-houxuanren/pagesD/change-pwd.vue

<template>
	<view class="change-pwd">
		<!-- <u-navbar back-icon-color="#000" :border-bottom="false"></u-navbar> -->
		<view class="change-header u-flex-col">
			<text>修改密码</text>
			<text>当前手机号：{{mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}</text>
		</view>
		<view class="change-new-item u-flex">
			<input class="input2" type="text" placeholder="请输入短信验证码" v-model="code">
			<view class="input-box u-flex u-row-between">
				<text class="send" @click="getCode" v-if="!timeEnd && !verificationTime ">获取验证码</text>
				<text class="send" v-else-if="verificationTime">{{verificationTime}}s</text>
				<text class="send" @click="getCode" v-else-if="timeEnd">重新获取验证码</text>
			</view>
		</view>
		<view class="change-new-item u-flex">
			<input class="input2" type="text" password maxlength="16" placeholder="请使用8-16位数字及字母组合" v-model="pwd1">
		</view>
		<view class="change-new-item u-flex">
			<input class="input2" type="text" password maxlength="16" placeholder="请再次确认密码" v-model="pwd2">
		</view>
		<view class="change-btn" @click="save">
			确认修改
		</view>
		<!-- <u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code> -->
	</view>
</template>

<script>
	import {
		index,
		getCode,
		resetpwd,
		check
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
				mobile: '',
				tel: '',
				code: '',
				tips: '',
				// refCode: null,
				seconds: 60,
				pwd1: '',
				pwd2: '',
				verificationTime: "",
				timeEnd: false
			}
		},
		onLoad() {
			this.getuser()
		},
		methods: {
			save() {
				if (!this.code) {
					this.$u.toast('请输入短信验证码')
					return
				}
				if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(this.pwd1)) {
					this.$u.toast('请使用8-16位数字及字母组合')
					return
				}
				if (this.pwd1 != this.pwd2) {
					this.$u.toast("两次密码不一致")
					return
				}
			},
			
			resetpwd(){
				resetpwd({
					mobile: this.mobile,
					captcha: 1,
					newpassword: this.pwd1,
					newpassword_confirm: this.pwd2
				}).then(res => {
					this.$u.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
			},
			check() {
				check({
					mobile: this.mobile,
					captcha: this.code,
					event: "resetpwd"
				}).then(res => {
					if(res.code == 1){
						this.resetpwd()
					}else{
						this.$u.toast(res.msg)
					}
				})
			},
			getCode() {
				//获取验证码接口
				getCode({
					mobile: this.mobile,
					event: 'resetpwd'
				}).then(res => {
					// this.getcode = false
					if (res.code == 1) {
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						})
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						// this.$refs.uCode.start();
						this.verificationTime = 30
						this.verificationDown()
					} else {
						this.$u.toast(res.msg)
					}
				})
				if (true) {
					// 模拟向后端请求验证码
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			//验证码倒计时
			verificationDown() {
				// 设置定时器
				this.timer = setInterval(() => {
					this.verificationTime = this.verificationTime - 1
					if (this.verificationTime < 10) this.verificationTime = '0' + this.verificationTime
					if (this.verificationTime <= 0) {
						// 清除定时器
						clearInterval(this.timer)
						this.timeEnd = true
						this.verificationTime = false
					}
				}, 1000)
			},
			// getCode() {
			// 	if (this.$refs.uCode.canGetCode) {
			// 		// 模拟向后端请求验证码
			// 		uni.showLoading({
			// 			mask: true,
			// 			title: '正在获取验证码'
			// 		})
			// 		this.$u.post('/api/sms/send', {
			// 			mobile: this.mobile,
			// 			event: 'resetpwd'
			// 		}).then(res => {
			// 			this.$u.toast(res.msg);
			// 			if (res.code == 1) {
			// 				// 通知验证码组件内部开始倒计时
			// 				this.$refs.uCode.start();
			// 			}
			// 		})
			// 	} else {
			// 		this.$u.toast('倒计时结束后再发送');
			// 	}
			// },
			getuser() {
				index().then(res => {
					this.mobile = res.data.mobile

				})
			},
		}
	}
</script>

<style lang="scss">
	.send {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #0C66C2;
	}
	.change-pwd {
		.change-btn {
			margin: 68rpx auto;
			width: 686rpx;
			line-height: 92rpx;
			background: #0C66C2;
			border-radius: 12rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

		.change-new-item {
			height: 120rpx;
			border-bottom: 2rpx solid #F0F0F0;
			margin: 0 32rpx;

			.input2 {
				flex: 1;
				font-size: 36rpx;
			}

			.text2 {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #0C66C2;
				width: 170rpx;
				text-align: center;
			}

			.text1 {
				font-size: 36rpx;
				font-family: SFPro-Regular, SFPro;
				font-weight: 400;
				color: #222222;
				margin-right: 8rpx;
			}

			.input1 {
				margin-left: 20rpx;
				flex: 1;
				font-size: 36rpx;
			}
		}

		.change-header {
			padding: 58rpx 32rpx;

			text:first-child {
				margin-bottom: 14rpx;
				font-size: 48rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
			}

			text:last-child {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #555555;
			}
		}
	}
</style>