|
@ -1,21 +1,30 @@ |
|
|
<script lang="ts" setup> |
|
|
<script lang="ts" setup> |
|
|
import { ref } from "vue"; |
|
|
import { ref } from "vue"; |
|
|
import { useSystem } from "@/system"; |
|
|
import { useSystem } from "@/system"; |
|
|
|
|
|
import { getSystemConfig, getClientId } from '@/system/config' |
|
|
const sys = useSystem(); |
|
|
const sys = useSystem(); |
|
|
const loginCallback = sys._options.loginCallback; |
|
|
const loginCallback = sys._options.loginCallback; |
|
|
|
|
|
const config = getSystemConfig(); |
|
|
const lockClassName = ref("screen-show"); |
|
|
const lockClassName = ref("screen-show"); |
|
|
const alertMsg = ref(""); |
|
|
const alertMsg = ref(""); |
|
|
|
|
|
|
|
|
function loginSuccess() { |
|
|
function loginSuccess() { |
|
|
// lockClassName.value = 'screen-hidean'; |
|
|
lockClassName.value = 'screen-hidean'; |
|
|
// setTimeout(() => { |
|
|
setTimeout(() => { |
|
|
// lockClassName.value = 'screen-hide'; |
|
|
lockClassName.value = 'screen-hide'; |
|
|
// }, 500); |
|
|
}, 500); |
|
|
} |
|
|
} |
|
|
const userName = ref(sys._options.login?.username || "admin"); |
|
|
const userName = ref(''); |
|
|
const userPassword = ref(sys._options.login?.password || ""); |
|
|
const userPassword = ref(''); |
|
|
|
|
|
onMounted(() => { |
|
|
|
|
|
if (config.userType == 'person') { |
|
|
|
|
|
userName.value = sys._options.login?.username || "admin" |
|
|
|
|
|
userPassword.value = sys._options.login?.password || "" |
|
|
|
|
|
} else { |
|
|
|
|
|
userName.value = config.userInfo.username |
|
|
|
|
|
userPassword.value = config.userInfo.password |
|
|
|
|
|
} |
|
|
|
|
|
}); |
|
|
async function onLogin() { |
|
|
async function onLogin() { |
|
|
if (loginCallback) { |
|
|
if (loginCallback) { |
|
|
alertMsg.value = "等待确认"; |
|
|
alertMsg.value = "等待确认"; |
|
@ -26,6 +35,37 @@ async function onLogin() { |
|
|
alertMsg.value = "密码错误"; |
|
|
alertMsg.value = "密码错误"; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
// if (config.userType == 'person') { |
|
|
|
|
|
// if (loginCallback) { |
|
|
|
|
|
// alertMsg.value = "等待确认"; |
|
|
|
|
|
// const res = await loginCallback(userName.value, userPassword.value); |
|
|
|
|
|
// if (res) { |
|
|
|
|
|
// loginSuccess(); |
|
|
|
|
|
// } else { |
|
|
|
|
|
// alertMsg.value = "密码错误"; |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
// } else { |
|
|
|
|
|
// const serverUrl = config.userInfo.url + '/member/login' |
|
|
|
|
|
// const res:any = await fetch(serverUrl, { |
|
|
|
|
|
// method: "POST", |
|
|
|
|
|
// body: JSON.stringify({ |
|
|
|
|
|
// username: userName.value, |
|
|
|
|
|
// password: userPassword.value, |
|
|
|
|
|
// clientId: getClientId(), |
|
|
|
|
|
// }), |
|
|
|
|
|
// }); |
|
|
|
|
|
// if(!res.ok){ |
|
|
|
|
|
// alertMsg.value = "网络错误" |
|
|
|
|
|
// return |
|
|
|
|
|
// } |
|
|
|
|
|
// const jsondata = await res.json(); |
|
|
|
|
|
// if (jsondata.success) { |
|
|
|
|
|
// loginSuccess(); |
|
|
|
|
|
// } else { |
|
|
|
|
|
// alertMsg.value = jsondata.message |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
@ -33,60 +73,32 @@ async function onLogin() { |
|
|
<div class="lockscreen" :class="lockClassName"> |
|
|
<div class="lockscreen" :class="lockClassName"> |
|
|
<!----> |
|
|
<!----> |
|
|
<div class="login-box"> |
|
|
<div class="login-box"> |
|
|
<span |
|
|
<span class="ant-avatar ant-avatar-icon" style="width: 128px; height: 128px; line-height: 128px; font-size: 64px"> |
|
|
class="ant-avatar ant-avatar-icon" |
|
|
|
|
|
style="width: 128px; height: 128px; line-height: 128px; font-size: 64px" |
|
|
|
|
|
> |
|
|
|
|
|
<span role="img" aria-label="user" class="anticon"> |
|
|
<span role="img" aria-label="user" class="anticon"> |
|
|
<svg |
|
|
<svg focusable="false" width="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"> |
|
|
focusable="false" |
|
|
|
|
|
width="1em" |
|
|
|
|
|
fill="currentColor" |
|
|
|
|
|
aria-hidden="true" |
|
|
|
|
|
viewBox="64 64 896 896" |
|
|
|
|
|
> |
|
|
|
|
|
<path |
|
|
<path |
|
|
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" |
|
|
d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z" /> |
|
|
/> |
|
|
|
|
|
</svg> |
|
|
</svg> |
|
|
</span> |
|
|
</span> |
|
|
</span> |
|
|
</span> |
|
|
<div class="username"> |
|
|
<div class="username"> |
|
|
<span class="ant-input-group"> |
|
|
<span class="ant-input-group"> |
|
|
<input |
|
|
<input placeholder="请输入用户名" autofocus class="ant-input" v-model="userName" /> |
|
|
placeholder="请输入用户名" |
|
|
|
|
|
autofocus |
|
|
|
|
|
class="ant-input" |
|
|
|
|
|
v-model="userName" |
|
|
|
|
|
/> |
|
|
|
|
|
</span> |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
<span> |
|
|
<span> |
|
|
<span class="ant-input-group"> |
|
|
<span class="ant-input-group"> |
|
|
<!----> |
|
|
<!----> |
|
|
<input |
|
|
<input v-if="sys._options.noPassword !== true" placeholder="请输入登录密码" type="password" autofocus |
|
|
v-if="sys._options.noPassword !== true" |
|
|
class="ant-input" v-model="userPassword" /> |
|
|
placeholder="请输入登录密码" |
|
|
|
|
|
type="password" |
|
|
|
|
|
autofocus |
|
|
|
|
|
class="ant-input" |
|
|
|
|
|
v-model="userPassword" |
|
|
|
|
|
/> |
|
|
|
|
|
<span class="ant-input-group-addon"> |
|
|
<span class="ant-input-group-addon"> |
|
|
<button class="ant-btn-primary" type="button" @click="onLogin"> |
|
|
<button class="ant-btn-primary" type="button" @click="onLogin"> |
|
|
<!----> |
|
|
<!----> |
|
|
<span class="anticon"> |
|
|
<span class="anticon"> |
|
|
<svg |
|
|
<svg focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true" |
|
|
focusable="false" |
|
|
viewBox="64 64 896 896"> |
|
|
width="1em" |
|
|
|
|
|
height="1em" |
|
|
|
|
|
fill="currentColor" |
|
|
|
|
|
aria-hidden="true" |
|
|
|
|
|
viewBox="64 64 896 896" |
|
|
|
|
|
> |
|
|
|
|
|
<path |
|
|
<path |
|
|
d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 000-48.4z" |
|
|
d="M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91.5c1.9 0 3.8-.7 5.2-2L869 536.2a32.07 32.07 0 000-48.4z" /> |
|
|
/> |
|
|
|
|
|
</svg> |
|
|
</svg> |
|
|
</span> |
|
|
</span> |
|
|
</button> |
|
|
</button> |
|
@ -113,6 +125,7 @@ async function onLogin() { |
|
|
background-color: rgba(25, 28, 34, 0.78); |
|
|
background-color: rgba(25, 28, 34, 0.78); |
|
|
-webkit-backdrop-filter: blur(7px); |
|
|
-webkit-backdrop-filter: blur(7px); |
|
|
backdrop-filter: blur(7px); |
|
|
backdrop-filter: blur(7px); |
|
|
|
|
|
|
|
|
.login-box { |
|
|
.login-box { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 45%; |
|
|
top: 45%; |
|
@ -122,12 +135,14 @@ async function onLogin() { |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
|
|
|
|
|
|
.ant-avatar { |
|
|
.ant-avatar { |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
vertical-align: middle; |
|
|
vertical-align: middle; |
|
|
background: #ccc; |
|
|
background: #ccc; |
|
|
border-radius: 50%; |
|
|
border-radius: 50%; |
|
|
margin-bottom: 14px; |
|
|
margin-bottom: 14px; |
|
|
|
|
|
|
|
|
.anticon { |
|
|
.anticon { |
|
|
display: inline-block; |
|
|
display: inline-block; |
|
|
color: inherit; |
|
|
color: inherit; |
|
@ -141,14 +156,17 @@ async function onLogin() { |
|
|
-moz-osx-font-smoothing: grayscale; |
|
|
-moz-osx-font-smoothing: grayscale; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.ant-input-group { |
|
|
.ant-input-group { |
|
|
display: flex; |
|
|
display: flex; |
|
|
|
|
|
|
|
|
.ant-input { |
|
|
.ant-input { |
|
|
padding: 6px 11px; |
|
|
padding: 6px 11px; |
|
|
font-size: 16px; |
|
|
font-size: 16px; |
|
|
outline: none; |
|
|
outline: none; |
|
|
border: none; |
|
|
border: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.ant-btn-primary { |
|
|
.ant-btn-primary { |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
background: #1890ff; |
|
|
background: #1890ff; |
|
@ -163,11 +181,13 @@ async function onLogin() { |
|
|
transition: all 0.3s; |
|
|
transition: all 0.3s; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.ant-btn-primary:hover { |
|
|
.ant-btn-primary:hover { |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
background: #40a9ff; |
|
|
background: #40a9ff; |
|
|
border-color: #40a9ff; |
|
|
border-color: #40a9ff; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.ant-btn-primary:active { |
|
|
.ant-btn-primary:active { |
|
|
color: #fff; |
|
|
color: #fff; |
|
|
background: #096dd9; |
|
|
background: #096dd9; |
|
@ -180,6 +200,7 @@ async function onLogin() { |
|
|
margin-bottom: 14px; |
|
|
margin-bottom: 14px; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.tip { |
|
|
.tip { |
|
|
padding: 4px 0px; |
|
|
padding: 4px 0px; |
|
|
font-size: 12px; |
|
|
font-size: 12px; |
|
@ -190,16 +211,20 @@ async function onLogin() { |
|
|
.screen-hidean { |
|
|
.screen-hidean { |
|
|
animation: outan 0.5s forwards; |
|
|
animation: outan 0.5s forwards; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.screen-hide { |
|
|
.screen-hide { |
|
|
display: none; |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes outan { |
|
|
@keyframes outan { |
|
|
0% { |
|
|
0% { |
|
|
opacity: 1; |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
30% { |
|
|
30% { |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
100% { |
|
|
100% { |
|
|
transform: translateY(-100%); |
|
|
transform: translateY(-100%); |
|
|
opacity: 0; |
|
|
opacity: 0; |
|
|