onbus_crm.git - Gitblit

vben

2020-10-29 404c73de450c165ffe623ca2969322bae1786a73

提交 \| 用户 \| 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">
	6	<div class="login-form__content px-2 py-10">
	7	<header>
	8	<img src="/@/assets/images/logo.png" class="mr-4" />
	9	<h1>{{ title }}</h1>
2f6253	10	</header>
陈	11
03b602	12	<a-form class="mx-auto mt-10" :model="formData" :rules="formRules" ref="formRef">
2f6253	13	<a-form-item name="account">
陈	14	<a-input size="large" v-model:value="formData.account" placeholder="vben" />
	15	</a-form-item>
	16	<a-form-item name="password">
	17	<a-input-password
	18	size="large"
	19	visibilityToggle
	20	v-model:value="formData.password"
	21	placeholder="123456"
	22	/>
	23	</a-form-item>
	24	<a-form-item name="verify" v-if="openLoginVerify">
	25	<BasicDragVerify v-model:value="formData.verify" ref="verifyRef" />
	26	</a-form-item>
	27	<a-form-item>
	28	<a-button
	29	type="primary"
	30	size="large"
	31	class="rounded-sm"
	32	block
	33	@click="login"
	34	:loading="formState.loading"
	35	>登录</a-button
	36	>
	37	</a-form-item>
	38	</a-form>
	39	</div>
	40	</div>
	41	</div>
	42	</div>
	43	</template>
	44	<script lang="ts">
	45	import { defineComponent, reactive, ref, unref, toRaw, computed } from 'vue';
	46	import { BasicDragVerify, DragVerifyActionType } from '/@/components/Verify/index';
	47	import { userStore } from '/@/store/modules/user';
	48	import { appStore } from '/@/store/modules/app';
	49	import { useMessage } from '/@/hooks/web/useMessage';
03b602	50	import { useSetting } from '/@/hooks/core/useSetting';
968f79	51	import Button from '/@/components/Button/index.vue';
V	52
2f6253	53	export default defineComponent({
968f79	54	components: { BasicDragVerify, AButton: Button },
2f6253	55	setup() {
03b602	56	const { globSetting } = useSetting();
2f6253	57	const { notification } = useMessage();
陈	58	const formRef = ref<any>(null);
	59	const verifyRef = ref<RefInstanceType<DragVerifyActionType>>(null);
	60
	61	const openLoginVerifyRef = computed(() => appStore.getProjectConfig.openLoginVerify);
	62
	63	const formData = reactive({
508109	64	account: 'vben',
V	65	password: '123456',
2f6253	66	verify: undefined,
陈	67	});
	68	const formState = reactive({
	69	loading: false,
	70	});
	71
	72	const formRules = reactive({
	73	account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
	74	password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
	75	verify: unref(openLoginVerifyRef) ? [{ required: true, message: '请通过验证码校验' }] : [],
	76	});
	77
	78	function resetVerify() {
	79	const verify = unref(verifyRef);
	80	if (!verify) return;
	81	formData.verify && verify.$.resume();
	82	formData.verify = undefined;
	83	}
	84
	85	async function handleLogin() {
	86	const form = unref(formRef);
	87	if (!form) return;
	88	formState.loading = true;
	89	try {
	90	const data = await form.validate();
	91	const userInfo = await userStore.login(
	92	toRaw({
	93	password: data.password,
	94	username: data.account,
	95	})
	96	);
	97	if (userInfo) {
	98	notification.success({
	99	message: '登录成功',
	100	description: `欢迎回来: ${userInfo.realName}`,
	101	duration: 3,
	102	});
	103	}
	104	} catch (error) {
	105	} finally {
	106	resetVerify();
	107	formState.loading = false;
	108	}
	109	}
	110
	111	return {
	112	formRef,
	113	verifyRef,
	114	formData,
	115	formState,
	116	formRules,
	117	login: handleLogin,
	118	openLoginVerify: openLoginVerifyRef,
03b602	119	title: globSetting && globSetting.title,
2f6253	120	};
陈	121	},
	122	});
	123	</script>
	124	<style lang="less" scoped>
03b602	125	@import (reference) '../../../design/index.less';
N	126
2f6253	127	.login {
03b602	128	position: relative;
N	129	height: 100vh;
2f6253	130	background: url(../../../assets/images/login/login-bg.png) no-repeat;
陈	131	background-size: 100% 100%;
	132
	133	&-mask {
03b602	134	display: none;
N	135	height: 100%;
2f6253	136	background: url(../../../assets/images/login/login-in.png) no-repeat;
陈	137	background-size: 100% 100%;
03b602	138
N	139	.respond-to(large, { display: block;});
2f6253	140	}
陈	141
	142	&-form {
03b602	143	width: 100%;
N	144	background: @white;
	145	border: 10px solid rgba(255, 255, 255, 0.5);
2f6253	146	border-width: 10px;
03b602	147	border-radius: 4px;
N	148	background-clip: padding-box;
	149	.respond-to(xlarge, { margin: 0 56px});
	150
	151	&-wrap {
	152	position: absolute;
	153	top: 0;
	154	right: 0;
	155	display: flex;
	156	width: 100%;
	157	height: 100%;
	158	justify-content: center;
	159	align-items: center;
	160	.respond-to(large, { width: 40%;});
	161	.respond-to(xlarge, { width: 33.3%;});
	162	}
	163
	164	&__content {
	165	width: 100%;
	166	height: 100%;
	167	border: 1px solid #999;
	168	border-radius: 2px;
	169
	170	header {
	171	display: flex;
	172	justify-content: center;
	173	align-items: center;
	174
	175	img {
	176	display: inline-block;
e9536b	177	width: 80px;
03b602	178	}
N	179
	180	h1 {
	181	margin-bottom: 0;
	182	font-size: 24px;
	183	color: @primary-color;
	184	text-align: center;
	185	}
	186	}
	187
	188	form {
	189	width: 80%;
	190	}
	191	}
2f6253	192	}
陈	193	}
	194	</style>