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="$emit('callback')"></i>
			</div>
			<div class="login-form">
				<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">
						<el-input type="text" prefix-icon="iconfont huifont-tuxingyanzhengma" v-model="loginForm.code"
							placeholder="图片验证码" maxlength="4"></el-input>
						<img v-if="codeImg" :src="codeImg" alt="图片验证码" class="code-image" @click="imgCodeFunc">
					</el-form-item>
					<el-form-item prop="phoneCode" class="phone-code">
						<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>
				<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: ''
				},
				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'
					}]
				},
			};
		},
		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);
			},
			loginSubmit() {
				if (this.loginLoading) return;
				this.loginLoading = true;
				this.$refs['loginForm'].validate(valid => {
					if (!valid) return this.loginLoading = false;
					this.loginFunc();
				})
			},
			loginFunc() {
				let postData = {
					phone: this.loginForm.phone,
					phoneCode: this.loginForm.phoneCode
				}
				login(postData).then(res => {
					if (res.state) {
						setToken(res.data.token);
						getUserInfo().then(res => {
							if (res.state) {
								let user = res.data;
								let organization = user.organization;
								if (!organization) {
									organziation = user.organizationList[0];
									selectOrangaized(organization)
								}
								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([]));
								return this.successLogin('/work');
							} else {
								this.loginLoading = false;
							}
						})
					} else {
						this.loginLoading = false;
					}
				})
			},
			successLogin(url) {
				this.loginLoading = false;
				this.$router.push(url);
				this.$message.success('登录成功');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.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 20px 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;
			}
		}

		.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>