hn-hlw-app/pages/consult/components/disease-summary.vue

<!-- 诊疗详情-问诊内容 -->
<template>
  <view class="consult-content" :class="{ 'consult-content--elder': elderMode }">
    <view class="form-item-row content-title" :class="{ 'content-title--elder': elderMode }">问诊内容 </view>
    <view class="form-item-row" :class="{ 'form-item-row--elder': elderMode }">
      <view class="form-item-label" :class="{ 'form-item-label--elder': elderMode }">患者信息：</view>
      <view class="form-item-content" :class="{ 'form-item-content--elder': elderMode }">
        {{ order.name }} {{ order.sex }}
        {{ order.age ? order.age + "岁" : "" }}
      </view>
    </view>
    <view class="form-item-row" :class="{ 'form-item-row--elder': elderMode }">
      <view class="form-item-label" :class="{ 'form-item-label--elder': elderMode }">线下确诊疾病：</view>
      <view class="form-item-content" :class="{ 'form-item-content--elder': elderMode }">{{ diseaseStr }}</view>
    </view>
    <view class="form-item-row" :class="{ 'form-item-row--elder': elderMode }">
      <view class="form-item-label" :class="{ 'form-item-label--elder': elderMode }">病情描述：</view>
      <view class="form-item-content" :class="{ 'form-item-content--elder': elderMode }">{{ order.description }}</view>
    </view>
    <view class="form-item-row" :class="{ 'form-item-row--elder': elderMode }">
      <view class="form-item-label" :class="{ 'form-item-label--elder': elderMode }">上传图片：</view>
      <view class="form-item-content" :class="{ 'form-item-content--elder': elderMode }">
        <text :class="{ 'text--elder': elderMode }" v-if="order.images">{{ order.images.length }}张</text>
        <text v-if="order.images && order.images.length > 0" @click="onPreviewImages" class="text-primary" :class="{ 'text-primary--elder': elderMode }">查看</text>
      </view>
    </view>
    <view class="form-item-row" :class="{ 'form-item-row--elder': elderMode }">
      <view class="form-item-label" :class="{ 'form-item-label--elder': elderMode }">既往史：</view>
      <view class="form-item-content" :class="{ 'form-item-content--elder': elderMode }">{{ order.pastHistoryStr }}</view>
    </view>
    <view class="form-item-row" :class="{ 'form-item-row--elder': elderMode }">
      <view class="form-item-label" :class="{ 'form-item-label--elder': elderMode }">历史用药：</view>
      <view class="form-item-content" :class="{ 'form-item-content--elder': elderMode }">
        <view v-for="(drug, idx) in order.drugs" :key="drug._id" class="drug" :class="{ 'drug--elder': elderMode }">
          <view style="flex-grow: 1">
            <view class="drug-name-bar">
              <view class="drug-name" :class="{ 'drug-name--elder': elderMode }">{{ drug.name }}</view>
              <view class="drug-quantity" :class="{ 'drug-quantity--elder': elderMode }">x {{ drug.quantity }} {{ drug.unit || "" }}</view>
            </view>
            <!-- <view v-if="drug.medication_proof_desc" class="drug-proof-tip" :class="{ 'drug-proof-tip--elder': elderMode }">{{ proofTipText }}</view> -->
            <view v-if="drug.specification" class="drug-spec" :class="{ 'drug-spec--elder': elderMode }">药品规格：{{ drug.specification }}</view>
            <view v-if="drug.manufacturer" class="drug-spec" :class="{ 'drug-spec--elder': elderMode }">{{
              drug.manufacturer
            }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { computed, ref, onMounted } from "vue";

const props = defineProps({
  order: { type: Object, default: () => ({}) },
  elderMode: { type: Boolean, default: false }
})
const proofTipText = '*购买该药品需上传用药证明';

// 如果没有传入 elderMode prop，从本地存储读取
const elderMode = ref(props.elderMode);

onMounted(() => {
  if (!props.elderMode) {
    const savedElderMode = uni.getStorageSync('elderMode');
    if (savedElderMode !== null && savedElderMode !== undefined) {
      elderMode.value = savedElderMode;
    }
  }
});

const diseaseStr = computed(() => {
  return props.order && Array.isArray(props.order.diseases) ? props.order.diseases.join(",") : ""
});

function onPreviewImages(){
  uni.previewImage({
    current: 0,
    urls: props.order.images
  })
}

</script>
<style lang="scss" scoped>
.drug-proof-tip {
  color: #ff4757;
  font-size: 24rpx;
  line-height: 36rpx;
  margin-top: 8rpx;
  font-weight: 500;
}

.form-item-row {
  display: flex;
  align-items: baseline;
  padding: 24rpx 30rpx;
  font-size: 28rpx;
  line-height: 48rpx;

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

  // 适老化模式：行内边距增加，字体和行高放大
  @at-root &--elder {
    padding: 36rpx 40rpx;
    font-size: 39rpx; // 28 * 1.4
    line-height: 67rpx; // 48 * 1.4
    font-weight: 500;
  }
}

.form-item-label {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  color: #666;
  width: 160rpx; // 减少标签宽度
  flex-shrink: 0;

  // 适老化模式：标签字体放大，加粗
  @at-root &--elder {
    font-size: 39rpx; // 28 * 1.4
    font-weight: bold;
    width: 200rpx; // 适老化模式下适当增加宽度
  }
}

.form-item-content {
  width: 0;
  flex-grow: 1;
  margin-left: 16rpx; // 减少左边距

  // 适老化模式：内容字体放大
  @at-root &--elder {
    margin-left: 20rpx; // 适老化模式下稍微增加间距
    font-size: 39rpx; // 28 * 1.4
    font-weight: 500;
  }
}

.form-item-right {
  margin-left: 20rpx;
  flex-shrink: 0;
}

.consult-content {
  background: white;

  // 适老化模式：卡片整体变大
  @at-root &--elder {
    margin: 20rpx 16rpx; // 减少左右边距
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    padding: 16rpx;
  }
}

.content-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;

  // 适老化模式：标题字体放大
  @at-root &--elder {
    font-size: 45rpx; // 32 * 1.4
    font-weight: bold;
  }
}

.doctor-icon {
  display: inline-block;
  transform: translateY(4rpx);
  // margin-right: 20rpx;
  width: 36rpx;
  height: 36rpx;
}

.internet-fee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20rpx;
  background: white;
  padding: 24rpx 30rpx;
  font-size: 28rpx;
  color: #666;
  line-height: 48rpx;

  .active {
    color: orange;
  }
}

.confirm-footer {
  padding: 24rpx 30rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.counter {
  font-size: 28rpx;
  line-height: 80rpx;
}

.fee {
  font-size: 32rpx;
  color: #ff0000;
}

.pay-btn {
  width: 300rpx;
  height: 80rpx;
  border-radius: 16rpx;
  font-size: 32rpx;
  color: white;
  text-align: center;
  background: $theme-brown-primary;
  line-height: 80rpx;
}

.drug {
  display: flex;
  align-items: flex-start; // 改为顶部对齐，让布局更紧凑
  justify-content: space-between;
  padding: 20rpx 24rpx; // 减少内边距
  border-bottom: 1rpx solid #e5e5e5;

  // 适老化模式：药品信息区域内边距增加
  @at-root &--elder {
    padding: 32rpx 36rpx; // 适老化模式下适当增加
  }
}

.drug-info {
  flex-grow: 1
}

.drug-name {
  font-size: 30rpx;
  font-weight: bold;
  line-height: 42rpx; // 减少行高，让布局更紧凑
  flex: 1; // 让药品名称占据剩余空间
  word-break: break-all; // 允许长文本换行

  // 适老化模式：药品名称字体放大
  @at-root &--elder {
    font-size: 42rpx; // 30 * 1.4
    line-height: 58rpx; // 适当调整行高
    font-weight: bold;
  }
}

.drug-spec {
  font-size: 26rpx; // 稍微减小规格字体
  line-height: 40rpx; // 减少行高
  color: #999;
  margin-top: 4rpx; // 增加与上面的间距

  // 适老化模式：药品规格字体放大
  @at-root &--elder {
    font-size: 36rpx; // 26 * 1.4
    line-height: 56rpx;
    font-weight: 500;
    margin-top: 8rpx;
  }
}

.drug-btn {
  flex-shrink: 0;
  font-size: 28rpx;
  color: $theme-brown-primary;
}

.drug-btn--unactive {
  color: #999;
}

.drug-memo {
  font-size: 28rpx;
  line-height: 48rpx;
  color: #333;
}

.drug-name-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; // 改为顶部对齐
  margin-bottom: 8rpx; // 增加与下面规格信息的间距
}

.drug-quantity {
  flex-shrink: 0;
  max-width: 160rpx; // 减少最大宽度
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: $theme-brown-primary;
  font-size: 28rpx; // 稍微减小字体，与药品名称更协调
  font-weight: 500;
  text-align: right; // 右对齐
  margin-left: 16rpx; // 与药品名称保持间距

  // 适老化模式：药品数量字体放大
  @at-root &--elder {
    max-width: 220rpx;
    font-size: 39rpx; // 28 * 1.4
    font-weight: bold;
    margin-left: 20rpx;
  }
}

.drug-action {
  display: flex;
  justify-content: flex-end;
  padding-top: 10rpx;
  margin-top: 10rpx;
}

.drug-action-item {
  border: 1px solid #e5e5e5;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #333;
  height: 48rpx;
  line-height: 48rpx;
  padding: 0 40rpx;

  @at-root &--active {
    color: $theme-brown-primary;
    margin-right: 40rpx;
    border-color: $theme-brown-primary;
  }
}

.text-primary {
  color: $theme-brown-primary;
  margin-left: 16rpx; // 减少左边距

  // 适老化模式：主要文本字体放大
  @at-root &--elder {
    font-size: 39rpx; // 28 * 1.4
    font-weight: bold;
    margin-left: 20rpx;
  }
}

// 适老化模式额外样式类
.text--elder {
  font-size: 39rpx !important; // 28 * 1.4
  font-weight: 500;
}

.drug-proof-tip--elder {
  color: #ff4757;
  font-size: 32rpx; // 24 * 1.33
  line-height: 48rpx; // 36 * 1.33
  margin-top: 12rpx; // 8 * 1.5
  font-weight: 600;
}
</style>