gx

src/views/login/index.vue

@@ -1,103 +1,205 @@
 <template>
   <div class="login_bg">
     <div class="title">
+      <img src="../../assets/images/login_07.png" alt="" />
     </div>
     <div class="container">
-
       <div class="left_img">
-        <img src="../../assets/images/login_03.png" alt="">
+        <img src="../../assets/images/login_03.png" alt="" />
       </div>
 
       <div class="login_right">
         <div class="form">
           <h2 class="form_title">欢迎登录</h2>
           <div class="form_tab">
-            <span @click="tabLogin = false" :class="[tabLogin?'':'on']">扫码登录</span>
+            <span @click="tabLogin = false" :class="[tabLogin ? '' : 'on']"
-            <span @click="tabLogin = true" :class="[tabLogin?'on':'']">密码登录</span>
+              >扫码登录</span
+            >
+            <span @click="tabLogin = true" :class="[tabLogin ? 'on' : '']"
+              >密码登录</span
+            >
           </div>
           <div v-show="tabLogin">
-            <el-form :model="data" class="login_form" size="medium" ref="formRef" @keyup.enter.native="handleSubmit"
+            <el-form
-              v-if="formPhoneIf">
+              :model="data"
-              <el-form-item prop="user">
+              class="login_form"
-                <el-input v-model="data.user" style="width: 100%" placeholder="帐号">
+              size="medium"
+              ref="formRef"
+              @keyup.enter.native="handleSubmit"
+              v-if="formPhoneIf"
+            >
+              <el-form-item prop="loginName">
+                <el-input
+                  v-model="data.loginName"
+                  style="width: 100%"
+                  placeholder="帐号"
+                >
                 </el-input>
                 <div class="icon_box">
-                  <img class="icon" src="../../assets/images/login_06.png" alt="">
+                  <img
+                    class="icon"
+                    src="../../assets/images/login_06.png"
+                    alt=""
+                  />
                 </div>
               </el-form-item>
-              
+              <el-form-item prop="captchaCode">
+                <el-input
+                  v-model="data.captchaCode"
+                  style="width: 100%"
+                  type="text"
+                  placeholder="验证码"
+                >
+                </el-input>
+                <img :src="codeImg" alt="加载错误" @click="authCode()" />
+              </el-form-item>
               <el-form-item prop="password">
-                <el-input v-model="data.password" style="width: 100%" type="password" placeholder="密码" show-password>
+                <el-input
+                  v-model="data.password"
+                  style="width: 100%"
+                  type="password"
+                  placeholder="密码"
+                  show-password
+                >
                 </el-input>
                 <div class="icon_box">
-                  <img class="icon" src="../../assets/images/login_05.png" alt="">
+                  <img
+                    class="icon"
+                    src="../../assets/images/login_05.png"
+                    alt=""
+                  />
                 </div>
               </el-form-item>
               <!-- <div style="font-size: 0" class="rememb">
                 <el-checkbox v-model="remembIf" label="记住我" size="large" />
               </div> -->
-              <el-button class="login-btn-submit" type="primary" @click="handleSubmit()" :loading="loading">
+              <el-button
+                class="login-btn-submit"
+                type="primary"
+                @click="handleSubmit()"
+                :loading="loading"
+              >
                 <span class="info1">登&nbsp;录</span>
               </el-button>
             </el-form>
-            <el-form v-else :model="dataPhone" size="medium" ref="formPhoneCodeRef" :rules="rules"
+            <!-- <el-form
-              @keyup.enter.native="handlePhoneSubmit" label-position="top">
+              v-else
-              <el-form-item label="验证码" style="margin-bottom: 0.521vw;">
+              :model="dataPhone"
-                <div style="margin: 0 -5px;width: 100%;">
+              size="medium"
-                  <div class="g-remove-check-code_content" ref="aCheckCodeInputComputedRef">
+              ref="formPhoneCodeRef"
-                    <el-input-number v-model="aCheckCodeInputComputed[0]" :min="0" :max="9" :controls="false"
+              :rules="rules"
-                      @input="(e) => inputChange(0, e)" />
+              @keyup.enter.native="handlePhoneSubmit"
-                    <el-input-number v-model="aCheckCodeInputComputed[1]" :min="0" :max="9" :controls="false"
+              label-position="top"
-                      @input="(e) => inputChange(1, e)" @keyup.delete="(e) => backSpace(1, e)" />
+            >
-                    <el-input-number v-model="aCheckCodeInputComputed[2]" :min="0" :max="9" :controls="false"
+              <el-form-item label="验证码" style="margin-bottom: 0.521vw">
-                      @input="(e) => inputChange(2, e)" @keyup.delete="(e) => backSpace(2, e)" />
+                <div style="margin: 0 -5px; width: 100%">
-                    <el-input-number v-model="aCheckCodeInputComputed[3]" :min="0" :max="9" :controls="false"
+                  <div
-                      @input="(e) => inputChange(3, e)" @keyup.delete="(e) => backSpace(3, e)" />
+                    class="g-remove-check-code_content"
-                    <el-input-number v-model="aCheckCodeInputComputed[4]" :min="0" :max="9" :controls="false"
+                    ref="aCheckCodeInputComputedRef"
-                      @input="(e) => inputChange(4, e)" @keyup.delete="(e) => backSpace(4, e)" />
+                  >
-                    <el-input-number v-model="aCheckCodeInputComputed[5]" :min="0" :max="9" :controls="false"
+                    <el-input-number
-                      @input="(e) => inputChange(5, e)" @keyup.delete="(e) => backSpace(5, e)" />
+                      v-model="aCheckCodeInputComputed[0]"
+                      :min="0"
+                      :max="9"
+                      :controls="false"
+                      @input="(e) => inputChange(0, e)"
+                    />
+                    <el-input-number
+                      v-model="aCheckCodeInputComputed[1]"
+                      :min="0"
+                      :max="9"
+                      :controls="false"
+                      @input="(e) => inputChange(1, e)"
+                      @keyup.delete="(e) => backSpace(1, e)"
+                    />
+                    <el-input-number
+                      v-model="aCheckCodeInputComputed[2]"
+                      :min="0"
+                      :max="9"
+                      :controls="false"
+                      @input="(e) => inputChange(2, e)"
+                      @keyup.delete="(e) => backSpace(2, e)"
+                    />
+                    <el-input-number
+                      v-model="aCheckCodeInputComputed[3]"
+                      :min="0"
+                      :max="9"
+                      :controls="false"
+                      @input="(e) => inputChange(3, e)"
+                      @keyup.delete="(e) => backSpace(3, e)"
+                    />
+                    <el-input-number
+                      v-model="aCheckCodeInputComputed[4]"
+                      :min="0"
+                      :max="9"
+                      :controls="false"
+                      @input="(e) => inputChange(4, e)"
+                      @keyup.delete="(e) => backSpace(4, e)"
+                    />
+                    <el-input-number
+                      v-model="aCheckCodeInputComputed[5]"
+                      :min="0"
+                      :max="9"
+                      :controls="false"
+                      @input="(e) => inputChange(5, e)"
+                      @keyup.delete="(e) => backSpace(5, e)"
+                    />
                   </div>
                 </div>
                 <div class="alert_codePhone">
-                  请输入&nbsp;&nbsp;<span>{{ phone }}&nbsp;&nbsp;</span>手机号收到的6位验证码
+                  请输入&nbsp;&nbsp;<span>{{ phone }}&nbsp;&nbsp;</span
+                  >手机号收到的6位验证码
                 </div>
               </el-form-item>
 
-              <!-- <el-form-item prop="phoneCode">
+              <el-form-item prop="phoneCode">
-            <el-input
+                <el-input
-              v-model="dataPhone.phoneCode"
+                  v-model="dataPhone.phoneCode"
-              style="width: 100%"
+                  style="width: 100%"
-              placeholder="验证码"
+                  placeholder="验证码"
-              prefix-icon="Lock"
+                  prefix-icon="Lock"
-            ></el-input>
+                ></el-input>
-          </el-form-item> -->
+              </el-form-item>
               <div>
-                <el-button class="login-btn-submit bt" v-bind:class="{ grey: isGrey, blue: !isGrey }"
+                <el-button
-                  v-bind:disabled="dis" type="primary" @click="postPhoneCode(dataPhone.loginAuthCode)">
+                  class="login-btn-submit bt"
+                  v-bind:class="{ grey: isGrey, blue: !isGrey }"
+                  v-bind:disabled="dis"
+                  type="primary"
+                  @click="postPhoneCode(dataPhone.loginAuthCode)"
+                >
                   <span v-if="show">发送验证码</span>
                   <span v-else>重新发送({{ count }}s)</span>
                 </el-button>
               </div>
-              <el-button class="login-btn-submit" type="primary" @click="handlePhoneSubmit(formPhoneCodeRef)">
+              <el-button
+                class="login-btn-submit"
+                type="primary"
+                @click="handlePhoneSubmit(formPhoneCodeRef)"
+              >
                 <span class="info1">提&nbsp;交</span>
               </el-button>
               <div class="logBack" @click="clickLogBack">
                 <span>重新登录</span>
               </div>
-            </el-form>
+            </el-form> -->
           </div>
 
           <div class="scanUrl" v-show="!tabLogin">
-            <iframe :src="scanLogin.scanUrl" frameborder="0" height="300px" width="300px" />
+            <iframe
+              :src="scanLogin.scanUrl"
+              frameborder="0"
+              height="300px"
+              width="300px"
+            />
             <!-- <div id="ding-login"></div> -->
-
           </div>
-
         </div>
-        <slideVerify v-show="slideVerifyShow" @onSuccess="slideVerifySuccess"></slideVerify>
+        <slideVerify
+          v-show="slideVerifyShow"
+          @onSuccess="slideVerifySuccess"
+        ></slideVerify>
       </div>
-
     </div>
   </div>
 </template>
@@ -115,8 +217,11 @@ let paramsData = tools.data.get("params");
 let slideVerifyShow = ref(false);
 
 const data = reactive({
-  user: "",
+  // user: "",
   password: "",
+  loginName: "",
+  captchaCode: "",
+  captchaKey: "",
 });
 
 let phone = ref("");
@@ -127,7 +232,18 @@ const dataPhone = ref({
   smsAuthCode: "", //发送验证码返回
   loginAuthCode: "",
 });
-
+const codeImg = ref("");
+const authCode = () => {
+  http.get("/api/auth/captcha").then((res) => {
+    if (res.code == 200) {
+      codeImg.value = res.data.img;
+      data.captchaKey = res.data.key;
+    }
+  });
+};
+onMounted(() => {
+  authCode();
+});
 console.log("paramsData", paramsData);
 if (paramsData) {
   console.log("存在");
@@ -144,15 +260,26 @@ const slideVerifySuccess = () => {
   slideVerifyShow.value = false;
   loading.value = true;
   var params = {
-    loginName: encrypt(data.user),
+    loginName: encrypt(data.loginName),
     password: encrypt(data.password),
+    captchaKey: data.captchaKey,
+    captchaCode: data.captchaCode,
   };
 
   http.post("/api/auth/login", params).then((resp) => {
     if (resp.code == 200) {
-      console.log(resp.data.loginAuthCode);
+      // console.log(resp.data.loginAuthCode);
-      phone.value = resp.data.phone;
+      // phone.value = resp.data.phone;
-      postPhoneCode(resp.data.loginAuthCode);
+      // postPhoneCode(resp.data.loginAuthCode);
+      var user = {
+            token: resp.data.token,
+            name: resp.data.userInfo.userName,
+            menus: resp.data.menuList,
+            permissions: resp.data.permissions,
+          };
+          tools.data.set("user", user);
+          ElMessage.success("登录成功");
+          Router.push("/");
     } else {
       ElMessage.error(resp.message);
       loading.value = false;
@@ -247,16 +374,15 @@ const inputChange = (index, e) => {
 };
 
 const backSpace = (index, e) => {
-
+  console.log(e);
-  console.log(e)
 
   aCheckCodeInputComputedRef.value.children[
     index - 1
-  ].children[0].children[0].children[0].focus(); 
+  ].children[0].children[0].children[0].focus();
-  
+
   aCheckCodeInputComputedRef.value.children[
     index - 1
-  ].children[0].children[0].children[0].select(); 
+  ].children[0].children[0].children[0].select();
 };
 
 let dis = ref(false);
@@ -306,31 +432,30 @@ onBeforeUnmount(() => {
 
 const loginListener = () => {
   // console.log('进入message', event)
-  const code = event.data && event.data.code
+  const code = event.data && event.data.code;
   if (code) {
     // 根据 code 去获取用户信息
-    http.post(`/api/auth/dg/code_login?code=${code}`, ).then(response => {
+    http.post(`/api/auth/dg/code_login?code=${code}`).then((response) => {
       if (response.code == 200) {
         var user = {
-            token: response.data.token,
+          token: response.data.token,
-            name: response.data.userInfo.userName,
+          name: response.data.userInfo.userName,
-            menus: response.data.menuList,
+          menus: response.data.menuList,
-            permissions: response.data.permissions,
+          permissions: response.data.permissions,
-          };
+        };
-          tools.data.set("user", user);
+        tools.data.set("user", user);
-          tools.data.set("isbind", response.data.is_bind);
+        tools.data.set("isbind", response.data.is_bind);
-          ElMessage.success("登录成功");
+        ElMessage.success("登录成功");
-          //loading.value  = false;
+        //loading.value  = false;
-          Router.push("/");
+        Router.push("/");
-          // 跳转到 首页路由
+        // 跳转到 首页路由
       } else {
-        ElMessage.error(response.message)
+        ElMessage.error(response.message);
       }
-    })
+    });
-    console.log(code)
+    console.log(code);
   }
-}
+};
-
 
 const tabLogin = ref(false);
 </script>
@@ -399,8 +524,8 @@ const tabLogin = ref(false);
       font-size: 1.667vw;
       font-family: SourceHanSansSC;
       font-weight: bold;
-      color: #0A2859;
+      color: #0a2859;
-      background: linear-gradient(0deg, #4993FC 0%, #5EB1FF 100%);
+      background: linear-gradient(0deg, #4993fc 0%, #5eb1ff 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       margin-bottom: 1.979vw;
@@ -432,14 +557,14 @@ const tabLogin = ref(false);
         }
 
         &::after {
-          content: '';
+          content: "";
           position: absolute;
           left: 50%;
           bottom: 0;
           transform: translate(-50%, 7px);
           width: 30px;
           height: 3px;
-          background-color: #4D99FD;
+          background-color: #4d99fd;
           opacity: 0;
         }
       }
@@ -459,7 +584,7 @@ const tabLogin = ref(false);
     .login_form {
       margin-top: 2.083vw;
       .el-input {
-        background-color: #F5F9FB;
+        background-color: #f5f9fb;
       }
 
       :deep(.el-input__wrapper) {
@@ -480,10 +605,10 @@ const tabLogin = ref(false);
         justify-content: center;
 
         &::after {
-          content: '';
+          content: "";
           width: 1px;
           height: 18px;
-          background-color: #63A5FF;
+          background-color: #63a5ff;
           position: absolute;
           right: 0;
           top: 50%;
@@ -497,7 +622,6 @@ const tabLogin = ref(false);
       }
 
       .login-btn-submit {
-
         width: 14.896vw;
       }
     }
@@ -509,8 +633,6 @@ const tabLogin = ref(false);
   }
 }
 
-
-
 .g-remove-check-code_content {
   display: flex;
   justify-content: space-between;
@@ -530,7 +652,6 @@ const tabLogin = ref(false);
       .el-input__inner {
         font-weight: 600;
       }
-
     }
   }
 
@@ -572,8 +693,6 @@ const tabLogin = ref(false);
   margin-top: 10px;
 }
 
-
-
 .login-btn-submit {
   height: 3.125vw;
   margin: 0 auto;
@@ -582,7 +701,6 @@ const tabLogin = ref(false);
   background: linear-gradient(#79c8ff, #3b93ff 50%);
   width: 100%;
   margin-bottom: 10px;
-
 }
 
 :deep(#rehtml-llq4lc0y .text-kbsp78ls) {