diagnosis_app/views/patientItems/recommend/index.vue

<template>
	<view class="content">
		<view class="recommend-item organization" v-if="grade==='2'">
			<view class="organization-item" v-for="(hospital,hospitalIndex) in hospitals" :key="hospitalIndex">
				<view class="banner">
					<image class="banner-img" :src="hospitalBanner" mode="widthFix"></image>
				</view>
				<view class="hospital">
					<text class="name">{{hospital.name}}</text>
					<text class="grade">{{hospital.hospitallevel}}</text>
				</view>
				<view class="address">
					<text>{{hospital.position.detailed}}</text>
				</view>
				<view class="doctor-list">
					<view class="doctor-item" v-for="(item,index) in hospital.treatmentdoctor" :key="index">
						<view class="user">
							<image :src="item.headportrait" mode="widthFix" class="avatar" @error='onErrorImg(item)'></image>
							<view class="info">
								<view class="name">
									<text>{{item.doctorname}}</text>
								</view>
								<view class="tags">
									<text>{{item.technicaltitle}}</text>
								</view>
							</view>
						</view>
<!-- 						<view class="consult" @click="consult(item)">
							<text>+咨询</text>
						</view> -->
						<view class="hospital">
							<text class="name">{{hospital.name}}</text>
							<text class="grade">{{hospital.hospitallevel}}</text>
						</view>
						<view class="specialty">
							<text class="specialty-head">专业特长</text>
							<text class="specialty-message">{{item.begoodat}}</text>
						</view>
						<view class="more" @click="showdetails(item,hospital)">查看简介</view>
					</view>
				</view>			
			</view>
		</view>
		<!-- 推荐医生&药店 -->
		<view class="recommend-item others" v-else>
			<view class="tab">
				<view class="item" v-for="tab in tabs" :key="tab.id" :class="tabIndex===tab.id?'active':''" @click="changeTab(tab.id)">
					<text class="word">{{tab.name}}</text>
				</view>
			</view>
			<view class="tab-cont">
				<view class="doctor-list" v-if="tabIndex===1">
					<view class="doctor-item" v-for="(item,index) in others.doctors" :key="index">
						<view class="user">
							<image :src="item.headportrait" mode="widthFix" class="avatar" @error='onErrorImg(item)'></image>
							<view class="info">
								<view class="name">
									<text>{{item.doctorname}}</text>
								</view>
								<view class="tags" >
									<text>{{item.technicaltitle}}</text>
								</view>
							</view>
						</view>
<!-- 						<view class="consult" @click="consult(item)">
							<text>+咨询</text>
						</view> -->
						<view class="consult" @click="disableConsult(item)" :class="aiConsultList.indexOf(item.id)>-1?'':'disable'">
							<text>{{aiConsultList.indexOf(item.id)>-1?'咨询':'不咨询'}}</text>
						</view>					
						<view class="hospital">
							<text class="name">{{item.hospitalName}}</text>
							<text class="grade">{{item.hospitalGrade}}</text>
						</view>
						<view class="specialty">
							<text class="specialty-head">专业特长</text>
							<text class="specialty-message">{{item.begoodat}}</text>
						</view>
						<view class="more" @click="showdetails(item,'ai')">查看简介</view>
					</view>
					<view class="consult-container">
						<view class="consult-submit" @click="consult">立即咨询</view>
					</view>				
				</view>	
				<view class="drugstore-list" v-else>
					<view class="drugstore-list-wrap">
						<view class="head" v-if="others.medicine.length>0">
							<view class="title">
								<view class="dot"></view>
								<text>推荐药物</text>
							</view>
							<view class="medicine">
								<view class="tag-item" v-for="(item,index) in others.medicine" :key="index">{{item}}</view>
							</view>							
						</view>
						<view class="drugstore-cont">
							<view class="drugstore-item" v-for="(item,index) in others.drugstore" :key="index" @click="linkTo(item)">
								<view class="drugstore-pic">
									<image class="icon-drugstore" src="../../../static/images/recommend/drugstore.jpg" mode="widthFix"></image>
								</view>
								<view class="drugstore-info">
									<view class="name">
										<text>{{item.name}}</text>
									</view>
									<view class="address">
										<image class="icon-address" src="../../../static/images/order/location.png" mode="widthFix"></image>
										<text>{{item.position.detailed}}</text>
									</view>								
								</view>								
							</view>
						</view>
					</view>
				</view>
			</view>		
		</view>	
	</view>
</template>

<script>
	import defaultavatar from "@/static/images/avatar.png";
	import {patientInfo,consultationDoctor,recommend} from '@/api/patient';
	import {deepClone} from '@/libs'
	export default{
		data:()=>{
			return{
				defaultavatar,
				/*2-推荐机构；1-推荐药店；3-患者检索后ai推荐*/
				grade:0,
				tabs:[
					// {id:1,name:'推荐医生'},
					{id:2,name:'推荐药店'}
				],
				hospitalBanner:require('@/static/images/recommend/banner.png'),
				tabIndex:2,
				others:{
					doctors:[],
					drugstore:[],
					medicine:[]
				},
				hospitals:[
					{
						name:"",
						hospitallevel:"",
						position:{detailed:""},
						treatmentdoctor:[]					
					}
				],
				aiConsultList:[]
			}
		},
		onLoad(option) {
			console.log(option)
			if(option.type==="3"){
				this.init(option)
			}else{
				this.initRecommendInfo(option);//用户根据病症等级进行推荐
			}
		},
		methods:{
			init(){//ai提交资料后显示的推荐信息		
					let aidiagnoseInfo=uni.getStorageSync("aidiagnoseInfo");
					let diagnosticdoctor=aidiagnoseInfo.diagnosticdoctor;
					let aiConsultList=[];
						diagnosticdoctor=diagnosticdoctor.map((item)=>{
						aiConsultList.push(item.id)	
						return{
							id:item.id,
							headportrait:item.headportrait,
							doctorname:item.doctorname,
							technicaltitle:item.technicaltitle,
							hospitalName:item.hospitalname,
							hospitalGrade:item.hospitallevel,	
							begoodat:item.begoodat					
						}
					})
					this.tabIndex=1;
					this.tabs=[
						{id:1,name:'推荐医生'},
					],
					this.aiConsultList=aiConsultList;
					this.$set(this.others,'doctors',diagnosticdoctor);	
					
			},
			changeTab(index){
				this.tabIndex=index;
			},			
			async initRecommendInfo({id,grade}){
				this.grade=grade;	
				let diseaseGrade=grade;
				if(!id)return;
				let {
						aiDiagnosisSite,
						aiDiagnosisDesc,
						doctorDiagnosisInfo,
						diseaseImgDesc,
						diseaseDesc,
						aiPatientSeekDesc
				}=await this.initPatientInfo(id)				
						.catch((res)=>{
							uni.showToast({
								title:"获取咨询详情失败",
								icon:"none"
							})													
						});
			    let position=await this.getPositon().catch((res)=>{
					uni.showToast({
						title:"获取位置信息失败",
						icon:"none"
					})
				});
				let therapeuticDrugs=aiPatientSeekDesc.therapeuticDrugs;
				let recommendCallBack=await this.initRecommend({
					position,diseaseDesc,diseaseImgDesc,
					aiDiagnosisSite,aiPatientSeekDesc,therapeuticDrugs,
					aiDiagnosisDesc,doctorDiagnosisInfo,diseaseGrade				
				}).catch((res)=>{
					uni.showToast({
						title:"获取推荐信息失败",
						icon:"none"
					})
				});
				if(diseaseGrade==='1'){//药店
					let drugstore=recommendCallBack.data.pharmacys;
					let therapeuticDrugs=recommendCallBack.data.therapeuticDrugs;
					    therapeuticDrugs=therapeuticDrugs.split('、');
					this.$set(this.others,'drugstore',drugstore);
					this.$set(this.others,'medicine',therapeuticDrugs);								
				}else{
					this.hospitals=recommendCallBack.data.hospitals
				}
			},
			initPatientInfo(id){
				return new Promise((resolve,reject)=>{
					patientInfo(id).then((res)=>{
						resolve(res.data)
					}).catch((err)=>{
						reject(err);
					})
				})			
			},
			getPositon(){
				return new Promise((resolve,reject)=>{
					uni.getLocation({
						type: 'wgs84',
						success: function (res) {
							resolve(res)
						},
						fail(err) {
							reject(err);
						}
					});					
				})					
			},
			initRecommend({
				position,diseaseDesc,diseaseImgDesc,
				aiDiagnosisSite,
				aiDiagnosisDesc,therapeuticDrugs,
				doctorDiagnosisInfo,diseaseGrade
			}){
				return new Promise((resolve,reject)=>{
					recommend({
						chiefcomplaint:diseaseDesc,
						imageppath:diseaseImgDesc,
						site:aiDiagnosisSite,
						position,
						aidiagnosticresults:aiDiagnosisDesc,
						doctordiagnosticresults:doctorDiagnosisInfo,
						diseaseGrade,
						therapeuticDrugs
					}).then((res)=>{
						resolve(res)
					}).catch((err)=>{
						reject(err);
					})				
				})	
			},
			linkTo(item){
				uni.setStorageSync('drugstore',item);
				uni.navigateTo({
					url:'/views/patientItems/order/index'
				})
			},
			onErrorImg(item) {
				this.$set(item,'headportrait',this.defaultavatar)
			},
			showdetails(doctorItem,hospital){
				if(hospital!=='ai'){
					doctorItem.hospitalName=hospital.name;
					doctorItem.hospitalGrade=hospital.hospitallevel;					
				}
				let item=JSON.stringify(doctorItem)
				uni.setStorageSync('doctor',doctorItem);
				uni.navigateTo({
					url:"/views/patientItems/doctorInfo/index"
				})
			},	
			disableConsult(item){
				let aiConsultList=deepClone(this.aiConsultList);	
				if(aiConsultList.indexOf(item.id)>-1){
					aiConsultList=aiConsultList.filter((doctor)=>{
							return doctor!==item.id;
					})
				}else{
					aiConsultList.push(item.id)
				}
				this.aiConsultList=aiConsultList;
			},			
			consult(){
					var patientName=uni.getStorageSync('userInfo').patientName;
					let seekId=uni.getStorageSync('aidiagnoseInfo').seekId;	
					let doctorIds=deepClone(this.aiConsultList);
					if(doctorIds.length>0){
					doctorIds=doctorIds.join(',');
						consultationDoctor({
							patientName,
							seekId,
							doctorIds
						}).then(()=>{
							uni.showToast({
								title:'咨询成功',
								complete(){
									uni.reLaunch({
										url:'/pages/home/index?type=consult'
									})								
								}
							})
						})						
					}else{
						uni.showToast({
							icon:"none",
							title:"请选择一个医生进行咨询"
						})
					}
			},					
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-bottom: 80upx;
		.recommend-item{
			&.organization{
				padding:24upx;
				.banner{
					.banner-img{
						display: block;
						width:100%;
						height: 350upx;
					}
				}
				.hospital{
					padding-left: 8upx;
					padding-top: 20upx;
					.name{
						font-size:36upx;
						color: #333333;					
					}
					.grade{
						font-size: 24upx;
						color: #3384FF;
						padding-left: 33upx;
					}
				}
				.address{
					padding-left: 8upx;
					padding-top: 12upx;
					font-size: 28upx;
					color: #999999;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2; 
					overflow: hidden;				
				}
			}
			&.others{
				padding: 0 24upx;
				.tab{
					text-align: center;
					.item{
						height: 73upx;
						display: inline-block;
						line-height: 73upx;
						padding:0 50upx;
						font-size: 28upx;
						color: #666;
						&.active{
							color: #1890FF;
							.word{
								display: inline-block;
								height: 100%;
								position: relative;
								&::after{
									display: block;
									content: "";
									width: 100%;
									height: 8upx;
									background-color: #3384FF;
									position: absolute;
									bottom: 0;
									left: 50%;
									transform: translateX(-50%);								
								}							
							}
						}
					}
				}
				.tab-cont{
					.drugstore-list{
						.drugstore-list-wrap{
							.head {
								padding-left: 24upx;
								.title{
									font-size: 30upx;
									color: #0A0A0A;
									.dot{
										display: inline-block;
										width: 32upx;
										height: 32upx;
										border-radius: 50%;
										position: relative;
										background:rgba(51, 132, 255,0.2);
										top: 6upx;
										margin-right: 6upx;
										&::after{
											display: block;
											content: "";
											width: 14upx;
											height: 14upx;
											border-radius: 50%;
											position: absolute;
											left: 50%;
											top: 50%;
											transform: translate(-50%,-50%);
											background-color: #3384FF;
										}
									}								
								}
								.medicine{
									.tag-item{
										display: inline-block;
										height: 56upx;
										line-height: 56upx;
										padding: 0 28upx;
										background-color: #FFF6DD;
										border: 1px solid #FA6400;
										color: #FA6400;
										margin-right: 40upx;
										border-radius: 8upx;
										margin-top: 18upx;
									}
								}
							}
							.drugstore-cont{
								margin-top: 20upx;
								.drugstore-item{
									display: flex;
									justify-content: flex-start;
									align-items: center;
									padding: 16upx 24upx;
									.drugstore-pic {
										width: 112upx;
										height: 112upx;											
										.icon-drugstore{
											display: inline-block;
											width: 112upx;	
											height: 112upx;	
											border-radius: 10upx;
										}								
									}
									.drugstore-info{
										padding-left: 32upx;
										.name{
											font-size: 28upx;
											color: #333333;
											padding-bottom: 5upx;
										}
										.address{
											min-height: 40upx;
											line-height: 40upx;
											display: flex;
											justify-content: flex-start;
											align-items: center;
											font-size: 28upx;
											color: #666666;	
											display: -webkit-box;
											-webkit-box-orient: vertical;
											-webkit-line-clamp: 3; 
											overflow: hidden;																			
											.icon-address{
												display: inline-block;
												width: 23upx;
												margin-right: 10upx;
											}											
										}								
									}
								}
							}
						}
					}
				}
			}
		} 	
		.doctor-item{
			&{
				padding: 24upx;
				margin-top: 24upx;
				position: relative;
			}
			.consult{
				display: inline-block;
				background: #3384FF;
				border-radius: 20upx;
				padding:12upx 14upx;
				font-size: 24upx;
				color: #FFF;
				position: absolute;
				right: 25upx;
				top: 24upx;
				letter-spacing: 2upx;
				line-height: 24upx;
				&.disable{
					background-color: #666;
					color: #fff;
				}
			}
			.user{
				&{
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
				.avatar{
					display: block;
					width: 72upx;
					height: 72upx;
					border-radius: 50%;
					background-color: #ccc;
				}
				.info{
					padding-left: 16upx;
					.name{
						font-size: 24upx;
						color: #333333;
					}
					.tags{
						font-size: 22upx;
						color: #666666
					}
				}
			}
			.hospital{
				padding-top: 18upx;
				.name{
					font-size: 22upx;
					color: #666666;
				}
				.grade{
					font-size: 18upx;
					color: #3384FF;
					padding-left: 10upx;
				}
			}
			.specialty{
				line-height: 34upx;
				padding-top: 21upx;
				display: -webkit-box;
				-webkit-box-orient: vertical;    
				-webkit-line-clamp: 2;		
			    overflow: hidden;
				.specialty-head{
					color:#3384FF;
					position: relative;
					&::after{
						width: 40%;
						height: 6upx;
						display: block;
						content: "";
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: -5upx;
						background-color:#FA6400;
						z-index: 999;
					}
				}
				.specialty-message{
					font-size: 22upx;
					color: #999;	
					padding-left: 7upx;	
				}
			}
			.more{
				display: inline-block;
				text-align: right;
				font-size: 22upx;
				color: #3384FF;
				float: right;
				padding: 10upx 0 10upx 100upx;
			}
		}			
	}
	.consult-submit{
		width: 260upx;
		height: 80upx;
		text-align: center;
		line-height: 80upx;		
		background-color: #3384FF;
		color: #fff;
		border-radius: 10upx;
		font-size: 32upx;
		margin-top: 20upx;
	}
</style>