hn-hlw-app/pages/record/order-diagnosis.vue

<template>	<full-page mainStyle="background:#f0f0f0">
		<template v-if="diagnosis && diagnosis._id">
			<view :class="{ 'order-form--elder': elderMode }" class="order-form">
				<view :class="{ 'form-title--elder': elderMode }" class="form-title">门诊病历</view>
				<view :class="{ 'order-form-row--elder': elderMode }" class="order-form-row">
					<view :class="{ 'order-form-label--elder': elderMode }" class="order-form-label">主诉：</view>
					<view :class="{ 'form-content--elder': elderMode }">{{ diagnosis.complaint }}</view>
				</view>
				<view :class="{ 'order-form-row--elder': elderMode }" class="order-form-row">
					<view :class="{ 'order-form-label--elder': elderMode }" class="order-form-label">现病史：</view>
					<view :class="{ 'form-content--elder': elderMode }">{{ diagnosis.presentIllness }}</view>
				</view>
				<view :class="{ 'order-form-row--elder': elderMode }" class="order-form-row">
					<view :class="{ 'order-form-label--elder': elderMode }" class="order-form-label">处置：</view>
					<view :class="{ 'form-content--elder': elderMode }">{{ diagnosis.dispose }}</view>
				</view>
				<view :class="{ 'order-form-row--elder': elderMode }" class="order-form-row">
					<view :class="{ 'order-form-label--elder': elderMode }" class="order-form-label">门诊诊断：</view>
					<view :class="{ 'form-content--elder': elderMode }">{{ diseases }}</view>
				</view>
			</view>

			<view :class="{ 'order-form--elder': elderMode }" class="order-form">
				<view :class="{ 'form-title--elder': elderMode }" class="form-title">处方药品</view>
				<view v-for="i in drugs" :class="{ 'drug--elder': elderMode }" class="drug">
					<view :class="{ 'drug_main--elder': elderMode }" class="drug_main">{{i.drugName}}</view>
					<view :class="{ 'drug_info--elder': elderMode }" class="drug_info">药品规格：{{i.specification}}</view>
					<view :class="{ 'drug_info--elder': elderMode }" class="drug_info">{{i.manufacturer}}</view>
					<view :class="{ 'drug_main--elder': elderMode }" class="drug_main">用法用量：{{i.memo}}</view>
				</view>
			</view>
		</template>
		<empty-data v-else text="暂无数据" />
	</full-page>
</template>
<script setup>
	import {
		computed,
		ref,
		onMounted,
		onUnmounted
	} from 'vue';
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app";
	import emptyData from "@/components/empty.vue";
	import fullPage from "@/components/full-page.vue";
	// 大字版状态管理
	const elderMode = ref(false);

	// 处理长辈模式变化
	const handleElderModeChange = () => {
		try {
			const storedElderMode = uni.getStorageSync('elderMode');
			elderMode.value = storedElderMode === 'true' || storedElderMode === true;
			
			// 同步到全局数据
			const app = getApp();
			if (app && app.globalData) {
				app.globalData.elderMode = elderMode.value;
			}
		} catch (error) {
			console.error('获取长辈模式状态失败:', error);
			elderMode.value = false;
		}
	};

	onMounted(() => {
		handleElderModeChange();
		// 监听长辈模式变化事件
		uni.$on('elderModeChanged', handleElderModeChange);
	});

	onUnmounted(() => {
		// 移除事件监听
		uni.$off('elderModeChanged', handleElderModeChange);
	});

	const diagnosis = ref(null)
	onLoad(() => {
		try {
			diagnosis.value = JSON.parse(uni.getStorageSync('order-diagnosis'))
		} catch (e) {
			console.log(e)
			diagnosis.value = null
		}
	})
	const diseases = computed(() => diagnosis.value && Array.isArray(diagnosis.value.diagnosisList) ? diagnosis.value
		.diagnosisList.map(i => i.name).filter(Boolean).join(',') : '')
	const drugs = computed(() => diagnosis.value && Array.isArray(diagnosis.value.drugs) ? diagnosis.value.drugs.map(i => {
		const memo = [i.usageName, i.dosage ? `${i.dosage}${i.dosageUnitName||''}` : '', i.frequencyName, i.days ?
			`用药${i.days}天` : ''
		].filter(Boolean).join(',');
		return {
			...i,
			memo
		}
	}) : [])
</script>
<style lang="scss" scoped>
	.form-title {
		font-size: 30rpx;
		color: #333;
		font-weight: bold;
		padding: 24rpx 30rpx;
		border-bottom: 1px solid #e5e5e5;

		&--elder {
			font-size: 38rpx;
			padding: 32rpx 40rpx;
		}
	}

	.order-form {
		margin-top: 20rpx;
		background: #fff;

		&--elder {
			margin-top: 28rpx;
		}
	}

	.order-form-row {
		display: flex;
		padding: 24rpx 30rpx;
		font-size: 28rpx;
		line-height: 48rpx;
		color: #333;
		word-break: break-all;

		&--elder {
			padding: 32rpx 40rpx;
			font-size: 36rpx;
			line-height: 60rpx;
		}

		@at-root &+& {
			border-top: 1px solid #e5e5e5;
		}
	}

	.order-form-label {
		color: #666;
		flex-shrink: 0;

		&--elder {
			font-size: 36rpx;
		}
	}

	.form-content--elder {
		font-size: 36rpx;
	}

	.info {
		padding: 24rpx 30rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		line-height: 40rpx;
		color: #666;
		font-size: 28rpx;
	}

	.info-row {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	text {
		white-space: nowrap;
	}

	.name {
		margin-right: 12rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.footer {
		display: flex;
		justify-content: flex-end;
		padding: 24rpx 30rpx;
		background: white;
	}

	.drug {
		padding: 24rpx 30rpx;
		font-size: 28rpx;
		color: #333;
		line-height: 48rpx;

		&--elder {
			padding: 32rpx 40rpx;
			line-height: 60rpx;
		}

		.drug_main {
			font-weight: bold;

			&--elder {
				font-size: 36rpx;
			}
		}

		.drug_info {
			color: #999;

			&--elder {
				font-size: 36rpx;
			}
		}
	}

	.drug+.drug {
		border-top: 1px solid #e5e5e5;
	}
</style>