block_medical/ui/src/pages/login.vue

<template>
	<div class="login-container">
		<div class="module">
			<img src="/loginimg.jpg" class="module_img" />
			<div class="module_r">
				<div class="module_mian">
					<div class="module_title">登录帐户</div>
					<div class="module_desc">输入用户名 & 登录密码</div>
					<div class="module_m">
						<div class="module_text">用户名</div>
						<input class="module_input" type="text" placeholder="输入用户名" v-model="state.login.username" />
					</div>
					<div class="module_m">
						<div class="module_text">密码</div>
						<input class="module_input" type="password" placeholder="输入密码" v-model="state.login.password" />
					</div>
					<!-- 文件上传组件 -->
					<div class="module_m" v-if="state.login.role === 0">
						<div class="module_text">上传密钥文件</div>
						<el-button 	v-if="state.login.hex" size="small" type="primary" @click="rest">重新上传</el-button>
						<el-upload
							v-else
							class="upload-demo"
							:show-file-list="false"
							:limit="1"
							accept=".pem, .key, .txt"
							:auto-upload="false"
							@change="handleFileChange">
							<el-button size="small" type="primary">点击上传密钥</el-button>
						</el-upload>
					</div>

					<div class="module_m">
						<div class="module_code">
							<el-radio-group v-model="state.login.role" class="ml-4">
								<el-radio :label=0 size="large">患者</el-radio>
								<el-radio :label=1 size="large">医生</el-radio>
								<el-radio :label=2 size="large">管理</el-radio>
							</el-radio-group>
						</div>
					</div>
					<el-row :gutter="10">
						<el-col :span="10">	<div class="forgetpwd" @click="router.push('/register')">患者注册？</div></el-col>
						<el-col :span="14"><div class="forgetpwd" @click="router.push('/doctorregister')">医生注册？</div></el-col>
					</el-row>
					<el-button class="module_button" @click="onLogin">登录</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { loginAdmin } from '~/api/user/adminUserApi'
import { getUuid } from '~/utils/utils'
const router = useRouter()
const state = reactive(<any>{
	captchaUrl: '',
	loginFrom: {},
	loading: false,
	login:{
		username: '',
		password: '',
		hexId: 0,
	}
})

function rest() {
	state.login.hexId = ""
}
// 处理文件变化
const handleFileChange = (uploadFile:any) => {
	// 检查是否有文件
	if (!uploadFile) return;
	const file = uploadFile.raw;  // Element Plus 的文件对象在raw属性中
	// 创建FileReader实例
	const reader = new FileReader();
	// 读取成功回调
	reader.onload = (event) => {
		const fileContent = event.target.result;
		console.log(fileContent)
		state.login.hexId = fileContent
	};

	// 读取错误回调
	reader.onerror = (error) => {
		console.error('文件读取错误:', error);
	};

	// 开始读取文件（文本格式）
	reader.readAsText(file);
};
const onLogin = () => {
	state.loading = true
	// 医生
	if (state.login.role == 1){
	frontRequest.post("/api/doctors/login",{nickName:state.login.username,password:state.login.password}).then(response =>{
		const user = userStore()
    user.doctorUserInfo = response.data
    user.doctorIsLogin = true
		ElMessage.success("登录成功~")
		router.push('/doctor/info')
	})

	} else if(state.login.role == 2) {
		loginAdmin(state.login).then(response => {
			state.loading = false
			userStore().adminIsLogin = true
			userStore().adminToken = response.data.token
			adminRequest.get("/sys/user/info").then(response => {
				userStore().adminUserInfo = response.data
				router.push('/admin')
				ElMessage.success("登录成功~")
			})
		}).catch(() => {
			state.loading = false
		})
	} else {
		frontRequest.post("/api/user/login", state.login).then(response =>{
			const user = userStore()
			user.frontToken = response.data.token
			user.frontIsLogin = true
			ElMessage.success("登录成功~")
			router.push('/')
		})
	}
}

</script>

<style scoped>
.login-container {
	width: 100%;
	height: 100vh;
	background: #FFFFFF;
}

.module {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100vh;
}

.module_img {
	width: 60%;
	height: auto;
}

.module_r {
	width: 40%;
	background: #e5efee;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;

	.module_mian {
		width: 65%;
		background: #FFFFFF;
		height: auto;
		border-radius: 8px;
		overflow: hidden;
		padding-top: 40px;
		padding-bottom: 40px;

		.module_title {
			font-size: 18px;
			font-weight: 500;
			text-align: center;
			color: #333333;
		}

		.module_desc {
			font-size: 12px;
			text-align: center;
			color: #a7a7a7;
			margin-bottom: 20px;
		}

		.module_m {
			margin: 0 auto;
			width: 80%;
			height: auto;
			margin-top: 10px;

			.module_text {
				font-size: 14px;
				color: #333333;
				margin-bottom: 5px;
			}

			.module_input {
				width: 96%;
				height: 40px;
				padding-left: 2%;
				padding-right: 2%;
				border: 1px solid #eee;
				border-radius: 5px;
				font-size: 12px;
			}

			.module_code {
				width: 96%;
				display: flex;
				align-items: center;

				.module_code_input {
					width: 60%;
					height: 40px;
					border-radius: 5px;
					border: 1px solid #eee;
					font-size: 12px;
					padding-left: 2%;
					padding-right: 2%;
				}

				.module_code_img {
					width: 130px;
					height: 40px;
					border-radius: 5px;
					margin-left: 10px;
					cursor: pointer;
				}
			}
		}

		.module_radio input {
			margin-right: 5px;
		}

		.forgetpwd {
			margin: 0 auto;
			width: 80%;
			font-size: 14px;
			color: #328d86;
			margin-top: 10px;
			cursor: pointer;
		}

		.module_button {
			margin: 0 auto;
			display: block;
			width: 80%;
			background: #328d86;
			color: #FFFFFF;
			height: 40px;
			margin-top: 20px;
			border-radius: 5px;
			font-weight: 500;
			cursor: pointer;
		}

		.module_button:active {
			opacity: 0.4;
		}
	}
}
</style>
<route lang="json">
{
"meta": {
"layout": "notFound"
}
}
</route>