| | |
| | | import {ElMessage} from 'element-plus' |
| | | import request from '@/utils/request' |
| | | import userInfo from '@/stores/userInfo' |
| | | |
| | | |
| | | const store = userInfo() |
| | | let ruleFormRef = ref<FormInstance>() |
| | | const router = useRouter() |
| | | const route = useRoute() |
| | | |
| | | |
| | | const userForm = reactive({ |
| | | userName: '', |
| | | password: '', |
| | | }) |
| | | |
| | | |
| | | if (typeof route.query.id != 'undefined') { |
| | | userForm.userId = <string>route.query.id |
| | | } |
| | | |
| | | |
| | | const validateUser = (rule: any, value: any, callback: any) => { |
| | | if (value === '') { |
| | | callback(new Error('请输入你的账号')) |
| | |
| | | callback() |
| | | } |
| | | } |
| | | |
| | | |
| | | const validatePass = (rule: any, value: any, callback: any) => { |
| | | if (value === '') { |
| | | callback(new Error('请输入你的密码')) |
| | |
| | | callback() |
| | | } |
| | | } |
| | | |
| | | |
| | | const rules = reactive<FormRules<typeof userForm>>({ |
| | | userId: [{validator: validateUser, trigger: 'blur'}], |
| | | pass: [{validator: validatePass, trigger: 'blur'}], |
| | | }) |
| | | |
| | | |
| | | //登陆方法 |
| | | const submitForm = (formEl: FormInstance | undefined) => { |
| | | if (!formEl) return |
| | |
| | | if (res['code'] == 200) { |
| | | store.$patch({user: res.data}) |
| | | console.log(res.data) |
| | | |
| | | |
| | | router.push('/main') |
| | | ElMessage.success(`登录成功`) |
| | | } else { |
| | |
| | | } |
| | | }) |
| | | } |
| | | |
| | | |
| | | function register() { |
| | | router.push({ |
| | | path: '/register', |
| | | }) |
| | | } |
| | | |
| | | |
| | | let loginLoadings = ref(false) |
| | | let registerLoadings = ref(false) |
| | | |
| | | |
| | | const keyDown = (e) => { |
| | | // 回车则执行登录方法 enter键的ASCII是13 |
| | | if (e.keyCode == 13 || e.keyCode == 100) { |
| | |
| | | window.removeEventListener('keydown', keyDown) |
| | | }) |
| | | </script> |
| | | |
| | | |
| | | <template> |
| | | <div class="mainDiv"> |
| | | <div id="main-login"> |
| | |
| | | @click="register" |
| | | plain>注册 |
| | | </el-button> |
| | | |
| | | |
| | | </el-form-item> |
| | | </div> |
| | | </el-form> |
| | | </div> |
| | | </div> |
| | | |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | |
| | | <style scoped> |
| | | .mainDiv { |
| | | overflow: hidden; |
| | | min-width: 718px; |
| | | background-image: url('../../src/assets/background.jpg'); |
| | | } |
| | | |
| | | |
| | | #main-login { |
| | | margin: 150px auto 0 auto; |
| | | height: 70vh; |
| | | width: 80vw; |
| | | } |
| | | |
| | | |
| | | #img-div { |
| | | width: 55%; |
| | | height: 100%; |
| | |
| | | align-items: center; |
| | | float: left; |
| | | } |
| | | |
| | | |
| | | #img-pic { |
| | | max-height: 90%; |
| | | max-width: 100%; |
| | | } |
| | | |
| | | |
| | | #div-login { |
| | | margin-top: 5%; |
| | | /* margin-top: 20%; */ |
| | |
| | | border-radius: 4px; |
| | | box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0), 0 6px 5px 0 rgba(0, 0, 0, 0.19); |
| | | } |
| | | |
| | | |
| | | #center { |
| | | margin-top: -30px; |
| | | } |
| | | |
| | | |
| | | .el-form { |
| | | width: 60%; |
| | | margin: 20% auto auto; |
| | | } |
| | | |
| | | |
| | | #submitForm { |
| | | display: flex; |
| | | justify-content: space-evenly; |
| | | margin-top: 2rem; |
| | | } |
| | | |
| | | |
| | | :deep(.el-form-item__content) { |
| | | flex: unset; |
| | | } |