重置密码页面修改

src/views/forgetpassword/index.vue

@@ -1,59 +1,86 @@
 <template>
   <div class="reset-wrapper">
-    <!-- Reset Password -->
     <el-page-header :content="$t('passwordReset:title:reset')" @back="goBack" />
-    <div class="box-wrapper">
+    <el-steps :active="active" align-center style="margin-top: 30px">
+      <el-step :title="$t('resetPassword:step:VerifyIdentity')"></el-step>
+      <el-step :title="$t('resetPassword:step:ResetPassword')"></el-step>
+      <el-step :title="$t('resetPassword:step:ResetSuccess')"></el-step>
+    </el-steps>
+    <!-- Reset Password -->
+
+    <div class="box-wrapper" v-if="active === 0">
       <el-form
         ref="resetForm"
         v-loading="formLoading"
         :model="form"
-        label-width="200px"
+        label-width="100px"
         :rules="rules"
         class="demo-ruleForm"
         size="small"
       >
         <!-- 邮箱 -->
-        <el-form-item :label="$t('passwordReset:form:email')" prop="EmailOrPhone">
+        <el-form-item
+          :label="$t('passwordReset:form:email')"
+          prop="EmailOrPhone"
+        >
           <el-col :span="18">
-            <el-input v-model="form.EmailOrPhone" autocomplete="off" @change="handleEmailChange" />
-          </el-col>
-          <el-col :span="6" style="text-align:right;">
-            <el-button
-              size="small"
-              type="primary"
-              style="width:80%;"
-              :disabled="sendDisabled"
-              @click="handleSendCode"
-            >{{ sendTitle }}</el-button>
+            <el-input
+              v-model="form.EmailOrPhone"
+              autocomplete="off"
+              @change="handleEmailChange"
+            />
           </el-col>
         </el-form-item>
         <!-- 验证码 -->
-        <el-form-item :label="$t('trials:researchForm:form:verifyCode')" required>
+        <el-form-item
+          :label="$t('trials:researchForm:form:verifyCode')"
+          required
+        >
           <el-col :span="18">
             <el-form-item prop="VerificationCode">
               <el-input v-model="form.VerificationCode" autocomplete="off" />
             </el-form-item>
           </el-col>
-          <el-col :span="6" style="text-align:right;">
-            <!-- 校验 -->
+          <el-col :span="6" style="text-align: right">
             <el-button
               size="small"
               type="primary"
-              style="width:80%;"
-              :disabled="form.VerificationCode === '' || form.EmailOrPhone === ''"
-              @click="verifyCode"
+              style="width: 80%"
+              :disabled="sendDisabled"
+              @click="handleSendCode"
+              >{{ sendTitle }}</el-button
             >
-              {{ $t('passwordReset:button:verify') }}
-            </el-button>
           </el-col>
         </el-form-item>
+      </el-form>
+      <!-- 校验 -->
+      <el-button
+        size="small"
+        type="primary"
+        style="width: 50%; margin: auto; display: block"
+        :disabled="form.VerificationCode === '' || form.EmailOrPhone === ''"
+        @click="verifyCode"
+      >
+        {{ $t("passwordReset:button:verify") }}
+      </el-button>
+    </div>
+    <div class="box-wrapper" v-if="active === 1">
+      <el-form
+        ref="resetForm"
+        v-loading="formLoading"
+        :model="form"
+        label-width="100px"
+        :rules="rules"
+        class="demo-ruleForm"
+        size="small"
+      >
         <!-- 用户名 -->
         <el-form-item :label="$t('passwordReset:form:userName')" prop="UserId">
           <el-select
             v-model="form.UserId"
             clearable
             filterable
-            style="width:100%"
+            style="width: 100%"
             @change="handleUserChange"
           >
             <el-option
@@ -63,65 +90,102 @@
               :value="item.UserId"
             >
               <span style="float: left">{{ item.UserName }}</span>
-              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.UserType }}</span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{
+                item.UserType
+              }}</span>
             </el-option>
           </el-select>
         </el-form-item>
         <!-- 用户类型 -->
-        <el-form-item v-if="form.UserId" :label="$t('passwordReset:form:userType')">
+        <el-form-item
+          v-if="form.UserId"
+          :label="$t('passwordReset:form:userType')"
+        >
           <el-input v-model="form.UserType" disabled />
         </el-form-item>
         <!-- 新密码 -->
-        <el-form-item class="my_new_pwd" :label="$t('passwordReset:form:password')" prop="NewPwd" style="position: relative">
+        <el-form-item
+          class="my_new_pwd"
+          :label="$t('passwordReset:form:password')"
+          prop="NewPwd"
+          style="position: relative"
+        >
           <el-input v-model="form.NewPwd" show-password autocomplete="off" />
-          <span style="position: absolute;right: -30px">
-            <el-tooltip :content="$t('passwordReset:form:passwordCentent')" placement="top">
+          <span style="position: absolute; right: -30px">
+            <el-tooltip
+              :content="$t('passwordReset:form:passwordCentent')"
+              placement="top"
+            >
               <i class="el-icon-question" />
             </el-tooltip>
           </span>
         </el-form-item>
         <!-- 确认密码 -->
-        <el-form-item :label="$t('passwordReset:form:confirmPassword')" prop="CheckPass">
+        <el-form-item
+          :label="$t('passwordReset:form:confirmPassword')"
+          prop="CheckPass"
+        >
           <el-input v-model="form.CheckPass" show-password autocomplete="off" />
         </el-form-item>
-        <el-form-item style="text-align:right;">
-          <!-- 取消 -->
-          <el-button size="small" @click="onCancel">
-            {{ $t('passwordReset:button:cancel') }}
-          </el-button>
-          <!-- 提交 -->
-          <el-button size="small" type="primary" @click="onSubmit">
-            {{ $t('passwordReset:button:submit') }}
-          </el-button>
-        </el-form-item>
       </el-form>
+      <div style="width: 50%; margin: auto; display: flex">
+        <!-- 取消 -->
+        <el-button size="small" @click="onCancel" style="width: 46%">
+          {{ $t("passwordReset:button:cancel") }}
+        </el-button>
+        <!-- 提交 -->
+        <el-button
+          size="small"
+          type="primary"
+          @click="onSubmit"
+          style="width: 46%"
+        >
+          {{ $t("passwordReset:button:submit") }}
+        </el-button>
+      </div>
+    </div>
+    <div class="box-wrapper flexBox" v-if="active === 3">
+      <svg-icon icon-class="resetSuccess" style="width: 300px; height: 300px" />
+      <p style="width: 100%; text-align: center">
+        {{ $t("resetPassword:successTip") }}
+      </p>
+      <el-button size="small" type="primary" @click="goBack">
+        {{ $t("passwordReset:button:back") }}
+      </el-button>
     </div>
   </div>
 </template>
 <script>
-
-import { anonymousSendVerificationCode, verifyAnonymousVerifyCode, anonymousSetPassword } from '@/api/user'
-import md5 from 'js-md5'
-var timer = ''
-var countdown = 60
+import {
+  anonymousSendVerificationCode,
+  verifyAnonymousVerifyCode,
+  anonymousSetPassword,
+} from "@/api/user";
+import md5 from "js-md5";
+import Img from "@/assets/icons/svg/resetSuccess.svg";
+var timer = "";
+var countdown = 60;
 export default {
   data() {
     var validateEmail = (rule, value, callback) => {
-      if (value === '') {
+      if (value === "") {
         // 请输入邮箱
-        callback(new Error(this.$t('passwordReset:formRule:email')))
+        callback(new Error(this.$t("passwordReset:formRule:email")));
       } else {
-        var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
+        var reg =
+          /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
         if (this.form.EmailOrPhone && reg.test(this.form.EmailOrPhone)) {
-          this.sendDisabled = false
-          callback()
+          this.sendDisabled = false;
+          callback();
         } else {
           // 邮箱无效
-          callback(new Error(this.$t('passwordReset:formRule:passwordinvalid')))
-          this.sendDisabled = true
+          callback(
+            new Error(this.$t("passwordReset:formRule:passwordinvalid"))
+          );
+          this.sendDisabled = true;
         }
       }
-    }
+    };
     // var validatePass = (rule, value, callback) => {
     //   if (value === '') {
     //     // 请输入密码
@@ -134,119 +198,179 @@ export default {
     //   }
     // }
     var validatePass2 = (rule, value, callback) => {
-      if (value === '' || value === undefined) {
+      if (value === "" || value === undefined) {
         // 请再次输入密码
-        callback(new Error(this.$t('passwordReset:formRule:confirmPassword')))
+        callback(new Error(this.$t("passwordReset:formRule:confirmPassword")));
       } else if (value !== undefined && value !== this.form.NewPwd) {
         // 两次密码不一致
-        callback(new Error(this.$t('passwordReset:formRule:passwordsDiffer')))
+        callback(new Error(this.$t("passwordReset:formRule:passwordsDiffer")));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
+      active: 3,
+      Img,
       form: {
-        EmailOrPhone: '',
-        VerificationCode: '',
-        NewPwd: '',
-        UserId: '',
-        UserType: ''
+        EmailOrPhone: "",
+        VerificationCode: "",
+        NewPwd: "",
+        UserId: "",
+        UserType: "",
       },
       users: [],
-      CheckPass: '',
+      CheckPass: "",
       rules: {
         EmailOrPhone: [
-          { required: true, validator: validateEmail, trigger: ['blur', 'change'] }
+          {
+            required: true,
+            validator: validateEmail,
+            trigger: ["blur", "change"],
+          },
+        ],
+        VerificationCode: [
+          {
+            required: true,
+            message: this.$t("common:ruleMessage:specify"),
+            trigger: ["blur", "change"],
+          },
+        ],
+        NewPwd: [
+          {
+            required: true,
+            validator: this.$validatePassword,
+            trigger: ["blur", "change"],
+          },
+        ],
+        CheckPass: [
+          {
+            required: true,
+            validator: validatePass2,
+            trigger: ["blur", "change"],
+          },
+        ],
+        UserId: [
+          {
+            required: true,
+            message: this.$t("common:ruleMessage:select"),
+            trigger: ["blur", "change"],
+          },
         ],
-        VerificationCode: [{ required: true, message: this.$t('common:ruleMessage:specify'), trigger: ['blur', 'change'] }],
-        NewPwd: [{ required: true, validator: this.$validatePassword, trigger: ['blur', 'change'] }],
-        CheckPass: [{ required: true, validator: validatePass2, trigger: ['blur', 'change'] }],
-        UserId: [{ required: true, message: this.$t('common:ruleMessage:select'), trigger: ['blur', 'change'] }]
       },
       sendDisabled: true,
-      sendTitle: this.$t('passwordReset:button:send'),
-      formLoading: false
-    }
+      sendTitle: this.$t("passwordReset:button:send"),
+      formLoading: false,
+    };
   },
   methods: {
     onSubmit() {
-      this.$refs['resetForm'].validate(valid => {
+      this.$refs["resetForm"].validate((valid) => {
         if (valid) {
-          this.formLoading = true
-          anonymousSetPassword(this.form.UserId, md5(this.form.NewPwd)).then(res => {
-            if (res.IsSuccess) {
-              // 修改成功
-              this.$message.success(this.$t('passwordReset:message:updatedSuccessfully'))
-              this.formLoading = false
-              this.goBack()
-            } else {
-              this.$alert(res.ErrorMessage)
-            }
-          }).catch(() => { this.formLoading = false })
+          this.formLoading = true;
+          anonymousSetPassword(this.form.UserId, md5(this.form.NewPwd))
+            .then((res) => {
+              if (res.IsSuccess) {
+                // 修改成功
+                this.$message.success(
+                  this.$t("passwordReset:message:updatedSuccessfully")
+                );
+                this.formLoading = false;
+                this.active = 3;
+                // this.goBack();
+              } else {
+                this.$alert(res.ErrorMessage);
+              }
+            })
+            .catch(() => {
+              this.formLoading = false;
+            });
         }
-      })
+      });
     },
     handleSendCode() {
-      const that = this
-      this.sendDisabled = true
+      const that = this;
+      this.sendDisabled = true;
       // var isReviewer = JSON.parse(zzSessionStorage.getItem('IsReviewer'))
-      anonymousSendVerificationCode(this.form.EmailOrPhone).then(res => {
-        if (res.IsSuccess) {
-          that.settime(that)
-        } else {
-          that.$alert(res.ErrorMessage)
-        }
-      }).catch(() => {
-        this.sendDisabled = false
-      })
+      anonymousSendVerificationCode(this.form.EmailOrPhone)
+        .then((res) => {
+          if (res.IsSuccess) {
+            that.settime(that);
+          } else {
+            that.$alert(res.ErrorMessage);
+          }
+        })
+        .catch(() => {
+          this.sendDisabled = false;
+        });
     },
     verifyCode() {
-      this.formLoading = true
-      verifyAnonymousVerifyCode(this.form.EmailOrPhone, this.form.VerificationCode).then(res => {
-        this.formLoading = false
-        this.users = res.Result
-        // 验证成功
-        this.$message.success(this.$t('passwordReset:message:verifiedSuccessfully'))
-      }).catch(() => { this.formLoading = false })
+      this.formLoading = true;
+      verifyAnonymousVerifyCode(
+        this.form.EmailOrPhone,
+        this.form.VerificationCode
+      )
+        .then((res) => {
+          this.formLoading = false;
+          this.users = res.Result;
+          if (this.users.length === 1) {
+            this.form.UserId = this.users[0].UserId;
+            this.form.UserType = this.users[0].UserType;
+          }
+          // 验证成功
+          this.$message.success(
+            this.$t("passwordReset:message:verifiedSuccessfully")
+          );
+          this.active = 1;
+        })
+        .catch(() => {
+          this.formLoading = false;
+        });
     },
     handleEmailChange() {
-      var reg = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
+      var reg =
+        /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
       if (this.form.EmailOrPhone && reg.test(this.form.EmailOrPhone)) {
-        this.sendDisabled = false
+        this.sendDisabled = false;
       }
     },
     handleUserChange(val) {
-      const seleted = this.users.findIndex(user => user.UserId === val)
+      const seleted = this.users.findIndex((user) => user.UserId === val);
       if (seleted > -1) {
-        this.form.UserType = this.users[seleted].UserType
+        this.form.UserType = this.users[seleted].UserType;
       }
     },
     settime(obj) {
       if (countdown === 0) {
-        obj.sendDisabled = false
-        obj.sendTitle = this.$t('passwordReset:button:send')
-        countdown = 60
-        clearTimeout(timer)
-        return
+        obj.sendDisabled = false;
+        obj.sendTitle = this.$t("passwordReset:button:send");
+        countdown = 60;
+        clearTimeout(timer);
+        return;
       } else {
-        obj.sendDisabled = true
-        obj.sendTitle = `${this.$t('passwordReset:button:wait')}(${countdown}s)`
-        countdown--
+        obj.sendDisabled = true;
+        obj.sendTitle = `${this.$t(
+          "passwordReset:button:wait"
+        )}(${countdown}s)`;
+        countdown--;
         // eslint-disable-next-line no-self-assign
-        countdown = countdown
-        timer = setTimeout(function() {
-          obj.settime(obj)
-        }, 1000)
+        countdown = countdown;
+        timer = setTimeout(function () {
+          obj.settime(obj);
+        }, 1000);
       }
     },
     onCancel() {
-      this.$refs['resetForm'].resetFields()
+      this.$refs["resetForm"].resetFields();
+      Object.keys(this.form).forEach((key) => {
+        this.form[key] = "";
+      });
+      this.active = 0;
     },
     goBack() {
-      this.$router.push('/login')
-    }
-  }
-}
+      this.$router.push("/login");
+    },
+  },
+};
 </script>
 <style>
 .reset-wrapper {
@@ -270,7 +394,12 @@ export default {
 /*/deep/ .is-error{*/
 /*  margin-bottom: 40px;*/
 /*}*/
-.is-error.my_new_pwd{
+.is-error.my_new_pwd {
   margin-bottom: 40px;
 }
+.flexBox {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
 </style>