hospital-rescue-app-v2/pages/login/index.uvue

<template>
	<view class="hr-page" style="background-color:#FFFFFF">
		<hr-statusbar bg="#FFFFFF"></hr-statusbar>

		<view class="lg-wrap">
			<!-- 品牌标识 -->
			<view class="lg-logo">
				<x-icon name="add-line" color="#FFFFFF" font-size="34" font-weight="bold"></x-icon>
			</view>
			<text class="lg-title">医院救援管理平台</text>
			<text class="lg-sub">请使用院内工号登录\n角色由后台根据工号自动识别</text>

			<!-- 角色识别结果（点击可切换演示角色） -->
			<view class="lg-role" @click="toggleRole">
				<view class="lg-role-ic">
					<x-icon :name="role == 'keeper' ? 'archive-line' : 'shield-cross-line'" color="#FFFFFF"
						font-size="19"></x-icon>
				</view>
				<view class="hr-flex1">
					<text class="lg-role-t">{{ roleLabel }}</text>
					<text class="lg-role-s">工号识别后自动进入对应工作台 · 点此切换演示角色</text>
				</view>
				<x-icon name="arrow-left-right-line" color="#3B6BC7" font-size="16"></x-icon>
			</view>

			<!-- 表单（xInput） -->
			<view class="lg-form">
				<x-input v-model="jobNo" left-text="工号" left-icon="user-3-line" placeholder="请输入院内工号"
					round="22rpx" height="96rpx" font-size="30rpx" color="#F9FAFB" font-color="#1F2937"
					icon-color="#9CA3AF"></x-input>
				<view class="lg-field-gap">
					<x-input v-model="password" :password="true" left-text="密码" left-icon="lock-line"
						placeholder="请输入密码" round="22rpx" height="96rpx" font-size="30rpx" color="#F9FAFB"
						font-color="#1F2937" icon-color="#9CA3AF"></x-input>
				</view>
			</view>

			<view class="lg-opt">
				<view class="hr-row">
					<x-switch v-model="remember" size="small" color="#10B981"></x-switch>
					<text class="lg-opt-t">记住工号</text>
				</view>
				<text class="lg-opt-forget" @click="onForget">忘记密码?</text>
			</view>

			<view class="hr-btn hr-btn-primary hr-btn-lg lg-btn" @click="onLogin">
				<text class="lg-btn-t">登 录</text>
			</view>

			<text class="lg-foot">登录即表示同意《服务协议》与《隐私政策》\n遇到问题请联系急救中心值班室 8801</text>
		</view>
	</view>
</template>

<script lang="uts" setup>
	import { ref, computed } from 'vue'
	import { loginAs, hrSession } from '@/utils/role.uts'
	import { relaunchTo } from '@/utils/nav.uts'
	import { HrRole } from '@/mock/types.uts'

	/**
	 * s26 登录
	 * 双角色入口：默认按设计稿为「救援人员 · 急救中心」，
	 * 点击角色卡可在「救援人员端 / 仓管人员端」之间切换，用于演示双角色差异。
	 */
	const role = ref<HrRole>('rescuer')
	const jobNo = ref('1247')
	const password = ref('123456')
	const remember = ref(true)

	const roleLabel = computed(() : string => {
		return role.value == 'keeper' ? '仓管人员 · 后勤保障科' : '救援人员 · 急救中心'
	})

	function toggleRole() : void {
		if (role.value == 'rescuer') {
			role.value = 'keeper'
			jobNo.value = '2083'
		} else {
			role.value = 'rescuer'
			jobNo.value = '1247'
		}
	}

	function onForget() : void {
		uni.showModal({ title: '忘记密码', content: '请联系急救中心值班室 8801 重置工号密码。', showCancel: false })
	}

	function onLogin() : void {
		if (jobNo.value == '') {
			uni.showToast({ title: '请输入工号', icon: 'none' })
			return
		}
		if (password.value == '') {
			uni.showToast({ title: '请输入密码', icon: 'none' })
			return
		}
		uni.showLoading({ title: '登录中' })
		// 工号 2083 段自动识别为仓管人员端
		let r : HrRole = role.value
		if (jobNo.value.startsWith('2')) { r = 'keeper' }
		if (jobNo.value.startsWith('1')) { r = 'rescuer' }
		loginAs(r)
		setTimeout(() => {
			uni.hideLoading()
			relaunchTo(hrSession.role == 'keeper' ? '/pages/warehouse/scan' : '/pages/home/index')
		}, 400)
	}
</script>

<style>
	.lg-wrap {
		flex: 1;
		padding-left: 52rpx;
		padding-right: 52rpx;
		padding-bottom: 60rpx;
		flex-direction: column;
	}

	.lg-logo {
		width: 132rpx;
		height: 132rpx;
		border-radius: 40rpx;
		background-image: linear-gradient(to bottom right, #2563EB, #1D4ED8);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 52rpx;
		align-self: center;
		box-shadow: 0 20rpx 52rpx rgba(37, 99, 235, 0.30);
	}

	.lg-title {
		text-align: center;
		font-size: 42.6rpx;
		font-weight: bold;
		color: #1F2937;
		margin-top: 36rpx;
	}

	.lg-sub {
		text-align: center;
		font-size: 26.8rpx;
		color: #9CA3AF;
		margin-top: 14rpx;
		line-height: 1.6;
	}

	.lg-role {
		margin-top: 48rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #EFF6FF;
		border: 2rpx solid #BFDBFE;
		border-radius: 26rpx;
		padding: 24rpx 26rpx 24rpx 26rpx;
	}

	.lg-role-ic {
		width: 76rpx;
		height: 76rpx;
		border-radius: 24rpx;
		background-color: #2563EB;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-right: 22rpx;
	}

	.lg-role-t {
		font-size: 29.2rpx;
		font-weight: bold;
		color: #1E40AF;
	}

	.lg-role-s {
		font-size: 24.6rpx;
		color: #3B6BC7;
		margin-top: 6rpx;
	}

	.lg-form {
		margin-top: 36rpx;
		flex-direction: column;
	}

	.lg-field-gap {
		margin-top: 22rpx;
	}

	.lg-opt {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 26rpx;
	}

	.lg-opt-t {
		font-size: 26.8rpx;
		color: #6B7280;
		margin-left: 16rpx;
	}

	.lg-opt-forget {
		font-size: 26.8rpx;
		color: #2563EB;
		font-weight: bold;
	}

	.lg-btn {
		margin-top: 44rpx;
	}

	.lg-btn-t {
		font-size: 35.8rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.lg-foot {
		text-align: center;
		font-size: 25.8rpx;
		color: #9CA3AF;
		margin-top: 32rpx;
	}

	.lg-foot2 {
		text-align: center;
		font-size: 25.8rpx;
		color: #9CA3AF;
		margin-top: 2rpx;
	}
</style>