lookcommon_course/pages_index/test.vue

<template>
	<view class="content">
		<view class="patient-cont">
			<view class="chose-patient">
				<view class="patient-box" @click="addPatient()" v-if="patient==null">
					<text class="patient-title">选择体验者</text>
					<view class="right" >
						<text class="value">请点击添加</text>
						<image :src="imgPath+'/app/commonCourse/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="imgPath+'/app/commonCourse/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="imgPath+'/app/commonCourse/ai-img.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="imgPath+'/app/commonCourse/head-img.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-item" @click="optionClick(item,option)" v-for="(option) in JSON.parse(item.scoreJson)" >{{option.name}}</view>
			</view>
			
		</view>
		<!-- <view class="title">
			体质测试以当下感受为准作答，人的体质有可能会随季节变化。 
		</view>
		<view class="chose-patient">
			<view class="patient-box" @click="addPatient()" v-if="patient==null">
				<text class="patient-title">选择体验者</text>
				<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 class="items">
			<view class="item" v-for="(item,index) in items">
				<view class="name">{{index+1}}{{item.title}}？</view>
				<view class="options">
					<view :class="item.option!=null&&item.option==option.name?'option active':'option'" @click="optionClick(item,option)"   v-for="(option) in JSON.parse(item.scoreJson)">
						{{option.name}}
					</view>
				</view>
			</view>
			 
		</view>
		<view class="btns">
			<view class="btn" @click="submit()">提交</view>
		</view>
		<view class="tips">
			<view class="tip-title">提交代表你已接受以下声明</view>
			<view class="desc">
			  本测试不作为诊断和治疗的依据，对于已经医生确诊的疾病，应按照医嘱积极治疗。所提及的内容仅作为生活保健的咨询建议。如遇不适请及时就医。
			</view>
		</view> -->
	</view> 
</template>

<script>
	import {getTestTempDetails,getTestDetails ,doReport} from '@/api/test.js'
	export default {
		data() {
			return {
			 
				scrollTop:0,//滚动条位置
				formJson:null,
				tempId:null,
				patient:null,
				items:{},
				msgs:[],
				index:0,
				item:null,
			};
		},
		computed: {
			imgPath() {
			  return this.$store.state.imgpath
			},
		},
		onLoad(option) {
			this.tempId=option.tempId;
			var that=this;
			uni.$on('refreshOrderPatient', (res) => {
				that.patient=res
			})
			
		},
		onShow() {
			this.getTestTempDetails();
			this.getTestDetails();
			
		},
		//发送给朋友
		onShareAppMessage(res) {
			if(this.$isLogin()){
				return {
					title: "健康体质检测",
					path: '/pages_index/test?tempId='+this.tempId,
					imageUrl: this.$store.state.imgpath+'/app/image/logoshare.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}
			
		},
		//分享到朋友圈
		onShareTimeline(res) {
			if(this.utils.isLogin()){
				return {
					title: "健康体质检测",
					imageUrl: this.$store.state.imgpath+'/app/image/logoshare.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			}
			
		},
		methods:{
			getTestDetails(){
				let data = {tempId:this.tempId};
				getTestDetails(data).then(
					res => {
						if(res.code==200){
							uni.setNavigationBarTitle({
							      title: res.data.name+"自测"
							});
							 
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			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;
				}
				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.submit();
				}
				
			},
			getTestTempDetails(){
				var data={tempId:this.tempId}
				getTestTempDetails(data).then(
					res => {
						if(res.code==200){
							this.items=res.items;
							if(this.items.length>0){
								this.item=this.items[0];
								this.addMsg(1,this.item.title)
							}
						}
					},
					err => {
					}
				);
				
			},
			addPatient(){
				uni.navigateTo({
					url: '/pages_index/patient'
				})
			},
			submit(){
				
				var data={
					tempId:this.tempId,
					patientId:this.patient.patientId,
					formJson:JSON.stringify(this.items),
				}
				var that=this;
				doReport(data).then(res => {
					if(res.code==200){
						uni.redirectTo({
							url:"/pages_index/testResult?reportId="+res.reportId
						})
					}else{
						uni.showToast({
							icon:'none',
							title: res.msg,
						});
					}
				});
				// uni.showModal({
				//     title: '提示',
				//     content: '确定提交吗',
				//     success: function (res) {
				//         if (res.confirm) {
				// 			doReport(data).then(res => {
				// 				if(res.code==200){
				// 					uni.navigateTo({
				// 						url:"/pages_index/testResult?reportId="+res.reportId
				// 					})
				// 				}else{
				// 					uni.showToast({
				// 						icon:'none',
				// 						title: res.msg,
				// 					});
				// 				}
				// 			});
				//         } 
				// 		else if (res.cancel) {
				//         }
				//     }
				// });
			}
		}
	}
</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: 28upx;
								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: 28upx;
								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: 550rpx;
			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{
				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: 10rpx;
					padding: 15rpx;
					border-radius: 5rpx;
				}
			}
		}
		.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-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;
						}
					}
				}
			}
		}
		
		.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;
					.option{
						margin-right: 10rpx;
						margin-bottom: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 10rpx;
						width:20%;
						height:80rpx;
						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>