CZO_Boss/src/views/login.vue

<template>
	<div class="login">
		<div class="header">
			<div class="inner">
				<div class="header-left">
					<div class="header-left-logo">
						<img src="~@/assets/images/login/icon.png" alt="" />
					</div>
					<div class="header-left-line"></div>
					<div class="header-left-text">
						<div style="font-size: 24px">CZO智能分析管理系统</div>
						<div style="font-size: 12px">Enterprise management integration platform</div>
					</div>
				</div>
				<div class="header-right">
					<span>合同样本</span>
					<span>税收政策</span>
					<span>政府惠企政策</span>
					<span>四险一金</span>
				</div>
			</div>
		</div>
		<div class="main">
			<div class="inner">
				<div class="main-info">
					<div class="main-info-text">企业智能信息化 高效管理 节能降耗</div>
					<div class="main-info-text" style="margin-top: 20px">实现 标准化、机制化、流程化、责任化、市场化、人性化</div>
					<div class="main-info-link">
						<a href="javascript:void(0);">产品视频</a>
						<a href="javascript:void(0);">企业诊断</a>
					</div>
				</div>
				<div class="main-login">
					<div class="main-login-title">黑龙江省华滋佐味酿造有限公司</div>
					<div class="main-login-form">
						<div class="main-login-from-user">
							<label>
								<span>账号</span>
								<input type="text" auto-complete="off" v-model="formData.username" @keyup.enter="handleLogin" />
							</label>
						</div>
						<div class="main-login-from-pass">
							<label>
								<span>密码</span>
								<input type="password" auto-complete="off" v-model="formData.password" @keyup.enter="handleLogin" />
							</label>
						</div>
						<div class="main-login-from-com">
							<label>
								<span>公司</span>
								<select v-model="formData.companyId" class="com-select">
									<option v-for="item in comList" :key="item.companyId" :value="item.companyId">{{ item.companyName }}</option>
								</select>
							</label>
						</div>
						<div class="main-login-from-pass">
							<label>
								<span>验证码</span>
								<input type="text" auto-complete="off" v-model="formData.code" style="width: 150px" @keyup.enter="handleLogin" />
								<img :src="codeUrl" @click="getCode" class="login-code-img" />
							</label>
						</div>
						<div class="main-login-from-btn">
							<button @click="handleLogin">
								<span v-if="!loading">立即登录</span>
								<span v-else>登 录 中...</span>
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			<div class="inner">
				<a href="javascript:void(0);">代理商</a>
				<a href="javascript:void(0);">加盟商</a>
				<a href="javascript:void(0);">合作商</a>
			</div>
		</div>
	</div>
</template>

<script>
import { getCodeImg, getComList } from '@/api/login'
import Cookies from 'js-cookie'
import { encrypt, decrypt } from '@/utils/jsencrypt'
export default {
	data() {
		return {
			codeUrl: '',
			loading: false,
			formData: {
				username: 'admin',
				password: 'admin123',
				code: '',
				uuid: '',
				companyId: 0
			},
			redirect: undefined,
			comList: []
		}
	},
	watch: {
		$route: {
			handler: function (route) {
				this.redirect = route.query && route.query.redirect
			},
			immediate: true
		}
	},
	created() {
		this.getCode()
		//this.getCookie();
	},
	methods: {
		getCode() {
			getCodeImg().then(res => {
				this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff
				if (this.captchaOnOff) {
					this.codeUrl = 'data:image/gif;base64,' + res.img
					this.formData.uuid = res.uuid
				}
			})
			getComList().then(res => {
				if (res.code === 200) {
					this.comList = res.data
					res.data.length && (this.formData.companyId = res.data[0].companyId)
				}
			})
		},
		handleLogin() {
			if (this.formData.username.trim() == '') {
				this.$msg({ type: 'error', message: '账号不能为空' })
				return
			}
			if (this.formData.password.trim() == '') {
				this.$msg({ type: 'error', message: '密码不能为空' })
				return
			}
			if (this.formData.code.trim() == '') {
				this.$msg({ type: 'error', message: '未输入验证码' })
				return
			}
			this.loading = true
			this.$store
				.dispatch('Login', this.formData)
				.then(() => {
					this.$router.push({ path: this.redirect || '/' }).catch(() => {})
				})
				.catch(() => {
					this.loading = false
				})
		}
	}
}
</script>

<style scoped lang="scss">
.login {
	width: 100%;
	height: 100vh;
	.login-code-img {
		width: 80px;
		height: 30px;
	}
	.header,
	.footer {
		width: 100%;
		height: 80px;
		background: url('~@/assets/images/login/line.jpg') 0 0 no-repeat;
	}
	.main {
		width: 100%;
		height: calc(100vh - 160px);
		background: url('~@/assets/images/login/main.jpg') 0 0 no-repeat;
	}
	.inner {
		width: 80%;
		margin: 0 auto;
		display: flex;
	}
	.header {
		.inner {
			height: 80px;
			justify-content: space-between;
			align-items: center;
			.header-left {
				display: flex;
				color: #fff;
				.header-left-logo,
				.header-left-line,
				.header-left-text {
					height: 60px;
					display: flex;
					align-items: center;
				}
				.header-left-line {
					width: 2px;
					background: url('~@/assets/images/login/1.png') 0 0 no-repeat;
					margin: 0 5px;
				}
				.header-left-text {
					height: 50px;
					align-items: flex-start;
					flex-direction: column;
					justify-content: space-around;
				}
			}
			.header-right {
				height: 60px;
				display: flex;
				align-items: flex-end;
				span {
					background-color: #3cc3cc;
					display: inline-block;
					border-radius: 5px;
					padding: 3px 5px;
					margin-left: 8px;
				}
			}
		}
	}
	.footer {
		.inner {
			height: 80px;
			align-items: center;
			a {
				display: inline-block;
				background-color: #3cc3cc;
				border-radius: 5px;
				-webkit-box-shadow: 0 0 11px 3px #4fcaca inset;
				box-shadow: inset 0 0 11px 3px #4fcaca;
				width: 175px;
				height: 50px;
				border: 1px solid #000;
				font-size: 18px;
				margin-right: 8px;
				color: #fff;
				text-align: center;
				line-height: 50px;
			}
		}
	}
	.main {
		.inner {
			height: 100%;
			align-items: center;
			justify-content: space-between;
			.main-info {
				.main-info-text {
					color: #fff;
					font-size: 28px;
					font-weight: bolder;
				}
				.main-info-link {
					margin-top: 100px;
					a {
						display: inline-block;
						width: 175px;
						height: 50px;
						color: #fff;
						border-radius: 5px;
						text-align: center;
						line-height: 50px;
						font-size: 18px;
						border: 1px solid #000;
						&:first-child {
							background: rgba(7, 34, 83, 0.89);
							-webkit-box-shadow: 0 0 11px 3px rgba(8, 49, 157, 0.8) inset;
							box-shadow: inset 0 0 11px 3px rgba(8, 49, 157, 0.8);
						}
						&:last-child {
							background: rgba(51, 204, 204, 0.7);
							-webkit-box-shadow: 0 0 11px 3px #4fcaca inset;
							box-shadow: inset 0 0 11px 3px #4fcaca;
							margin-left: 8px;
						}
					}
				}
			}
			.main-login {
				width: 360px;
				.main-login-title {
					width: 100%;
					height: 45px;
					line-height: 45px;
					font-size: 18px;
					background: #07276a;
					border-radius: 5px 5px 0 0;
					color: #fff;
					text-align: center;
				}
				.main-login-form {
					width: 100%;
					background: #a4a4af;
					border-radius: 0 0 5px 5px;
					padding: 40px 30px;
					box-sizing: border-box;
					.main-login-from-user,
					.main-login-from-pass,
					.main-login-from-com {
						width: 300px;
						border: 1px solid #000;
						height: 30px;
						border-radius: 5px;
						margin-bottom: 10px;
						overflow: hidden;
						label {
							display: flex;
							span {
								display: inline-block;
								width: 70px;
								height: 50px;
								background-color: #a6a6a6;
								text-align: center;
								line-height: 30px;
							}
							input {
								display: block;
								width: 230px;
								height: 30px;
								padding: 0;
								margin: 0;
								border: none;
								background-color: #fff;
								outline: none;
								line-height: 30px;
								padding-left: 5px;
							}
						}
						.com-select {
							width: 235px;
							height: 30px;
							outline: none;
						}
					}
					.main-login-from-btn {
						button {
							width: 100%;
							color: #fff;
							background-color: #07276a;
							height: 50px;
							border-radius: 5px;
							outline: none;
						}
					}
				}
			}
		}
	}
}
</style>