This commit is contained in:
commit
1b78a04c16
|
|
@ -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">登 录</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">
|
||||
请输入 <span>{{ phone }} </span>手机号收到的6位验证码
|
||||
请输入 <span>{{ phone }} </span
|
||||
>手机号收到的6位验证码
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item prop="phoneCode">
|
||||
<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>
|
||||
<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">提 交</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,8 +374,7 @@ const inputChange = (index, e) => {
|
|||
};
|
||||
|
||||
const backSpace = (index, e) => {
|
||||
|
||||
console.log(e)
|
||||
console.log(e);
|
||||
|
||||
aCheckCodeInputComputedRef.value.children[
|
||||
index - 1
|
||||
|
|
@ -306,10 +432,10 @@ 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,
|
||||
|
|
@ -324,13 +450,12 @@ const loginListener = () => {
|
|||
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) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue