143 lines
3.7 KiB
Vue
143 lines
3.7 KiB
Vue
<template>
|
|
<a-spin size="large" tip="正在登录中..." :spinning="state.loading">
|
|
<div class="login-box">
|
|
<div class="login-logo">
|
|
<img src="/youjia.svg" width="45" />
|
|
<a-typography-title style="margin-top: 18px" :level="1">有家相册</a-typography-title>
|
|
</div>
|
|
<a-form layout="horizontal" :model="state.LoginData" @finish="handleSubmit">
|
|
<a-form-item name="UserMobile" :rules="[{ required: true, message: '请输入手机号!' }]">
|
|
<a-input v-model:value="state.LoginData.UserMobile" size="large" placeholder="手机号">
|
|
<template #prefix><user-outlined type="user" /></template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item name="UserPassword" :rules="[{ required: true, message: '请输入密码!' }]">
|
|
<a-input v-model:value="state.LoginData.UserPassword" size="large" type="password" placeholder="密码">
|
|
<template #prefix><lock-outlined type="user" /></template>
|
|
</a-input>
|
|
</a-form-item>
|
|
<a-form-item>
|
|
<a-button type="primary" html-type="submit" size="large" block> 登录 </a-button>
|
|
</a-form-item>
|
|
|
|
<a-button type="dashed" @click.prevent="onRegister" size="large" style="width: 80px">
|
|
注册
|
|
</a-button>
|
|
<a-button type="dashed" @click.prevent="onHome" size="large"
|
|
style="width: 80px; margin-top: 16px; margin-left: 24px">
|
|
首页
|
|
</a-button>
|
|
</a-form>
|
|
</div>
|
|
</a-spin>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { reactive } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { UserOutlined, LockOutlined } from "@ant-design/icons-vue";
|
|
import authService from "@/service/security/authService";
|
|
import { LoginData } from "@/data/auto/loginData";
|
|
import { LoginProfile } from "@/data/auto/loginProfile";
|
|
import { useLoginProfileStore } from "@/store/modules/loginProfile";
|
|
|
|
import { v4 as uuidv4 } from "uuid";
|
|
import { JSEncrypt } from "jsencrypt";
|
|
import CryptoJS from "crypto-js";
|
|
|
|
import i18n from "@/locales";
|
|
|
|
const { t } = i18n.global;
|
|
//const props = defineProps(['id'])
|
|
|
|
const router = useRouter();
|
|
|
|
const state = reactive({
|
|
loading: false,
|
|
LoginData: {
|
|
UserMobile: "", //"props["id"]",
|
|
UserPassword: "",
|
|
},
|
|
});
|
|
|
|
const onRegister = () => {
|
|
router.push({ path: "/register" });
|
|
};
|
|
|
|
const onHome = () => {
|
|
router.push({ path: "/" });
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
try {
|
|
state.loading = true;
|
|
|
|
let data: LoginData = {
|
|
UserName: "",
|
|
AgentUserName: "",
|
|
RsaUserPassword: "",
|
|
UserMobile: state.LoginData.UserMobile,
|
|
UserPassword: "",
|
|
Guid: uuidv4(),
|
|
Culture: "zh-cn",
|
|
};
|
|
|
|
let key = await authService.GetRsaPublicKey();
|
|
|
|
let encrypt = new JSEncrypt();
|
|
encrypt.setPublicKey(key);
|
|
data.RsaUserPassword = encrypt
|
|
.encrypt(data.Guid + CryptoJS.MD5(state.LoginData.UserPassword))
|
|
.toString();
|
|
|
|
let profile: LoginProfile = await authService.Login(data);
|
|
|
|
const userLoginProfile = useLoginProfileStore();
|
|
|
|
userLoginProfile.updateLoginProfile(profile);
|
|
|
|
router.push({ path: "/dashboard" });
|
|
} catch (error) {
|
|
} finally {
|
|
state.loading = false;
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.login-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
padding-top: 240px;
|
|
background: url("@/assets/login.svg");
|
|
|
|
.login-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
margin-bottom: 30px;
|
|
font-size: 36px;
|
|
|
|
.svg-icon {
|
|
font-size: 48px;
|
|
}
|
|
}
|
|
|
|
:deep(.ant-form) {
|
|
width: 360px;
|
|
|
|
.ant-col {
|
|
width: 360px;
|
|
}
|
|
|
|
.ant-form-item-label {
|
|
padding-right: 6px;
|
|
padding-left: 6px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|