diagnosis_app/views/patientItems/diagnose/index.vue

<template>
	<view class="content">
		<view class="desc-container item">
			<view class="item-head">
				<view class="dot"></view>
				<text class="name">病情描述</text>
			</view>		
			<view class="desc" v-html="IllnessDescription"></view>
			<view class="tags">
				<view class="item" v-for="(IllnessTag,index) in IllnessTags" :key="index">
					<text>{{IllnessTag.illnessname}}</text>
				</view>
			</view>	
		</view>
		<view class="image-container item">
			<view class="item-head">
				<view class="dot"></view>
				<text class="name">医学影像</text>
			</view>	
			<view class="item-cont">
				<view class="imgbox" v-for="(image,index) in images" :key="index">
					<image :src="uploadServer+image.path"  v-if="images.length>0"></image>
				</view>
			</view>
		</view>	
		<view class="assist-container item">
			<view class="item-head">
				<text class="head-highlight">AI</text>
				<text class="name">辅助诊断</text>
			</view>	
			<view class="item-cont aiDiagnose" v-html="aiDiagnose"></view>
		</view>	
		<view class="consult-container">
			<view class="suggest" @click="consult"><text class="zhcx-icon-zhucewangzhan zhcx-iconfont"></text>系统建议进一步咨询医生</view>
			<view class="consult" @click="consult">立即咨询</view>
		</view>
		<view class="recommendBt" @click="recommend">查看推荐医生</view>
	</view>
</template>

<script>
	import {consultationDoctor} from '@/api/patient';
	import {notEmpty} from '@/libs';
	import config from '@/config';
	
	export default{
		data(){
			return{
				uploadServer:config.uploadServer,
				seekId:null,
				drop:false,
				dropWrapHight:null,
				diagnoseStatus:true,
				diagnoseResult:false,
				diagnoseTitle                                                                                                                                                                                                                                                                                           :"诊断结果",
				diagnoseTxt:"",
				name:"",
				gender:"",
				time:"",
				aiDiagnose:"",
				IllnessDescription:"",
				IllnessTags:[],
				images:[]
			}
		},
		onLoad() {
			this.init();
		},
		// mounted() {			
		// },
		methods:{
			dropHandle(){
				this.drop=!this.drop;			
			},
			init(){
				this.getdetails();
			},
			getdetails(){
				let aidiagnoseInfo=uni.getStorageSync("aidiagnoseInfo");
				let diseaseImgDesc=aidiagnoseInfo.diseaseImgDesc;
				this.seekId=aidiagnoseInfo.seekId;
				this.time=aidiagnoseInfo.seekTime;	
				this.aiDiagnose=aidiagnoseInfo.aidiagnosticresults;
				this.IllnessDescription=aidiagnoseInfo.diseaseDesc;
				if(notEmpty(diseaseImgDesc)){
					this.images=JSON.parse(diseaseImgDesc)
				}
				if(notEmpty(aidiagnoseInfo.site)){
					this.IllnessTags=JSON.parse(aidiagnoseInfo.site);
				}			
			},
			consult(){
				var patientName=uni.getStorageSync('userInfo').patientName;
				var diagnosticdoctor=uni.getStorageSync('aidiagnoseInfo').diagnosticdoctor;
				let seekId=uni.getStorageSync('aidiagnoseInfo').seekId;
					let doctorIds=diagnosticdoctor.map((item)=>{
						return item.id;
					})
					if(doctorIds<1){
						uni.showToast({
							icon:'none',
							title:"当前没有可以咨询的医生！"
						})
						return;
					}
					doctorIds=doctorIds.join(',');
					consultationDoctor({
						patientName,
						seekId,
						doctorIds:doctorIds
					}).then(()=>{
						uni.showToast({
							icon:"success",
							title:'咨询成功！',
							complete() {
								uni.reLaunch({
									url:'/pages/home/index?type=consult'
								})															
							}
						})
					})
			},
			recommend(){
				let seekId=uni.getStorageSync('aidiagnoseInfo').seekId;
				uni.navigateTo({
					url:`/views/patientItems/recommend/index?type=3&id=${seekId}`
				})			
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding: 0 48upx 50upx;
		.head{
			height: 100upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.zhcx-iconfont{
				color: #0a0a0a;
				text{
					padding-left: 10upx;
				}
			}
		}
		.item{
			.item-head{
				padding: 30upx 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.dot{
					width: 36upx;
					height: 36upx;
					border-radius: 50%;
					position: relative;
					background:rgba(51, 132, 255,0.2);
					&::after{
						width: 18upx;
						height: 18upx;
						border-radius: 50%;						
						display:block ;
						content: "";
						position: absolute;
						left: 50%;
						top: 50%;
						margin-top:-8upx ;
						margin-left:-8upx ;
						background: #3384FF;
					}
				}
				.name{
					font-size: 30upx;
					color: #0a0a0a;
					padding-left: 15upx;
				}
			}
			.desc,.aiDiagnose{
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3; 
				overflow: hidden;
				text-align: justify;
				color: #333;
				line-height: 40upx;
			}
			.tags{
				padding-top: 16upx;
				.item{
					display: inline-block;
					color: #409eff;
					border: 1px solid #d9ecff;
					background-color: #ecf5ff;
					margin-right: 8upx;
					padding: 4upx 12upx;
					border-radius: 4upx;
					font-size: 22upx;
					margin-bottom: 10upx;
					padding-bottom: 20upx;				
				}
			}
			&.assist-container{
				.head-highlight{
					color: #3384ff;
					font-size: 30upx;
				}			
			}
			&.image-container{
				.item-cont{
					display: flex;
					justify-content: flex-start;
					flex-direction: column;
					.imgbox{
						width: 220upx;
						height: 220upx;
						border-radius: 6upx;
						overflow: hidden;
						margin-right: 15upx;
						border: 1px solid #eaeaea;
						image{
							display: block;
							width: 220upx;
							height: 220upx;					
						}
					}					
				}
			}
		}
		.consult-container{
			display: flex;
			justify-content: center;
			align-items: center;
			padding-top: 20upx;
			.suggest{
				width: 440upx;
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				color: #3384FF;
				border:1px solid #1ea5ff;
				background-color: #fff;
				border-radius: 10upx;
				font-size: 28upx;
				.zhcx-iconfont{
					padding-right: 10upx;
				}
			}
			.consult{
				width: 200upx;
				height: 80upx;
				text-align: center;
				line-height: 80upx;		
				background-color: #3384FF;
				color: #fff;
				border-radius: 10upx;
				margin-left: 26upx;
				font-size: 32upx;
			}
		}
		.recommendBt{
				width: 300upx;
				height: 80upx;
				text-align: center;
				line-height: 80upx;		
				background-color: #3384FF;
				color: #fff;
				border-radius: 10upx;
				font-size: 32upx;
				margin-top: 30upx;
		}
	}
</style>