Compare commits

..

2 Commits

Author SHA1 Message Date
TangShanDD 7fb547ea62 Merge branch 'zcsf' of http://23.33.3.13:30000/efc/main-web into zcsf 2025-09-11 21:38:35 +08:00
TangShanDD d62e89b01b fix: 还原 2025-09-11 21:37:57 +08:00
1 changed files with 22 additions and 122 deletions

View File

@ -5,29 +5,23 @@
<p class="account">{{ userData.name }}</p> <p class="account">{{ userData.name }}</p>
<a-form :model="loginForm" ref="loginFormRef" @keyup.enter.prevent="handleLogin" @submit.prevent> <a-form :model="loginForm" ref="loginFormRef" @keyup.enter.prevent="handleLogin" @submit.prevent>
<a-form-item name="password" :rules="[{ ...required, message: '请输入密码' }]"> <a-form-item name="password" :rules="[{ ...required, message: '请输入密码' }]">
<a-input-password v-model:value="loginForm.password" placeholder="请输入密码"></a-input-password> <a-input-password v-model:value="loginForm.password" placeholder="请输入密码">
</a-form-item> <template #addonAfter>
<a-form-item name="verify" :rules="[{ ...required, message: '请输入验证码' }]"> <a-button class="text-white login-btn" @click="handleLogin()" :loading="loading">
<a-input v-model:value="loginForm.verify" placeholder="请输入验证码" style="width: 65%; vertical-align: middle"></a-input> <template #icon>
<a-button style="height: 32px; width: 33%; margin-left: 2%" @click="getVertify" :loading="verifyLoading" :disabled="isCountingDown"> <ArrowRightOutlined />
{{ isCountingDown ? `${countdown}s后重新获取` : '获取验证码' }} </template>
</a-button> </a-button>
</template>
</a-input-password>
</a-form-item> </a-form-item>
</a-form> </a-form>
<div class="button-group"> <a-button class="switch-button" type="text" @click="switchUser()">
<a-button class="switch-button" type="text" @click="switchUser()"> <template #icon>
<template #icon> <LeftOutlined />
<LeftOutlined /> </template>
</template> 切换账户
切换账户 </a-button>
</a-button>
<a-button class="login-btn" type="primary" @click="handleLogin()" :loading="loading">
<template #icon>
<ArrowRightOutlined />
</template>
登录
</a-button>
</div>
</div> </div>
<div class="date-time"> <div class="date-time">
<div class="time">{{ currentTime.time }}</div> <div class="time">{{ currentTime.time }}</div>
@ -42,7 +36,6 @@ import { encrypt } from 'utils/crypto'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { login } from 'services' import { login } from 'services'
import { getVertifyCode } from '@/services'
import { computed, defineComponent, onMounted, onUnmounted, reactive, ref, toRefs } from 'vue' import { computed, defineComponent, onMounted, onUnmounted, reactive, ref, toRefs } from 'vue'
import setLoginData from './tools' import setLoginData from './tools'
import { required } from '@/validate' import { required } from '@/validate'
@ -53,42 +46,13 @@ export default defineComponent({
setup() { setup() {
const state = reactive({ const state = reactive({
loginForm: { loginForm: {
password: '', password: ''
verify: ''
}, },
loading: false, loading: false
verifyLoading: false,
countdown: 0,
isCountingDown: false
}) })
let timer: any = 0 let timer: any = 0
let countdownTimer: any = null
const store = useStore() const store = useStore()
const userData = computed(() => store.getters.userData || {}) const userData = computed(() => store.getters.userData || {})
//
const startCountdown = () => {
state.countdown = 60
state.isCountingDown = true
countdownTimer = setInterval(() => {
state.countdown--
if (state.countdown <= 0) {
clearInterval(countdownTimer)
state.isCountingDown = false
state.countdown = 0
}
}, 1000)
}
//
const resetCountdown = () => {
if (countdownTimer) {
clearInterval(countdownTimer)
countdownTimer = null
}
state.isCountingDown = false
state.countdown = 0
}
// //
const currentTime = ref({ const currentTime = ref({
time: '', time: '',
@ -130,26 +94,6 @@ export default defineComponent({
function switchUser() { function switchUser() {
store.dispatch('permission/ResetRoutes') store.dispatch('permission/ResetRoutes')
} }
//
const getVertify = () => {
if (state.isCountingDown) return //
if (!userData.value.account) {
return //
}
state.verifyLoading = true
getVertifyCode({ account: userData.value.account })
.then((res) => {
if (res.success) {
state.verifyLoading = false
startCountdown() //
}
})
.finally(() => {
state.verifyLoading = false
})
}
const loginFormRef = ref() const loginFormRef = ref()
const router = useRouter() const router = useRouter()
async function handleLogin() { async function handleLogin() {
@ -159,8 +103,7 @@ export default defineComponent({
const res = await login({ const res = await login({
account: userData.value.account, account: userData.value.account,
password: encrypt(values.password), password: encrypt(values.password),
isManager: true, isManager: true
code: values.verify
}) })
if (res.success) { if (res.success) {
setLoginData(res.data) setLoginData(res.data)
@ -186,10 +129,7 @@ export default defineComponent({
loginFormRef, loginFormRef,
required, required,
switchUser, switchUser,
handleLogin, handleLogin
getVertify,
startCountdown,
resetCountdown
} }
} }
}) })
@ -209,7 +149,7 @@ export default defineComponent({
text-align: center; text-align: center;
top: 40%; top: 40%;
left: 50%; left: 50%;
width: 350px; width: 300px;
margin: -150px 0 0 -150px; margin: -150px 0 0 -150px;
.logo { .logo {
display: inline-block; display: inline-block;
@ -225,55 +165,15 @@ export default defineComponent({
color: #fff; color: #fff;
margin: 15px 0 25px 0; margin: 15px 0 25px 0;
} }
.button-group {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.login-btn { .login-btn {
background: #1890ff; background: #6b7485;
border: none; border: none;
padding: 0 20px; width: 48px;
}
.login-btn:hover {
background: #40a9ff;
} }
::v-deep(.ant-input-group-addon) { ::v-deep(.ant-input-group-addon) {
border: none; border: none;
padding: 0; padding: 0;
} }
::v-deep(.ant-input) {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
}
::v-deep(.ant-input-password) {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
}
::v-deep(.ant-input::placeholder) {
color: rgba(255, 255, 255, 0.6);
}
::v-deep(.ant-input-password .ant-input) {
background: transparent;
border: none;
color: #fff;
}
::v-deep(.ant-input-password .ant-input::placeholder) {
color: rgba(255, 255, 255, 0.6);
}
::v-deep(.ant-btn) {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
}
::v-deep(.ant-btn:disabled) {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.4);
}
} }
.date-time { .date-time {
position: absolute; position: absolute;