forked from gzt/A8000
1 changed files with 0 additions and 297 deletions
@ -1,297 +0,0 @@ |
|||
<template> |
|||
<div class="login-container"> |
|||
<aside class="sidebar"> |
|||
<ul> |
|||
<li |
|||
v-for="user in userList" |
|||
:key="user.id" |
|||
:class="[ |
|||
'user', |
|||
{ selected: user.account === selectedUser?.account }, |
|||
]" |
|||
@click="selectUser(user)" |
|||
> |
|||
{{ user.account }} |
|||
</li> |
|||
</ul> |
|||
</aside> |
|||
<main class="main-content"> |
|||
<div class="pin-container"> |
|||
<p :class="['pin-prompt', { shake: isShaking }]">{{ loginStatus }}</p> |
|||
<div class="pin-indicators"> |
|||
<span |
|||
v-for="n in maxPinLength" |
|||
:key="n" |
|||
:class="['pin-dot', { filled: n <= pin.length }]" |
|||
></span> |
|||
</div> |
|||
<div class="pin-keypad"> |
|||
<div |
|||
v-for="n in 9" |
|||
:key="n" |
|||
class="key" |
|||
@click="inputPin(n.toString())" |
|||
> |
|||
{{ n }} |
|||
</div> |
|||
<div class="key" @click="clearPin">重输</div> |
|||
<div class="key" @click="inputPin('0')">0</div> |
|||
<div class="key" @click="submitPin">确定</div> |
|||
</div> |
|||
</div> |
|||
</main> |
|||
</div> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { onMounted, onUnmounted, ref, watch } from 'vue' |
|||
import { login, getUserList, isBoardParamInited } from '@/services' |
|||
import type { User } from '@/types/Index' |
|||
import { useRouter } from 'vue-router' |
|||
import { getServerInfo } from '@/utils/getServerInfo' |
|||
import { createWebSocket, DeviceContextStateMessage } from '@/websocket/socket' |
|||
import { ElMessage } from 'element-plus' |
|||
|
|||
const router = useRouter() |
|||
|
|||
const stateUrl = getServerInfo('/api/v1/app/ws/state') |
|||
const wsState = createWebSocket(stateUrl.wsUrl) |
|||
|
|||
//用户列表 |
|||
const userList = ref<User[]>([]) |
|||
//获取用户列表 |
|||
const getUserListData = async () => { |
|||
const res = await getUserList() |
|||
userList.value = res.data |
|||
} |
|||
|
|||
const handleDeviceContextState = (data: DeviceContextStateMessage['data']) => { |
|||
if (data.loginFlag) { |
|||
sessionStorage.setItem('token', JSON.stringify(data.loginUser)) |
|||
router.push('/index') |
|||
} |
|||
} |
|||
onMounted(() => { |
|||
wsState.subscribe<DeviceContextStateMessage>( |
|||
'DeviceContext', |
|||
handleDeviceContextState, |
|||
) |
|||
wsState.connect() |
|||
|
|||
setTimeout(() => { |
|||
getUserListData() |
|||
}, 500) |
|||
}) |
|||
onUnmounted(() => { |
|||
wsState.unsubscribe<DeviceContextStateMessage>( |
|||
'DeviceContext', |
|||
handleDeviceContextState, |
|||
) |
|||
}) |
|||
//选中的用户 |
|||
const selectedUser = ref<User | null>(null) |
|||
// PIN 相关 |
|||
const pin = ref('') |
|||
const maxPinLength = 4 |
|||
const loginStatus = ref('请输入您的pin码') |
|||
const isShaking = ref(false) // 控制抖动效果的触发 |
|||
// 切换角色时清空PIN |
|||
const selectUser = (user: User) => { |
|||
selectedUser.value = user |
|||
pin.value = '' |
|||
loginStatus.value = '请输入您的pin码' |
|||
} |
|||
|
|||
// 输入PIN码 |
|||
const inputPin = (key: string) => { |
|||
if (selectedUser.value === null) { |
|||
loginStatus.value = '请选择用户' |
|||
return |
|||
} |
|||
if (pin.value.length >= maxPinLength) { |
|||
return |
|||
} |
|||
pin.value += key |
|||
if (pin.value.length === maxPinLength) { |
|||
return |
|||
} |
|||
} |
|||
|
|||
// 重置PIN码 |
|||
const clearPin = () => { |
|||
pin.value = '' |
|||
loginStatus.value = '请输入您的pin码' |
|||
} |
|||
|
|||
// 点击确认验证PIN码 |
|||
// 模拟后端请求验证PIN |
|||
const submitPin = async () => { |
|||
if (selectedUser.value === null) { |
|||
loginStatus.value = '请选择用户' |
|||
return |
|||
} |
|||
if (pin.value.length !== maxPinLength) { |
|||
loginStatus.value = '请输入密码' |
|||
return |
|||
} |
|||
let resData = await isBoardParamInited() |
|||
if (!resData.data) { |
|||
//设备正在初始化 |
|||
ElMessage.warning('设备正在初始化，请稍候...') |
|||
return |
|||
} |
|||
const params = { |
|||
id: selectedUser.value?.id, |
|||
password: pin.value, |
|||
} |
|||
const res = await login(params) |
|||
if (res.success) { |
|||
loginStatus.value = '登录成功' |
|||
sessionStorage.setItem('token', JSON.stringify(res.data)) |
|||
await router.push('/index') |
|||
} else { |
|||
loginStatus.value = res.info |
|||
pin.value = '' |
|||
} |
|||
} |
|||
// 监听 loginStatus 变化并触发抖动效果 |
|||
watch(loginStatus, () => { |
|||
isShaking.value = true |
|||
setTimeout(() => { |
|||
isShaking.value = false |
|||
}, 500) // 动画持续时间为0.5秒 |
|||
}) |
|||
</script> |
|||
<style scoped lang="less"> |
|||
.login-container { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background: linear-gradient(to bottom, #a1d0f5, #bce0fe); // 垂直线性渐变 |
|||
padding: 15px; // 减小padding |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.sidebar { |
|||
width: 220px; |
|||
height: 80vh; |
|||
background-color: #e1f0fb; |
|||
border-radius: 20px; |
|||
padding: 20px 10px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); |
|||
margin-right: 20px; |
|||
overflow: auto; |
|||
|
|||
ul { |
|||
list-style: none; |
|||
padding: 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
.user { |
|||
padding: 12px 0; |
|||
font-size: 24px; |
|||
color: #666; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
border-radius: 10px; |
|||
margin: 10px 0; |
|||
|
|||
&:hover { |
|||
background-color: #b3d9f9; |
|||
color: #fff; |
|||
} |
|||
} |
|||
|
|||
.selected { |
|||
background-color: #53b6f3; |
|||
color: white; |
|||
font-weight: bold; |
|||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); |
|||
} |
|||
} |
|||
|
|||
.main-content { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.pin-container { |
|||
background-color: #fff; |
|||
border-radius: 20px; |
|||
padding: 30px 40px; |
|||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); |
|||
text-align: center; |
|||
|
|||
.pin-prompt { |
|||
font-size: 28px; |
|||
color: #333; |
|||
margin-bottom: 20px; |
|||
font-weight: bold; |
|||
|
|||
&.shake { |
|||
animation: shake 0.5s ease; |
|||
color: #d9534f; // 抖动时变色 |
|||
} |
|||
} |
|||
|
|||
.pin-indicators { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin: 15px 0; |
|||
|
|||
.pin-dot { |
|||
width: 25px; |
|||
height: 25px; |
|||
background-color: #d5e6f2; |
|||
border-radius: 50%; |
|||
margin: 0 10px; |
|||
transition: background-color 0.3s; |
|||
|
|||
&.filled { |
|||
background-color: #53b6f3; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.pin-keypad { |
|||
display: grid; |
|||
grid-template-columns: repeat(3, 1fr); |
|||
gap: 20px; |
|||
margin-top: 30px; |
|||
|
|||
.key { |
|||
width: 90px; |
|||
height: 90px; |
|||
background-color: #f0f8ff; |
|||
border-radius: 15px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
font-size: 32px; |
|||
color: #333; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); |
|||
|
|||
&:hover { |
|||
background-color: #53b6f3; |
|||
color: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.login-status { |
|||
margin-top: 20px; |
|||
font-size: 22px; |
|||
color: #d9534f; |
|||
font-weight: bold; |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue