uniapp-app/pages_app/patientInfo/patientInfo.vue

<template>
  <view class="patient-info-container">

    <!-- 导航栏 -->
    <navBar title="患者信息" />
    
    <!-- 标签页 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'basic' }"
        @click="switchTab('basic')"
      >
        基本资料
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'history' }"
        @click="switchTab('history')"
      >
        病史信息
      </view>
    </view>
    
    <!-- 内容区域 -->
    <scroll-view class="content-area" scroll-y>
      <!-- 基本资料内容 -->
      <view v-if="activeTab === 'basic'" class="basic-info">
        <view class="info-item">
          <text class="info-label">姓名</text>
          <text class="info-value">{{ patientInfo.name || '提**' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">性别</text>
          <text class="info-value">{{ patientInfo.gender || '男' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">年龄</text>
          <text class="info-value">{{ patientInfo.age || '15' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">地址</text>
          <text class="info-value">{{ patientInfo.address || '北京市东城区' }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">肝硬化或肝癌家族史</text>
          <text class="info-value">{{ patientInfo.familyHistory || '无' }}</text>
        </view>
      </view>
      
      <!-- 病史信息内容 -->
      <view v-if="activeTab === 'history'" class="history-info">
        <view class="info-item">
          <text class="info-label">既往病史</text>
          <text class="info-value">暂无</text>
        </view>
        <view class="info-item">
          <text class="info-label">过敏史</text>
          <text class="info-value">暂无</text>
        </view>
        <view class="info-item">
          <text class="info-label">手术史</text>
          <text class="info-value">暂无</text>
        </view>
        <view class="info-item">
          <text class="info-label">用药史</text>
          <text class="info-value">暂无</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import navBar from '@/components/navBar/navBar.vue'
import { onLoad } from '@dcloudio/uni-app'
import api from '@/api/api.js'
// 响应式数据
const statusBarHeight = ref(0)
const activeTab = ref('basic');
const step1_uuid = ref('');
const patientInfo = reactive({
  name: '提**',
  gender: '男',
  age: '15',
  address: '北京市东城区',
  familyHistory: '未知'
})
onLoad((options) => {
 step1_uuid.value = options.step1_uuid || ''
 interrogationPatientInfo()
})
const interrogationPatientInfo=()=>{
  api.interrogationPatientInfo({
    step1_uuid: step1_uuid.value
  }).then(res=>{
    if(res.code == 200 && res.data){
      const d = res.data
      patientInfo.name = d.name || '提**'
      patientInfo.gender = d.sex === 1 ? '男' : '女'
      patientInfo.age = d.birthday ? calculateAge(d.birthday) : '未知'
      patientInfo.address = d.address || ''
      // 家族史字段接口未提供，设为未知
      patientInfo.familyHistory = '未知'
    }
  })
}

function calculateAge(birthday){
  const birth = new Date(birthday)
  const today = new Date()
  let age = today.getFullYear() - birth.getFullYear()
  const m = today.getMonth() - birth.getMonth()
  if(m < 0 || (m === 0 && today.getDate() < birth.getDate())){
    age--
  }
  return String(age)
}
// 计算属性
const statusBarStyle = computed(() => ({
  height: statusBarHeight.value + 'px'
}))

// 方法
const goBack = () => {
  uni.navigateBack()
}

const switchTab = (tab) => {
  activeTab.value = tab
}

// 生命周期
onMounted(() => {
  // 获取状态栏高度
  const systemInfo = uni.getSystemInfoSync()
  statusBarHeight.value = systemInfo.statusBarHeight || 0
})
</script>

<style lang="scss" scoped>
// 变量定义
$primary-color: #ff0000;
$text-color: #333333;
$text-color-light: #666666;
$border-color: #f0f0f0;
$border-color-light: #e0e0e0;
$background-color: #ffffff;
$nav-height: 88rpx;
$tab-height: 88rpx;
$info-item-height: 100rpx;
$padding-horizontal: 30rpx;
$padding-small: 10rpx;

.patient-info-container {
  background-color: $background-color;
  min-height: 100vh;
}

.status-bar {
  background-color: $background-color;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: $nav-height;
  padding: 0 $padding-horizontal;
  background-color: $background-color;
  border-bottom: 2rpx solid $border-color;

  .nav-left {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .back-arrow {
      font-size: 48rpx;
      color: $primary-color;
      font-weight: bold;
    }
  }

  .nav-title {
    flex: 1;
    text-align: center;
    font-size: 36rpx;
    font-weight: 500;
    color: $primary-color;
  }

  .nav-right {
    width: 60rpx;
  }
}

.tab-bar {
  display: flex;
  background-color: $background-color;
  border-bottom: 2rpx solid $border-color-light;

  .tab-item {
    flex: 1;
    height: $tab-height;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: $text-color;
    position: relative;

    &.active {
      color: $primary-color;
      font-weight: 500;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 60rpx;
        height: 4rpx;
        background-color: $primary-color;
      }
    }
  }
}

.content-area {
  flex: 1;
  background-color: $background-color;
}

.basic-info,
.history-info {
  padding: 0 $padding-horizontal;

  .info-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: $info-item-height;
    border-bottom: 2rpx solid $border-color;
    padding: 0 $padding-small;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      font-size: 32rpx;
      color: $text-color;
      flex: 1;
    }

    .info-value {
      font-size: 32rpx;
      color: $text-color-light;
      text-align: right;
      flex: 1;
    }
  }
}
</style>