vist_go_uniApp/pages/user/forget-password.vue

<template>
	<view :class="{dark: pattern=='dark'}">
		<view class="width100 flex-column-plus pad-32">
			<view class="flex-items mar-l-40 mar-t-20">
				<!-- <image class="logo" src="../../static/images/image5@3x.png" mode=""></image> -->
			</view>
			<view class="mar-t-50 pad-32 radius-16">
				<view class="input-container flex-items">
					<!-- <image class="login_icon mar-l-20 mar-r-20" src="../../static/images/login_email_icon@2x.png"> -->
					<!-- </image> -->
					<input class="mar-l-10 uni-input" v-model="user.mail" :placeholder="$t('login').r_email" />
					<view class="clear-btn" @click="clearInput('mail')" v-if="user.mail">x</view>
				</view>
				<view class="input-container mar-t-16 flex-row flex-items flex-sp-between">
					<input class="mar-l-10 uni-input" v-model="user.code" :placeholder="$t('login').code" />
					<view class="clear-btn" @click="clearInput('code')" v-if="user.code">x</view>
					<button type="primary" size="mini" :plain="true" @click="getCode">{{ text }}</button>
				</view>
				<view class="input-container mar-t-16 flex-items">
					<!-- <image class="login_icon mar-l-20 mar-r-20" src="../../static/images/Frame@2x.png"></image> -->
					<input class="mar-l-10 uni-input" type="password" v-model="user.password"
						:placeholder="$t('login').r_password" />
					<view class="clear-btn" @click="clearInput('password')" v-if="user.password">x</view>
				</view>
				<view class="input-container mar-t-16 flex-items">
					<!-- <image class="login_icon mar-l-20 mar-r-20" src="../../static/images/Frame@2x.png"></image> -->
					<input class="mar-l-10 uni-input" type="password" v-model="user.repassword"
						:placeholder="$t('login').r_repassword" />
					<view class="clear-btn" @click="clearInput('repassword')" v-if="user.repassword">x</view>
				</view>
				<button class="mar-t-32 font32" style="background-color: #3C86F7;" type="primary" :loading="loading"
					@click="resetPWD">{{$t('login').reset_pwd}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCode,
		forgetPassword
	} from '@/config/api.js';
	const seconds = 60 // 60秒倒计时
	export default {
		data() {
			return {
				user: {
					mail: '',
					code: '',
					password: '',
					repassword: ''
				},
				code: '',
				loading: false,
				timer: null,
				seconds: seconds,
				status: false,
				text: ''
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title: this.$t('login').reset_pwd
			})
			this.text = this.$t('login').getcode
		},
		onShow() {},
		onUnload() {
			this.timer && this.clearTimer();
		},
		methods: {
			async getCode() {
				if (this.status) return

				let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
				if (!reg.test(this.user.mail)) return uni.$u.toast(this.$t('login').test_email)

				// 请求获取验证码
				const res = await getCode({
					mail: this.user.mail
				})
				if (res.code !== 200) return uni.$u.toast(res.msg)

				this.status = true
				this.countdown()

				this.timer = setInterval(() => {
					if (this.seconds === 0) {
						this.timer && this.clearTimer()
						this.status = false
						this.text = this.$t('login').getcode
						this.seconds = seconds
					} else {
						this.countdown()
					}
				}, 1000)

				uni.$u.toast(this.$t('login').send_code)
			},
			countdown() {
				this.seconds--
				this.text = this.seconds + 's'
			},
			clearTimer() {
				console.log('注销定时器')
				clearInterval(this.timer)
				this.timer = null
			},
			async resetPWD() {
				// 邮箱
				if (this.user.mail == '') {
					uni.$u.toast(this.$t('login').email)
					return
				}
				if (this.user.password == '') {
					uni.$u.toast(this.$t('login').password)
					return
				}
				if (this.user.password != this.user.repassword) {
					uni.$u.toast(this.$t('login').r_password_msg)
					return
				}
				const data = await forgetPassword(this.user)
				if (data.code == 200) {
					uni.showToast({
						title: this.$t('global').reset_psd_success_msg,
						duration: 2000,
						mask: true,
						complete: res => {
							this.$Router.replace({
								path: '/pages/user/login'
							})
						}
					});
				}
			},
			clearInput(field) {
				this.user[field] = '';
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: white;
	}

	.logo {
		width: 170rpx;
		height: 47rpx;
	}

	.uni-input {
		height: 80rpx;
		line-height: 80rpx;
		border: none;
		outline: none;
		flex: 1;
		padding: 0;
	}

	.input-container {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ccc;
		padding-bottom: 5rpx;
		margin-bottom: 16rpx;
	}

	.login_icon {
		width: 45rpx;
		height: 45rpx;
	}

	button {
		white-space: nowrap;
		margin-right: 10rpx;
	}

	.clear-btn {
		cursor: pointer;
		padding: 0 10rpx;
		color: #999;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.clear-btn:hover {
		color: #333;
	}
</style>