Merge branch 'master' of http://gcls-git.helxsoft.cn/GCLS/eep_page

src/api/app.js

@@ -153,3 +153,10 @@ export function PinyinToAudioFile(data) {
 export function GetVerificationCodeImage() {
   return http.get(`${process.env.VUE_APP_EepServer}?MethodName=login_control-GetVerificationCodeImage`);
 }
+
+/**
+ * @description 重置密码
+ */
+export function ResetPassword(data) {
+  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=user_manager-ResetPassword`, data);
+}

src/views/login/forgotPwd.vue

@@ -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>

src/views/login/index.vue

@@ -40,7 +40,9 @@
                 >《用户协议》</span
               >
             </span>
-            <span style="color: #4d78ff; cursor: pointer">忘记密码？| <a @click="goRegister">注册</a></span>
+            <span style="color: #4d78ff; cursor: pointer" @click="forgotPwd"
+              >忘记密码？| <a @click="goRegister">注册</a></span
+            >
           </div>
         </el-form-item>
       </el-form>
@@ -55,6 +57,16 @@
     >
       <userAgreement class="userAgree-login" :change-agreement="changeAgreement" />
     </el-dialog>
+    <el-dialog
+      :visible.sync="forgotPwdFlag"
+      width="500px"
+      append-to-body
+      :show-close="false"
+      :close-on-click-modal="false"
+      class="login-userAgree"
+    >
+      <forgot-pwd @cancelFot="cancelFot"></forgot-pwd>
+    </el-dialog>
   </div>
 </template>
 
@@ -66,10 +78,11 @@ import { getUserTypeToJump } from '@/router/guard';
 import { updateBaseURL } from '@/utils/http';
 
 import UserAgreement from './userAgreement.vue';
+import ForgotPwd from './forgotPwd.vue';
 
 export default {
   name: 'LoginPage',
-  components: { UserAgreement },
+  components: { UserAgreement, ForgotPwd },
   data() {
     return {
       isAgree: getLocalStore('isAgree'), // 是否同意用户协议
@@ -101,6 +114,7 @@ export default {
       },
       image_content_base64: '',
       showUseragreement: false,
+      forgotPwdFlag: false,
     };
   },
   created() {
@@ -161,6 +175,13 @@ export default {
       setLocalStore('server_address', this.form.server_address);
       updateBaseURL();
     },
+    // 忘记密码
+    forgotPwd() {
+      this.forgotPwdFlag = true;
+    },
+    cancelFot() {
+      this.forgotPwdFlag = false;
+    },
   },
 };
 </script>