onbus_crm.git - Gitblit

vben

2020-12-01 962f90de445d7935ad76ea7b74a98f12ce9a7498

提交 \| 用户 \| age
2f6253	1	<template>
03b602	2	<div class="login">
N	3	<div class="login-mask" />
	4	<div class="login-form-wrap">
	5	<div class="login-form mx-6">
190112	6	<AppLocalePicker v-if="showLocale" class="login-form__locale" />
03b602	7	<div class="login-form__content px-2 py-10">
N	8	<header>
e79e54	9	<img :src="logo" class="mr-4" />
03b602	10	<h1>{{ title }}</h1>
2f6253	11	</header>
陈	12
03b602	13	<a-form class="mx-auto mt-10" :model="formData" :rules="formRules" ref="formRef">
2f6253	14	<a-form-item name="account">
8882d4	15	<a-input size="large" v-model:value="formData.account" placeholder="username: vben" />
2f6253	16	</a-form-item>
陈	17	<a-form-item name="password">
	18	<a-input-password
	19	size="large"
	20	visibilityToggle
	21	v-model:value="formData.password"
8882d4	22	placeholder="password: 123456"
2f6253	23	/>
陈	24	</a-form-item>
c8021e	25
V	26	<!-- <a-form-item name="verify" v-if="openLoginVerify">
2f6253	27	<BasicDragVerify v-model:value="formData.verify" ref="verifyRef" />
c8021e	28	</a-form-item> -->
V	29	<a-row>
	30	<a-col :span="12">
	31	<a-form-item>
8882d4	32	<!-- No logic, you need to deal with it yourself -->
737b1b	33	<a-checkbox v-model:checked="autoLogin" size="small">{{
V	34	t('sys.login.autoLogin')
	35	}}</a-checkbox>
c8021e	36	</a-form-item>
V	37	</a-col>
	38	<a-col :span="12">
	39	<a-form-item :style="{ 'text-align': 'right' }">
8882d4	40	<!-- No logic, you need to deal with it yourself -->
737b1b	41	<a-button type="link" size="small">{{ t('sys.login.forgetPassword') }}</a-button>
c8021e	42	</a-form-item>
V	43	</a-col>
	44	</a-row>
2f6253	45	<a-form-item>
陈	46	<a-button
	47	type="primary"
	48	size="large"
	49	class="rounded-sm"
2407b3	50	:block="true"
2f6253	51	@click="login"
陈	52	:loading="formState.loading"
737b1b	53	>{{ t('sys.login.loginButton') }}</a-button
2f6253	54	>
陈	55	</a-form-item>
	56	</a-form>
	57	</div>
	58	</div>
	59	</div>
	60	</div>
	61	</template>
	62	<script lang="ts">
8882d4	63	import { defineComponent, reactive, ref, unref, toRaw } from 'vue';
c8021e	64	import { Checkbox } from 'ant-design-vue';
V	65
73c8e0	66	import { Button } from '/@/components/Button';
e5f8ce	67	import { AppLocalePicker } from '/@/components/Application';
c8021e	68	// import { BasicDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
V	69
2f6253	70	import { userStore } from '/@/store/modules/user';
8882d4	71
c8021e	72	// import { appStore } from '/@/store/modules/app';
2f6253	73	import { useMessage } from '/@/hooks/web/useMessage';
e5f8ce	74	import { useGlobSetting, useProjectSetting } from '/@/hooks/setting';
e79e54	75	import logo from '/@/assets/images/logo.png';
e5f8ce	76	import { useI18n } from '/@/hooks/web/useI18n';
968f79	77
2f6253	78	export default defineComponent({
c8021e	79	components: {
V	80	// BasicDragVerify,
	81	AButton: Button,
	82	ACheckbox: Checkbox,
e5f8ce	83	AppLocalePicker,
c8021e	84	},
2f6253	85	setup() {
c8021e	86	const formRef = ref<any>(null);
V	87	const autoLoginRef = ref(false);
	88	// const verifyRef = ref<RefInstanceType<DragVerifyActionType>>(null);
	89
737b1b	90	const globSetting = useGlobSetting();
e5f8ce	91	const { locale } = useProjectSetting();
2f6253	92	const { notification } = useMessage();
962f90	93	const { t } = useI18n();
2f6253	94
c8021e	95	// const openLoginVerifyRef = computed(() => appStore.getProjectConfig.openLoginVerify);
2f6253	96
陈	97	const formData = reactive({
508109	98	account: 'vben',
V	99	password: '123456',
c8021e	100	// verify: undefined,
2f6253	101	});
陈	102	const formState = reactive({
	103	loading: false,
	104	});
	105
	106	const formRules = reactive({
962f90	107	account: [{ required: true, message: t('sys.login.accountPlaceholder'), trigger: 'blur' }],
V	108	password: [
	109	{ required: true, message: t('sys.login.passwordPlaceholder'), trigger: 'blur' },
	110	],
c8021e	111	// verify: unref(openLoginVerifyRef) ? [{ required: true, message: '请通过验证码校验' }] : [],
2f6253	112	});
陈	113
c8021e	114	// function resetVerify() {
V	115	// const verify = unref(verifyRef);
	116	// if (!verify) return;
	117	// formData.verify && verify.$.resume();
	118	// formData.verify = undefined;
	119	// }
2f6253	120
陈	121	async function handleLogin() {
	122	const form = unref(formRef);
	123	if (!form) return;
	124	formState.loading = true;
	125	try {
	126	const data = await form.validate();
	127	const userInfo = await userStore.login(
	128	toRaw({
	129	password: data.password,
	130	username: data.account,
	131	})
	132	);
	133	if (userInfo) {
	134	notification.success({
962f90	135	message: t('sys.login.loginSuccessTitle'),
V	136	description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`,
2f6253	137	duration: 3,
陈	138	});
	139	}
	140	} catch (error) {
	141	} finally {
c8021e	142	// resetVerify();
2f6253	143	formState.loading = false;
陈	144	}
	145	}
	146	return {
	147	formRef,
c8021e	148	// verifyRef,
2f6253	149	formData,
陈	150	formState,
	151	formRules,
	152	login: handleLogin,
c8021e	153	autoLogin: autoLoginRef,
V	154	// openLoginVerify: openLoginVerifyRef,
03b602	155	title: globSetting && globSetting.title,
e79e54	156	logo,
8882d4	157	t,
e5f8ce	158	showLocale: locale.show,
2f6253	159	};
陈	160	},
	161	});
	162	</script>
190112	163	<style lang="less">
03b602	164	@import (reference) '../../../design/index.less';
190112	165
V	166	.login-form__locale {
	167	position: absolute;
	168	top: 14px;
	169	right: 14px;
	170	z-index: 1;
	171	}
03b602	172
2f6253	173	.login {
03b602	174	position: relative;
N	175	height: 100vh;
2f6253	176	background: url(../../../assets/images/login/login-bg.png) no-repeat;
陈	177	background-size: 100% 100%;
	178
	179	&-mask {
03b602	180	display: none;
N	181	height: 100%;
2f6253	182	background: url(../../../assets/images/login/login-in.png) no-repeat;
4ff6b7	183	background-position: 30% 30%;
84b830	184	background-size: 80% 80%;
03b602	185
84b830	186	.respond-to(xlarge, { display: block;});
2f6253	187	}
陈	188
	189	&-form {
190112	190	position: relative;
V	191	bottom: 60px;
	192	width: 400px;
03b602	193	background: @white;
N	194	border: 10px solid rgba(255, 255, 255, 0.5);
84b830	195	border-width: 8px;
03b602	196	border-radius: 4px;
N	197	background-clip: padding-box;
c8021e	198	.respond-to(xlarge, { margin: 0 120px 0 50px});
03b602	199
N	200	&-wrap {
	201	position: absolute;
	202	top: 0;
	203	right: 0;
	204	display: flex;
	205	width: 100%;
190112	206	height: 100%;
V	207	// height: 90%;
03b602	208	justify-content: center;
N	209	align-items: center;
190112	210	.respond-to(xlarge, {
V	211	justify-content: flex-end;
84b830	212	});
737b1b	213	}
V	214
03b602	215	&__content {
737b1b	216	position: relative;
03b602	217	width: 100%;
N	218	height: 100%;
190112	219	padding: 60px 0 40px 0;
03b602	220	border: 1px solid #999;
N	221	border-radius: 2px;
	222
	223	header {
	224	display: flex;
	225	justify-content: center;
	226	align-items: center;
	227
	228	img {
	229	display: inline-block;
c8021e	230	width: 48px;
03b602	231	}
N	232
	233	h1 {
	234	margin-bottom: 0;
	235	font-size: 24px;
	236	text-align: center;
	237	}
	238	}
	239
	240	form {
	241	width: 80%;
	242	}
	243	}
2f6253	244	}
陈	245	}
	246	</style>