yijianbao_user_uniapp/pages_order/inquiryForm2_1.vue

<template>
	<view class="content">
		<view>
			<u-navbar
				title="症状描述"
				@leftClick="leftClick"
			>	
			</u-navbar>
		</view>
		<view class="main">
			<view class="status_bar" :style="{height: statusBarHeight}"></view>
			<u-alert  fontSize="16" description = "尊敬的用户，您好!为了您的健康，请认真填写以下内容，以便药师为您更好的分析，提供更有针对性的解决方案!"></u-alert>
			<view class="chose-patient">
				<view class="title-box" @click="addPatient()" v-if="patient==null">
					<text class="title">选择就诊人</text>
					<view class="right" >
						<text class="value">请点击添加</text>
						<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/arrow_gray.png" mode=""></image>
					</view>
				</view>
				<view class="patient" @click="addPatient()" v-if="patient!=null">
					<view  class="left">
						<view class="name">{{patient.patientName}}</view>
						<view class="info">
							<text class="text" v-if="patient.sex==1">男</text>
							<text class="text" v-if="patient.sex==2">女</text>
							<text class="text">{{$getAge(patient.birthday)}}岁</text>
							<text class="text">{{$parseIdCard(patient.idCard)}}</text>
						</view>
					</view>
					<view class="right" >
						<image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/arrow_gray.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="cont">
				<u-form   :rules="rules" :model="form" ref="uForm" labelPosition="left">
			<!-- 	<view class="title-box">
					<view class="line"></view>
					<view class="title">您的基本情况填写</view>
				</view>
				<view class="form">
					<u-form-item :required="true" labelWidth="200rpx"  borderBottom label="身高(厘米)" prop="height">
						<u-input type="number" border="none" placeholder="请输入身高" v-model="form.height" />
					</u-form-item>
					<u-form-item :required="true" labelWidth="200rpx"  borderBottom label="体重(公斤)" prop="weight">
						<u-input type="number" border="none" placeholder="请输入体重" v-model="form.weight" />
					</u-form-item>
					<u-form-item :required="true" labelWidth="200rpx" maxlength="11"  borderBottom label="联系电话" prop="mobile">
						<u-input type="number" border="none" placeholder="请输入电话" v-model="form.mobile" />
					</u-form-item> -->
				<!-- 	<u-form-item :required="true" labelWidth="200rpx"  borderBottom label="学习进度" prop="study">
						<u-input border="none" placeholder="请输入第几期第几课" v-model="form.study" />
					</u-form-item> -->
					<!-- <u-form-item :required="true" labelWidth="200rpx"  borderBottom label="用药情况" prop="medication">
						<u--textarea v-model="form.medication" placeholder="请输入用药情况" count ></u--textarea>
					</u-form-item>
					<u-form-item :required="true" @click="usageShow = true;" labelWidth="200rpx"  label="期望会诊方式" prop="usage">
						
						<u-input
							v-model="form.usage"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择"
							border="none"
						></u-input>
						<template #right>
							<u-icon
								name="arrow-right"
							></u-icon>
						</template>
						
					</u-form-item>
					<u-action-sheet
							:show="usageShow"
							:actions="usages"
							title="请选择"
							@close="usageShow = false"
							@select="usageSelect"
					>
					</u-action-sheet>
					
				</view> -->
				<!-- <view class="title-box">
					<view class="line"></view>
					<view class="title">您的头面部健康状况自我检查</view>
				</view>
				<view class="form">
					<view class="option-box">
						<view class="option-item"   v-for="(item,index) in temps" >
							<view  v-if="item.tempType==1"   class="title">{{index+1}} {{item.title}}</view>
							<view class="options">
								<u-checkbox-group
											v-if="item.tempType==1"
											v-model="item.checks"
											placement="column"
										>
									<u-checkbox
										size="28"
										shape="circle"
										activeColor="#2583EB"
										v-for="(option, subIndex) in item.options"
										:key="option.name"
										:label="option.name"
										:name="option.name"
									>
									</u-checkbox>
								</u-checkbox-group>
							</view>
							
						</view>
					</view>
				</view>
				<view class="title-box">
					<view class="line"></view>
					<view class="title">您的四肢肩颈健康状况自我检查</view>
				</view>
				<view class="form">
					<view class="option-box">
						<view class="option-item"    v-for="(item,index) in temps" >
							<view v-if="item.tempType==2" class="title">{{index+1}} {{item.title}}</view>
							<view class="options">
								<u-checkbox-group
											v-if="item.tempType==2"
											v-model="item.checks"
											placement="column"
										>
									<u-checkbox
										size="28"
										shape="circle"
										activeColor="#2583EB"
										v-for="(option, subIndex) in item.options"
										:key="option.name"
										:label="option.name"
										:name="option.name"
									>
									</u-checkbox>
								</u-checkbox-group>
							</view>
							
						</view>
					</view>
					
					
				</view>
				<view class="title-box">
					<view class="line"></view>
					<view class="title">您的胸腹部健康状况自我检查</view>
				</view>
				<view class="form">
					<view class="option-box">
						<view class="option-item"   v-for="(item,index) in temps" >
							<view v-if="item.tempType==3" class="title">{{index+1}} {{item.title}}</view>
							<view class="options">
								<u-checkbox-group
											v-if="item.tempType==3"
											v-model="item.checks"
											placement="column"
										>
									<u-checkbox
										size="28"
										shape="circle"
										activeColor="#2583EB"
										v-for="(option, subIndex) in item.options"
										:key="option.name"
										:label="option.name"
										:name="option.name"
									>
									</u-checkbox>
								</u-checkbox-group>
							</view>
							
						</view>
					</view>
				</view>
				<view class="title-box">
					<view class="line"></view>
					<view class="title">其他身体状况自我检查</view>
				</view>
				<view class="form">
					<view class="option-box">
						<view class="option-item"  v-for="(item,index) in temps" >
							<view  v-if="item.tempType==4" class="title">{{index+1}} {{item.title}}</view>
							<view class="options">
								<u-checkbox-group
											v-if="item.tempType==4"
											v-model="item.checks"
											placement="column"
										>
									<u-checkbox
										size="28"
										shape="circle"
										activeColor="#2583EB"
										v-for="(option, subIndex) in item.options"
										:key="option.name"
										:label="option.name"
										:name="option.name"
									>
									</u-checkbox>
								</u-checkbox-group>
							</view>
							
						</view>
					</view>
					
				</view> -->
				
				<!-- <view class="title-box">
					<view class="line"></view>
					<view class="title">补充信息</view>
				</view> -->
				<view class="form">
					<!-- <u-form-item  labelWidth="140rpx" borderBottom label="舌苔照片" prop="avatar">
						<view class="form-item">
							<image @click="showImg(1)" class="icon" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/question.png"></image>
							
							<u-upload
								:fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								multiple
								:maxCount="4"
							>
							</u-upload>
						</view>
					</u-form-item>
					<u-form-item  labelWidth="140rpx" borderBottom label="面部照片" prop="avatar">
						<view class="form-item">
							<image @click="showImg(2)" class="icon" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/question.png"></image>
							
							<u-upload
								:fileList="fileList2"
								@afterRead="afterRead"
								@delete="deletePic"
								name="2"
								multiple
								:maxCount="4"
							>
							</u-upload>
						</view>
						
					</u-form-item>
					
					<u-form-item labelWidth="140rpx" borderBottom label="相关报告" prop="avatar">
						<view class="form-item">
							<view class="icon"></view>
							<u-upload
								:fileList="fileList3"
								@afterRead="afterRead"
								@delete="deletePic"
								name="3"
								multiple
								:maxCount="4"
							>
							</u-upload>
						</view>
					</u-form-item> -->
					<u-form-item :required="true" labelWidth="200rpx"  label="您最想咨询医生的问题是什么?" prop="title">
						<u--textarea v-model="form.title" placeholder="请输入内容" count maxlength="500"></u--textarea>
					</u-form-item>
					<u-form-item :required="true" labelWidth="200rpx"  borderBottom label="此次病情是否去医院就诊过" prop="isVisit">
						<u-radio-group
							v-model="form.isVisit"
							iconPlacement="left">
							<u-radio :customStyle="{marginRight: '5px'}"
							  v-for="(item, index) in isVisits"
							  :key="index"
							  :label="item.name"
							  :name="item.name" activeColor="#FF5C03"  
							  ></u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item  labelWidth="200rpx"  borderBottom label="上传检测报告或患处照片"  >
					 
						<view class="form-item">
							<view class="icon"></view>
							<u-upload
								:fileList="fileList3"
								@afterRead="afterRead"
								@delete="deletePic"
								name="3"
								multiple
								:maxCount="4"
							>
							</u-upload>
						</view>
					</u-form-item>
				</view>
				</u-form>
			</view>
		</view>
		 <view class="btn-box">
		 	<view class="btn" @click="submitOrder()">预约会诊</view>
		 </view>
	</view>
</template>
<script>
	
	import {bindCompanyUser} from '@/api/companyUser.js'
	
	import {create,confirm,getInquiryTemp} from '@/api/inquiryOrder.js'
	export default {
		data() {
			return {
				companyId:null,
				companyUserId:null,
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				temps:[],
				usageShow:false,
				usages: [
					{
						name: '图文问诊',
					},
					{
						name: '语音问诊',
					},
				],
				isVisits: [
					{
						name: '未就诊',
						disabled: false
					},
					{
					  name: '就诊过',
					  disabled: false
					}
				],
				orderKey:null,
				patient:null,
				inquiryType:null,
				inquirySubType:null,
				orderType:null,
				fileList1: [],
				fileList2: [],
				fileList3: [],
				form:{
					title:"",
					isVisit:"就诊过",
				},
				rules: {
					height: [
						{ 
							required: true, 
							message: '请输入身高', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					weight: [
						{ 
							required: true, 
							message: '请输入体重', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					mobile: [
						{ 
							required: true, 
							message: '请输入联系电话', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					isVisit: [
						{ 
							required: true, 
							message: '请选择是否去医院就诊过', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					 
				}
			}
		},
		onLoad(options) {
			if(!this.$isEmpty(options.isShare)){
				this.isShare=options.isShare
			}
			else{
				//uni.hideShareMenu()
			}
			if(!this.$isEmpty(options.companyId)){
				this.companyId=options.companyId == 'undefined' || options.companyId == 'null' ? null: options.companyId
			}
			if(!this.$isEmpty(options.companyUserId)){
				this.companyUserId=options.companyUserId == 'undefined' || options.companyUserId == 'null'? null: options.companyUserId
			}
			console.log(this.companyId)
			console.log(this.companyUserId)
			this.inquiryType=options.inquiryType;
			this.inquirySubType=options.inquirySubType;
			this.orderType=options.orderType;
			//this.getInquiryTemp();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			if(this.$isLogin()){
				if(!this.$isEmpty(this.companyUserId)){
					let data = {companyUserId:this.companyUserId};
					bindCompanyUser(data).then(
						res => {
							if(res.code==200){
							}
						},
						rej => {}
					);	
					
				}
			}
			var that=this;
			uni.$on('refreshOrderPatient', (res) => {
				that.patient=res
			})
			this.confirm();
		},
		onShareAppMessage(res) {
			//禁止二次转发--
			uni.showShareMenu({
				withShareTicket: true
			});
			wx.updateShareMenu({
				isPrivateMessage: true,
				withShareTicket: true,
				success(res) {
					console.log('updateShareMenu: ', res);
				},
				fail() {}
			}); 
			//禁止二次转发--end
			return {
				title: "医健宝医药--咨询",
				path: "/pages_order/inquiryForm2_1?inquiryType=2&orderType=2&inquirySubType="+this.inquirySubType+"&companyId="+this.companyId+"&companyUserId="+this.companyUserId
			}
			
			
			
			
		},
		methods: {
			showImg(type){
				if(type==1){
					var imgs=[
						"https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/0640bd4b80ba4491842b9d20d7238616.png"
					];
					uni.previewImage({
						current: 0,
						urls: imgs
					});
				}
				else if(type==2){
					var imgs=[
						"https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/2c9f24e5c3fc458f8bcb30a4fb0619be.png"
					];
					uni.previewImage({
						current: 0,
						urls: imgs
					});
				}
			},
			leftClick() {
				console.log('leftClick');
				uni.showModal({
				    title: '提示',
				    content: '确认关闭吗',
				    success: function (res) {
				        if (res.confirm) {
				            uni.navigateBack()
				        } else if (res.cancel) {
				        }
				    }
				});
			},
			confirm(){
				let data = {};
				confirm(data).then(
					res => {
						if(res.code==200){
							this.orderKey=res.orderKey
							console.log("this.orderKey==111",this.orderKey)
						}
					},
					rej => {}
				);	
			},
			usageSelect(e){
				this.form.usage = e.name
				this.$refs.uForm.validateField('usage')
			},
			submitOrder(){
				if(this.patient==null){
					uni.showToast({
						icon:'none',
						title: '请选择就诊人',
					});
					return;
				}
				console.log(this.form.isVisit)
				if(this.form.isVisit!='就诊过'){
					uni.showToast({
						icon:'none',
						title: '仅支持复诊',
					});
					return;
				}
				console.log("this.orderKey==",this.orderKey)
				if(this.orderKey==null){
					this.confirm();
				}
				var reportImages=[];
				this.fileList3.forEach(function(element) {
					reportImages.push(element.url)
				});
				var tongueImages=[];
				this.fileList1.forEach(function(element) {
					tongueImages.push(element.url)
				});
				var faceImages=[];
				this.fileList2.forEach(function(element) {
					faceImages.push(element.url)
				});
				// var forms=[];
				// this.temps.forEach(function(element) {
				// 	var item={
				// 		title:element.title,
				// 		option:element.checks,
				// 	}
				// 	forms.push(item)
				// });
				console.log("2222",this.orderKey)
				var that=this;
				this.$refs.uForm.validate().then(res => {
					 var data={
						companyId:that.companyId,
						companyUserId:that.companyUserId,
					 	orderKey:that.orderKey,
					 	patientId:that.patient.patientId,
					 	title:that.form.title,
					 	inquiryType:that.inquiryType,
						inquirySubType:that.inquirySubType,
					 	orderType: 2, // 1图文 2语音
					 	doctorId:that.doctorId,
						height:that.form.height,
						weight:that.form.weight,
						mobile:that.form.mobile,
						// study:that.form.study,
						medication:that.form.medication,
						usage:that.form.usage,
						reportImages:reportImages.toString(),
						tongueImages:tongueImages.toString(),
						faceImages:faceImages.toString(),
						isVisit:that.form.isVisit,
						// formJson:JSON.stringify(forms)
					 }
					 console.log("2222",this.orderKey)
					 //#ifdef APP-PLUS
					     data.source=2;
					 //#endif
					 //#ifdef H5
					     data.source=3;
					 //#endif
					 uni.showLoading({
					 	title: '正在处理中...'
					 });
					 create(data).then(
					 	res => {
					 		uni.hideLoading()
					 		if(res.code==200){
								setTimeout(function(){
									uni.redirectTo({
										url: './inquiryPay?orderId='+res.order.orderId
									})
								},200);
					 			
					 			return;
					 		}
					 		else{
					 			uni.showToast({
					 				icon:'none',
					 				title: res.msg,
					 			});
					 		}
					 	},
					 	rej => {}
					 );
				}).catch(errors => {
					 
				})
				
			},
			// getInquiryTemp(){
			// 	let data = {};
			// 	getInquiryTemp(data).then(
			// 		res => {
			// 			if(res.code==200){
			// 				this.temps=res.data;
			// 				this.temps.forEach(function(element) {
			// 					element.options=JSON.parse(element.itemJson)
			// 				});
			// 				// this.temps1=temps.filter((item) => {
			// 				//   return item.tempType==1;
			// 				// });
			// 				// this.temps2=temps.filter((item) => {
			// 				//   return item.tempType==2;
			// 				// });
			// 				// this.temps3=temps.filter((item) => {
			// 				//   return item.tempType==3;
			// 				// });
			// 				// this.temps4=temps.filter((item) => {
			// 				//   return item.tempType==4;
			// 				// });
			// 				console.log(this.temps1)
			// 			}
			// 		},
			// 		rej => {}
			// 	);	
			// },
			addPatient(){
				uni.navigateTo({
					url: '/pages_user/patient'
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								console.log(JSON.parse(res.data).url)
								resolve(JSON.parse(res.data).url)
							}, 1000)
						}
					});
				})
			},
			 
			 
			 
		}
	}
</script>
<style lang="scss">
	page{
		background: #f1f6fc;
	}
</style>
<style scoped lang="scss">
	.content{
		position: relative;
		.main{
			margin-top: 44px;
			.cont{
				padding-bottom: 160upx;
				.title-box{
					margin: 15rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: flex-start;
					.title{
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
					}
					.line{
						margin-right: 15rpx;
						height: 30rpx;
						width: 6rpx;
						background-color: #2583EB;
						
					}
					 
				}
				.form{
					border-radius: 15rpx;
					margin: 0rpx 15rpx;
					padding: 0rpx 30rpx;
					background-color: #fff;
					.option-box{
						padding: 15rpx;
						.option-item{
							.title{
								font-size: 32upx;
								font-family: PingFang SC;
								font-weight: bold;
								color: #111111;
							}
							.options{
								
								
							}
						}
					}
					
				}
			}
			.chose-patient{
				margin: 15rpx;
				padding: 30rpx;
				box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
				background-color: #fff;
				border-radius: 15rpx;
				.title-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.title{
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #111111;
					}
					.right{
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						.value{
							font-size: 28upx;
							font-family: PingFang SC;
							color: #999;
							margin-right: 10rpx;
						}
						image{
							width: 15upx;
							height: 30upx;
						}
						 
					}
				}
				.patient{
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 110upx;
					.left{
						.name{
							font-size: 30upx;
							line-height: 1;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
						}
						.info{
							margin-top: 30rpx;
							display: flex;
							align-items: center;
							.text{
								font-size: 26upx;
								font-family: PingFang SC;
								line-height: 1;
								font-weight: 500;
								color: #999;
								margin-right: 19upx;
							}
							 
						}
					}
					.right{
						display: flex;
						align-items: center;
						image{
							width: 15upx;
							height: 30upx;
						}
					}
				}
			}
		}
		
		.btn-box{
		 	height: 140upx;
		 	z-index: 9999;
		 	width: 100%;
		 	padding: 0rpx 30upx;
		 	position: fixed;
		 	bottom: 0;
		 	left: 0;
		 	box-sizing: border-box;
		 	background-color: #ffffff;
		 	display: flex;
		 	align-items: center;
		 	justify-content: center;
		 	.btn{
		 		width: 100%;
		 		height: 88upx;
		 		line-height: 88upx;
		 		text-align: center;
		 		font-size: 34upx;
		 		font-family: PingFang SC;
		 		font-weight: 400;
		 		color: #FFFFFF;
		 		background: #2583EB;
		 		border-radius: 10upx;
		 	}
		 }
	}
	.form-item{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		.icon{
			min-width: 30rpx;
			margin-right: 15rpx;
			width: 30rpx;
			height:30rpx;
		}
	}
	
</style>