YiJiYuYue-NanShanFuYou/YiJi-admin/src/views/AutoLogin.vue

<template>
	<div>
		<el-container class="common-layout">

			<el-row style="width: 100%; display: flex; justify-content: center;">
				<el-col :span="9" class="left">

				</el-col>
				<el-col :span="15" class="right" v-loading="loading">
					<div class="right_top">
						<div>
							<el-switch v-model="isDark" inline-prompt active-color="var(--el-fill-color-dark)"
								inactive-color="var(--el-color-primary)" active-action-icon="Moon"
								inactive-action-icon="Sunny" @change="toggleDark" />
						</div>
					</div>
					<el-form  style="width: 400px;" ref="ruleFormRef" status-icon class="demo-ruleForm">
						<el-form-item>
							<span style="font-size: 22px;">登录您的账户</span>
						</el-form-item>
						<el-form-item>
							<el-input v-model.number="username" ref="usernameRef" @keyup.enter="focusNextTo()" :prefix-icon="User" placeholder="用户名" size="large" />
						</el-form-item>
						<el-form-item>
							<el-input v-model="pwd" type="password" ref="passwordRef" @keyup.enter="login()" autocomplete="off" placeholder="密码" size="large"
								:prefix-icon="Lock" />
						</el-form-item>
						<el-form-item>
							<el-button style="width: 100%;" type="primary" @click="login(ruleFormRef)"
								size="large">登录</el-button>
						</el-form-item>
						<div style="height: 160px;"></div>
					</el-form> 
					<div class="right_bottom"></div>
				</el-col>
			</el-row>

		</el-container>
	</div>
</template>

<script setup>
	import {
		Login
	} from "@/api/api.js";
	import {
		ElMessage
	} from 'element-plus'
	import {
		ref,nextTick,onMounted
	} from 'vue'
	import {
		Lock,
		User,
		Iphone,RefreshRight,Key
	} from '@element-plus/icons-vue'
	import {
		useToggle
	} from '@vueuse/shared'
	import {
		useDark
	} from "@vueuse/core";
	import {
		useRoute,
		useRouter
	} from "vue-router"
	const route = useRoute()
	const router = useRouter()


	const isDark = useDark()
	const toggleDark = () => useToggle(isDark)
	let loading=ref(false);
	let username = ref('')
	let pwd = ref('')

	let login = () => { //登录
		if (username.value == '' || pwd.value == '') return ElMessage.error('用户名和密码不能为空')
		let data = { //传参
			username: username.value,
			password: pwd.value,
		}
		loading.value=true
		//调用登录接口
		Login(data).then(res => {
			loading.value=false
			if (res.data.status == 'ok') {
				sessionStorage.setItem('token', res.data.token);
				sessionStorage.setItem('refreshToken', res.data.refresh_token);
				// sessionStorage.setItem('tk', JSON.stringify(res.data.tk));
				var token = sessionStorage.getItem('token');
				if (token == res.data.token) {
					window.location.href = "./#/yewu/mainList"
				}
			} else {
				ElMessage.error(res.data.msg)

			}
		})

	}

	let usernameRef=ref(null);
	let passwordRef=ref(null);
	const focusNextTo=()=>{
		passwordRef.value.focus()
	}
	onMounted(()=>{
		  
		// let p=route.query
		
		username.value=getParameterByName('u')
		pwd.value=getParameterByName('p')
		
		 console.log(username.value)
		 console.log(pwd.value)
		 
			login()
		 
		
		  })

//获取url参数
    function getParameterByName(name, url) {
        if (!url) url = decodeURIComponent(window.location.href)
        name = name.replace(/[\[\]]/g, '\\$&')
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url)
        if (!results) return null
        if (!results[2]) return ''
        return decodeURIComponent(results[2].replace(/\+/g, ' '))
    }
</script>

<style scoped>
	.common-layout {
		/* border: 10px solid red; */
		width: 100%;
		height: 100vh;
		 

	}

	.common-layout .el-main {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background-color: var(--color-table-th-background);
		background-image: url('../assets/loginBackg.png');
		background-size: 100%;
		background-repeat: no-repeat;

		background-position: center center;


	}

	.right {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
	}

	.right_top {
		display: flex;
		justify-content: flex-end;
		width: 100%;
		padding-right: 20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
</style>