hospital-rescue-app-v2/components/hr-rec-list/hr-rec-list.uvue

<template>
	<view class="rl-wrap">
		<view class="rl-head">
			<text class="rl-t">伤员记录</text>
			<view class="rl-c">
				<text class="rl-c-t">{{ list.length }} 人</text>
			</view>
			<view class="hr-flex1"></view>
			<text class="rl-clear" @click="onClear">清空 ›</text>
		</view>

		<scroll-view class="rl-list" :scroll-y="true" :show-scrollbar="false">
			<view v-for="(v, i) in list" :key="v.id + '_' + i" class="rl-row">
				<view class="rl-ix">
					<text class="rl-ix-t">{{ i + 1 }}</text>
				</view>
				<view class="hr-flex1">
					<view class="hr-row">
						<text class="rl-name">{{ v.name }}</text>
						<hr-wb :level="v.level" small></hr-wb>
					</view>
					<text class="rl-sub">{{ v.gender }} · {{ v.age }} 岁 · {{ v.injury }}</text>
				</view>
				<view class="rl-del" @click="onRemove(i)">
					<x-icon name="close-line" color="#6B7280" font-size="13"></x-icon>
				</view>
			</view>

			<view v-if="list.length == 0" class="rl-empty">
				<x-icon name="scan-line" color="#9CA3AF" font-size="26"></x-icon>
				<text class="rl-empty-t">尚未识别到伤员</text>
				<text class="rl-empty-s">将腕带二维码对准上方取景框，自动连续识别</text>
			</view>

			<text v-if="list.length > 0" class="rl-more">— 继续扫腕带可追加 —</text>
			<view style="height:6px"></view>
		</scroll-view>
	</view>
</template>

<script lang="uts" setup>
	import { PropType } from 'vue'
	import { HrVictim } from '@/mock/types.uts'

	/**
	 * 伤员记录滚动列表（批量处置 / 批量转运共用）
	 * 三段落布局里唯一的滚动区。
	 */
	const props = defineProps({
		list : { type: Array as PropType<HrVictim[]>, default: () : HrVictim[] => [] as HrVictim[] }
	})

	const emits = defineEmits<{
		(e : 'remove', index : number) : void
		(e : 'clear') : void
	}>()

	function onRemove(i : number) : void {
		emits('remove', i)
	}

	function onClear() : void {
		emits('clear')
	}
</script>

<style>
	.rl-wrap {
		flex: 1;
		flex-direction: column;
	}

	.rl-head {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 18rpx 32rpx 14rpx 32rpx;
	}

	.rl-t {
		font-size: 29.2rpx;
		font-weight: bold;
		color: #1F2937;
	}

	.rl-c {
		margin-left: 16rpx;
		background-color: #EFF6FF;
		border-radius: 12rpx;
		padding: 2rpx 14rpx 2rpx 14rpx;
	}

	.rl-c-t {
		font-size: 23.6rpx;
		font-weight: bold;
		color: #2563EB;
	}

	.rl-clear {
		font-size: 25.8rpx;
		color: #9CA3AF;
	}

	.rl-list {
		flex: 1;
		padding: 0rpx 32rpx 20rpx 32rpx;
	}

	.rl-row {
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #FFFFFF;
		border: 2rpx solid #F3F4F6;
		border-radius: 22rpx;
		padding: 18rpx 24rpx 18rpx 24rpx;
		margin-bottom: 14rpx;
	}

	.rl-ix {
		width: 40rpx;
		height: 40rpx;
		border-radius: 12rpx;
		background-color: #F3F4F6;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.rl-ix-t {
		font-size: 22.4rpx;
		font-weight: bold;
		color: #6B7280;
	}

	.rl-name {
		font-size: 30.2rpx;
		font-weight: bold;
		color: #1F2937;
		margin-right: 12rpx;
	}

	.rl-sub {
		font-size: 23.6rpx;
		color: #9CA3AF;
		margin-top: 4rpx;
	}

	.rl-del {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		background-color: #F3F4F6;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-left: 16rpx;
	}

	.rl-empty {
		flex: 1;
		align-items: center;
		justify-content: center;
		padding-top: 60rpx;
		padding-bottom: 60rpx;
	}

	.rl-empty-t {
		font-size: 28rpx;
		font-weight: bold;
		color: #6B7280;
		margin-top: 16rpx;
	}

	.rl-empty-s {
		font-size: 23.6rpx;
		color: #9CA3AF;
		margin-top: 8rpx;
		text-align: center;
	}

	.rl-more {
		text-align: center;
		font-size: 23.6rpx;
		color: #9CA3AF;
		padding: 4rpx 0rpx 8rpx 0rpx;
	}
</style>