登录流程修改

src/modules/base/components/ModifyUser.vue

@@ -37,7 +37,7 @@
           clearable
         ></el-input>
       </el-form-item>
-      <el-form-item prop="mobileNumber" label="手机号：">
+      <el-form-item label="手机号：">
         <el-input
           v-model.trim="modalForm.mobileNumber"
           placeholder="请输入手机号"
@@ -82,7 +82,7 @@
 <script>
 import { updateUser } from "../api";
 // import { logout } from "../../login/api";
-import { phone } from "@/plugins/formRules";
+// import { phone } from "@/plugins/formRules";
 import SelectOrgs from "./SelectOrgs";
 import { SYS_ADMIN_NAME } from "@/constants/enumerate";
 
@@ -146,7 +146,7 @@ export default {
       isSubmit: false,
       modalForm: {},
       rules: {
-        mobileNumber: phone,
+        // mobileNumber: phone,
         loginName: [
           {
             required: true,

src/modules/base/components/ResetPwd.vue

@@ -2,7 +2,7 @@
   <el-dialog
     class="reset-pwd"
     :visible.sync="modalIsShow"
-    title="修改密码"
+    :title="title"
     top="10vh"
     width="448px"
     :close-on-click-modal="false"
@@ -12,34 +12,69 @@
   >
     <el-form
       ref="modalFormComp"
-      :model="resetModel"
+      :model="modalForm"
       :rules="resetRules"
       label-position="top"
     >
-      <el-form-item prop="oldPassword" label="旧密码：">
-        <el-input
-          type="password"
-          v-model="resetModel.oldPassword"
-          placeholder="请输入旧密码"
-          clearable
-        ></el-input>
-      </el-form-item>
-      <el-form-item prop="password" label="新密码：">
-        <el-input
-          type="password"
-          v-model="resetModel.password"
-          placeholder="请输入新密码"
-          clearable
-        ></el-input>
-      </el-form-item>
-      <el-form-item prop="rePassword" label="再次密码：">
-        <el-input
-          type="password"
-          v-model="resetModel.rePassword"
-          placeholder="请再次输入新密码"
-          clearable
-        ></el-input>
-      </el-form-item>
+      <template v-if="needResetPwd">
+        <el-form-item prop="oldPassword" label="旧密码：">
+          <el-input
+            type="password"
+            v-model="modalForm.oldPassword"
+            placeholder="请输入旧密码"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="password" label="新密码：">
+          <el-input
+            type="password"
+            v-model="modalForm.password"
+            placeholder="请输入新密码"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item prop="rePassword" label="再次密码：">
+          <el-input
+            type="password"
+            v-model="modalForm.rePassword"
+            placeholder="请再次输入新密码"
+            clearable
+          ></el-input>
+        </el-form-item>
+      </template>
+      <template v-if="needBindMobile">
+        <el-form-item prop="mobileNumber" label="手机号：">
+          <el-input
+            v-model.trim="modalForm.mobileNumber"
+            placeholder="请输入账号"
+            name="mobileNumber"
+            clearable
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="code" label="验证码：">
+          <div class="vlcode">
+            <div class="vlcode-right">
+              <el-button
+                style="width:100%;"
+                type="text"
+                @click="fetchSmsCode"
+                :disabled="isFetchingCode"
+                >+{{ codeContent }}</el-button
+              >
+            </div>
+            <div class="vlcode-left">
+              <el-input
+                v-model.trim="modalForm.code"
+                placeholder="请输入手机验证码"
+                name="code"
+                clearable
+              >
+              </el-input>
+            </div>
+          </div>
+        </el-form-item>
+      </template>
     </el-form>
     <div slot="footer">
       <el-button type="primary" :disabled="isSubmit" @click="submit"
@@ -52,25 +87,41 @@
 
 <script>
 import { updatePwd } from "../api";
-import { password } from "@/plugins/formRules";
+import { getSmsCode } from "@/modules/login/api";
+import { password, phone, smscode } from "@/plugins/formRules";
 import { Base64 } from "@/plugins/crypto";
+import fetchSmsMixins from "@/modules/login/fetchSmsMixins";
 
 const initModalForm = {
   id: "",
   oldPassword: "",
   password: "",
-  rePassword: ""
+  rePassword: "",
+  mobileNumber: "",
+  code: ""
 };
+
 export default {
   name: "reset-pwd",
   props: {
-    userPassword: {
-      type: String
+    userInfo: {
+      type: Object,
+      default() {
+        return {
+          userId: "",
+          loginName: "",
+          schoolCode: "",
+          password: "",
+          mobileNumber: "",
+          pwdCount: ""
+        };
+      }
     }
   },
+  mixins: [fetchSmsMixins],
   data() {
     const equalToPswd = (rule, value, callback) => {
-      if (value !== this.resetModel.password) {
+      if (value !== this.modalForm.password) {
         callback(new Error("两次输入的密码不一致"));
       } else {
         callback();
@@ -79,8 +130,12 @@ export default {
     return {
       modalIsShow: false,
       isSubmit: false,
-      resetModel: { ...initModalForm },
+      nameWaitTime: "resetpwd",
+      isFetchingCode: false,
+      modalForm: { ...initModalForm },
       resetRules: {
+        code: smscode,
+        mobileNumber: phone,
         oldPassword: password,
         password,
         rePassword: [
@@ -93,11 +148,27 @@ export default {
       }
     };
   },
+  computed: {
+    needBindMobile() {
+      return !this.userInfo.mobileNumber;
+    },
+    needResetPwd() {
+      return !this.userInfo.pwdCount;
+    },
+    title() {
+      if (this.needBindMobile && this.needResetPwd)
+        return "修改密码与绑定手机号";
+      if (this.needBindMobile) return "绑定手机号";
+      if (this.needResetPwd) return "修改密码";
+
+      return "修改密码";
+    }
+  },
   methods: {
     initData(val) {
-      this.resetModel = { ...initModalForm };
-      this.resetModel.oldPassword = this.userPassword || "";
-      this.resetModel.id = this.$ls.get("user", { id: "" }).id;
+      this.modalForm = { ...initModalForm };
+      this.modalForm.oldPassword = this.userInfo.password || "";
+      this.modalForm.id = this.userInfo.userId;
     },
     visibleChange() {
       this.initData(this.instance);
@@ -108,17 +179,67 @@ export default {
     open() {
       this.modalIsShow = true;
     },
+    checkField(field) {
+      return new Promise((resolve, reject) => {
+        this.$refs.modalFormComp.validateField(field, unvalid => {
+          if (unvalid) {
+            reject();
+          } else {
+            resolve();
+          }
+        });
+      });
+    },
+    async fetchSmsCode() {
+      console.log("111");
+      let result = true;
+      await this.checkField("mobileNumber").catch(() => {
+        result = false;
+      });
+
+      if (!result) return;
+
+      this.isFetchingCode = true;
+      const data = await getSmsCode({
+        loginName: this.userInfo.loginName,
+        schoolCode: this.userInfo.schoolCode,
+        password: Base64(this.modalForm.oldPassword),
+        mobileNumber: this.modalForm.mobileNumber
+      }).catch(() => {
+        this.isFetchingCode = false;
+      });
+      if (!data) return;
+
+      this.$message.success(
+        `已向手机尾号【${this.modalForm.mobileNumber.slice(
+          -4
+        )}】成功发送短信，请在2分钟内进行验证！`
+      );
+      this.changeContent();
+    },
     async submit() {
       const valid = await this.$refs.modalFormComp.validate().catch(() => {});
       if (!valid) return;
 
       if (this.isSubmit) return;
       this.isSubmit = true;
-      const datas = {
-        id: this.resetModel.id,
-        oldPassword: Base64(this.resetModel.oldPassword),
-        password: Base64(this.resetModel.password)
+      let datas = {
+        id: this.modalForm.id
       };
+      if (this.needBindMobile) {
+        datas = {
+          ...datas,
+          mobileNumber: this.modalForm.mobileNumber,
+          verifyCode: this.modalForm.code
+        };
+      }
+      if (this.needResetPwd) {
+        datas = {
+          ...datas,
+          oldPassword: Base64(this.modalForm.oldPassword),
+          password: Base64(this.modalForm.password)
+        };
+      }
       const data = await updatePwd(datas).catch(() => {
         this.isSubmit = false;
       });

src/modules/login/views/Login.vue

@@ -68,7 +68,7 @@
     </div>
 
     <!-- 修改密码 -->
-    <reset-pwd :user-password="loginModel.password" ref="ResetPwd"></reset-pwd>
+    <reset-pwd :user-info="userInfo" ref="ResetPwd"></reset-pwd>
   </div>
 </template>
 
@@ -128,6 +128,7 @@ export default {
           }
         ]
       },
+      userInfo: {},
       roles: [],
       isSubmit: false,
       schoolLogo: "",
@@ -178,8 +179,15 @@ export default {
 
       this.$ls.set("token", data.accessToken, this.GLOBAL.authTimeout);
 
-      // 强制修改密码
-      if (!data.pwdCount) {
+      // 强制修改密码和绑定手机号
+      if (
+        !data.userLoginCheckResult.pwdCount ||
+        !data.userLoginCheckResult.mobileNumber
+      ) {
+        this.userInfo = {
+          ...this.loginModel,
+          ...data.userLoginCheckResult
+        };
         this.$refs.ResetPwd.open();
         return;
       }
@@ -240,10 +248,25 @@ export default {
         this.isFetchingCode = false;
       });
       if (!data) return;
-      this.$message.success(
-        `已向手机号【${data}】成功发送短信，请在2分钟内进行验证！`
-      );
-      this.changeContent();
+
+      if (data.mobileNumber) {
+        this.$message.success(
+          `已向手机尾号【${data.mobileNumber.slice(
+            -4
+          )}】成功发送短信，请在2分钟内进行验证！`
+        );
+        this.changeContent();
+      } else {
+        this.isFetchingCode = false;
+        this.$message.error("未绑定手机号，请先绑定！");
+        this.userInfo = {
+          ...data,
+          loginName: this.loginModel.loginName,
+          schoolCode: this.loginModel.schoolCode,
+          password: this.loginModel.password
+        };
+        this.$refs.ResetPwd.open();
+      }
     },
     changeContent() {
       if (!this.isFetchingCode) return;

src/views/Home.vue

@@ -167,7 +167,7 @@
     </el-dialog>
 
     <!-- 修改密码 -->
-    <reset-pwd ref="ResetPwd"></reset-pwd>
+    <reset-pwd :user-info="userInfo" ref="ResetPwd"></reset-pwd>
   </div>
 </template>
 
@@ -183,8 +183,8 @@ export default {
   name: "home",
   components: { ResetPwd },
   data() {
-    const IS_SUPER_ADMIN =
-      this.$ls.get("user", { loginName: "" }).loginName === SYS_ADMIN_NAME;
+    const user = this.$ls.get("user", { id: "", realName: "", roleList: [] });
+    const IS_SUPER_ADMIN = user.loginName === SYS_ADMIN_NAME;
 
     return {
       menus: [],
@@ -192,11 +192,16 @@ export default {
       curActNav: "",
       breadcrumbs: [],
       validRoutes: [],
-      username: this.$ls.get("user", { realName: "" }).realName,
-      userRoles: this.$ls.get("user", { roleList: [] }).roleList,
+      username: user.realName,
+      userRoles: user.roleList,
       schoolLogo: this.$ls.get("schoolLogo"),
       schoolName: this.$ls.get("schoolName"),
       menuDailogIsShow: false,
+      userInfo: {
+        pwdCount: 0,
+        mobileNumber: 1,
+        userId: user.id
+      },
       IS_SUPER_ADMIN
     };
   },