133 lines
3.1 KiB
Vue
133 lines
3.1 KiB
Vue
|
<template>
|
||
|
|
<a-form
|
||
|
|
ref="formRef"
|
||
|
|
:model="loginParams"
|
||
|
|
:rules="loginParamsRule"
|
||
|
|
@finish="login"
|
||
|
|
layout="vertical"
|
||
|
|
size="large"
|
||
|
|
class="login-form"
|
||
|
|
>
|
||
|
|
<a-form-item name="telephone">
|
||
|
|
<a-input
|
||
|
|
v-model:value="loginParams.telephone"
|
||
|
|
placeholder="请输入账号/手机号"
|
||
|
|
:max-length="64"
|
||
|
|
allow-clear
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
<a-form-item name="password">
|
||
|
|
<a-input-password
|
||
|
|
v-model:value="loginParams.password"
|
||
|
|
placeholder="请输入密码"
|
||
|
|
:max-length="32"
|
||
|
|
/>
|
||
|
|
</a-form-item>
|
||
|
|
<div class="remember-me">
|
||
|
|
<a-checkbox disabled>
|
||
|
|
记住我
|
||
|
|
</a-checkbox>
|
||
|
|
</div>
|
||
|
|
<a-button
|
||
|
|
class="btn"
|
||
|
|
type="primary"
|
||
|
|
html-type="submit"
|
||
|
|
>立即登录
|
||
|
|
</a-button>
|
||
|
|
</a-form>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import {ref} from 'vue'
|
||
|
|
import {FormInstance, message, notification} from "ant-design-vue";
|
||
|
|
import {Rule} from "ant-design-vue/es/form";
|
||
|
|
import {LoginParams} from "@/types/views/login.ts";
|
||
|
|
import api from "@/axios";
|
||
|
|
import {CLIENT_TYPE} from "@/config";
|
||
|
|
import rsaUtil from "@/utils/rsaUtil.ts";
|
||
|
|
import {TokenInfo} from "@/types/stores/userStore.ts";
|
||
|
|
import {useUserStore} from "@/stores/modules/userStore.ts";
|
||
|
|
import {useRouter} from "vue-router";
|
||
|
|
|
||
|
|
const userStore = useUserStore()
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
const formRef = ref<FormInstance>(null!)
|
||
|
|
const loginParamsRule: Record<keyof LoginParams, Rule[]> = {
|
||
|
|
telephone: [
|
||
|
|
{required: true, message: '请输入手机号', trigger: 'change'},
|
||
|
|
{len: 11, message: "长度不够", trigger: 'blur'},
|
||
|
|
],
|
||
|
|
password: [
|
||
|
|
{required: true, message: '请输入密码', trigger: 'change'},
|
||
|
|
{min: 6, max: 20, message: '密码长度最小为6最长为20', trigger: 'blur'},
|
||
|
|
],
|
||
|
|
}
|
||
|
|
const loginParams = ref<LoginParams>({
|
||
|
|
telephone: __APP_ENV.VITE_APP_ENV === "development" ? '15576404472' : '',
|
||
|
|
password: __APP_ENV.VITE_APP_ENV === "development" ? '123456' : ''
|
||
|
|
});
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 登录
|
||
|
|
*/
|
||
|
|
const login = async () => {
|
||
|
|
//校验表单
|
||
|
|
await formRef.value.validate()
|
||
|
|
//执行登录逻辑
|
||
|
|
const resp = await api.post<TokenInfo>('/login', {
|
||
|
|
clientType: CLIENT_TYPE,
|
||
|
|
loginParams: {
|
||
|
|
telephone: loginParams.value.telephone,
|
||
|
|
password: rsaUtil.encryptStr(loginParams.value.password)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
//保存token
|
||
|
|
userStore.saveTokenInfo(resp.data as TokenInfo)
|
||
|
|
//跳转页面
|
||
|
|
router.push("/index").then(() => {
|
||
|
|
notification.success({
|
||
|
|
message: '登录成功',
|
||
|
|
duration: 2,
|
||
|
|
description: '欢迎来到本系统!',
|
||
|
|
placement: 'topRight'
|
||
|
|
})
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.login-form {
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 0 5px;
|
||
|
|
margin-top: 16px;
|
||
|
|
|
||
|
|
:deep(.ant-input-group-addon) {
|
||
|
|
padding: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ant-form-item {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.remember-me {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
border-radius: 4px;
|
||
|
|
box-shadow: 0 0 0 1px #05f,
|
||
|
|
0 2px 1px rgba(0, 0, 0, 0.15);
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 500;
|
||
|
|
height: 40px;
|
||
|
|
line-height: 22px;
|
||
|
|
margin: 20px 0 12px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|