140 lines
5.7 KiB
Vue
140 lines
5.7 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 顶部导航栏 -->
|
||
<uni-nav-bar
|
||
left-icon="left"
|
||
title="患者详情"
|
||
@clickLeft="goBack"
|
||
fixed
|
||
color="#8B2316"
|
||
height="140rpx"
|
||
:border="false"
|
||
backgroundColor="#eeeeee"
|
||
>
|
||
<template #right>
|
||
<view class="nav-right" @click.stop="editPatient">
|
||
<uni-icons type="compose" size="22" color="#8B2316"></uni-icons>
|
||
</view>
|
||
</template>
|
||
</uni-nav-bar>
|
||
|
||
<!-- 头部信息卡片 -->
|
||
<view class="card header-card">
|
||
<image class="avatar" src="/static/avatar-a.png" mode="aspectFill"></image>
|
||
<view class="base-info">
|
||
<view class="name-row">
|
||
<text class="name">aa</text>
|
||
<up-image :src="manImg" width="36rpx" height="36rpx" ></up-image>
|
||
</view>
|
||
<view class="line"><text class="label">昵称：</text><text class="value">Android</text></view>
|
||
<view class="line"><text class="label">年龄：</text><text class="value">23</text><text class="sep">｜</text><text class="label">民族：</text><text class="value">未知</text></view>
|
||
<view class="line multi">
|
||
<text class="label">地区：</text>
|
||
<text class="value">内蒙古自治区呼伦贝尔市莫力达瓦达斡尔族自治旗</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 功能分组条目 -->
|
||
<view class="cell" @click="openGroup" style="margin-top: 20rpx;">
|
||
<text class="cell-label">分组</text>
|
||
<view class="cell-right">
|
||
<text class="hint">分组了，分组2</text>
|
||
<uni-icons type="right" color="#999" size="18"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="cell" @click="editDesc">
|
||
<text class="cell-label">描述</text>
|
||
<view class="cell-right">
|
||
<text class="hint">补充患者关键信息，方便随访患者</text>
|
||
<uni-icons type="right" color="#999" size="18"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="cell">
|
||
<text class="cell-label">电话号码</text>
|
||
<view class="cell-right">
|
||
<text class="phone">18012345600</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 患者病史 -->
|
||
<view class="section-title">患者病史</view>
|
||
<view class="card history-card">
|
||
<text class="history-text" :class="{ fold: !showAllHistory }">{{ historyText }}</text>
|
||
<text class="toggle" @click="toggleHistory">{{ showAllHistory ? '收起' : '展开全部' }}</text>
|
||
</view>
|
||
|
||
<!-- 底部操作 -->
|
||
<view class="actions">
|
||
<view class="action" @click="sendMessage">
|
||
<up-image :src="msgImg" width="44rpx" height="44rpx" ></up-image>
|
||
<text class="action-text">发消息</text>
|
||
</view>
|
||
<view class="action" @click="goMakePlan">
|
||
<up-image :src="planImg" width="44rpx" height="44rpx" ></up-image>
|
||
<text class="action-text">制定随访计划</text>
|
||
</view>
|
||
<view class="action" @click="recordIllness">
|
||
<up-image :src="recordImg" width="44rpx" height="44rpx" ></up-image>
|
||
<text class="action-text">记录病情</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue'
|
||
import { onShow } from '@dcloudio/uni-app'
|
||
import msgImg from "@/static/icon_message_big.png"
|
||
import planImg from "@/static/image_backgrond_red_big1.png"
|
||
import recordImg from "@/static/image_backgrond_red_big.png"
|
||
import manImg from "@/static/new_man_big.png"
|
||
import womanImg from "@/static/new_woman_big.png"
|
||
const showAllHistory = ref(false)
|
||
const historyText = '2025年检查出戊型肝炎, 同时患有结核。有饮酒史、无吸烟史, 无输血或其他血液制品史, 使用过恩…'
|
||
|
||
const goBack = ()=> uni.navigateBack()
|
||
const editPatient = ()=> uni.showToast({ title:'编辑资料', icon:'none' })
|
||
const openGroup = ()=> uni.showToast({ title:'分组', icon:'none' })
|
||
const editDesc = ()=> uni.showToast({ title:'编辑描述', icon:'none' })
|
||
const sendMessage = ()=> uni.showToast({ title:'发消息', icon:'none' })
|
||
const goMakePlan = ()=> uni.navigateTo({ url:'/pages_app/visit/visit' })
|
||
const recordIllness = ()=> uni.showToast({ title:'记录病情', icon:'none' })
|
||
const toggleHistory = ()=> showAllHistory.value = !showAllHistory.value
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content { background:#f5f5f5; min-height:100vh; }
|
||
.nav-right { padding-right: 20rpx; }
|
||
|
||
.card { background:#ffffff; padding: 20rpx; }
|
||
.header-card { display:flex; }
|
||
.avatar { width: 140rpx; height: 140rpx; border-radius: 12rpx; margin-right: 20rpx; }
|
||
.base-info { flex:1; }
|
||
.name-row { display:flex; align-items:center; margin-bottom: 10rpx; }
|
||
.name { font-size: 40rpx; color:#222; margin-right: 10rpx;}
|
||
.line { font-size: 28rpx; color:#666; margin-top: 6rpx; display:flex; align-items:center; }
|
||
.label { color:#999;white-space: nowrap; }
|
||
.value { color:#333; }
|
||
.sep { color:#ddd; margin: 0 10rpx; }
|
||
.multi{
|
||
display: inline;
|
||
}
|
||
.cell { display:flex; align-items:center; justify-content:space-between; background:#ffffff; padding: 28rpx 30rpx; border-top:1rpx solid #efefef; }
|
||
.cell:first-of-type { margin-top: 10rpx; border-top:none; }
|
||
.cell-label { font-size: 28rpx; color:#333; }
|
||
.cell-right { display:flex; align-items:center; }
|
||
.hint { font-size: 28rpx; color:#999; margin-right: 12rpx; }
|
||
.phone { font-size: 32rpx; color:#b10000; }
|
||
|
||
.section-title { padding: 16rpx 30rpx; color:#8B2316; font-size: 30rpx; margin-top: 20rpx; }
|
||
.history-card { position: relative; }
|
||
.history-text { font-size: 28rpx; color:#666; line-height: 1.7; display:block; }
|
||
.history-text.fold { display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||
.toggle { position:absolute; right: 20rpx; bottom: 16rpx; color:#b10000; font-size: 28rpx; }
|
||
|
||
.actions { background:#ffffff; margin-top: 20rpx;}
|
||
.action { display:flex; align-items:center;justify-content: center; padding: 28rpx 30rpx; border-top:1rpx solid #f0f0f0; }
|
||
.action-text { font-size:28rpx; color:#333; margin-left: 12rpx; }
|
||
</style>
|