realty/virgo.wzfrontend/workark/src/layout/components/login.vue

<template>
	<div class="website-login-box">
		<div class="login-box">
			<div class="close-icon-box">
				<i class="el-icon-circle-close close-icon" @click="close"></i>
			</div>
			<div class="login-form">
				<div class="login-tab" :class="{
						active1:nowTab.id === 1,
						active2:nowTab.id === 2
					}">
					<div class="tab-item" :class="{
						active:nowTab.id === tab.id
					}" v-for="(tab, index) in tabs" :key="index" @click="nowTab = tab">
						{{ tab.name }}
					</div>
				</div>
				<el-form :model="loginForm" :rules="loginRules" status-icon ref="loginForm" label-position="left">
					<el-form-item prop="phone">
						<el-input type="text" prefix-icon="iconfont huifont-shoujihao" v-model="loginForm.phone"
							placeholder="手机号" maxlength="11">
						</el-input>
					</el-form-item>
					<el-form-item prop="code" class="image-item" v-if="nowTab.id === 1">
						<el-input type="text" prefix-icon="iconfont huifont-tuxingyanzhengma" v-model="loginForm.code"
							placeholder="图片验证码" maxlength="4"></el-input>
						<div class="code-image" @click="imgCodeFunc">
							<img v-if="codeImg" :src="codeImg" alt="图片验证码" />
							<p class="color-blue">看不清？点击刷新</p>
						</div>
					</el-form-item>
					<el-form-item prop="phoneCode" class="phone-code" v-if="nowTab.id === 1">
						<el-input type="number" prefix-icon="iconfont huifont-duanxinyanzhengma"
							v-model="loginForm.phoneCode" placeholder="短信验证码"
							oninput="if(value.length > 6) value=value.slice(0, 6)">
						</el-input>
						<div class="get-code-btn">
							<el-button type="primary" size="samll" @click="getPhoneCode"
								:disabled="codeName !== '获取验证码'">
								{{codeName}}
							</el-button>
						</div>
					</el-form-item>
					<el-form-item prop="password" v-if="nowTab.id === 2">
						<el-input type="password" prefix-icon="iconfont huifont-mima" v-model="loginForm.password"
							:show-password="true" placeholder="请输入密码">
						</el-input>
					</el-form-item>
				</el-form>
				<el-button class="submit" type="primary" @click="loginSubmit" :loading="loginLoading">登录</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		login,
		getImgCode,
		sendPhoneCode,
		getUserInfo,
		selectOrangaized
	} from '@/api/loginRegister';
	import {
		setToken,
		setComment
	} from '@/uitls/auth';
	export default {
		data() {
			return {
				loginForm: {
					phone: '',
					code: '',
					phoneCode: '',
					password: ''
				},
				loginLoading: false,
				codeImg: '',
				codeName: '获取验证码', //获取验证码text
				isDisabled: false, //获取验证码按钮状态
				loginRules: {
					code: [{
						required: true,
						message: '请输入图片验证码',
						trigger: 'blur'
					}],
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}, {
						validator: (rule, value, callback) => {
							if (!/^1[123456789]\d{9}$/.test(value)) {
								callback(new Error("请输入正确的手机号"));
							} else {
								callback();
							}
						},
						trigger: 'blur'
					}],
					phoneCode: [{
						required: true,
						message: '请输入短信验证码',
						trigger: 'blur'
					}]
				},
				tabs: [{
					id: 1,
					name: '验证码登录'
				}, {
					id: 2,
					name: '账号密码登录'
				}],
				nowTab: {
					id: 1,
					name: '验证码登录'
				}
			};
		},
		mounted() {
			this.imgCodeFunc();
			if (this.$store.getters.codeNumber != 60) this.codeReset();
		},
		methods: {
			imgCodeFunc() {
				getImgCode().then(res => {
					if (res.state) {
						this.codeImg = res.data.pngBase64;
					}
				})
			},
			getPhoneCode() {
				if (this.isDisabled) return;
				this.$refs.loginForm.validateField('phone', valid => {
					if (!valid) {
						this.$refs.loginForm.validateField('code', valid => {
							if (!valid) {
								sendPhoneCode(this.loginForm.phone, this.loginForm.code).then(res => {
									if (res.state) {
										this.codeReset();
										this.$message.success('发送成功');
									}
								})
							}
						})
					}
				})
			},
			codeReset() {
				//重置获取验证码倒计时
				let codeNumber = this.$store.getters.codeNumber;
				codeNumber--;
				this.handleCode(codeNumber);
				let codeRestFn = setInterval(() => {
					codeNumber--;
					this.handleCode(codeNumber);
					if (codeNumber == 0) clearInterval(codeRestFn); //停止
				}, 1000);
			},
			handleCode(codeNumber) {
				//code操作
				this.codeName = codeNumber == 0 ? '获取验证码' : '重新获取' + codeNumber;
				this.isDisabled = codeNumber == 0 ? false : true;
				this.$store.dispatch('app/changeCodeNumber', codeNumber == 0 ? 60 : codeNumber);
			},
			close() {
				if (this.loginLoading) return;
				this.$emit('callback');
			},
			loginSubmit() {
				if (this.loginLoading) return;
				this.loginLoading = true;
				this.$refs['loginForm'].validate(valid => {
					if (!valid) return this.loginLoading = false;
					this.loginFunc();
				})
			},
			loginFunc() {
				let postData = this.nowTab.id === 1 ? {
					phone: this.loginForm.phone,
					phoneCode: this.loginForm.phoneCode
				} : {
					phone: this.loginForm.phone,
					password: this.loginForm.password
				};
				login(postData).then(res => {
					if (res.state) {
						setToken(res.data.token);
						getUserInfo().then(res => {
							if (res.state) {
								let user = res.data;
								let organization = user.organizationList.find(node => node.contactTel ===
									user.phone);
								if (!organization) organization = user.organizationList[0];
								this.$store.dispatch('app/changeOrganization', organization);
								this.$store.dispatch('app/changeUser', user);
								this.$store.dispatch('app/changeMenuData', user.workarkResource ? JSON
									.parse(user.workarkResource) : []);
								setComment(user.workarkMenu ? user.workarkMenu : JSON.stringify([]));
								this.$chat.connect();
								setTimeout(() => {
									this.successLogin();
								}, 500)
							} else {
								this.loginLoading = false;
							}
						})
					} else {
						this.loginLoading = false;
					}
				})
			},
			successLogin() {
				this.loginLoading = false;
				this.$emit('callback', 'init')
				this.$message.success('登录成功');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.login-tab {
		display: flex;
		border: 1px solid #bebebe;
		margin-bottom: 28px;
		height: 36px;
		border-radius: 4px;
		align-items: center;
		position: relative;

		&:before {
			content: '';
			position: absolute;
			background: #bebebe;
			width: 159px;
			height: 28px;
			border-radius: 4px;
			z-index: 8;
			transition: left 0.3s;
		}

		&.active1:before {
			left: 4px;
		}

		&.active2:before {
			left: 167px;
		}
	}

	.tab-item {
		flex: 1;
		text-align: center;
		z-index: 9;
		cursor: pointer;
		transition: color 0.3s;

		&.active {
			color: #fff;
		}
	}

	.website-login-box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.close-icon {
		font-size: 30px;
		color: #c9cdd3;
		cursor: pointer;
	}

	.close-icon-box {
		padding: 10px 10px 40px 10px;
		text-align: right;
	}

	.login-box {
		width: 440px;
		background: $--color-white;
		box-shadow: 0px 4px 16px 0px rgba(164, 178, 203, 0.15);
		border-radius: 8px;
		border: 0px solid $--color-white;
		box-sizing: border-box;
	}

	.login-title {
		padding: 52px 52px 48px 52px;
	}

	.login-title-value {
		font-weight: 600;
		font-size: 28px;
		color: #333E4D;
		line-height: 40px;
		text-align: left;
		font-style: normal;
		margin-bottom: 16px;
	}

	.login-title-line {
		width: 80px;
		height: 5px;
		background: #E3E7EE;
	}

	.login-form {
		padding: 0 52px;
	}

	::v-deep.el-form {
		display: block;

		.el-form-item {
			width: 100%;
			padding: 0;
			margin-bottom: 28px;
			position: relative;
		}

		.el-input__inner {
			padding: 15px 15px 15px 63px;
			height: 52px;
			line-height: 52px;
			font-size: 16px;
		}

		.el-input__icon,
		.el-range-separator {
			line-height: 52px;
			font-size: 16px;
		}

		.el-input__prefix {
			left: 16px;
		}

		.el-input__prefix::before {
			content: '';
			top: 16px;
			right: -16px;
			height: 21px;
			width: 1px;
			background-color: $--input-border-color;
			position: absolute;
		}

		.el-input__icon.iconfont {
			font-size: 20px;
			color: #596d8e;
		}

		.el-input__icon.huifont-mima {
			opacity: 0.95;
			margin-left: 2px;
		}

		.image-item {
			.el-form-item__content {
				display: flex;
			}

			.el-input {
				width: 190px;
				margin-right: 12px;
			}

			.code-image {
				width: 131px;
				height: 50px;
				cursor: pointer;
			}

			.color-blue {
				color: $--color-primary;
				font-size: 12px;
				text-align: center;
			}
		}

		.get-code-btn {
			position: absolute;
			top: 6px;
			right: 30px;
		}
	}

	.submit {
		width: 100%;
		margin-bottom: 60px;
		font-weight: 600;
		font-size: 20px;
		line-height: 28px;
	}
</style>