count-pass-app/pages/login/forgot.vue

<template>
	<view class="content">
		<view class="logo">
			<image style="height:104rpx;width:104rpx" src="/static/czzn-img/login/logo.jpg" mode="aspectFit" />
			<view class="app-name">{{$t('login.e')}}</view>
		</view>
		<!-- 账号密码登录 -->
		<view class="inp_box">
			<input type="text" v-model="forgotForm.mobile" :placeholder="this.$t('login.phonePlaceholder')" />
		</view>
		<view class="inp_box">
			<input type="text" v-model="forgotForm.code" :placeholder="this.$t('login.verifyCodePlaceholder')" />
			<button :class="time!=0?'load-reget':''" @click="getCode" :disabled='time!=0'
				class="get-code-btn">{{isGetCode?$t("login.reGetCode"):$t("login.getCode")}}{{time?`(${time}s)`:''}}</button>
		</view>
		<view class="inp_box">
			<input type="password" v-model="forgotForm.password"
				:placeholder="this.$t('register.passwordDigitsPlaceholder')" />
		</view>
		<view class="inp_box">
			<input type="password" v-model="forgotForm.confirmPassword"
				:placeholder="this.$t('register.passwordAgain')" />
		</view>
		<view class="btn-wrap">
			<button class="bind-btn" @click="resetPassword">{{$t('login.reset')}}</button>
		</view>
	</view>
</template>
<script>
	import {
		resetPassword,
		getTelCode
	} from '../../api/login'
	export default {
		data() {
			return {
				forgotForm: {
					mobile: "",
					code: "",
					password: "",
					confirmPassword: "",
				},
				time: 0,
				timer: '',
				isGetCode: false,
			}
		},
		methods: {
			backLogin() {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			},
			resetPassword() {
				let phone = /^1[3-9]\d{9}$/
				if (this.forgotForm.mobile == '') {
					uni.showToast({
						title: this.$t('login.phonePlaceholder'),
						icon: "none",
						duration: 2500,
					})
				} else if (!phone.test(this.forgotForm.mobile)) {
					uni.showToast({
						title: this.$t('base.smsCode.phoneErrTip'),
						icon: "none",
						duration: 2500,
					})
				} else if (this.forgotForm.code == '') {
					uni.showToast({
						title: this.$t('login.verifyCodePlaceholder'),
						icon: "none",
						duration: 2500,
					})
				} else if (this.forgotForm.password == '' || this.forgotForm.confirmPassword == '') {
					uni.showToast({
						title: this.$t('login.verifyCodePlaceholder'),
						icon: "none",
						duration: 2500,
					})
				} else if (this.forgotForm.password !== this.forgotForm.confirmPassword) {
					uni.showToast({
						title: this.$t('login.diffrent'),
						icon: "none",
						duration: 2500,
					})
				} else {
					let data = {
						phone: this.forgotForm.mobile,
						newpassword1: this.forgotForm.password,
						verificationCode: this.forgotForm.code
					}
					resetPassword(data).then(res => {
						if (res.statusCode === 200) {
							if (res.data.msg) {
								uni.showToast({
									title: res.data.msg,
									icon: "none",
									duration: 2500,
								})
							} else {
								uni.showToast({
									title: '重置成功',
									icon: "none",
									duration: 1000,
								})
								setTimeout(() => {
									this.backLogin()
								}, 1200)
							}

						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none",
								duration: 2500,
							})
						}
					})
				}

			},
			getCode() {
				let phone = /^1[3-9]\d{9}$/
				if (this.forgotForm.mobile == '') {
					uni.showToast({
						title: this.$t('login.phonePlaceholder'),
						icon: "none",
						duration: 2500,
					})
				} else if (!phone.test(this.forgotForm.mobile)) {
					uni.showToast({
						title: this.$t('base.smsCode.phoneErrTip'),
						icon: "none",
						duration: 2500,
					})
				} else {
					getTelCode(this.forgotForm.mobile).then(res => {
						if (res.statusCode === 200) {
							if (res.data.code == 0) {
								if (res.data.msg) {
									uni.showToast({
										title: res.data.msg,
										icon: "none",
										duration: 2500,
									})
									return;
								}
								this.isGetCode = true
								this.time = 60
								this.forgotForm.code = ""
								this.forgotForm.password = ""
								this.forgotForm.confirmPassword = ""
								this.timer = setInterval(() => {
									this.time--
									if (this.time == 0) {
										clearInterval(this.timer)
									}
								}, 1000)
							}
						}
					})
				}
			},
		}
	}
</script>
<style>
	/* #ifndef APP-NVUE */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	page {
		box-sizing: border-box;
		padding: 0 48rpx 80rpx;
		height: 100%;
	}

	/* #endif*/
</style>
<style lang="scss" scoped>
	@import '../../common/css/login.scss';
</style>