diagnosis_app/views/patientItems/search/text/index.vue

<template>
	<view class="patient-search-content">
		<view class="notice-wrap">
			<view class="notice">
				<text>{{title}}</text>
			</view>
		</view>
		<view class="search-pre" v-if="searchStatus">
			<textarea class="desc" v-model="desc" placeholder="请详细描述您的病情(5-200字内）" maxlength="200" />
			<text class="head">添加医学影像</text>
			<p class="tip">支持各类图片，文件不大于10M</p>
			<view class="upload" @click="uploadBt">
				<div class="icon"></div>
				<text class="uploadTitle">点击上传</text>
			</view>
			<view class="preview" v-if="diseaseImgDesc.length>0">
				<view class="item" v-for="(item,index) in diseaseImgDesc" :key="index" @click="preview(baseUrl+item.path)">
					<image :src="baseUrl+item.path" mode="widthFix" class="preview-pic"></image>
				</view>
			</view>
			<button type="primary" class="submit-BT" @click="submit(1)">提交</button>			
		</view>
		<view class="search-over" v-else>
			<checkbox-group @change="changeTags">
				<view class="item" v-for="(item,index) in illness" :key="index">
					<view class="head">
						<label>
							<checkbox :value="index.toString()"  color="#3384FF" style="transform:scale(0.7)" />
							<text>{{item.illnessname}}</text>
						</label>
					</view>
					<view class="item-cont" v-html="formateTxt(item.symptom)"></view>
				</view>
			</checkbox-group>
			<view class="submit-BT-wrap">
				<button type="primary" class="submit-BT" @click="submit(2)">下一步</button>				
			</view>
		</view>
	</view>
</template>

<script>
	import {upload} from '@/api/index';
	import {searchByText,searchSubmit} from '@/api/patient';
	import {parseTime,notEmpty,deepClone} from '@/libs/index';
	import config from '@/config'
	const baseUrl =config.uploadServer;
	export default{
		data(){
			return{
				title:'请详情描述患者的病情（具体症状、患病时长、用药情况等）',
				desc:"",
				searchStatus:true,
				diseaseTags:[],
				illness:[],
				diseaseImgDesc:[],
				baseUrl
			}
		},
		methods:{
			submit(type){
				if(type===1){
				/*使用文本检索*/
					if(!notEmpty(this.desc)){
						uni.showToast({
							icon:'error',
							title:"请填写检索信息"
						})
						return;
					}
						searchByText({
							diseaseDesc:this.desc,
							seekTime:parseTime(new Date())
						}).then((res)=>{
							this.searchStatus=false;
							this.title="请选择已下病症（可多选）";							
							this.illness=res.data.site;
						})    					
				}else{
				/*提交*/	
						searchSubmit({
							diseaseDesc:this.desc,
							seekTime:parseTime(new Date()),
							site:JSON.stringify(this.diseaseTags),
							diseaseImgDesc:JSON.stringify(this.diseaseImgDesc)
						}).then((res)=>{
							if(res.code===0){
								/**检索成功返回ai推荐数据 */
								uni.setStorageSync('aidiagnoseInfo',res.data)
								uni.navigateTo({
									url: '/views/patientItems/diagnose/index'
								});
							}
						})					
				}	
			},
			changeTags({detail}){
				let enums=JSON.parse(JSON.stringify(this.illness));
				let diseaseTags=[];
					for(let i=0;i<detail.value.length;i++){
						let index=detail.value[i];
						diseaseTags.push(enums[index])
					}
				this.diseaseTags=diseaseTags;
			},
			uploadBt(){
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;		
						this.uploadSubmit(tempFilePaths[0])
					}
				});			
			},
			uploadSubmit(filePath){
				let diseaseImgDesc=deepClone(this.diseaseImgDesc);
				upload({filePath}).then((res)=>{
					let cont=JSON.parse(res)
					uni.showToast({
						title:"上传成功",
						icon:'success'
					})				
					diseaseImgDesc.push({
						path:cont.data.path
					})
					this.diseaseImgDesc=diseaseImgDesc;
				}).catch((msg)=>{
					uni.showToast({
						title:msg||"上传失败",
						icon:'none'
					})
				})	
			},
			formateTxt(txt){
				return txt.replace(/\n/g,'<br>');
			},
			preview(path){	
				uni.previewImage({
					urls:path,
					fail(res) {
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.patient-search-content{
		.notice-wrap{
			padding:24upx 20upx ;
			.notice{
				background-color:#FFF2EA;
				padding: 20upx 26upx 20upx 16upx;
				color: #FA6400;
			}			
		}
		.desc{
			font-size: 32upx;
			width: 702upx;
			height: 50vh;
			display: block;
			margin: 0 auto;
			text-indent: 58upx;
		}
		.head{
			padding-left: 59upx;
			font-size: 30upx;
			color: #333;
		}
		.tip{
			padding: 8upx 0 16upx 59upx;
			font-size: 24upx;
			color: #3584FF;
		}
		.upload{
			width: 150upx;
			height: 120upx;
			background-color: #F1F1F1;
			margin-left: 59upx;
			padding-top: 30upx;
			.icon{
				width: 50upx;
				height: 50upx;
				margin: 0 auto;
				position: relative;
				&::after{
					width: 4upx;
					height: 50upx;				
					display: block;
					content: "";				
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					background-color: #ccc;
				}
				&::before{
					width: 50upx;
					height: 4upx;				
					display: block;
					content: "";
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					background-color: #ccc;
				}			
			}
			.uploadTitle{
				text-align: center;
				display: block;
				font-size: 24upx;
				color: #666;
				padding-top: 12upx;
			}
		}
		.submit-BT{
			display: block;
			width: 702upx;
			height: 98upx;
			line-height: 98upx;
			text-align: center;
			color: #fff;
			font-size: 32upx;
			letter-spacing: 4upx;
			margin-top: 40upx;
			background-color: #3384FF;
		}
		.search-pre{
			.preview{
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;
				.item{
					width: 40upx;
					height: 40upx;
					margin-left: 8upx;
					margin-top: 8upx;
					.preview-pic{
						display: block;
						width: 40upx;
						height: 40upx;						
					}
				}
			}
		}
		.search-over{
			padding-left: 34upx;
			.item{
				.head{
					font-size: 28upx;
					color: #333;
					padding: 24upx 0;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
				.item-cont{
					font-size: 24upx;
					color:#666666;
					line-height: 36upx;
					padding-top: 23upx;
				}
			}
			.submit-BT-wrap{
				position: fixed;
				bottom: 0;
				width: 100%;
				padding: 20upx 0;
				background-color: #fff;
				left: 0;
				border-top: #eaeaea;
			}
			padding-bottom: 200upx;
		}
	}
</style>