shenweishi/subpackagesA/pages/medicalRecord/index.vue

<template>
	<view class="dialysis">
		<view class="info">
			<img class="infoImg" src="../../static/images/avatar.png" alt="">
			<view class="infoRight">
				<view>
					<text class="name">{{ patient.name }}</text>
					<!-- <text class="relieve">解除绑定</text> -->
				</view>
				<view class="infoTxt">在诊医院：{{ orgInfo.org_name }}</view>
				<view class="infoTxt">在诊医院治疗次数：{{ patient.total_dialysis }}次</view>
			</view>
		</view>
		<view class="bgLine"></view>
		<view class="titleBox">
			<view class="line"></view>
			门诊病历
		</view>
		<view class="record">
			<view class="recordTitle">主诉：</view>
			<view class="recordContent">{{ patient.patient_complains }}</view>
			<view class="recordTitle">现病历：</view>
			<view class="recordContent">{{ patient.present_history }}</view>
			<view class="recordTitle">既往史：</view>
			<view class="recordContent">{{ patient.past_history }}</view>
			<view class="recordTitle">体格检查：</view>
			<view class="recordContent">T   {{ patient.temperature }}℃     P   {{ patient.pulse }}次/分     R   {{ patient.respiratory }}次/分    BP {{ patient.sbp }}/{{ patient.dbp }} mmHg</view>
			<view class="recordTitle">诊断：</view>
			<view class="recordContent">{{ patient.diagnose }}</view>
		</view>
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import { getRecord,getOrg } from '@/api/api.js';
	export default {
		data() {
			return {
				patient_id:0,
				patient:{},
				orgInfo:{}
			}
		},
		onLoad(){
			this.patient_id = this.$store.state.data.userInfo.id
			this.getRecord(this.patient_id)
			this.getOrg(this.patient_id)
		},
		methods:{
			async getRecord(patient_id){
				let params = {
					patient_id:patient_id
				}
				let res = await getRecord(params)
				this.patient = res.data.data.patient
			},
			async getOrg(patient_id){
				let params = {
					patient_id:patient_id
				}
				let res = await getOrg(params)
				this.orgInfo = res.data.data.orgInfo
			}
		}
		
	}
</script>

<style>
	.dialysis{
		height: 100%;
		background: #FFFFFF;
		overflow-x: hidden;
		padding-bottom: 0;  
	    padding-bottom: constant(safe-area-inset-bottom);  
	    padding-bottom: env(safe-area-inset-bottom);  
	}
	.bgLine{
		background: #F2F2F2;
		height: 24rpx;
	}
	.info{
		display: flex;
		background: #FFFFFF;
		padding: 28rpx 24rpx;
	}
	.infoRight{
		flex: 1;
		margin-left: 24rpx;
	}
	.name{
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
		margin-right: 22rpx;
	}
	.infoImg{
		width: 122rpx;
		height: 122rpx;
		background: #FFFFFF;
		border-radius: 50%;
	}
	.relieve{
		width: 144rpx;
		height: 54rpx;
		background: linear-gradient(-90deg, #01BD5D, #28D87D);
		border-radius: 28rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 54rpx;
		display: inline-block;
	}
	.infoTxt{
		font-size: 26rpx;
		font-weight: bold;
		color: rgba(0, 0, 0, 0.5);
		margin-top: 22rpx;
	}
	.titleBox{
		width: 100%;
		height: 90rpx;
		background: #FFFFFF;
		box-shadow: 0px 1px 0px 0px #E7E7E7;
		font-size: 36rpx;
		color: #000000;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
	}
	.line{
		width: 6rpx;
		height: 40rpx;
		background: linear-gradient(180deg, #00C692, #FFFFFF);
		border-radius: 4rpx;
		margin-right: 20rpx;
	}
	.record{
		padding: 22rpx 28rpx 50rpx 50rpx;
	}
	.recordTitle{
		font-size: 30rpx;
		color: #01BD5D;
	}
	.recordContent{
		font-size: 30rpx;
		color: #000000;
		margin-bottom: 36rpx;
	}
</style>