| | |
| | | /> |
| | | </el-form-item> |
| | | |
| | | <el-form-item prop="captcha" class="flex space-x-4 mb-2"> |
| | | <!-- <el-form-item prop="captcha" class="flex space-x-4 mb-2"> |
| | | <el-input |
| | | v-model="loginForm.captcha" |
| | | placeholder="请输入图片验证码" |
| | |
| | | class="custom-input flex-1 mr-2" |
| | | /> |
| | | <img src="@/assets/login/captcha.png" alt="验证码" class="h-[40px] w-[100px] cursor-pointer" @click="refreshCaptcha" /> |
| | | </el-form-item> |
| | | </el-form-item> --> |
| | | |
| | | <div class="flex items-center justify-between mb-4"> |
| | | <el-checkbox v-model="loginForm.remember">记住账号</el-checkbox> |
| | |
| | | import { Key, Lock, User } from '@element-plus/icons-vue'; |
| | | import { ElMessage } from 'element-plus'; |
| | | import { reactive, ref } from 'vue'; |
| | | import {useLogin} from '@/stores/useLogin'; |
| | | import { useRoute } from 'vue-router'; |
| | | import { useRouter } from 'vue-router'; |
| | | |
| | | import { login } from '@/api/login'; |
| | | const router = useRouter(); |
| | | const route = useRoute(); |
| | | const formRef = ref(); |
| | | |
| | | const loginStore = useLogin() |
| | | const loginForm = reactive({ |
| | | username: '', |
| | | password: '', |
| | | username: 'demo', |
| | | password: '123456', |
| | | captcha: '', |
| | | remember: false, |
| | | }); |
| | |
| | | const rules = { |
| | | username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], |
| | | password: [{ required: true, message: '请输入密码', trigger: 'blur' }], |
| | | captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }], |
| | | // captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }], |
| | | }; |
| | | |
| | | const handleLogin = () => { |
| | | formRef.value.validate((valid: boolean) => { |
| | | if (valid) { |
| | | // 保存用户信息到localStorage |
| | | const userInfo = { |
| | | username: loginForm.username, |
| | | isLogin: true, |
| | | }; |
| | | localStorage.setItem('userInfo', JSON.stringify(userInfo)); |
| | | ElMessage.success('登录成功'); |
| | | router.push('/'); |
| | | submitLogin() |
| | | } else { |
| | | return false; |
| | | } |
| | | }); |
| | | }; |
| | | const submitLogin = async () => { |
| | | let form_data = { |
| | | UserType: 0, |
| | | LoginName: loginForm.username, |
| | | PassWord: loginForm.password, |
| | | }; |
| | | let res = await login(form_data); |
| | | let data = res.Data; |
| | | if (res.Code !== 0) { |
| | | ElMessage.error(res.Message); |
| | | return; |
| | | } |
| | | let { redirectPath } = route.query; |
| | | let redirect = "/"; |
| | | if (redirectPath != null) { |
| | | redirect = redirectPath; |
| | | } |
| | | |
| | | //存储登录成功后的用户信息 |
| | | loginStore.init(data.User); |
| | | ElMessage.success('登录成功'); |
| | | router.replace(redirect); |
| | | }; |
| | | |
| | | const refreshCaptcha = () => { |
| | | // 刷新验证码的逻辑 |