carbasics2023_web_pad_v4/src/views/login/index.vue

<template>
	<div class="login-page">
		<div class="login-left">
			<div class="login-left-head">
				<div class="login-head-logo"><img src="@/assets/images/logo.jpg" alt="" /></div>
				<div class="login-head-title">卒中医生工作站</div>
			</div>
			<div class="login-left-bg">
				<!-- <img src="@/assets/images/login-bg2.png" alt="" /> -->
			</div>
		</div>
		<div class="login-right">
			<div class="login-right-inner">
				<div class="login-subflex"></div>
				<div class="login-form">
					<div class="login-form-title">欢迎登录</div>
					<!-- <div class="login-form-tabs">
						<div v-if="!curtab" @click="curtab = 1">使用账号密码登录</div>
						<div v-else @click="curtab = 0">使用短信登录</div>
					</div> -->
					<div class="login-form-container">
						<a-form-model :model="form">
							<template v-if="!curtab">
								<a-form-model-item>
									<!-- <a-select v-model="form.username" placeholder="选择账号" size="large">
										<a-select-option v-for="u in userlist"
											:value="u.username">{{u.username}}</a-select-option>
									</a-select> -->
									<a-input v-model="form.username" placeholder="请输入用户名" size="large" >
										<a-icon slot="prefix" type="user" />
									</a-input>
								</a-form-model-item>
								<a-form-model-item style="margin-bottom: 4px;">
									<a-input-password v-model="form.password" placeholder="请输入密码" size="large" >
										<a-icon slot="prefix" type="lock" />
									</a-input-password>
								</a-form-model-item>
							</template>
							<template v-else>
								<a-form-model-item>
									<a-input v-model="form.username" placeholder="请输入手机号码" size="large" />
								</a-form-model-item>
								<a-form-model-item>
									<div style="display: flex;">
										<div style="flex: 1;margin-right: 12px;">
											<a-input v-model="form.code" placeholder="请输入验证吗" size="large" />
										</div>
										<div>
											<a-button type="primary" size="large">发送验证码</a-button>
										</div>
									</div>
								</a-form-model-item>
							</template>
							<a-form-model-item>
								<a-checkbox v-model="form.remember">记住账号</a-checkbox>
							</a-form-model-item>
							<a-form-model-item>
								<a-checkbox v-model="form.agreement"><span>我已阅读并同意 </span><span class="agreement">服务协议、隐私权政策</span></a-checkbox>
								<a-button type="primary" block size="large" @click="login">登录</a-button>
							</a-form-model-item>

						</a-form-model>
					</div>
				</div>
				<div class="login-subflex"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex';
	import {
		Login,
		queryUser
	} from 'api/login';
	export default {
		name: "Login",
		data() {
			return {
				userlist: [],
				curtab: 0,
				form: {
					username: '',
					password: '', // Sxinf18aA!
					code: '',
					agreement: false,
					remember: false
				}
			}
		},
		created() {
			const formData = localStorage.getItem('NICKY_REMEMBER_PWD')
			if(formData) Object.assign(this.form, JSON.parse(formData))
			// this.queryUser()
		},
		methods: {
			...mapActions('storm', ['toLogin']),
			async login() {
				if(!this.form.agreement){
					this.$message.warning("请阅读并同意服务协议、隐私权政策")
					return;
				}
				if(this.form.remember){
					localStorage.setItem('NICKY_REMEMBER_PWD', JSON.stringify(this.form))
				}else{
					localStorage.removeItem('NICKY_REMEMBER_PWD')
				}
				let res = await this.toLogin(this.form);
				this.$router.replace('/firstaid/patientList')
				// this.$router.replace('/firstaid/patientList?deviceNo=P000001')
				
			},
			async queryUser() {
				let res = await queryUser();
				this.userlist = res.data
			}
		}
	}
</script>

<style lang="less" scoped>
	.login-page {
		display: flex;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background-color: #fff;
		background-image: url('../../assets/images/login-bg2.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.login-left {
			flex: 4;
			display: flex;
			flex-direction: column;

			.login-left-head {
				flex: 1;
				height: 100%;
				display: flex;
				padding: 0 2.5rem;
				min-height: 25vh;
				// justify-content: center;
				align-items: center;

				.login-head-logo {
					img {
						width: 3rem;
						height: 3rem;
					}

					margin-right: 1rem;
				}

				.login-head-title {
					font-size: 1.6rem;
					color: #007AFF;
				}

			}

			.login-left-bg {
				flex: 2;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.login-right {
			flex: 5;

			.login-right-inner {
				height: 100vh;
				display: flex;
				flex-direction: column;
				padding: 0 8rem;
				box-sizing: border-box;

				.login-subflex {
					flex: 1;
				}

				.login-form {
					.login-form-title {
						line-height: 6rem;
						font-size: 2.6rem;
						font-weight: bold;
						padding: 0 1rem;
					}

					.login-form-container {}
					
					.agreement{
						color: #007AFF;
					}
				}
			}

		}
	}
</style>

<style lang="less">
	.login-page {
		.ant-form .ant-form-item {
			border: none;

		}
	}
</style>