<template>
|
<div class="box_wrap">
|
<el-card class="box-card">
|
<div class="card-top">
|
<img src="@/assets/images/logo.png" />
|
</div>
|
<p>智能报工系统</p>
|
<div class="card_bottom">
|
<el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="25%" class="demo-ruleForm">
|
<el-form-item label="" prop="accountNumber">
|
<el-input v-model.number="ruleForm.accountNumber" style="width: 70%" placeholder="用户名" />
|
</el-form-item>
|
<el-form-item label="" prop="pass">
|
<el-input
|
v-model="ruleForm.pass"
|
style="width: 70%"
|
placeholder="密码"
|
type="password"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
<el-form-item label="" prop="code">
|
<el-input v-model="ruleForm.code" placeholder="验证码" autocomplete="off" style="width: 70%"> </el-input>
|
<img class="login-code" :src="captcha" @click="getCaptchaData" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</el-card>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { ref, reactive, onMounted } from 'vue'
|
import type { FormInstance, FormRules } from 'element-plus'
|
import { getCaptcha, login } from '@/api'
|
import { setToken, getToken } from '@/common/utils/index'
|
import { ElMessage } from 'element-plus'
|
import { useRouter } from 'vue-router'
|
|
const ruleFormRef = ref<FormInstance>()
|
|
const checkAge = (rule: any, value: any, callback: any) => {
|
if (!value) {
|
return callback(new Error('请输入用户名'))
|
} else {
|
callback()
|
}
|
}
|
|
const validatePass = (rule: any, value: any, callback: any) => {
|
if (value === '') {
|
callback(new Error('请输入密码'))
|
} else {
|
callback()
|
}
|
}
|
// const validatePass2 = (rule: any, value: any, callback: any) => {
|
// if (value === '') {
|
// callback(new Error('Please input the password again'))
|
// } else if (value !== ruleForm.pass) {
|
// callback(new Error("Two inputs don't match!"))
|
// } else {
|
// callback()
|
// }
|
// }
|
|
const ruleForm = reactive({
|
pass: '',
|
// checkPass: '',
|
accountNumber: '',
|
code: ''
|
})
|
|
const captcha = ref('')
|
const captchaId = ref('')
|
|
const getCaptchaData = () => {
|
getCaptcha().then((rsp: any) => {
|
captcha.value = rsp?.data?.picPath
|
captchaId.value = rsp?.data?.captchaId
|
})
|
}
|
onMounted(() => {
|
// 获取验证码
|
getCaptchaData()
|
})
|
|
const rules = reactive<FormRules<typeof ruleForm>>({
|
pass: [{ validator: validatePass, trigger: 'blur' }],
|
// checkPass: [{ validator: validatePass2, trigger: 'blur' }],
|
accountNumber: [{ validator: checkAge, trigger: 'blur' }]
|
})
|
|
const router = useRouter()
|
|
const submitForm = (formEl: FormInstance | undefined) => {
|
if (!formEl) return
|
formEl.validate((valid) => {
|
if (valid) {
|
login({
|
username: ruleForm.accountNumber,
|
password: ruleForm.pass,
|
captcha: ruleForm.code,
|
captchaId: captchaId.value
|
}).then((rsp: any) => {
|
console.log(rsp)
|
setToken(rsp?.data?.token)
|
ElMessage({
|
message: '登录成功！',
|
type: 'success'
|
})
|
ruleForm.accountNumber = ''
|
ruleForm.pass = ''
|
ruleForm.code = ''
|
router.push('/')
|
})
|
} else {
|
console.log('error submit!')
|
return false
|
}
|
})
|
}
|
</script>
|
<style scoped lang="less">
|
// ::v-deep body {
|
// background: #fff;
|
// }
|
|
.box_wrap {
|
width: 100%;
|
min-height: 100vh;
|
background-image: url('@/assets/images/loginBackground.png');
|
background-size: cover;
|
background-position: center;
|
display: flex;
|
align-items: center;
|
|
.box-card {
|
width: 30%;
|
margin: 0 auto;
|
height: 500px;
|
border-radius: 15px;
|
|
.card-top {
|
text-align: center;
|
|
img {
|
width: 160px;
|
height: 120px;
|
}
|
}
|
|
p {
|
text-align: center;
|
color: #315bac;
|
font-size: 24px;
|
margin-bottom: 20px;
|
}
|
|
.card_bottom {
|
.el-form {
|
.el-form-item {
|
.el-form-item__error {
|
margin-left: 260px;
|
}
|
|
.el-input {
|
.el-input__wrapper {
|
padding-left: 50px;
|
}
|
}
|
|
.el-button {
|
width: 70%;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
::v-deep .el-form-item__content {
|
display: flex;
|
align-items: center;
|
// justify-content: center;
|
}
|
</style>
|
