gx

2023-09-27 15:37:30 +08:00 · 2023-09-27 15:37:30 +08:00 · 1b78a04c16
parent 51c068ff2c 0aadb6358b
commit 1b78a04c16
1 changed files with 209 additions and 91 deletions
--- a/src/views/login/index.vue
+++ b/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 = true" :class="[tabLogin?'on':'']">密码登录</span>
+            <span @click="tabLogin = false" :class="[tabLogin ? '' : 'on']"
+              >扫码登录</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"
-              v-if="formPhoneIf">
-              <el-form-item prop="user">
-                <el-input v-model="data.user" style="width: 100%" placeholder="帐号">
+            <el-form
+              :model="data"
+              class="login_form"
+              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"
-              @keyup.enter.native="handlePhoneSubmit" label-position="top">
-              <el-form-item label="验证码" style="margin-bottom: 0.521vw;">
-                <div style="margin: 0 -5px;width: 100%;">
-                  <div class="g-remove-check-code_content" ref="aCheckCodeInputComputedRef">
-                    <el-input-number 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)" />
+            <!-- <el-form
+              v-else
+              :model="dataPhone"
+              size="medium"
+              ref="formPhoneCodeRef"
+              :rules="rules"
+              @keyup.enter.native="handlePhoneSubmit"
+              label-position="top"
+            >
+              <el-form-item label="验证码" style="margin-bottom: 0.521vw">
+                <div style="margin: 0 -5px; width: 100%">
+                  <div
+                    class="g-remove-check-code_content"
+                    ref="aCheckCodeInputComputedRef"
+                  >
+                    <el-input-number
+                      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-input
-              v-model="dataPhone.phoneCode"
-              style="width: 100%"
-              placeholder="验证码"
-              prefix-icon="Lock"
-            ></el-input>
-          </el-form-item> -->
+              <el-form-item prop="phoneCode">
+                <el-input
+                  v-model="dataPhone.phoneCode"
+                  style="width: 100%"
+                  placeholder="验证码"
+                  prefix-icon="Lock"
+                ></el-input>
+              </el-form-item>
              <div>
-                <el-button class="login-btn-submit bt" v-bind:class="{ grey: isGrey, blue: !isGrey }"
-                  v-bind:disabled="dis" type="primary" @click="postPhoneCode(dataPhone.loginAuthCode)">
+                <el-button
+                  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);
-      phone.value = resp.data.phone;
-      postPhoneCode(resp.data.loginAuthCode);
+      // console.log(resp.data.loginAuthCode);
+      // phone.value = resp.data.phone;
+      // 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,
-            name: response.data.userInfo.userName,
-            menus: response.data.menuList,
-            permissions: response.data.permissions,
-          };
-          tools.data.set("user", user);
-          tools.data.set("isbind", response.data.is_bind);
-          ElMessage.success("登录成功");
-          //loading.value  = false;
-          Router.push("/");
-          // 跳转到 首页路由
+          token: response.data.token,
+          name: response.data.userInfo.userName,
+          menus: response.data.menuList,
+          permissions: response.data.permissions,
+        };
+        tools.data.set("user", user);
+        tools.data.set("isbind", response.data.is_bind);
+        ElMessage.success("登录成功");
+        //loading.value  = false;
+        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;
-      background: linear-gradient(0deg, #4993FC 0%, #5EB1FF 100%);
+      color: #0a2859;
+      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) {