his_user_miniapp/pages_order/inquiryForm1.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="/static/images/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="/static/images/arrow_gray.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="cont">
				<view class="title-box">
					<view class="red-dot">*</view>
					<view class="title">请描述您的病情</view>
					
				</view>
				<view style="margin: 15rpx 0rpx">
					<u--textarea maxlength="500"  v-model="title" placeholder="请输入内容" count ></u--textarea>
				</view>
				<view class="title-box">
					<view class="red-dot">*</view>
					<view class="title">本次患病多久了?</view>
				</view>
				<view style="margin: 15rpx 0rpx">
					<u-radio-group 
					    v-model="duration"
					    iconPlacement="left">
						<u-radio :customStyle="{marginRight: '5px'}"
						  v-for="(item, index) in durations"
						  :key="index"
						  :label="item.name"
						  :name="item.name" activeColor="#C39A58"  
						  ></u-radio>
					</u-radio-group>
				</view>
				<view class="title-box">
					<view class="red-dot">*</view>
					<view class="title">此次病情是否去医院就诊过?</view>
				</view>
				<view style="margin: 15rpx 0rpx">
					<u-radio-group 
					    v-model="isVisit"
					    iconPlacement="left">
						<u-radio :customStyle="{marginRight: '5px'}"
						  v-for="(item, index) in isVisits"
						  :key="index"
						  :label="item.name"
						  :name="item.name" activeColor="#C39A58"  
						  ></u-radio>
					</u-radio-group>
				</view>
				<view class="title-box">
					<view class="title">上传检测报告或患处照片?</view>
				</view>
				<view style="margin: 15rpx 0rpx">
				 
					<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						:maxCount="5"
					></u-upload>
				</view>
			</view>
		</view>
		<view class="btn-box">
		 	<view class="btn" @click="submitOrder()">提交订单</view>
		</view>
	</view>
</template>

<script>
	import {create,confirm} from '@/api/inquiryOrder.js'
	export default {
		data() {
			return {
				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
					}
				],
				title:"",
				isVisit:"就诊过",
				duration:"一周内",
				inquiryType:null,
				orderType:null,
				doctorId:null,
				fileList1: [],
			}
		},
		onLoad(options) {
			this.inquiryType=options.inquiryType;
			this.orderType=options.orderType;
			this.doctorId=options.doctorId;
			console.log(this.inquiryType)
			console.log(this.orderType)
			console.log(this.doctorId)
			this.confirm();
		},
		onShow() {
			var that=this;
			uni.$on('refreshOrderPatient', (res) => {
				that.patient=res
			})
		},
		methods: {
			leftClick() {
				console.log('leftClick');
				uni.showModal({
				    title: '提示',
				    content: '确认关闭吗',
				    success: function (res) {
				        if (res.confirm) {
				            uni.navigateBack()
				        } else if (res.cancel) {
				        }
				    }
				});
			},
			submitOrder(){
				
				if(this.patient==null){
					uni.showToast({
						icon:'none',
						title: '请选择就诊人',
					});
					return;
				}
				if(this.isVisit=='未就诊'){
					uni.showToast({
						icon:'none',
						title: '仅支持复诊',
					});
					return;
				}
				if(this.orderKey==null){
					this.confirm();
				}
				var images=[];
				this.fileList1.forEach(function(element) {
					images.push(element.url)
				});
				var data={
					orderKey:this.orderKey,
					patientId:this.patient.patientId,
					title:this.title,
					isVisit:this.isVisit,
					duration:this.duration,
					inquiryType:this.inquiryType,
					orderType:this.orderType,
					doctorId:this.doctorId,
					reportImages:images.toString()
				}
				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 => {}
				);
			},
			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;
			padding-bottom: 140upx;
			.cont{
				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;
					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: #C39A58;
						
					}
					.red-dot{
						margin-right: 5rpx;
						color:red;
					}
					 
				}
			}
			.chose-patient{
				margin: 15rpx 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: #C39A58;
		 		border-radius: 10upx;
		 	}
		 }
	}
</style>