|
|
@@ -0,0 +1,541 @@
|
|
|
+<template>
|
|
|
+ <div class="forgot-container">
|
|
|
+ <h2 class="title-big">忘记密码</h2>
|
|
|
+ <el-form
|
|
|
+ label-position="top"
|
|
|
+ label-width="80px"
|
|
|
+ ref="loginCodeForm"
|
|
|
+ :model="loginCodeForm"
|
|
|
+ class="form"
|
|
|
+ :hide-required-asterisk="true"
|
|
|
+ :rules="rulesCode"
|
|
|
+ >
|
|
|
+ <el-form-item label="邮箱" prop="phone_or_email">
|
|
|
+ <el-input
|
|
|
+ v-model="loginCodeForm.phone_or_email"
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入邮箱"
|
|
|
+ @blur="handleTrim('loginCodeForm', 'phone_or_email')"
|
|
|
+ maxlength="20"
|
|
|
+ @change="ChangeEmail"
|
|
|
+ >
|
|
|
+ <!-- <template slot="prepend">+86</template> -->
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="验证码" prop="code" class="code-box">
|
|
|
+ <el-input
|
|
|
+ v-model="loginCodeForm.code"
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ class="code-input"
|
|
|
+ @blur="handleTrim('loginCodeForm', 'code')"
|
|
|
+ @input="handeleInput"
|
|
|
+ maxlength="20"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="sendCode('time', 'phone_or_email', 'verificationCodeShow')"
|
|
|
+ size="small"
|
|
|
+ class="sendCode"
|
|
|
+ @input="handeleInput"
|
|
|
+ >
|
|
|
+ {{ verificationCodeShow ? time + 's' : '发送验证码' }}
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="新密码" prop="newPwd">
|
|
|
+ <el-input
|
|
|
+ v-model="loginCodeForm.newPwd"
|
|
|
+ :type="newPwdFlag ? 'text' : 'password'"
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ @blur="handleTrim('loginCodeForm', 'newPwd')"
|
|
|
+ maxlength="20"
|
|
|
+ @input="handeleInput"
|
|
|
+ >
|
|
|
+ <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('newPwdFlag')" v-if="newPwdFlag"></i>
|
|
|
+ <i slot="suffix" class="show-icon" @click="changeIcon('newPwdFlag')" v-else>
|
|
|
+ <svg-icon icon-class="eye-invisible"></svg-icon>
|
|
|
+ </i>
|
|
|
+ </el-input>
|
|
|
+ <p class="tips">不少于6位，且必须同时包含数字和大小写字母</p>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="再次输入" prop="confirmPwd">
|
|
|
+ <el-input
|
|
|
+ v-model="loginCodeForm.confirmPwd"
|
|
|
+ :type="comfirmPwdFlag ? 'text' : 'password'"
|
|
|
+ autocomplete="off"
|
|
|
+ placeholder="请输入密码"
|
|
|
+ @blur="handleTrim('loginCodeForm', 'confirmPwd')"
|
|
|
+ maxlength="20"
|
|
|
+ @input="handeleInput"
|
|
|
+ >
|
|
|
+ <i
|
|
|
+ slot="suffix"
|
|
|
+ class="el-icon-view show-icon"
|
|
|
+ @click="changeIcon('comfirmPwdFlag')"
|
|
|
+ v-if="comfirmPwdFlag"
|
|
|
+ ></i>
|
|
|
+ <i slot="suffix" class="show-icon" @click="changeIcon('comfirmPwdFlag')" v-else>
|
|
|
+ <svg-icon icon-class="eye-invisible"></svg-icon>
|
|
|
+ </i>
|
|
|
+ </el-input>
|
|
|
+ <p class="tips">再次输入密码，两次输入保持一致</p>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="用户类型" prop="type">
|
|
|
+ <el-radio-group v-model="loginCodeForm.type">
|
|
|
+ <el-radio label="USER">机构用户</el-radio>
|
|
|
+ <el-radio label="ORG_MANAGER">机构管理员</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="btn-box">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ @click="onSubmitPassword('loginCodeForm')"
|
|
|
+ size="small"
|
|
|
+ :disabled="submitDis"
|
|
|
+ :loading="loading"
|
|
|
+ >确定</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="onCancel()" size="small">取消</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { ResetPassword } from '@/api/app';
|
|
|
+import { sendVerificationCode } from '@/api/user';
|
|
|
+export default {
|
|
|
+ name: 'forgotPwd',
|
|
|
+ props: [],
|
|
|
+ data() {
|
|
|
+ const validatePass = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请输入密码'));
|
|
|
+ } else {
|
|
|
+ let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{8,12}$/;
|
|
|
+
|
|
|
+ let result = reg.test(value);
|
|
|
+ if (result) {
|
|
|
+ callback();
|
|
|
+ } else {
|
|
|
+ callback(new Error('8-16 位密码，且必须同时包含数字和大小写字母'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const validatePass2 = (rule, value, callback) => {
|
|
|
+ if (value === '') {
|
|
|
+ callback(new Error('请再次输入密码'));
|
|
|
+ } else if (value !== this.loginCodeForm.newPwd) {
|
|
|
+ callback(new Error('两次输入密码不一致!'));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ loginCodeForm: {
|
|
|
+ type: 'USER',
|
|
|
+ phone_or_email: '',
|
|
|
+ code: '',
|
|
|
+ newPwd: '', // 密码
|
|
|
+ confirmPwd: '', // 确认密码
|
|
|
+ },
|
|
|
+ rulesCode: {
|
|
|
+ phone_or_email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
|
|
|
+ code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
|
|
|
+ newPwd: [
|
|
|
+ { required: true, validator: validatePass, trigger: 'blur' },
|
|
|
+ {
|
|
|
+ min: 6,
|
|
|
+ max: 16,
|
|
|
+ message: '请输入 8-16 位密码，且必须同时包含数字和大小写字母',
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ confirmPwd: [{ required: true, validator: validatePass2, trigger: 'blur' }],
|
|
|
+ },
|
|
|
+ time: 60, //获取验证码的时间
|
|
|
+ verificationCodeShow: false, //是否已经获取了验证码
|
|
|
+ loading: false,
|
|
|
+ timer: null,
|
|
|
+ submitDis: true,
|
|
|
+ newPwdFlag: false, // 查看新密码
|
|
|
+ comfirmPwdFlag: false, // 查看确认密码
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ // 验证邮箱
|
|
|
+ ChangeEmail() {
|
|
|
+ let reg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; // 验证邮箱的正则
|
|
|
+ this.EmailError = reg.test(this.loginCodeForm.phone_or_email);
|
|
|
+ if (!this.EmailError) {
|
|
|
+ this.EmailError = false;
|
|
|
+ // 邮箱格式不正确
|
|
|
+ this.$message.error('邮箱格式不正确');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 验证密码
|
|
|
+ changeParssword() {
|
|
|
+ if (this.loginCodeForm.newPwd) {
|
|
|
+ // let reg = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,12}$/;
|
|
|
+ let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{8,12}$/;
|
|
|
+ let result = reg.test(this.loginCodeForm.newPwd);
|
|
|
+ if (result) {
|
|
|
+ this.passwordError = false;
|
|
|
+ } else {
|
|
|
+ this.passwordError = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 密码登录提交表单
|
|
|
+ onSubmitPassword(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true;
|
|
|
+ let data = {
|
|
|
+ user_type: this.loginCodeForm.type,
|
|
|
+ phone_or_email: this.loginCodeForm.phone_or_email,
|
|
|
+ verification_code: this.loginCodeForm.code,
|
|
|
+ verification_type: 'EMAIL',
|
|
|
+ password: this.loginCodeForm.newPwd,
|
|
|
+ };
|
|
|
+ ResetPassword(data)
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.$message.success('修改密码成功！');
|
|
|
+ this.onCancel();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ this.verificationCodeShow = false;
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.time = 60;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 取消 恢复到修改前状态
|
|
|
+ onCancel() {
|
|
|
+ this.$emit('cancelFot');
|
|
|
+ },
|
|
|
+ // 发送验证码
|
|
|
+ sendCode(time, phone, flag) {
|
|
|
+ if (!this.EmailError) {
|
|
|
+ this.EmailError = false;
|
|
|
+ this.$message.error('邮箱格式不正确');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let this_ = this;
|
|
|
+ if (this_[time] != 60) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this_.timer = null;
|
|
|
+ if (this_.loginCodeForm[phone]) {
|
|
|
+ this_[flag] = true;
|
|
|
+ this_.timer = setInterval(() => {
|
|
|
+ this_[time]--;
|
|
|
+ if (this_[time] == 0) {
|
|
|
+ this_[flag] = false;
|
|
|
+ clearInterval(this_.timer);
|
|
|
+ this_.timer = null;
|
|
|
+ this_[time] = 60;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ let data = {
|
|
|
+ verification_type: 'EMAIL',
|
|
|
+ phone_or_email: this.loginCodeForm.phone_or_email,
|
|
|
+ };
|
|
|
+ sendVerificationCode(data)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.$message.success('验证码发送成功');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this_[flag] = false;
|
|
|
+ clearInterval(this_.timer);
|
|
|
+ this_.timer = null;
|
|
|
+ this_[time] = 60;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this_.$message.warning('请先输入邮箱');
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 去掉前后空格
|
|
|
+ handleTrim(form, fild) {
|
|
|
+ this[form][fild] = this[form][fild].trim();
|
|
|
+ if (
|
|
|
+ this.loginCodeForm.phone_or_email &&
|
|
|
+ this.loginCodeForm.code &&
|
|
|
+ this.loginCodeForm.newPwd &&
|
|
|
+ this.loginCodeForm.confirmPwd
|
|
|
+ ) {
|
|
|
+ this.submitDis = false;
|
|
|
+ } else {
|
|
|
+ this.submitDis = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handeleInput() {
|
|
|
+ if (
|
|
|
+ this.loginCodeForm.phone_or_email &&
|
|
|
+ this.loginCodeForm.code &&
|
|
|
+ this.loginCodeForm.newPwd &&
|
|
|
+ this.loginCodeForm.confirmPwd
|
|
|
+ ) {
|
|
|
+ this.submitDis = false;
|
|
|
+ } else {
|
|
|
+ this.submitDis = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeIcon(flag) {
|
|
|
+ this[flag] = !this[flag];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.forgot-container {
|
|
|
+ padding: 44px 72px;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ .title-big {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 32px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-name {
|
|
|
+ margin: 0 0 40px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #86909c;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tabs-box {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ a {
|
|
|
+ padding: 5px 16px;
|
|
|
+ margin-right: 16px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4e5969;
|
|
|
+ border-radius: 100px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #f2f3f5;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #165dff;
|
|
|
+ background: #f2f3f5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form {
|
|
|
+ margin-top: 20px;
|
|
|
+
|
|
|
+ .show-icon {
|
|
|
+ color: #4e5969;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .forgotPwd {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #165dff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.result-box {
|
|
|
+ padding-top: 46px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 64px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ width: 260px;
|
|
|
+ margin: 16px auto 62px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tips {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #86909c;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.forgot-container {
|
|
|
+ .form {
|
|
|
+ .el-form-item__label {
|
|
|
+ padding-bottom: 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4e5969;
|
|
|
+ }
|
|
|
+
|
|
|
+ .userAgree-box {
|
|
|
+ .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-checkbox-group {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .el-checkbox {
|
|
|
+ font-weight: 400;
|
|
|
+ color: rgba(0, 0, 0, 88%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-box {
|
|
|
+ .el-button {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button + .el-button {
|
|
|
+ margin-top: 8px;
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button--primary {
|
|
|
+ background: #165dff;
|
|
|
+ border-color: #165dff;
|
|
|
+ border-radius: 2px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #4080ff;
|
|
|
+ border-color: #4080ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ background: #0e42d2;
|
|
|
+ border-color: #0e42d2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button--default {
|
|
|
+ color: #4e5969;
|
|
|
+ background: #f2f3f5;
|
|
|
+ border: none;
|
|
|
+ border-radius: 2px;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #e5e6eb;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ background: #c9cdd4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .code-box {
|
|
|
+ .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .code-input {
|
|
|
+ height: 32px;
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ border-radius: 4px 0 0 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .sendCode {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 92px;
|
|
|
+ margin-top: 1px;
|
|
|
+ border-radius: 0 4px 4px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item__content,
|
|
|
+ .el-input__icon {
|
|
|
+ line-height: 32px;
|
|
|
+ color: #4e5969 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ height: 32px;
|
|
|
+ color: #1d2129;
|
|
|
+ background: #f2f3f5;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-textarea__inner,
|
|
|
+ .el-input-group__prepend {
|
|
|
+ color: #1d2129;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-checkbox__input.is-checked + .el-checkbox__label {
|
|
|
+ color: #165dff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-checkbox__input.is-checked .el-checkbox__inner,
|
|
|
+ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
|
|
|
+ background: #165dff;
|
|
|
+ border-color: #165dff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input-group__prepend {
|
|
|
+ width: 54px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 0;
|
|
|
+ line-height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ background: #f2f3f5;
|
|
|
+ border: none;
|
|
|
+ border-radius: 2px 0 0 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input-group--prepend {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .el-input__inner {
|
|
|
+ flex: 1;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button--primary.is-disabled,
|
|
|
+ .el-button--primary.is-disabled:active,
|
|
|
+ .el-button--primary.is-disabled:focus,
|
|
|
+ .el-button--primary.is-disabled:hover {
|
|
|
+ background-color: #a0cfff;
|
|
|
+ border-color: #a0cfff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zq