thridLargeScreen/src/views/healthManagement/components/ProfileCard.vue

<template>
  <div class="min-w-[320px] space-y-2 text-sm">
    <div class="bg-white flex items-center">
      <div class="w-12 h-12">
        <img
          :src="archivesInfo?.gender == 1 ? man : woman"
          round
          class="w-12 h-12 rounded-full mr-4"
        />
      </div>
      <div class="flex-1 pl-4 space-y-0">
        <div class="flex items-center">
          <span>{{ archivesInfo.name }}</span>
          <div class="flex items-center my-1 ml-2">
            <div class="flex items-center mr-4">
              <img src="@/assets/icon-gender.png" alt="" class="w-5 h-5" />
              <span class="text-sm text-gray-700">{{
                archivesInfo.gender == 1 ? "男" : "女"
              }}</span>
            </div>
            <div class="flex items-center my-1">
              <img src="@/assets/icon-birthday.png" alt="" class="w-5 h-5" />
              <span class="text-sm text-gray-700"
                >{{ formatAge(archivesInfo.birthday) }}岁</span
              >
            </div>
          </div>
        </div>
        <div class="w-full">
          <div class="flex items-center mb-2">
            <span>档案号：</span>
            <span>{{ archivesInfo.id }}</span>
            <CopyDocument
              v-if="archivesInfo.id"
              class="w-4 text-blue-500 cursor-copy ml-1"
              v-copy="archivesInfo.id"
            />
          </div>
          <div class="flex items-center">
            <span
              >联系方式：{{
                archivesInfo.accounts.find(v => v.type === 1)?.account
              }}</span
            >
            <CopyDocument
              v-if="archivesInfo?.accounts?.find(v => v.type === 1)?.account"
              class="w-4 text-blue-500 cursor-copy ml-1"
              v-copy="archivesInfo.accounts.find(v => v.type === 1)?.account"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
// import ManagementPlan from "./components/ManagementPlan.vue";
import {
  CopyDocument,
  Fold,
  ArrowLeft,
  ArrowRight
} from "@element-plus/icons-vue";
import man from "@/assets/icon-man.png";
import woman from "@/assets/icon-woman.png";
import {
  formatAge,
  parseJsonData,
  request,
  transformDataExpand
} from "@/utils";

const props = defineProps({
  id: {
    type: String
  }
});
const archivesInfo = ref({
  id: "",
  name: "",
  avatar: "",
  gender: 0,
  birthday: "",
  mainArchivesId: "",
  accounts: []
});

const highRiskDiseaseList = ref([]);
const recommendValues = ref({
  medicalHistory: [],
  medicationStatus: [],
  susceptibilityGene: []
});
const getArchivesDetail = async () => {
  if (!props.id) return;

  const { data } = await request.get(
    "/archivesService/mechanism/archives/detail",
    {
      params: {
        archivesId: props.id
      }
    }
  );
  archivesInfo.value = data.detail;
  highRiskDiseaseList.value = data.highRiskDiseaseList;
  recommendValues.value = data.recommendValues;
};
watch(
  () => props.id,
  () => {
    console.log("监听成功");
    getArchivesDetail();
  },
  { deep: true, immediate: true }
);
</script>