talent_map/pc/pages/account/login.vue

<template>
	<div class="login flex col-center">
	</div>
</template>

<script>
	import {
		loginType,
		client
	} from '@/utils/type'
	import Cookies from 'js-cookie'
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex'
	import CountDown from '@/components/count-down'

	export default {
		head() {
			return {
				title: this.$store.getters.headTitle,
				link: [{
					rel: 'icon',
					type: 'image/x-icon',
					href: this.$store.getters.favicon,
				}, ],
			}
		},

		layout: 'main',

		components: {
			CountDown,
		},

		data() {
			return {
				token: null,
				loginUrl: 'https://www.jucai.gov.cn/mobile/auth/login/company?redirect_url='
			}
		},
		computed: {
			...mapState(['config']),
		},
		methods: {
			...mapMutations(['setToken', 'setPublic']),

			async authLoginJucai() {

				const {
					token
				} = this.$route.query
				console.log('token: ' + token)
				if (token || this.config.token) {
					// this.$message({
					// 	message: '登录中...',
					// 	iconClass: "loading",
					// });
					this.loginHandle(token || this.config.token)
				} else {
					this.$message({
						message: '仅对企业开放',
						iconClass: "loading",
						duration: '500',
						onClose: () => {
							location.href = this.loginUrl + encodeURIComponent(location.href)
						}
					});
				}
			},
			// 登录结果处理
			async loginHandle(token) {

				//保存token，获取用户
				let num = 2 //失效时间是几小时
				let time = new Date(new Date().getTime() + num * 60 * 60 * 1000);
				Cookies.set('token', token, {
					expires: time
				}); //保存2小时
				this.setToken(token)
				//获取聚才网用户信息
				let res = await this.$post('https://www.jucai.gov.cn/api/auth/getInfoByToken', {})
				//token 过期，重新登录
				if (res.code == 2) {
					this.$router.push({
						path: '/account/login'
					})
					return false;
				}
				if (res.code == 1) {
					//个人用户，拒绝访问
					if (res.data.type == 1) {
						this.$message({
							message: '仅对企业开放',
							type: "error",
							onClose: () => {
								this.$router.push({
									path: '/account/login'
								})
							}
						});
						return false;
					}
					//企业用户
					if (res.data.type == 2) {
						let {data} = await this.$post('auth/login', {
							...res.data
						})
						//存储用户信息
						this.setPublic(data)
					}
				}

				//跳转逻辑
				Cookies.set('reload', true, {
					expires: time
				}); //保存2小时
				this.$router.replace({
					path: Cookies.get('back_url') || '/',
				})
				Cookies.remove('back_url')
			},

			async accountLogin() {
				let res = await this.$post('account/login', {
					mobile: this.account,
					password: this.password,
					client,
				})
				if (res.code == 1) {
					const token = res.data.token
					Cookies.set('token', token, {
						expires: 60
					})
					this.setToken(token)
					this.$router.replace({
						path: Cookies.get('back_url') || '/',
					})
					Cookies.remove('back_url')
					this.getPublicData()
					if (this.isRemember) {
						localStorage.setItem(
							'ACCOUNT',
							JSON.stringify({
								account: this.account,
							})
						)
					} else {
						localStorage.setItem(
							'ACCOUNT',
							JSON.stringify({
								account: '',
							})
						)
					}
				}
			},
		},

		created() {
			this.authLoginJucai();
		},
	}
</script>

<style lang="scss" scoped>
	.login {
		flex: 1;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: 50%;
		min-width: 1180px;

		.login-container {
			margin: 0 auto;
			width: 1180px;
			height: 100%;
			position: relative;

			.login-banner {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 750px;
				margin-right: 30px;
				height: 440px;
				overflow: hidden;
				animation: loadimg 2s infinite;
				transition: background-color 2s;
			}

			@keyframes loadimg {
				0% {
					background-color: #e4e4e4;
				}

				50% {
					background-color: #f0f0f0;
				}

				100% {
					background-color: #e4e4e4;
				}
			}

			.login-float-form-wrap {
				width: 400px;
				height: 440px;

				.login-box {
					background-color: white;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.login-header-box {
						padding-top: 20px;

						.header-tabs {
							.header-tab {
								width: 160px;
								height: 35px;
								display: flex;
								flex-direction: column;
								align-items: center;
								cursor: pointer;
							}

							.active-tab {
								color: $--color-primary;
								text-align: center;

								&::after {
									content: "";
									height: 2px;
									width: 72px;
									margin-top: 8px;
									background-color: $--color-primary;
								}
							}
						}

						.login-form-box {
							padding: 0 30px;

							.login-form-item {
								margin-top: 24px;

								.input-phone-num {
									width: 340px;
								}

								.verify-code-img {
									width: 100px;
									height: 40px;
									margin-left: 20px;
									background-color: red;
								}

								.sms-btn {
									margin-left: 20px;
									height: 40px;
								}
							}
						}

						.option-box {
							padding: 0 30px;
							margin-top: 60px;

							::v-deep .el-checkbox {
								color: #888;
							}
						}
					}

					.login-footer-box {
						height: 50px;
						padding: 15px;

						.login__other-item {
							cursor: pointer;
						}

						.login__weixin-icon {
							width: 1.5em;
							height: 1.5em;
							text-align: center;
							line-height: 1.5em;
							border-radius: 50%;
							background-color: #0abd5d;
							color: #ffffff;
						}
					}
				}
			}
		}
	}
</style>