|
@@ -0,0 +1,122 @@
|
|
|
+<template>
|
|
|
+ <div class="">
|
|
|
+ 桌面应用登陆
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+import { onMounted, reactive, ref, nextTick } from 'vue';
|
|
|
+import { ElForm, ElInput, ElNotification } from 'element-plus';
|
|
|
+import { loginApi, getCurrentUser } from '@/api/userApi';
|
|
|
+import { useUserInfo } from '@/stores/userInfo';
|
|
|
+import router from '../router/index';
|
|
|
+
|
|
|
+const userInfo = useUserInfo();
|
|
|
+const formRef = ref<InstanceType<typeof ElForm>>();
|
|
|
+const usernameRef = ref<InstanceType<typeof ElInput>>();
|
|
|
+const passwordRef = ref<InstanceType<typeof ElInput>>();
|
|
|
+
|
|
|
+const form = reactive({
|
|
|
+ username: '',
|
|
|
+ password: '',
|
|
|
+});
|
|
|
+
|
|
|
+const rules = reactive({
|
|
|
+ username: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '用户名不能为空',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validator: (rule: any, val: string, callback: Function) => {
|
|
|
+ if (!val) {
|
|
|
+ return callback();
|
|
|
+ }
|
|
|
+ // if (!/^[a-zA-Z0-9_]{2,15}$/.test(val)) {
|
|
|
+ // return callback(new Error('请输入正确的账户'));
|
|
|
+ // }
|
|
|
+
|
|
|
+ if (typeof val != 'string') {
|
|
|
+ return callback(new Error('请输入正确的账户'));
|
|
|
+ }
|
|
|
+
|
|
|
+ return callback();
|
|
|
+ },
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '密码不能为空',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ validator: (rule: any, val: string, callback: Function) => {
|
|
|
+ if (!val) {
|
|
|
+ return callback();
|
|
|
+ }
|
|
|
+ if (!regularPassword(val)) {
|
|
|
+ return callback(new Error('请输入正确的密码'));
|
|
|
+ }
|
|
|
+ return callback();
|
|
|
+ },
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+});
|
|
|
+
|
|
|
+const focusInput = () => {
|
|
|
+ if (form.username === '') {
|
|
|
+ usernameRef.value!.focus();
|
|
|
+ } else if (form.password === '') {
|
|
|
+ passwordRef.value!.focus();
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const onSubmit = (formEl: InstanceType<typeof ElForm> | undefined) => {
|
|
|
+ if (!formEl) return;
|
|
|
+ formEl.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ loginApi(form).then((res) => {
|
|
|
+ if (res.data.data.token) {
|
|
|
+ userInfo.setToken(res.data.data.token, 'auth');
|
|
|
+ const userType = res.data.data.userType;
|
|
|
+ getCurrentUser().then((res) => {
|
|
|
+ userInfo.dataFill(Object.assign({ userType: userType }, res.data.data));
|
|
|
+
|
|
|
+ // // 老接口的类型 - 学生
|
|
|
+ // if (userType == 0) router.push({ path: '/train' });
|
|
|
+ // // 老接口的类型 - 老师
|
|
|
+ // else if (userType == 1) router.push({ path: '/TaskMng' });
|
|
|
+
|
|
|
+ // 老师
|
|
|
+ if (userType == 0) router.push({ path: '/TaskMng' });
|
|
|
+ // 学生
|
|
|
+ else if (userType == 1) router.push({ path: '/studentMain' });
|
|
|
+ else {
|
|
|
+ ElNotification({
|
|
|
+ message: '无效用户',
|
|
|
+ type: 'info',
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+const regularPassword = (val: string) => {
|
|
|
+ if (/^[a-zA-Z0-9_@]{6,32}$/.test(val)) return true;
|
|
|
+ return false;
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ nextTick(() => focusInput());
|
|
|
+});
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+</style>
|