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?.feeTypeName||'-'}}</span></div>
          <div>医保卡剩余金额:&nbsp;<span class="detail-balance">{{ seeDockerInfo?.socialBalance }}元</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 {
    width: 100%;
    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;
      align-items: center;

      .avatar-info-name {
        font-weight: 500;
        font-size: 18px;
        color: #333333;
        font-style: normal;
        margin-right: 10px;
      }

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

    .avatar-info-phone-num {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .avatar-info-num {
        margin-left: 28px;

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

        .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>