rtim/pages/store/packageForm.vue

<template>
	<view>
		<view class="content">
			<choosePatient ref="choosePatient" class="patient" :patient="patient" @addPatient="addPatient"></choosePatient>
			<!-- <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> -->
							<image class="img" mode="aspectFill" :src="agreement.avatar?agreement.avatar:'https://fs-1319721001.cos.ap-chongqing.myqcloud.com/fs/20240229/1d7eb0607a074892964dd32e8735e540.jpg'"></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" mode="aspectFill" :src="avatar?avatar:'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>
		</view> 
		<!-- <u-modal @cancel="close()" @confirm="confirm()" :show="show" title="温馨提示" :content='content'></u-modal> -->
		<u-modal @cancel="close()" @confirm="confirm()" :show="show" title="温馨提示" :content='content' :showConfirmButton="percentage==100||isComplete==0">
			<view class="slot-content">
				<view>{{content}}</view>
				<view style="margin-top: 24rpx;" v-if="isComplete==1">
					<u-line-progress :percentage="percentage" activeColor="#FF5C03"></u-line-progress>
					<view style="margin-top: 16rpx;color: red;text-align: center;" v-show="percentage<100">医生正在为您开具处方，请耐心等候!</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {getIcdNameByPackageId} from '@/api/package.js'
	import {create,giftCreate,getAgreement} 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'},
						]
					},
					{
						title:"请选择线下已确诊疾病",
						options:[]
					}
				],
				msgs:[],
				index:0,
				item:null,
				notice:[
					{title:"好的。我将根据您提交的复诊信息开具处方，请详细阅读药品说明书，遵医嘱用药。"},
					{title:"您存在用药禁忌证，目前不推荐购买此套餐包。建议您尽早就医，在医生指导下采取针对性的治疗措施!在改善相关禁忌证后，也可以再次咨询，重新评估是否可以使用该套餐包。"}
					
				],
				packageId:null,
				doctorId:null,
				isComplete:0,
				companyUserId:null,
				companyId:null,
				choose: 0, // 1:付邮费领取 2:加粉领取
				docAvatar:'',
				avatar: '',
				paddingTop: 130,
				agreement: {},
				percentage: 0,
				showConfirmButton: false,
				interval: null
			};
		},
		onLoad(option) {
			this.avatar = uni.getStorageSync('userInfo')&&JSON.parse(uni.getStorageSync('userInfo')).avatar
			this.choose = option.choose || 0
			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
				setTimeout(()=>{
					this.getpaddingTop()
				},100)
			})
			this.item=this.items[0];
			this.addMsg(1,this.item.title);
			this.getAgreement()
			this.getIcdName()
		},
		onShow() {
			this.$nextTick(()=>{
				this.$refs.choosePatient.getPatientList()
			})
		},
		onUnload() {
			if(this.interval) {
				clearInterval(this.interval);
			}
		},
		methods:{
			animatePercentage() {
			  const duration = Math.floor(Math.random() * (10000 - 4000 + 1)) + 4000; // 4-10秒，单位毫秒
			  const steps = 100;
			  const intervalTime = duration / steps;
			
			  this.percentage = 0;
			
			  this.interval = setInterval(() => {
			    this.percentage++;
			    if (this.percentage >= 100) {
			      clearInterval(this.interval);
			    }
			  }, intervalTime);
			},
			getIcdName() {
				this.items[2].options = []
				getIcdNameByPackageId({packageId:this.packageId}).then(res=>{
					if(res.code == 200&&res.icdNames.length>0) {
						this.items[2].options= res.icdNames.map((item,i)=>({
							name:item,
							value:i+1,
							color:'green'
						}))
						const obj = {
							name: '其他',
							value: this.items[2].options.length+1,
							color: 'green'
						}
						this.items[2].options.push(obj)
					} else {
						this.items[2].options = [{
							name: '其他',
							value: 1,
							color: 'green'
						}]
					}
				})
			},
			getpaddingTop() {
				uni
				  .createSelectorQuery().in(this)
				  .select(".patient")
				  .boundingClientRect((res) => {
					this.paddingTop = res&&res.height;
				  })
				  .exec();
			},
			getAgreement() {
				getAgreement().then(res=>{
					if(res.code==200) {
						this.agreement = res.doctor || {}
						uni.setNavigationBarTitle({
						  title: this.agreement.doctorName || '问答'
						});
					}
				})
			},
			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;
				setTimeout(()=>{
					uni.createSelectorQuery().in(this)
					  .select(".msgs")
					  .boundingClientRect((res) => {
						if(res) {
							const scrollH = res.height;
							that.scrollTop = scrollH;
							console.log(that.scrollTop,res)
						}
						
					  })
				  .exec();
				},100) 
				
			},
			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;
					if(this.interval) {
						clearInterval(this.interval);
					}
					this.animatePercentage()
					return;
				}
				
			},
			addPatient(){
				uni.navigateTo({
					url: '/pages/user/patient'
				})
			},
			submit(){
				uni.showLoading({
					title:"处理中..."
				});
				const num = Math.floor(Math.random() * (this.items[2].options.length-1));
				this.items = this.items.map(item=>({
					...item,
					option: item.title == "请选择线下已确诊疾病"&&item.option =='其他' ? item.options[num].name:item.option
				}))
				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),
				}
				
				//#ifdef APP-PLUS
				    data.source=2;
				//#endif
				//#ifdef H5
				    data.source=3;
				//#endif
				if(this.choose == 1 || this.choose == 2) {
					this.giftCreateOrder(data)
					return
				}
				var that=this;
				create(data).then(res => {
					uni.hideLoading()
					
					if(res.code==200){
						setTimeout(function(){
							uni.navigateTo({
								url: '/pages/store/packageOrderPay?orderId='+res.order.orderId
							})
						},200);
						// var temps=['jARl4BpoBkRu-2MxPMkQVhIfGMG0V9qW-X3V_7NtEOU']
						// uni.requestSubscribeMessage({
						// 	tmplIds: temps,
						// 	success(e) {
								
						// 	},
						// 	fail(e) {
						// 		setTimeout(function(){
						// 			uni.navigateTo({
						// 				url: '/pages_order/packageOrderPay?orderId='+res.order.orderId
						// 			})
						// 		},200);
						// 	}
						// })
						
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				});
			 
			},
			giftCreateOrder(data) {
				var that=this;
				const param = {
					...data,
					choose: this.choose, //1:付邮费领取 2:加粉领取
				}
				giftCreate(param).then(res => {
					uni.hideLoading()
					
					if(res.code==200){
						setTimeout(function(){
							uni.navigateTo({
								url: '/pages/store/packageOrderPay?orderId='+res.order.orderId+'&choose='+that.choose
							})
						},200);
						// var temps=['jARl4BpoBkRu-2MxPMkQVhIfGMG0V9qW-X3V_7NtEOU']
						// uni.requestSubscribeMessage({
						// 	tmplIds: temps,
						// 	success(e) {
								
						// 	},
						// 	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" scoped>
	.content{
		flex: 1;
		width: 100%;
		// #ifdef H5
		height: calc(100vh - 44px - var(--status-bar-height));
		// #endif
		// #ifndef H5
		height: 100vh;
		// #endif
		display: flex;
		flex-direction: column;
		overflow: hidden;
		position: relative;
		.msg-cont{
			width: 100%;
			flex: 1;
			overflow: hidden;
			.msg-scroll{
				height: 100%;
				.msgs{
					width: 100%;
					padding: 6rpx 0;
					.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: #FF5C03;
								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{
			flex-shrink: 0;
			// position: fixed;
			// bottom: 0rpx;
			// #ifndef APP-PLUS
			max-height: 90vh;
			overflow-y: auto;
			// #endif
			// #ifdef APP-PLUS
			// height: 380rpx;
			// #endif
			width: 100%;
			background-color: #fff;
			border-radius: 60rpx 60rpx 0rpx 0rpx;
			padding: 24rpx 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: 20rpx;
					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: #FF5C03;
			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 #FF5C03;
						background-color: #FF5C03;
						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 #FF5C03;
				font-size: 32supx;
				font-family: PingFang SC;
				color: #fff;
				font-weight: bold;
				background-color: #FF5C03;
				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>