This commit is contained in:
陈鹏鹏 2023-09-27 15:37:30 +08:00
commit 1b78a04c16
1 changed files with 209 additions and 91 deletions

View File

@ -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) {