diagnosis_app/views/patientItems/detail/index.vue

<template>
	<view class="content">
		<view class="tip" v-if="status==='1'">
			<text>请稍等一会会，医生真在认真诊断您的病情。</text>
		</view>
		<!-- 待确诊 -->
		<view class="cont" v-show="status==='1'||status==='4'">
			<view class="desc-container item">
				<view class="item-head">
					<view class="dot"></view>
					<text class="name">病情描述</text>
					<button   type="primary" v-if="status==='4'" size="mini" @click="secondauxiliarydiagnosis">咨询</button>
				</view>		
				<view class="desc" v-html="IllnessDescription"></view>
				<view class="tags">
					<view class="item" v-for="(IllnessTag,index) in IllnessTags" :key="index">
						<text>{{IllnessTag}}</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" class="image-pic"></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>	
		<!-- 待确认 -->
		<view class="cont" v-show="status==='2'||status==='3'">
			<view class="item doctor-info">
				<view class="item-head">
					<view class="dot"></view>
					<text class="name">主治医生简介</text>
				</view>		
				<view class="cont">
					<view class="user">
						<image :src="doctor.avatar" @error="errorAvatar"  class="avatar"></image>
						<view class="info">
							<view class="user-name">
								<text>{{doctor.name}}</text>
							</view>
							<view class="user-tags">
								<text>{{doctor.tags}}</text>
							</view>
						</view>
					</view>
					<view class="hospital">
						<text class="hospital-name">{{doctor.hospitalName}}</text>
						<text class="hospital-level">{{doctor.hospitalLevel}}</text>
					</view>
					<view class="specialty">
						<text class="specialty-head">专业特长</text>
						<text class="specialty-message">{{doctor.specialty}}</text>
					</view>
				</view>					
			</view>
			<view class="item diagnoseResult">
				<view class="item-head between">
					<view class="title">
						<view class="dot"></view>
						<text class="name">诊断结果</text>					
					</view>
					<view class="star" v-if="starNumber>0">
						<!-- 因为评星排版是反的所以数量为5-numer -->
						<zhcx-star class="star" :star="5-starNumber"  color="#fff" defaultcolor="orange" />
					</view>
				</view>	
				<view class="item-cont" v-html="diagnoseResult"></view>							
			</view>
<!-- 			<view class="item">
				<view class="item-head">
					<view class="dot"></view>
					<text class="name">推荐药物</text>
				</view>		
				<view class="tags">
					<view class="item" v-for="(IllnessTag,index) in IllnessTags" :key="index">
						<text>{{IllnessTag}}</text>
					</view>
				</view>						
			</view>	 -->
			<view class="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}}</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" class="image-pic"></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="handle-wrap">
				<view class="submit-BT" v-if="status==='2'" @click="submit(1)">
					<text>去评价</text>
				</view>
<!-- 				<view class="submit-BT appraise" @click="submit(2)" >
					<text>待评价</text>
				</view>	 -->							
			</view>
		</view>
		<view class="appraise-wrap" v-if="appraiseModal">
			<view class="appraise-wrap-mask">
				<view class="appraise-container">
					<view class="appraise-title">
						<text>评价</text>
						<view class="closeBt" @click="closeAppraise">
							<text class="close"></text>
						</view>			
					</view>
					<view class="appraise-cont">
						<radio-group @change="appraiseChange"> 
							<view class="item" v-for="(item,index) in 5" :key="index"> 
								<label class="radio">
									<radio :value="index+1" />
									<zhcx-star class="star" :star="index+1"  color="orange" defaultcolor="#fff" />
								</label>
							</view>
						</radio-group>					
					</view>
					<view class="submit-BT"  @click="submit(3)">
						<text>确认</text>
					</view>					
				</view>			
			</view>	
		</view>
		<view class="submit-BT recommend"  @click="recommend" v-if="status==='2'">
			<text>查看推荐</text>
		</view>		
		<view class="consult" @click="consult" v-if="doctor.id">
			<image class="consult-icon" src="/static/images/order/phone.png" mode="widthFix"></image>
		</view>		
	</view>
</template>

<script>
	import avatar from '@/static/images/login/doctor.png';
	import zhcxStar from '@/components/Star'
	import {patientInfo,patientAppraise,secondauxiliarydiagnosisApi} from '@/api/patient';
	import {notEmpty,parseTime} from '@/libs';
	import config from '@/config'
	export default{
		name:'patientDetail',
		props:{
		   status:{
			   type:[String,Number],
			   default:1
		   }			   
		},
		components:{
			zhcxStar
		},
		data(){
			return{
				uploadServer:config.uploadServer,
				seekId:null,
				appraiseModal:false,
				appraiseResult:0,
				starNumber:0,
				doctor:{
					avatar:"",
					name:"",
					department:"",
					hospitalName:''
				},
				aiDiagnose:"",
				IllnessDescription:"",
				IllnessTags:[],
				images:[],
				diagnoseResult:"",
				diseaseGrade:"",
				aiDiagnosisSite:undefined
			}
		},
		methods:{
			init({id,user,status}){
				this.seekId=id;
				this.getdetails(id);
			},
			getdetails(id){
				patientInfo(id).then((res)=>{
					this.doctor={
						avatar:res.data.headportrait||avatar,
						name:res.data.doctorName,
						tags:res.data.technicaltitle,
						hospitalName:res.data.hospitalname,
						hospitalLevel:res.data.hospitallevel,
						specialty:res.data.begoodat,
						id:res.data.doctorId
					}
					let diseaseImgDesc=JSON.parse(res.data.diseaseImgDesc);					
					this.IllnessTags=this.formateSite(res.data.aiDiagnosisSite);
					this.aiDiagnosisSite=res.data.aiDiagnosisSite;
					let aiDiagnosisDesc=res.data.aiDiagnosisDesc;
					aiDiagnosisDesc = aiDiagnosisDesc.replace(/\<img/gi, '<img class="rich-img" ');
					this.aiDiagnose=aiDiagnosisDesc;
					this.IllnessDescription=res.data.diseaseDesc;
					this.diagnoseResult=res.data.doctorDiagnosis;	
					this.starNumber=res.data.satisfaction
					this.images=diseaseImgDesc;
					this.diseaseGrade=res.data.aiPatientSeekDesc.diseaseGrade;
				})
			},
			errorAvatar({detail}){
				this.avatar=avatar;
			},
			submit(type){
				if(type===1){//待确定
					this.appraiseModal=true;
				}else if(type===2){//待评价
					this.appraiseModal=true;
				}else{//提交评价
					let appraiseResult=this.appraiseResult;
					this.appraiseModal=false;	
					patientAppraise(this.seekId,appraiseResult).then((res)=>{
						uni.showToast({
							title:`你打了${appraiseResult}个星星！！`,
							icon:"none",
							complete:()=>{
								uni.reLaunch({
									url:"/views/record/index?type=appraise"
								})
							}
						});					
					})
				}
			},
			appraiseChange({detail}){
				this.appraiseResult=detail.value;
			},
			closeAppraise(){
				this.appraiseModal=false;
			},
			formateSite(site){
				try{
					if(!site){
						return []
					}else{
						let tags=JSON.parse(site);
						if(Array.isArray(tags)&&site.length>0){
							tags=tags.map((item)=>{
								return item.illnessname;
							})
							return tags;					
						}
						return [];
					}				
				}catch(err){
					return [];
				}
			},
			consult(){
				var name=this.doctor.name;
				var id=this.doctor.id;
				if(!notEmpty(id)){
					uni.showToast({
						icon:'none',
						title:'咨询信息关闭,无法咨询'
					})
					return;
				}
				uni.navigateTo({
					url:`/views/IM/index/index?id=${id}&name=${name}`
				})
			},
			recommend(){
				let seekId=this.seekId;
				let status=this.status;
				let grade=this.diseaseGrade;
				uni.navigateTo({
					url:`/views/patientItems/recommend/index?status=${status}&id=${seekId}&grade=${grade}`
				})
			},
			secondauxiliarydiagnosis(){
				const diseaseImgDesc = JSON.stringify(this.images)
				const site = this.aiDiagnosisSite
				const diseaseDesc = this.IllnessDescription
				const seekId=this.seekId;
				secondauxiliarydiagnosisApi({
						diseaseDesc,
						seekTime: parseTime(new Date()),
						site,
						diseaseImgDesc
				}).then((res)=>{	
						  const aidiagnoseInfo = res.data
						  uni.setStorageSync("aidiagnoseInfo",{
							  ...aidiagnoseInfo,seekId
						  })
					uni.navigateTo({
						url: '/views/patientItems/diagnose/index'
					});					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('./index.css');
	.consult{
		width: 130upx;
		height: 130upx;
		border-radius: 50%;
		border:1px solid #ccc;
		color: #fff;
		position: fixed;
		right: 0;
		bottom: 200upx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		opacity: 0.8;
		.consult-icon{
			display: block;
			width: 80upx;
			height: 80upx;
		}
	}
		.aiDiagnose{
			&::v-deep .rich-img{
				display: block;
				width: 90%;
				margin: 20upx auto;
			}
		}
</style>