yijianbao_user_uniapp/pages_order/inquiryForm2_2.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="title">
						<u--textarea maxlength="500"  v-model="form.title" placeholder="请输入内容" count ></u--textarea>
					</u-form-item>
					<u-form-item :required="true" labelWidth="200rpx"  borderBottom label="正在服用药品" prop="drugs">
					 	<u--textarea maxlength="500"  v-model="form.drugs" placeholder="请输入内容" count ></u--textarea>
					</u-form-item>
					<u-form-item :required="true" labelWidth="200rpx"  borderBottom label="本次患病多久了" prop="duration">
					 	<u-radio-group
					 	    v-model="form.duration"
					 	    iconPlacement="left">
					 		<u-radio :customStyle="{marginRight: '5px'}"
					 		  v-for="(item, index) in durations"
					 		  :key="index"
					 		  :label="item.name"
					 		  :name="item.name" activeColor="#2583EB"  
					 		  ></u-radio>
					 	</u-radio-group>
					</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="#2583EB"  
					 		  ></u-radio>
					 	</u-radio-group>
					</u-form-item>
					<u-form-item :required="true" labelWidth="200rpx"  borderBottom label="上传检测报告或患处照片"  >
					 
						<view class="form-item">
							<view class="icon"></view>
							<u-upload
								:fileList="fileList1"
								@afterRead="afterRead"
								@delete="deletePic"
								name="1"
								multiple
								:maxCount="4"
							>
							</u-upload>
						</view>
					</u-form-item>
					<u-form-item   :required="true" labelWidth="200rpx"  borderBottom label="上传舌苔照片"  >
						<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="fileList2"
								@afterRead="afterRead"
								@delete="deletePic"
								name="2"
								multiple
								:maxCount="4"
							>
							</u-upload>
						</view>
					</u-form-item>
					<u-form-item   :required="true" labelWidth="200rpx"   label="上传面部照片"  >
						<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="fileList3"
								@afterRead="afterRead"
								@delete="deletePic"
								name="3"
								multiple
								:maxCount="4"
							>
							</u-upload>
						</view>
					</u-form-item>
					 
				</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>
				</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,
				temps:[],
				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
				orderKey:null,
				patient:null,
				durations: [
					{
						name: '一周内',
						disabled: false
					},
					{
					  name: '一个月内',
					  disabled: false
					},
					{
					  name: '半年内',
					  disabled: false
					}, {
					  name: '半年以上',
					  disabled: false
					}
				],
				isVisits: [
					{
						name: '未就诊',
						disabled: false
					},
					{
					  name: '就诊过',
					  disabled: false
					}
				],
				form:{
					title:"",
					drug:"",
					isVisit:"就诊过",
					duration:"一周内",
				},
				rules: {
					title: [
						{ 
							required: true, 
							message: '请输入您的病情', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					drugs: [
						{ 
							required: true, 
							message: '请输入正在服用药品', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					durations: [
						{ 
							required: true, 
							message: '请选择本次患病多久', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					isVisit: [
						{ 
							required: true, 
							message: '请选择是否去医院就诊过', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					 
				},
				inquiryType:null,
				inquirySubType:null,
				orderType:null,
				doctorId:null,
				fileList1: [],
				fileList2: [],
				fileList3: [],
				isShare:null
			}
		},
		onLoad(options) {
			if(!this.$isEmpty(options.isShare)){
				this.isShare=options.isShare
			}
			else{
				uni.hideShareMenu()
			}
			console.log(options)
			if(!this.$isEmpty(options.companyId)){
				this.companyId=options.companyId
			}
			if(!this.$isEmpty(options.companyUserId)){
				this.companyUserId=options.companyUserId
			}
			console.log(this.companyId)
			console.log(this.companyUserId)
			this.inquiryType=options.inquiryType;
			this.inquirySubType=options.inquirySubType;
			this.orderType=options.orderType;
			this.doctorId=options.doctorId;
			console.log(this.inquiryType)
			console.log(this.orderType)
			console.log(this.doctorId)
			this.getInquiryTemp();
			 
		},
		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();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			 
		},
		onShareAppMessage(res) {
			//禁止二次转发--
			uni.showShareMenu({
				withShareTicket: true
			});
			wx.updateShareMenu({
				isPrivateMessage: true,
				withShareTicket: false,
				success(res) {
					console.log('updateShareMenu: ', res);
				},
				fail() {}
			}); //禁止二次转发--end
			return {
				title: "医健宝互联网医院--咨询",
				path: "/pages_order/inquiryForm2_2?inquiryType=2&orderType=2&inquirySubType="+this.inquirySubType+"&companyId="+this.companyId+"&companyUserId="+this.companyUserId
			}
			
			
		},
		methods: {
			leftClick() {
				console.log('leftClick');
				uni.showModal({
				    title: '提示',
				    content: '确认关闭吗',
				    success: function (res) {
				        if (res.confirm) {
				            uni.navigateBack()
				        } else if (res.cancel) {
				        }
				    }
				});
			},
			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
					});
				}
			},
			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 => {}
				);	
			},
			submitOrder(){
				if(this.patient==null){
					uni.showToast({
						icon:'none',
						title: '请选择就诊人',
					});
					return;
				}
				if(this.form.isVisit!='就诊过'){
					uni.showToast({
						icon:'none',
						title: '仅支持复诊',
					});
					return;
				}
				if(this.orderKey==null){
					this.confirm();
				}
				var reportImages=[];
				this.fileList1.forEach(function(element) {
					reportImages.push(element.url)
				});
				var tongueImages=[];
				this.fileList2.forEach(function(element) {
					tongueImages.push(element.url)
				});
				var faceImages=[];
				this.fileList3.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)
				});
				var that=this;
				this.$refs.uForm.validate().then(res => {
					var data={
						companyId:that.companyId,
						companyUserId:that.companyUserId,
						orderKey:this.orderKey,
						patientId:this.patient.patientId,
						title:this.form.title,
						drugs:this.form.drugs,
						isVisit:this.form.isVisit,
						duration:this.form.duration,
						inquiryType:this.inquiryType,
						inquirySubType:this.inquirySubType,
						orderType:this.orderType,
						doctorId:this.doctorId,
						reportImages:reportImages.toString(),
						tongueImages:tongueImages.toString(),
						faceImages:faceImages.toString(),
						formJson:JSON.stringify(forms)
					}
					 uni.showLoading({
					 	title: '正在处理中...'
					 });
					 create(data).then(
					 	res => {
					 		uni.hideLoading()
					 		if(res.code==200){
								var temps=['YyaBF62vH1GPKY0tume8C2C5UETxcKrVsaTKdBW5eok']
								uni.requestSubscribeMessage({
									tmplIds: temps,
									success(e) {
										 setTimeout(function(){
										 	uni.redirectTo({
										 		url: './inquiryPay?orderId='+res.order.orderId
										 	})
										 },200);
									},
									fail(e) {
										setTimeout(function(){
											uni.redirectTo({
												url: './inquiryPay?orderId='+res.order.orderId
											})
										},200);
									}
								})
					 			
					 			return;
					 		}
					 		else{
					 			uni.showToast({
					 				icon:'none',
					 				title: res.msg,
					 			});
					 		}
					 	},
					 	rej => {}
					 );
				}).catch(errors => {
					 
				})
				
				 
			},
			confirm(){
				let data = {};
				confirm(data).then(
					res => {
						if(res.code==200){
							this.orderKey=res.orderKey
						}
					},
					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: 0rpx 0rpx 160rpx;
				.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 40rpx;
				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>