双重校验

src/api/login.js

@@ -1,12 +1,12 @@
 import request from '@/utils/request'
 
 // 登录方法
-export function login(username, password, code, uuid) {
+export function login(username, password, code, uuid, phonenumber, smsCode) {
   const data = {
     username,
     password,
     code,
-    uuid
+    uuid, phonenumber, smsCode
   }
   return request({
     url: '/login',
@@ -15,6 +15,27 @@ export function login(username, password, code, uuid) {
   })
 }
 
+
+// 双重等保
+export function commondual_auth() {
+  return request({
+    url: '/common/free/dual_auth',
+    method: 'get',
+    timeout: 20000
+  })
+}
+// 获取登入短信
+export function commonsms_login(data) {
+  return request({
+    url: '/app/common/sms/login',
+    method: 'post',
+    data: data,
+    headers: {
+      isToken: false
+    },
+  })
+}
+
 // 注册方法
 export function register(data) {
   return request({

src/store/modules/user.js

@@ -42,8 +42,10 @@ const user = {
       // const password = userInfo.password
       const code = userInfo.code
       const uuid = userInfo.uuid
+      const phonenumber = userInfo.phonenumber
+      const smsCode = userInfo.smsCode
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
+        login(username, password, code, uuid,phonenumber,smsCode).then(res => {
           setToken(res.token)
           commit('SET_TOKEN', res.token)
           resolve()

src/views/login.vue

@@ -57,6 +57,27 @@
             <img :src="codeUrl" @click="getCode" class="login-code-img" />
           </div>
         </el-form-item>
+        <div class="mar_stys textStys">手机号码</div>
+        <el-form-item prop="phonenumber">
+          <el-input
+            v-model="loginForm.phonenumber"
+            type="text"
+            placeholder="请输入手机号码"
+          >
+          </el-input>
+        </el-form-item>
+        <div class="mar_stys textStys">手机验证码</div>
+        <el-form-item prop="smsCode">
+          <el-input placeholder="获取验证码" v-model="loginForm.smsCode">
+            <span class="btn" slot="suffix" @click="getRegisterSms">
+              {{
+                registerCountDown == 0
+                  ? "获取验证码"
+                  : `${registerCountDown}秒重新获取`
+              }}
+            </span>
+          </el-input>
+        </el-form-item>
         <div class="rightStsyt">
           <el-checkbox v-model="loginForm.rememberMe" class="checkStyles"
             >记住密码</el-checkbox
@@ -85,7 +106,7 @@
 </template>
 
 <script>
-import { getCodeImg } from "@/api/login";
+import { getCodeImg, commondual_auth, commonsms_login } from "@/api/login";
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from "@/utils/jsencrypt";
 
@@ -93,6 +114,7 @@ export default {
   name: "Login",
   data() {
     return {
+      registerCountDown: 0,
       codeUrl: "",
       cookiePassword: "",
       loginForm: {
@@ -101,6 +123,8 @@ export default {
         rememberMe: false,
         code: "",
         uuid: "",
+        phonenumber: "",
+        smsCode: "",
       },
       loginRules: {
         username: [
@@ -110,6 +134,12 @@ export default {
           { required: true, trigger: "blur", message: "请输入您的密码" },
         ],
         code: [{ required: true, trigger: "change", message: "请输入验证码" }],
+        phonenumber: [
+          { required: true, trigger: "blur", message: "请输入手机号码" },
+        ],
+        smsCode: [
+          { required: true, trigger: "blur", message: "请输入手机验证码" },
+        ],
       },
       loading: false,
       // 验证码开关
@@ -117,6 +147,8 @@ export default {
       // 注册开关
       register: false,
       redirect: undefined,
+      commondual: false,
+      getRegisterCodeLock: false,
     };
   },
   watch: {
@@ -128,11 +160,55 @@ export default {
     },
   },
   created() {
-    console.log("---Systems:中正科技")
+    commondual_auth().then((res) => {
+      if (res.data === "1") {
+        this.commondual = true;
+      } else {
+        this.commondual = false;
+      }
+    });
     this.getCode();
     this.getCookie();
   },
   methods: {
+    /**
+     * 获取注册验证码
+     */
+    getRegisterSms() {
+      var self = this;
+      this.$refs.loginForm.validateField("phonenumber", (valid) => {
+        if (!valid) {
+          if (this.registerCountDown == 0) {
+            if (this.getRegisterCodeLock) {
+              return;
+            }
+            this.getRegisterCodeLock = true;
+            commonsms_login({ tel: this.loginForm.phonenumber })
+              .then((res) => {
+                this.getRegisterCodeLock = false;
+                this.$message({
+                  message: `验证码已发送`,
+                  type: "success",
+                });
+                this.registerCountDown = 60;
+                this.registerCountDownTimer = setInterval(() => {
+                  self.registerCountDown--;
+                  if (self.registerCountDown == 0) {
+                    clearInterval(self.registerCountDownTimer);
+                  }
+                }, 1000);
+              })
+              .catch((err) => {
+                this.$message({
+                  message: err.msg,
+                  type: "error",
+                });
+                this.getRegisterCodeLock = false;
+              });
+          }
+        }
+      });
+    },
     getCode() {
       getCodeImg().then((res) => {
         // this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
@@ -334,4 +410,13 @@ export default {
   display: flex;
   align-items: center;
 }
-</style>
+
+.btn {
+  font-size: 14px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #3f8dfd;
+  white-space: nowrap;
+  cursor: pointer;
+}
+</style>