| | |
| | | <template> |
| | | <div class="login-container min-h-screen flex items-center justify-center"> |
| | | <div class="login-container min-h-screen flex items-center justify-center" v-loading="loading"> |
| | | <div class="login-background"></div> |
| | | <div class="login-content max-w-md w-full relative z-10"> |
| | | <!-- 登录表单 --> |
| | |
| | | /> |
| | | </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> |
| | |
| | | <el-button type="primary" class="w-full" size="large" @click="handleLogin">登 录</el-button> |
| | | |
| | | <div class="mt-4 text-center space-x-2"> |
| | | <router-link to="/register" class="text-[#40a9ff]">立即注册</router-link> |
| | | <span class="text-gray-300">·</span> |
| | | <!-- <router-link to="/register" class="text-[#40a9ff]">立即注册</router-link> |
| | | <span class="text-gray-300">·</span> --> |
| | | <router-link to="/" class="text-[#40a9ff]">返回首页</router-link> |
| | | </div> |
| | | </el-form> |
| | |
| | | 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: '', |
| | |
| | | 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 loading = ref(false); |
| | | |
| | | const logingTipsEmun= { |
| | | "-1": "账户不存在", |
| | | "-2": "密码错误 ", |
| | | "-3": "账号封停", |
| | | "-4": "账号未绑定", |
| | | "1": "正常", |
| | | } |
| | | |
| | | 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 = () => { |
| | | let form_data = { |
| | | UserType: 0, |
| | | LoginName:'demo', |
| | | PassWord: '123456', |
| | | }; |
| | | loading.value = true; |
| | | login(form_data) |
| | | .then((res) => { |
| | | loading.value = false; |
| | | let data = res.data.Data; |
| | | if (res.data.Code !== 0) { |
| | | ElMessage.error(res.data.Message); |
| | | return; |
| | | } |
| | | if(data.Status !== 1){ |
| | | ElMessage.error(logingTipsEmun[data.Status]); |
| | | return; |
| | | } |
| | | let { redirectPath } = route.query; |
| | | let redirect = '/'; |
| | | if (redirectPath != null) { |
| | | redirect = redirectPath; |
| | | } |
| | | //存储登录成功后的用户信息 |
| | | loginStore.init(data.User); |
| | | ElMessage.success('登录成功'); |
| | | router.replace(redirect); |
| | | }) |
| | | .catch((err) => { |
| | | loading.value = false; |
| | | ElMessage.error(err); |
| | | }); |
| | | }; |
| | | |
| | | const refreshCaptcha = () => { |
| | | // 刷新验证码的逻辑 |