<script lang="ts" setup>
|
import {onMounted, onUnmounted, reactive, ref} from "vue"
|
import {useRouter,useRoute } from 'vue-router'
|
import type {FormInstance, FormRules} from 'element-plus'
|
import { ElMessage } from "element-plus";
|
import { Lock,Avatar } from '@element-plus/icons-vue'
|
import request from '@/utils/request'
|
import userInfo from '@/stores/userInfo'
|
import { useI18n } from 'vue-i18n'
|
import i18n from "@/lang/index"
|
//语言获取
|
const { t } = useI18n()
|
let language = ref(localStorage.getItem('lang') || 'zh-CN')
|
const store=userInfo()
|
let ruleFormRef = ref<FormInstance>()
|
const router = useRouter()
|
const route = useRoute()
|
|
|
const userForm = reactive({
|
loginName: '',
|
password: ''
|
})
|
|
let registerState = ref(true)
|
|
|
|
const validateUser = (rule: any, value: any, callback: any) => {
|
if (value === '') {
|
callback(new Error('请输入用户名'))
|
} else {
|
callback()
|
}
|
}
|
|
const validatePass = (rule: any, value: any, callback: any) => {
|
if (value === '') {
|
callback(new Error( '请输入密码'))
|
} else {
|
callback()
|
}
|
}
|
|
const rules = reactive<FormRules<typeof userForm>>({
|
loginName: [{ validator: validateUser, trigger: 'blur' }],
|
password: [{ validator: validatePass, trigger: 'blur' }]
|
})
|
|
//登陆方法
|
const submitForm = (formEl: FormInstance | undefined) => {
|
if (!formEl) return
|
formEl.validate((valid) => {
|
if (valid) {
|
loginLoadings.value=true
|
//userForm.pass = btoa(userForm.pass)
|
request.post('/customerUserLogin/login',
|
userForm).then((res) => {
|
|
if(res['code']===200 && res['data']){
|
store.$patch({user:res.data})
|
if(store.user.loginName==='admin'){
|
router.push('/register')
|
}else{
|
router.push('/main')
|
}
|
ElMessage.success('登录成功')
|
} else {
|
ElMessage.error('账号或密码错误')
|
loginLoadings.value=false
|
return false
|
}
|
}).catch(error => {
|
ElMessage.error('服务器连接错误!')
|
loginLoadings.value=false
|
return false
|
}).then(() => {
|
//userForm.pass = atob(userForm.pass)
|
})
|
}
|
})
|
}
|
|
|
|
let loginLoadings= ref(false)
|
let registerLoadings= ref(false)
|
|
const keyDown = (e) => {
|
// 回车则执行登录方法 enter键的ASCII是13
|
if (e.keyCode == 13 ) {
|
submitForm(ruleFormRef.value)
|
}
|
}
|
onMounted(()=>{
|
window.addEventListener('keydown', keyDown)
|
})
|
onUnmounted(() => {
|
window.removeEventListener('keydown', keyDown)
|
})
|
const changeLanguage = () =>{
|
localStorage.setItem('lang',language.value)
|
location.reload()
|
}
|
|
//注册按钮的显示
|
const changeRegister = ()=>{
|
if(userForm.password=='admin'){
|
registerState.value =false
|
}else {
|
registerState.value =true
|
}
|
}
|
</script>
|
|
<template>
|
<div class="mainDiv1" >
|
<div id="main-login">
|
<div id="img-div">
|
<img id="img-pic" src="@/assets/img.png" alt="">
|
</div>
|
<div id="div-login">
|
<el-select
|
@change="changeLanguage"
|
v-model="language"
|
placeholder=" "
|
style="float: right;width: 6rem">
|
<el-option value="zh-CN" label="中文" />
|
</el-select>
|
<h2>北玻ERP-终端客户</h2>
|
<el-form
|
@submit.native.prevent
|
ref="ruleFormRef"
|
:model="userForm"
|
status-icon
|
:rules="rules"
|
>
|
<el-form-item :label="'用户:'" prop="loginName">
|
<el-input
|
v-model="userForm.loginName"
|
type="text"
|
autocomplete="off"
|
:prefix-icon="Avatar"
|
placeholder="请输入用户名"
|
/>
|
</el-form-item>
|
<el-form-item label="密码:" prop="password">
|
<el-input
|
v-model="userForm.password"
|
@blur="changeRegister"
|
type="password"
|
autocomplete="off"
|
:prefix-icon="Lock"
|
placeholder="请输入密码"
|
/>
|
</el-form-item>
|
<el-form-item id="submitForm">
|
|
<el-button
|
:loading="loginLoadings"
|
type="primary"
|
native-type="submit"
|
@click="submitForm(ruleFormRef)"
|
@keyup.enter.native="keyDown(e)"
|
>登录
|
</el-button>
|
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<style scoped>
|
.mainDiv1{
|
//background-color: #1890FF;
|
//overflow: hidden;
|
width: 100vw;
|
height: 100vh;
|
display: grid;
|
place-items: center; /* 同时水平和垂直居中 */
|
}
|
#main-login{
|
height: 60%;
|
width: 70%;
|
|
//background-color: #f2f2f2;
|
}
|
#img-div{
|
width: 55%;
|
height: 100%;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
float: left;
|
}
|
#img-pic{
|
max-height: 90%;
|
max-width: 100%;
|
}
|
|
@media (max-width: 1030px) {
|
#img-div {
|
display: none;
|
}
|
#main-login{
|
display: flex;
|
justify-content: center;
|
}
|
}
|
|
#div-login{
|
margin-top: 5%;
|
background-color: #fff;
|
float: right;
|
width: 40%;
|
height: 80%;
|
border-radius: 12px;
|
min-width: 318px;
|
min-height: 300px;
|
box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19);
|
}
|
h2{
|
color: #1890FF;
|
width: 100%;
|
text-align: center;
|
margin-top: 20%;
|
}
|
.el-form{
|
width: 50%;
|
margin: 5% auto auto;
|
}
|
#submitForm {
|
display: flex;
|
justify-content: space-evenly;
|
margin-top: 2rem;
|
}
|
:deep(.el-form-item__content){
|
flex: unset
|
|
}
|
</style>
|
