yijianbao_user_uniapp/pages_order/inquiryForm3.vue

<template>
	<view class="content">
		<view class="main">
			<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">
				<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="#2583EB"  
						  ></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="#2583EB"  
						  ></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 {
				
				companyId:null,
				companyUserId:null,
				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) {
		
			if(!this.$isEmpty(options.companyId)){
				this.companyId=options.companyId
			}
			if(!this.$isEmpty(options.companyUserId)){
				this.companyUserId=options.companyUserId
			}
			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: {
			submitOrder(){
				if(this.patient==null){
					uni.showToast({
						icon:'none',
						title: '请选择就诊人',
					});
					return;
				}
				if(this.isVisit=='未就诊'){
					uni.showToast({
						icon:'none',
						title: '仅支持复诊',
					});
					return;
				}
				var images=[];
				this.fileList1.forEach(function(element) {
					images.push(element.url)
				});
				var data={
					companyId:this.companyId,
					companyUserId:this.companyUserId,
					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 => {
						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">
	.main{
		position: relative;
		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: #2583EB;
					
				}
				.red-dot{
					margin-right: 5rpx;
					color:red;
				}
				 
			}
		}
		.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;
	 	}
	 }
</style>