QHD_ZhongYiYuan_YiJiYuYue/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: hunxiao(username.value),
			password: hunxiao(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)

			}
		})

	}
	const hunxiao=(str)=>{
			let originalString =str
			 var charMap = {
			        'a': 'z', 'b': 'y', 'c': 'x', 'd': 'w', 'e': 'v',
			        'f': 'u', 'g': 't', 'h': 's', 'i': 'r', 'j': 'q',
			        'k': 'p', 'l': 'o', 'm': 'n', 'n': 'm', 'o': 'l',
			        'p': 'k', 'q': 'j', 'r': 'i', 's': 'h', 't': 'g',
			        'u': 'f', 'v': 'e', 'w': 'd', 'x': 'c', 'y': 'b',
			        'z': 'a',
			        '0': '@', '1': '!', '2': '#', '3': '$', '4': '%',
			        '5': '^', '6': '&', '7': '*', '8': '(', '9': ')'
			    };
			    var mappedString = originalString.split('').map(char => charMap[char] || char).join('');
			
			    // 第二步：反转字符串
			    var reversedString = mappedString.split('').reverse().join('');
			
			    // 第三步：添加固定前缀和后缀
			    var prefixedSuffixString = 'a5331_' + reversedString + '_a454d';
			
			    // 第四步：使用 btoa 函数执行 Base64 编码
			    var encodedString = btoa(prefixedSuffixString);
				return encodedString;
		}

	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>