hn-hlw-app/pages/chat/consult-head.vue

<template>
	<view class="consult-header" :class="{ 'consult-header--elder': elderMode }">
		<view class="consult-header-left">
			<!-- 普通模式：医生姓名和职称在同一行 -->
			<view v-if="!elderMode" class="doctor-info">
				<text class="doctor-name" :class="{ 'doctor-name--elder': elderMode }">{{ displayDoctorName }}</text>
				<text class="doctor-title" :class="{ 'doctor-title--elder': elderMode }">{{ consult.doctorTitle }}</text>
			</view>
			<!-- 长辈模式：医生姓名和职称分行显示 -->
			<template v-else>
				<view class="doctor-info">
					<text class="doctor-name" :class="{ 'doctor-name--elder': elderMode }">{{ displayDoctorName }}</text>
				</view>
				<view class="doctor-info" :class="{ 'doctor-info--elder': elderMode }">
					<text class="doctor-title" :class="{ 'doctor-title--elder': elderMode }">{{ consult.doctorTitle }}</text>
				</view>
			</template>
			<!-- 医院和科室信息 -->
			<view class="doctor-info" :class="{ 'doctor-info--elder': elderMode }">
				<text class="doctor-hos" :class="{ 'doctor-hos--elder': elderMode }">震元堂中医院</text>
				<text v-if="consult.deptName" class="doctor-dept" :class="{ 'doctor-dept--elder': elderMode }">
					| {{ consult.deptName }}
				</text>
			</view>
		</view>
		<view class="summary-btn" :class="{ 'summary-btn--elder': elderMode }" @click.stop="viewSummary">病情概要</view>
	</view>
</template>
<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';

const props = defineProps({
  consult: {
    type: Object,
    default: () => ({})
  }
});

// 规范化医生展示名称，避免显示类似 30127 这样的纯工号
const displayDoctorName = computed(() => {
  const raw = (props.consult && props.consult.doctorName) || "";
  const name = String(raw).trim();
  if (!name) return "互联网医院医生";
  // 纯数字视为工号，使用友好文案替代
  if (/^\d+$/.test(name)) return "互联网医院医生";
  return name;
});

// 长辈模式状态
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 emits = defineEmits(['viewSummary']);

function viewSummary() {
	emits('viewSummary');
}
</script>
<style lang="scss" scoped>
.consult-header {
	display: flex;
	flex-direction: initial;
	align-items: center;
	padding: 24rpx 30rpx;
	background: #fff;

	@at-root &-left {
		flex: 1;
		min-width: 0;
		overflow: hidden;
		margin-right: 20rpx;
	}

	// 长辈模式样式
	@at-root &.consult-header--elder {
		padding: 32rpx 36rpx; // 增加内边距
	}

	.summary-btn {
		width: 160rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		color: $theme-brown-primary;
		font-size: 26rpx;
		border-radius: 32rpx;
		border: 1px solid $theme-brown-primary;

		// 长辈模式样式
		@at-root &.summary-btn--elder {
			width: 200rpx; // 按钮稍微放大
			height: 60rpx;
			line-height: 60rpx;
			font-size: 32rpx; // 字体放大 (26rpx → 32rpx)
			border-radius: 40rpx;
		}
	}

	.doctor-name {
		font-size: 32rpx;
		font-weight: bold;

		// 长辈模式样式
		@at-root &.doctor-name--elder {
			font-size: 42rpx; // 字体放大 (32rpx → 42rpx)
		}
	}

	.doctor-info {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		margin-bottom: 4rpx;

		// 长辈模式样式
		@at-root &.doctor-info--elder {
			margin-bottom: 8rpx; // 长辈模式下增加行间距
		}
	}

	.doctor-title {
		margin-left: 10rpx;
		color: #999;

		// 长辈模式样式
		@at-root &.doctor-title--elder {
			margin-left: 0; // 长辈模式下取消左边距，因为独立成行
			font-size: 30rpx; // 增加字体大小
		}
	}

	.doctor-hos {
		font-size: 30rpx;
		font-weight: 600;

		// 长辈模式样式
		@at-root &.doctor-hos--elder {
			font-size: 38rpx; // 字体放大 (30rpx → 38rpx)
		}
	}

	.doctor-dept {
		font-size: 28rpx;
		margin-left: 10rpx;
		color: #999;
		white-space: nowrap;

		// 长辈模式样式
		@at-root &.doctor-dept--elder {
			font-size: 36rpx; // 字体放大 (28rpx → 36rpx)
			margin-left: 14rpx;
		}
	}
}
</style>