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