tougao_web/src/components/page/Retrieve.vue

<template>
	<div class="login-wrap">
		<div class="ms-login">
			<div class="ms-title">{{$t('system.forgetpwd')}}</div>
			<el-form :model="param" :rules="rules" ref="retrieve" label-width="0px" class="ms-content">
				<el-form-item prop="username">
					<el-input v-model="param.username" placeholder="username">
						<i slot="prefix" class="el-icon-lx-people" />
					</el-input>
				</el-form-item>
				<el-form-item prop="code">
					<el-row :span="24">
						<el-col :span="16">
							<el-input size="small" v-model="param.code" auto-complete="off" placeholder="captcha">
								<i slot="prefix" class="el-icon-key" />
							</el-input>
						</el-col>
						<el-col :span="8">
							<div class="login-code">
								<img :src="param.image" @click="refreshCode" alt="captcha" class="captchaimg" />
							</div>
						</el-col>
					</el-row>
				</el-form-item>
				<el-row>
					<el-col :span="16">
						<div class="login-btn">
							<el-button type="primary" @click="submitForm">Submit</el-button>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="backlink">
							<el-link type="primary" href="/">Go login</el-link>
						</div>
					</el-col>
				</el-row>
				<!--<el-row style="text-align: center; margin-top: -10px;;">
                    <el-link type="primary">忘记密码</el-link>
                    <el-link type="primary" @click="doRegister()">用户注册</el-link>
                </el-row>-->
			</el-form>
		</div>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				baseUrl: this.Common.baseUrl,
				email: '',
				param: {
					image: '',
					username: '',
					code: '',
					random_num: ''
				},
				rules: {
					username: [{
						required: true,
						message: 'Please enter your username.',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: 'Please enter the captcha.',
						trigger: 'blur'
					}]
				}
			};
		},
		created: function() {
			this.getCaptcha();
		},
		methods: {
			submitForm() {
				this.$refs.retrieve.validate(valid => {
					if (valid) {
						this.$api
							.post('api/user/retrieveGetEmail', this.param)
							.then(res => {
								if (res.code == 0) {
									this.email = res.email;
									this.open();
								} else {
									this.$message.error(res.msg);
									return false;
								}
							})
							.catch(err => {
								console.log(err);
							});
					} else {
						this.$message.error('Please enter the correct account and password!');
						console.log('error submit!!');
						return false;
					}
				});
			},
			refreshCode() {
				this.getCaptcha();
			},
			getCaptcha() {
				this.param.random_num = Math.random();
				this.param.image = this.baseUrl + 'api/User/retrieveCaptcha?a=' + this.param.random_num;
			},
			open() {
				var content = 'A letter about finding your password will be sent to your email:' + this.email + ',please complete the next steps in the email.';
				this.$confirm(content, 'Tips', {
						distinguishCancelAndClose: true,
						confirmButtonText: 'OK',
						cancelButtonText: 'Cancel'
					})
					.then(() => {
						this.$api
							.post('api/User/retrievePushEmail', {
								email: this.email
							})
							.then(res => {
								console.log(res);
								if (res.code == 0) {
									this.$message({
										type: 'success',
										message: 'Sent successfully!'
									});
									this.$router.push('/');
								} else {
									this.$message({
										type: 'warning',
										message: res.msg
									});
								}
							})
							.catch(err => {
								console.log(err);
							});
					})
					.catch(action => {
						this.$message({
							type: 'info',
							message: action === 'cancel' ? 'Discard save and leave the page' : 'Stay on the current pages'
						});
					});
			}
		}
	};
</script>

<style scoped>
	.login-wrap {
		position: relative;
		width: 100%;
		height: 100%;
		background-image: url(../../assets/img/login-bg.jpg);
		background-size: 100% 100%;
	}

	.ms-title {
		width: 100%;
		line-height: 70px;
		text-align: center;
		font-size: 20px;
		color: #000;
		/* border-bottom: 1px solid #ddd; */
	}

	.ms-login {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 350px;
		margin: -190px 0 0 -175px;
		border-radius: 5px;
		background: #fff;
		overflow: hidden;
	}

	.ms-content {
		padding: 30px 30px;
	}

	.login-btn {
		text-align: center;
	}

	.login-btn button {
		width: 40%;
		height: 36px;
		margin-bottom: 10px;
	}

	.login-tips {
		font-size: 12px;
		line-height: 30px;
		color: #fff;
	}

	.captchaimg {
		margin-top: 2px;
		margin-left: 4px;
	}

	.backlink {
		text-align: left;
		padding-top: 12px;
	}
</style>