359 lines
9.1 KiB
Vue
359 lines
9.1 KiB
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">{{ maskName(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 }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">地址</text>
|
|
<text class="info-value twoline" style="max-width:380rpx;flex:none">{{ patientInfo.address }}</text>
|
|
</view>
|
|
<view class="info-item" v-if="patientInfo.gender=='女'">
|
|
<text class="info-label">是否怀孕</text>
|
|
<text class="info-value">{{ formatwhetherpregnant(patientInfo.whether_pregnant) }}</text>
|
|
</view>
|
|
<view class="info-item" v-if="patientInfo.gender=='女' && patientInfo.expected_date_of_childbirth" >
|
|
<text class="info-label">预产期</text>
|
|
<text class="info-value">{{ patientInfo.expected_date_of_childbirth }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">肝硬化或肝癌家族史</text>
|
|
<text class="info-value">{{ whetherHbv(patientInfo.whether_hbv) }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 病史信息内容 -->
|
|
<view v-if="activeTab === 'history'" class="history-info">
|
|
<view class="info-item">
|
|
<text class="info-label">前往医院就诊该疾病情况</text>
|
|
<text class="info-value">{{ goHospital(patientInfo.go_hospital) }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">患病时间</text>
|
|
<text class="info-value">{{ patientInfo.disease_date }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">目前肝脏状态</text>
|
|
<text class="info-value">{{ patientInfo.liver_status }}</text>
|
|
</view>
|
|
<view class="info-item">
|
|
<text class="info-label">当前服用肝病用药情况</text>
|
|
<text class="info-value">{{ patientInfo.boolean_medication }}</text>
|
|
</view>
|
|
<view class="info-item column" v-if="patientInfo.medication_info">
|
|
<text class="info-label" style="padding-top: 20rpx;">当前服用的肝病药物以及服用时长</text>
|
|
<text class="info-content">{{ patientInfo.medication_info }}</text>
|
|
</view>
|
|
<view class="info-item column" >
|
|
<text class="info-label" style="padding-top: 20rpx;">是否合并其他慢性疾病</text>
|
|
<view class="otherbox" v-if="patientInfo.other_disease">
|
|
<view class="cell" v-for="item in patientInfo.other_disease.split(',')" :key="item">{{ item}}</view>
|
|
</view>
|
|
</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;
|
|
Object.assign(patientInfo, d);
|
|
// patientInfo.name = d.name || '提**'
|
|
patientInfo.gender = d.sex === 1 ? '女' : '男'
|
|
patientInfo.age = d.birthday ? calculateAge(d.birthday) : '未知'
|
|
// patientInfo.address = d.address || ''
|
|
// // 家族史字段接口未提供，设为未知
|
|
// patientInfo.familyHistory = '未知'
|
|
}
|
|
})
|
|
}
|
|
const maskName = (name)=>{
|
|
if(!name) return '**'
|
|
const first = name.slice(0,1)
|
|
return `${first}**`
|
|
}
|
|
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 formatwhetherpregnant = (value)=>{
|
|
if(value==1){
|
|
return '无计划'
|
|
}else if(value==2){
|
|
return '计划中'
|
|
}else if(value==3){
|
|
return '已怀孕'
|
|
}else if(value==4){
|
|
return '家有宝宝'
|
|
}
|
|
}
|
|
const goHospital = (val)=>{
|
|
if(val==1){
|
|
return '是'
|
|
}else if(val==0){
|
|
return '否'
|
|
}
|
|
}
|
|
const whetherHbv = (value)=>{
|
|
if(value==0){
|
|
return '无'
|
|
}else if(value==1){
|
|
return '有'
|
|
}else{
|
|
return '未知'
|
|
}
|
|
}
|
|
const switchTab = (tab) => {
|
|
activeTab.value = tab
|
|
}
|
|
|
|
// 生命周期
|
|
onMounted(() => {
|
|
// 获取状态栏高度
|
|
const systemInfo = uni.getSystemInfoSync()
|
|
statusBarHeight.value = systemInfo.statusBarHeight || 0
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 变量定义
|
|
$primary-color: #8B2316;
|
|
$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;
|
|
.info-content{
|
|
font-size: 28rpx;
|
|
color:#999;
|
|
width: 100%;
|
|
background-color: #f0f0f0;
|
|
border-radius: 16rpx;
|
|
padding:20rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.column{
|
|
flex-direction: column;
|
|
justify-content: flex-start!important;
|
|
align-items: flex-start!important;
|
|
}
|
|
.patient-info-container {
|
|
background-color: $background-color;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.status-bar {
|
|
background-color: $background-color;
|
|
}
|
|
.otherbox{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 20rpx;
|
|
.cell{
|
|
font-size: 24rpx;
|
|
padding: 10rpx 12rpx;
|
|
border-radius: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
background-color: #fff;
|
|
color:#8B2316;
|
|
border: 1rpx solid #8B2316;
|
|
margin-right: 10rpx;
|
|
}
|
|
}
|
|
.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 {
|
|
top:calc(var(--status-bar-height) + 44px);
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
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 {
|
|
top:calc(var(--status-bar-height) + 44px + 90rpx);
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
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;
|
|
min-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;
|
|
text-align: left;
|
|
flex:1.5;
|
|
}
|
|
|
|
.info-value {
|
|
font-size: 32rpx;
|
|
color:#999;
|
|
text-align: right;
|
|
flex: 1;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
</style>
|