hospital-rescue-app-v2/pages/triage/transfer.uvue

<template>
	<hr-page page-bg="#F3F4F6" status-bg="#FFFFFF" nav-title="转运登记" @right-click="onMore">
		<template v-slot:right>
			<x-icon name="more-fill" color="#6B7280" font-size="18"></x-icon>
		</template>

		<view class="hr-body">

			<!-- ============ 伤员摘要 ============ -->
			<hr-card>
				<view class="hr-row">
					<view class="tr-bar"></view>
					<view class="hr-flex1">
						<view class="hr-row">
							<text class="tr-name">李华</text>
							<text class="tr-sub">男 · 35 岁</text>
							<view class="hr-flex1"></view>
							<hr-wb :level="2"></hr-wb>
						</view>
						<text class="tr-inj">头部开放性外伤 · 右前臂骨折 · 已夹板固定</text>
					</view>
				</view>
			</hr-card>

			<!-- ============ 接收医院（床位实时查询） ============ -->
			<hr-sec title="接收医院" more="🔍 搜索" @more-click="onSearchHos"></hr-sec>
			<hr-card variant="list">
				<view v-for="(h, i) in hospitalList" :key="i" :class="hosClass(i)" @click="pickHospital(i)">
					<view :class="i == hosIdx ? 'tr-radio tr-radio-on' : 'tr-radio'"></view>
					<view class="hr-flex1">
						<text class="tr-hos-n">{{ h }}</text>
						<text class="tr-hos-s">{{ hospitalMeta[i] }}</text>
					</view>
					<text :class="hospitalAvail[i] ? 'tr-hos-b' : 'tr-hos-b tr-hos-b-no'">{{ hospitalBed[i] }}</text>
				</view>
			</hr-card>

			<hr-tip style="margin-top:10px" theme="warn" icon="⚠"
				text="同仁医院急诊床位已满，不可选择。若接收医院拒绝接收，系统将自动回到本页提示重派。"></hr-tip>

			<!-- ============ 转运方式 ============ -->
			<hr-sec title="转运方式" :first="false"></hr-sec>
			<view class="hr-seg">
				<view v-for="(m, i) in modes" :key="i" :class="i == modeIdx ? 'hr-seg-i hr-seg-i-on' : 'hr-seg-i'"
					@click="modeIdx = i">
					<text :class="i == modeIdx ? 'tr-seg-t tr-seg-t-on' : 'tr-seg-t'">{{ m }}</text>
				</view>
			</view>

			<!-- ============ 随车联系人 ============ -->
			<hr-sec title="随车联系人"></hr-sec>
			<view class="hr-field">
				<text class="hr-field-label">接收方联系人</text>
				<input class="hr-field-input" type="text" v-model="contact" placeholder-style="color:#9CA3AF" />
			</view>
			<view class="hr-field" style="margin-top:9px">
				<text class="hr-field-label">联系电话</text>
				<input class="hr-field-input hr-mono" type="number" v-model="phone" placeholder-style="color:#9CA3AF" />
			</view>

			<view style="height:14px"></view>
		</view>

		<template v-slot:footer>
			<view class="hr-fixedbar">
				<view class="hr-btn hr-btn-ghost tr-foot-cancel" @click="onCancel">
					<text class="tr-foot-t">取消</text>
				</view>
				<view class="hr-btn hr-btn-primary" style="flex:1" @click="onSubmit">
					<text class="tr-foot-t2">转运登记</text>
				</view>
			</view>
		</template>
	</hr-page>
</template>

<script lang="uts" setup>
	import { ref } from 'vue'
	import { hospitalList, hospitalMeta, hospitalBed, hospitalAvail } from '@/mock/index.uts'
	import { navBack } from '@/utils/nav.uts'

	/**
	 * s14 转运登记
	 * 接收医院床位实时查询，满员自动拦截并提示重派。
	 */
	const modes : string[] = ['救护车 🚑', '直升机 🚁']
	const modeIdx = ref(0)
	const hosIdx = ref(0)
	const contact = ref('刘主任（急诊）')
	const phone = ref('13800006621')

	function hosClass(i : number) : string {
		if (i == 0) {
			return i == hosIdx.value ? 'tr-hos tr-hos-on' : 'tr-hos'
		}
		if (i == 2) { return 'tr-hos tr-hos-dim' }
		return i == hosIdx.value ? 'tr-hos tr-hos-on' : 'tr-hos'
	}

	function pickHospital(i : number) : void {
		if (!hospitalAvail[i]) {
			uni.showModal({
				title: '无法选择',
				content: '同仁医院急诊床位已满，请改选其他接收医院。',
				showCancel: false
			})
			return
		}
		hosIdx.value = i
	}

	function onSearchHos() : void {
		uni.showToast({ title: '搜索附近的接收医院', icon: 'none' })
	}

	function onSubmit() : void {
		if (contact.value == '' || phone.value == '') {
			uni.showToast({ title: '请填写随车联系人', icon: 'none' })
			return
		}
		uni.showLoading({ title: '登记中' })
		setTimeout(() => {
			uni.hideLoading()
			uni.showToast({ title: '转运登记成功', icon: 'success' })
			setTimeout(() => {
				navBack()
			}, 700)
		}, 700)
	}

	function onCancel() : void {
		navBack()
	}

	function onMore() : void {
		uni.showToast({ title: '转运单 / 取消转运', icon: 'none' })
	}
</script>

<style>
	.tr-bar {
		width: 12rpx;
		height: 76rpx;
		border-radius: 6rpx;
		background-color: #F59E0B;
		margin-right: 22rpx;
	}

	.tr-name {
		font-size: 31.4rpx;
		font-weight: bold;
		color: #1F2937;
		margin-right: 16rpx;
	}

	.tr-sub {
		font-size: 25.8rpx;
		color: #6B7280;
	}

	.tr-inj {
		font-size: 24.6rpx;
		color: #9CA3AF;
		margin-top: 8rpx;
	}

	.tr-hos {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #F3F4F6;
	}

	.tr-hos-on {
		/* 选中态仅体现在单选圈 */
	}

	.tr-hos-dim {
		opacity: 0.55;
	}

	.tr-radio {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		border: 3.2rpx solid #E5E7EB;
		margin-right: 22rpx;
	}

	.tr-radio-on {
		border: 3.2rpx solid #2563EB;
		background-color: #2563EB;
	}

	.tr-hos-n {
		font-size: 30.2rpx;
		font-weight: bold;
		color: #1F2937;
	}

	.tr-hos-s {
		font-size: 23.6rpx;
		color: #9CA3AF;
		margin-top: 4rpx;
	}

	.tr-hos-b {
		font-size: 24.6rpx;
		font-weight: bold;
		color: #059669;
		margin-left: 16rpx;
	}

	.tr-hos-b-no {
		color: #DC2626;
	}

	.tr-seg-t {
		font-size: 29.2rpx;
		color: #6B7280;
	}

	.tr-seg-t-on {
		color: #2563EB;
		font-weight: bold;
	}

	.tr-foot-cancel {
		flex: 0 0 200rpx;
		margin-right: 18rpx;
	}

	.tr-foot-t {
		font-size: 31.4rpx;
		font-weight: bold;
		color: #1F2937;
	}

	.tr-foot-t2 {
		font-size: 32.4rpx;
		font-weight: bold;
		color: #FFFFFF;
	}
</style>