his_user_miniapp/pages_index/packageForm.vue

<template>
	<view class="content">
		<view class="patient-cont">
			<view class="chose-patient">
				<view class="patient-box" @click="addPatient()" v-if="patient==null">
					<view class="patient-item">
						<view class="patient-tip">*</view>
						<view class="patient-title">选择就诊人</view>
					</view>
					<view class="right" >
						<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>
		<view class="msg-cont">
			<scroll-view
				class="msg-scroll"
				:scroll-top="scrollTop"
				scroll-y="true"
				:scroll-with-animation="true"
			>
			<view class="msgs">
				<view class="msg-item" v-for="(item,index) in msgs" >
					<view class="left" v-if="item.type==1">
						<image class="img" src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/be32b8d2ae9f497297d10327656bb43c.png"></image>
						<view class="msg-content">{{item.content}}</view>
					</view>
					<view class="right" v-if="item.type==2">
						<view class="msg-content">{{item.content}}</view>
						<image class="img" src="https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/1d7eb0607a074892964dd32e8735e540.jpg"></image>
					</view>
					
				</view>
			</view>
			</scroll-view>
		</view>
		<view class="option-cont" v-if="item!=null">
			<view class="option-title" >{{item.title}}</view>
			<view class="options" >
				<view :class="option.color=='red'?'option-item red':'option-item green'" @click="optionClick(item,option)" v-for="(option,opIndex) in item.options" >{{option.name}}</view>
			</view>
		</view>
		<u-modal @cancel="close()" @confirm="confirm()" :show="show" title="温馨提示" :content='content'></u-modal>
	</view> 
</template>

<script>
	
	import {create} from '@/api/packageOrder.js'
	export default {
		data() {
			return {
				content:null,
				show:false,
				scrollTop:0,//滚动条位置
				patient:null,
				items:[
					{
						title:"您是否已在线下就诊，且对所购买的药品无过敏或不良反应？",
						options:[
							{name:"是，我线下就诊过",value:1,color:'green'},
							{name:"无，从未就诊",value:0,color:'red'},
						]
					},
					{
						title:"您是否已详细阅读药物说明，确认自己符合药物适用人群，并了解用药方法、用药禁忌等信息?",
						options:[
							{name:"是，我已充分了解",value:1,color:'green'},
							{name:"否，未阅读",value:0,color:'red'},
						]
					}
					
					 
				],
				msgs:[],
				index:0,
				item:null,
				notice:[
					{title:"好的。我将根据您提交的复诊信息开具处方，请详细阅读药品说明书，遵医嘱用药。"},
					{title:"您存在用药禁忌证，目前不推荐购买此套餐包。建议您尽早就医，在医生指导下采取针对性的治疗措施!在改善相关禁忌证后，也可以再次咨询，重新评估是否可以使用该套餐包。"}
					
				],
				packageId:null,
				doctorId:null,
				isComplete:0,
				companyUserId:null,
				companyId:null
				
			};
		},
		onLoad(option) {
			this.packageId=option.packageId
			this.doctorId=option.doctorId
			if(!this.$isEmpty(option.companyId)){
				this.companyId=option.companyId
			}
			if(!this.$isEmpty(option.companyUserId)){
				this.companyUserId=option.companyUserId
			}
			
			var that=this;
			uni.$on('refreshOrderPatient', (res) => {
				that.patient=res
			})
			this.item=this.items[0];
			this.addMsg(1,this.item.title);
			
		},
		onShow() {
			
		},
		methods:{
			close(){
				this.show=false;
			},
			confirm(){
				if(this.isComplete==1){
					this.submit()
				}
				else{
					uni.navigateBack()
				}
				
			},
			addMsg(type,content){
				var msg={type:type,content:content}
				this.msgs.push(msg)
				var that=this;
				uni
				  .createSelectorQuery()
				  .select(".msgs")
				  .boundingClientRect((res) => {
				    const scrollH = res.height;
					that.scrollTop = scrollH;
					console.log(that.scrollTop)
				    
				  })
				  .exec();
				 
				
			},
			optionClick(item,option){
				if(this.patient==null){
					uni.showToast({
						icon:'none',
						title: "请选择就诊人",
					});
					return;
				}
				if(option.value==0){
					this.content=this.notice[1].title;
					this.show=true;
					this.isComplete=0;
					return;
				}
				item.option=option.name;
				console.log(item.option);
				this.addMsg(2,option.name);
				this.index++;
				if(this.index<=this.items.length-1){
					this.item=this.items[this.index];
					this.addMsg(1,this.item.title)
				}
				else{
					this.content=this.notice[0].title;
					this.show=true;
					this.isComplete=1;
					return;
				}
				
			},
			addPatient(){
				uni.navigateTo({
					url: '/pages_user/patient'
				})
			},
			submit(){
				uni.showLoading({
					title:"处理中..."
				})
				var data={
					companyId:this.companyId,
					companyUserId:this.companyUserId,
					patientId:this.patient.patientId,
					patientJson:JSON.stringify(this.patient),
					packageId:this.packageId,
					doctorId:this.doctorId,
					formJson:JSON.stringify(this.items),
				}
				var that=this;
				create(data).then(res => {
					uni.hideLoading()
					
					if(res.code==200){
						var temps=['jARl4BpoBkRu-2MxPMkQVhIfGMG0V9qW-X3V_7NtEOU']
						uni.requestSubscribeMessage({
							tmplIds: temps,
							success(e) {
								setTimeout(function(){
									uni.navigateTo({
										url: '/pages_order/packageOrderPay?orderId='+res.order.orderId
									})
								},200);
							},
							fail(e) {
								setTimeout(function(){
									uni.navigateTo({
										url: '/pages_order/packageOrderPay?orderId='+res.order.orderId
									})
								},200);
							}
						})
						
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				});
			 
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.content{
		height: 100vh;
		.msg-cont{
			padding-bottom: 550rpx;
			width: 100%;
			height: calc(100vh - 760rpx);
			.msg-scroll{
				height: calc(100vh - 760rpx);
				.msgs{
					overflow: hidden;
					width: 100%;
					.msg-item{
						padding: 10rpx 15rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-start;
						width: 100%;
						.left{
							width: 100%;
							display: flex;
							justify-content: flex-start;
							align-items: flex-start;
							.img{
								min-width: 100rpx;
								width: 100rpx;
								height:100rpx;
								border-radius: 50%;
								image{
									width: 100%;
									height:100%;
								}
							}
							.msg-content{
								margin-top: 15rpx;
								margin-left: 10rpx;
								border-radius: 15rpx;
								padding: 15rpx;
								background-color: #fff;
								color: #111;
								font-size: 32upx;
								font-family: PingFang SC;
							}
						}
						.right{
							width: 100%;
							display: flex;
							justify-content: flex-end;
							align-items: flex-start;
							.msg-content{
								margin-top: 15rpx;
								margin-right: 10rpx;
								border-radius: 15rpx;
								padding: 15rpx;
								background-color: #d3ad58;
								color: #fff;
								font-size: 32upx;
								font-family: PingFang SC;
							}
							.img{
								min-width: 100rpx;
								width: 100rpx;
								height:100rpx;
								border-radius: 50%;
								image{
									width: 100%;
									height:100%;
								}
							}
						}
					}
				}
			}
			
			
		}
		.option-cont{
			position: fixed;
			bottom: 0rpx;
			height: 380rpx;
			width: 100%;
			background-color: #fff;
			border-radius: 60rpx 60rpx 0rpx 0rpx;
			padding: 30rpx;
			.option-title{
				width: 100%;
				padding-bottom: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32upx;
				font-family: PingFang SC;
				color: #111;
			}
			.options{
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.option-item{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					border: 1rpx solid #eee;
					margin-bottom: 30rpx;
					padding: 15rpx;
					border-radius: 5rpx;
					color: #ffffff;
					font-size: 32upx;
				}
				.green{
					background-color: #588e31;
				}
				.red{
					background-color: #c00000;
				}
			}
		}
		.title{
			padding: 15rpx 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			background-color: #d3ad58;
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
		}
		.patient-cont{
			padding: 15rpx;
			.chose-patient{
				padding: 30rpx;
				box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
				background-color: #fff;
				border-radius: 15rpx;
				.patient-box{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.patient-item{
						display: flex;
						align-items: center;
						justify-content: flex-start;
						.patient-tip{
							margin-top:6rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 32upx;
							font-family: PingFang SC;
							color: #ff0000;
						}
						.patient-title{
							margin-left: 10rpx;
							font-size: 32upx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #111111;
						}
					}
					
					
					.right{
						display: flex;
						align-items: center;
						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;
						}
					}
				}
			}
		}
		
		.items{
			padding: 15rpx;
			width: 100%;
			padding: 30rpx;
			border-radius: 15rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: flex-start;
			.item{
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-start;
				width: 100%;
				background-color: #f8f8f8;
				margin-bottom: 15rpx;
				.name{
					font-size: 32upx;
					font-family: PingFang SC;
					color: #2a2b2e;
					font-weight: bold;
					margin-bottom: 15rpx;
				}
				.options{
					margin: 15rpx 0rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10rpx;
					.option{
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 10rpx;
						width:20%;
						height:100rpx;
						border: 1rpx solid #9b9b9b;
						font-size: 28upx;
						font-family: PingFang SC;
						color: #2a2b2e;
						background-color: #fff;
						
						&:last-child{
							margin-right: 0rpx;
							margin-bottom: 0rpx;
						}
					}
					.active{
						border: 1rpx solid #d3ad58;
						background-color: #d3ad58;
						color: #fff;
					}
				}
			}
			
		}
		.btns{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 30rpx;
			.btn{
				height:80rpx;
				margin: 0rpx 30rpx;
				border-radius: 60rpx;
				width: 100%;
				border: 1rpx solid #d3ad58;
				font-size: 32supx;
				font-family: PingFang SC;
				color: #fff;
				font-weight: bold;
				background-color: #d3ad58;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.tips{
			flex-direction: column;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 30rpx;
			.tip-title{
				font-size: 26supx;
				font-family: PingFang SC;
				color: #888;
				font-weight: bold;
			}
			.desc{
				margin-top: 15rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #b8bdb5;
			}
		}
	}
	 
</style>