web/src/components/charge/PatientCard.vue

<template>
  <Panel title="患者信息">
    <div v-if="!seeDockerInfo?.patientInfo"
         style="display: flex;align-items: center;justify-content: center;height: 120px">请选择患者......
    </div>
    <div v-else style="padding: 0 24px">
      <div class="avatar">
        <img class="avatar-image"
             :src="seeDockerInfo?.patientInfo?.sex == 1 ?'/static/images/outpatient/man.png':seeDockerInfo?.patientInfo?.sex == 2 ?'/static/images/outpatient/women.png':'-'"
             alt=""/>
        <div class="avatar-info-wrapper">
          <div class="avatar-info">
            <span class="avatar-info-name">{{ seeDockerInfo?.patientInfo?.name }}</span>
            <span class="avatar-info-age">{{ seeDockerInfo?.patientInfo?.age || 0 }}岁</span>
          </div>
          <div class="avatar-info-phone-num">
            <span class="avatar-info-phone">{{ seeDockerInfo.patientInfo?.phone }}</span>
            <span class="avatar-info-num">就诊次数：<i class="caret-num">{{
                seeDockerInfo.seeDoctorCount || 0
              }}次</i></span>
          </div>
        </div>
      </div>
      <div class="detail">
        <div>挂号医生:&nbsp;<span
            class="detail-doctor">{{ seeDockerInfo.dockerName }}-{{ seeDockerInfo?.sectionName }}</span>
        </div>
        <div class="detail-middle">
          <div>费用类别:&nbsp;<span class="detail-doctor">{{ seeDockerInfo.registerType == 2 ? '医保' : '自费' }}</span>
          </div>
          <div>医保卡剩余金额:&nbsp;<span class="detail-balance">{{
              seeDockerInfo.patientInfo.socialBalance ? seeDockerInfo.patientInfo.socialBalance + "元" : "0"
            }}</span></div>
        </div>
        <div>上次就诊时间:&nbsp;<span class="detail-doctor">{{
            formatDate(seeDockerInfo?.lastSeeDoctorTime)
          }}</span></div>
      </div>
    </div>
  </Panel>
</template>
<script setup lang="ts">

import {formatDate} from "@/utils/dateUtils.ts"
import Panel from "@/components/common/Panel.vue";
import {onMounted, ref} from "vue";
import {post} from "@/utils/request.ts";

const seeDockerInfo = ref<any>();
const getSeeDockerInfo = (newValue: any) => {
  if (!newValue) return;
  post('medical/record/getSeeDockerInfo', {regisId: newValue}).then((res: any) => {
    seeDockerInfo.value = res
  })
}
const init = (regisId: any) => {
  getSeeDockerInfo(regisId)
}
const clear = () => {
  seeDockerInfo.value = {}
}
defineExpose({init, clear})

</script>

<style scoped lang="scss">
.avatar {
  height: 60px;
  display: flex;
  align-items: center;

  .avatar-image {
    width: 60px;
    margin-right: 20px;
  }

  .avatar-info-wrapper {
    flex: 1;
    min-width: 0;
    height: 60px;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    font-style: normal;

    .avatar-info {
      display: flex;
      span {
        display: block;
      }
      .avatar-info-name {
        flex: 1;
        min-width: 0;
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        font-style: normal;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出的文本 */
        text-overflow: ellipsis; /* 显示省略号 */
      }

      .avatar-info-age {
        height: 20px;
        line-height: 20px;
      }
    }

    .avatar-info-phone-num {
      width: 100%;
      display: flex;
      .avatar-info-phone {
        flex: 1;
        min-width: 0;
        height: 20px;
        line-height: 20px;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏溢出的文本 */
        text-overflow: ellipsis; /* 显示省略号 */
      }
      .avatar-info-num {
        margin-left: 28px;
        .caret-num {
          color: #4D6DE4;
          font-style: normal;
        }
      }
    }
  }
}

.detail {
  margin-top: 16px;
  font-weight: 400;
  font-size: 16px;
  color: rgba(23, 26, 29, 0.7);
  font-style: normal;
  height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .detail-doctor {
    font-weight: 500;
    color: rgba(23, 26, 29, 1);
  }

  .detail-middle {
    display: flex;
    justify-content: space-between;
  }

  .detail-balance {
    font-weight: 500;
    color: rgba(#FF4D4F, 1);
  }
}
</style>