main
lizhong
2 years ago
parent
b9b4fa7473
commit
d1d9098a64
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,171 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
class="mai-login-modal"
|
||||||
|
v-model="loginVisible"
|
||||||
|
footer=""
|
||||||
|
header=""
|
||||||
|
:closable="false"
|
||||||
|
@close="onClose"
|
||||||
|
>
|
||||||
|
<el-form
|
||||||
|
class="p-4 enter-x"
|
||||||
|
:model="formData"
|
||||||
|
:rules="formRules"
|
||||||
|
ref="formRef"
|
||||||
|
>
|
||||||
|
<el-form-item name="account" class="enter-x">
|
||||||
|
<el-input
|
||||||
|
size="large"
|
||||||
|
v-model="formData.account"
|
||||||
|
placeholder="请输入账号"
|
||||||
|
class="fix-auto-fill"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item name="password" class="enter-x">
|
||||||
|
<el-input
|
||||||
|
type="password"
|
||||||
|
size="large"
|
||||||
|
v-model="formData.password"
|
||||||
|
placeholder="请输入密码"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item name="captcha" class="enter-x">
|
||||||
|
<el-input
|
||||||
|
size="large"
|
||||||
|
v-model="formData.captcha"
|
||||||
|
placeholder="请输入验证码"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<img src="~@/assets/images/testCode.jpg" alt="" />
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item class="enter-x">
|
||||||
|
<el-button type="primary" size="large" block @click="handleLogin(formRef)" :loading="loading">
|
||||||
|
登录
|
||||||
|
</el-button>
|
||||||
|
<!-- <Button size="large" class="mt-4 enter-x" block @click="handleRegister">
|
||||||
|
{{ t('sys.login.registerButton') }}
|
||||||
|
</Button> -->
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { computed, reactive, ref, unref } from 'vue';
|
||||||
|
import {FormInstance} from "element-plus";
|
||||||
|
|
||||||
|
const userStore = useUserInfo();
|
||||||
|
|
||||||
|
const formRules = ref({
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
const formRef = ref<FormInstance>();
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
const formData = reactive({
|
||||||
|
account: 'vben',
|
||||||
|
password: '123456',
|
||||||
|
captcha: '123456',
|
||||||
|
});
|
||||||
|
const prefixCls = useDesign('login');
|
||||||
|
|
||||||
|
|
||||||
|
async function handleLogin(formEl: FormInstance | undefined) {
|
||||||
|
if (!formEl) return;
|
||||||
|
await formEl.validate(async (vail: boolean) => {
|
||||||
|
if (vail) {
|
||||||
|
loading.value = true;
|
||||||
|
const userInfo = await userStore.login({
|
||||||
|
...formData
|
||||||
|
});
|
||||||
|
if (userInfo) {
|
||||||
|
userStore.setLoginVisible(false);
|
||||||
|
ElMessage.success('登录成功');
|
||||||
|
}
|
||||||
|
loading.value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
const loginVisible = ref(userStore.getLoginVisible);
|
||||||
|
watchEffect(()=>{
|
||||||
|
loginVisible.value = userStore.getLoginVisible;
|
||||||
|
console.log('loginStatus>>>', loginVisible.value)
|
||||||
|
})
|
||||||
|
const onClose = () => {
|
||||||
|
userStore.setLoginVisible(false);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
.mai-login-modal {
|
||||||
|
width: 1105px !important;
|
||||||
|
max-width: 1105px !important;
|
||||||
|
min-width: 1105px !important;
|
||||||
|
|
||||||
|
.ant-modal-content {
|
||||||
|
padding: 0 105px;
|
||||||
|
border-radius: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 48px;
|
||||||
|
line-height: 67px;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 54px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
color: #999;
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 30px;
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-input {
|
||||||
|
height: 117px;
|
||||||
|
font-size: 32px;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-input-suffix {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.anticon {
|
||||||
|
font-size: 32px;
|
||||||
|
margin: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-input-password {
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-input-affix-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 119px;
|
||||||
|
padding: 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ant-btn {
|
||||||
|
font-size: 28px;
|
||||||
|
height: 106px;
|
||||||
|
margin-bottom: 107px;
|
||||||
|
background-color: #14417a;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
import {acceptHMRUpdate, createPinia, defineStore} from 'pinia';
|
||||||
|
|
||||||
|
type menu = 'light' | 'dark'
|
||||||
|
export interface UserState {
|
||||||
|
token: string;
|
||||||
|
info: any;
|
||||||
|
loginVisible: boolean;
|
||||||
|
}
|
||||||
|
const useUserInfo = defineStore('user', {
|
||||||
|
state: (): UserState => ({
|
||||||
|
token: '',
|
||||||
|
info: {},
|
||||||
|
loginVisible: false,
|
||||||
|
}),
|
||||||
|
|
||||||
|
actions: {
|
||||||
|
setToken(token: string):void {
|
||||||
|
this.token = token;
|
||||||
|
},
|
||||||
|
setInfo(info: any):void {
|
||||||
|
this.info = info;
|
||||||
|
},
|
||||||
|
setLoginVisible(val: boolean):void {
|
||||||
|
this.loginVisible = val;
|
||||||
|
},
|
||||||
|
|
||||||
|
async login(data: any){
|
||||||
|
const { commonApi } = useApi()
|
||||||
|
const res = await commonApi.login(data);
|
||||||
|
// if (res.data)
|
||||||
|
console.log('login>>>>', res)
|
||||||
|
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
getters:{
|
||||||
|
getLoginVisible:(state)=> state.loginVisible,
|
||||||
|
},
|
||||||
|
persist: process.client && {
|
||||||
|
storage: localStorage,
|
||||||
|
paths: ['info', 'token']
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
export default useUserInfo;
|
||||||
|
if (import.meta.hot) {
|
||||||
|
import.meta.hot.accept(acceptHMRUpdate(useUserInfo, import.meta.hot))
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
||||||
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
|
nuxtApp.$pinia.use(piniaPluginPersistedstate)
|
||||||
|
})
|
||||||
Loading…
Reference in new issue