179crm_user_app/pages_user/user/dataAnalysis.vue

<template>
	<view class="content">
		<view class="top-fixed">
			<view class="contrast align-center justify-between">
				<!-- <view class="left">
					<view class="title">体检报告</view>
					<view class="time">{{examDate}}</view>
				</view> -->
				<picker mode="selector" :range="list" range-key="name" @change="bindNameChange1($event,list)">
					<view v-if="reportDate1==null" class="left">
						<image src="/static/images/user/add_icon.png" class="w24 h24"></image>
						<view class="title">选择对比报告</view>
						<!-- <view class="input-box"> -->
							<!-- <input type="text" :value="reportName" placeholder="选择对比报告" class="form-input" disabled="disabled" /> -->
						<!-- </view> -->
					</view>
					<view v-if="reportDate1!==null" class="left column">
						<view class="title">体检报告</view>
						<view class="time">{{reportDate1}}</view>
					</view>
				</picker>
				<view class="middle">
					<view>对比</view>
				</view>
				<picker mode="selector" :range="list" range-key="name" @change="bindNameChange2($event,list)">
					<view v-if="reportDate2==null" class="right align-center justify-center">
						<image  src="/static/images/user/edit_add_icon12.png" class="w24 h24"></image>
						<view class="title">选择对比报告</view>
						<!-- <view class="input-box"> -->
							<!-- <input type="text" :value="reportName" placeholder="选择对比报告" class="form-input" disabled="disabled" /> -->
						<!-- </view> -->
					</view>
					<view v-if="reportDate2!==null" class="right date">
						<view class="title">体检报告</view>
						<view class="time">{{reportDate2}}</view>
					</view>
				</picker>

			</view>
			<!-- tab切换 -->
			<view class="pub-tab-box">
				<scroll-view scroll-x="true">
					<view class="tab-inner">
						<view v-for="(item,index) in orderStatus" :key="index"
							:class="item.cateId == showType?'item active':'item'" @click="orderStatusChange(item)">
							<view class="text">
								{{ item.cateName }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- <mescroll-body top="254upx" ref="mescrollRef"> -->
			<view class="form-box mt" v-if="showType==10000">
				<view class="form-title">身体信息报告对比</view>
				<view class="form-item line">
					<text class="label flex1">项目</text>
					<text class="label flex2">对比报告</text>
					<text class="label flex2">目标报告</text>
					<text class="label flex3">变化</text>
				</view>
				<view class="form-item">
					<text class="label flex1">身高</text>
					<text class="label flex2">{{form?form.height:'-'}}cm</text>
					<text class="label flex2">{{data.report2?data.report2.height:'-'}}cm</text>
					<text v-if="comparison.heightDiff==0 || comparison==null" class="label flex3">--</text>
					<image v-else class="w24 h24" :class="comparison.heightDiff>0?'rotated':''" src="@/static/images/user/change_arrow_icon.png"></image>
			
				</view>
				<view class="form-item">
					<text class="label flex1">体重</text>
					<text class="label flex2">{{form?form.weight:'-'}}kg</text>
					<text class="label flex2">{{data.report2?data.report2.weight:'-'}}kg</text>
					<text v-if="comparison.weightDiff==0||comparison==null" class="label flex3">--</text>
					<image v-else class="w24 h24" :class="comparison.weightDiff>0?'rotated':''" src="@/static/images/user/change_arrow_icon.png"></image>
				</view>
				<view class="form-item">
					<text class="label flex1">BMI</text>
					<text class="label flex2">{{form?form.bmi:'-'}}</text>
					<text class="label flex2">{{data.report2?data.report2.bmi:'-'}}</text>
					<text v-if="comparison.bmiDiff==0||comparison==null" class="label flex3">--</text>
					<image v-else class="w24 h24" :class="comparison.bmiDiff>0?'rotated':''" src="@/static/images/user/change_arrow_icon.png"></image>
				</view>
			</view>
			<view class="form-box mt" v-if="showType!==10000">
				<view class="form-title">指标检查报告对比</view>
				<view class="form-item line">
					<text class="label flex1">项目</text>
					<text class="label flex2">对比报告</text>
					<text class="label flex2">目标报告</text>
					<text class="label flex3">变化</text>
				</view>
				<view class="form-item" v-for="(item,index) in comparison" :key="index">
					<text class="label flex1">{{item.indicatorName||'-'}}</text>
					<text class="label flex2">{{item.value1||'-'}}</text>
					<text class="label flex2">{{item.value2||'-'}}</text>
					<text v-if="item.change==0||item==null" class="label flex3">--</text>
					<image v-else class="w24 h24" :class="item.value2>item.value1?'rotated':''" src="@/static/images/user/change_arrow_icon.png"></image>
				</view>
			<!-- 	<view class="form-item">
					<text class="label flex1">低密度脂蛋白胆固醇</text>
					<text class="label flex2">3.57</text>
					<text class="label flex2">3.17</text>
					<view class="flex3">
						<image class="w24 h24" src="@/static/images/user/change_arrow_icon.png"></image>
					</view>

				</view>
				<view class="form-item">
					<text class="label flex1">低密度脂蛋白胆固醇</text>
					<text class="label flex2">3.57</text>
					<text class="label flex2">3.17</text>
					<view class="flex3">
						<image class="w24 h24" src="@/static/images/user/change_arrow_icon.png"></image>
					</view>
				</view> -->
			</view>
		<!-- </mescroll-body> -->
	</view>
</template>

<script>
	import reportListVue from './reportList.vue';
import {
		getAllCateByReportId,
		compareReport,
		getReportList,
		getUserReportList,
		getByUserAndDate,
		listByReport
	} from '@/api/companyUser.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				orderStatus: [{
						cateName: "身体信息",
						cateId: 10000
					},
					{
						cateName: "指标检查",
						cateId: 10001
					},
					// {
					// 	name: "查体",
					// 	val: 3
					// },
					// {
					// 	name: "肝脏功能",
					// 	val: 4
					// },
				],
				examDate:this.utils.timeFormat(new Date(),'yyyy-mm-dd'),
				list: [],
				title: '体检报告',
				show: false,
				showType: 10000,
				mescroll: null,
				// 上拉加载的配置
				upOption: {
					onScroll: true,
					use: true, // 是否启用上拉加载; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						icon: '/static/images/no_data.png',
						tip: '暂无数据'
					}
				},
				// 列表数据
				// dataList: [{
					
				// 		orderId: 1,
				// 		name: '今日 11:22',
				// 		time: '4分16秒',
				// 		num: 2.12,
				// 		text: '参考范围:0-1.75 单位:U/L'
				// 	},
				// 	{
				// 		orderId: 2,
				// 		name: '昨天 09:16',
				// 		time: '4分16秒',
				// 		num: 2.12,
				// 		text: '参考范围:0-1.75 单位:U/L'
				// 	},
				// 	{
				// 		orderId: 3,
				// 		name: '1月12 13:06',
				// 		time: '4分16秒',
				// 		num: 2.12,
				// 		text: '参考范围:0-1.75 单位:U/L'
				// 	}
				// ],
				form:null,
				result:null,
				data:null,
				report1:null,
				report2:null,
				comparison:null,
				reportName:null,
				reportDate1:null,
				reportDate2:null
			}
		},
		onLoad(options) {
			this.userId = options.userId;
			this.reportId = options.id;
			// this.getByUserAndDate()
			this.getUserReportList()
			// this.listByReport()
			// this.getAllCateByReportId()
			// this.getReportList()
			// uni.$on('refreshDoctorOrder', () => {
			// 	this.mescroll.resetUpScroll()
			// })

		},
		methods: {
			pay(item) {
				uni.navigateTo({
					url: '/pages_/doctor/paymentOrder?orderId=' + item.orderId
				})
			},
			open() {
				this.show = true
			},
			selectClick() {

			},
			navgetTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			bindNameChange1:function(e,list){
				this.report1 = list[e.target.value].reportId
                this.examDate=list[e.target.value].examDate
				this.reportDate1=list[e.target.value].examDate
			    this.getByUserAndDate(this.report1)
				// this.listByReport(this.report1)
			},
			bindNameChange2:function(e,list){
				this.report2 = list[e.target.value].reportId
				this.reportDate2=list[e.target.value].examDate
				this.compareReport()
			},
			getAllCateByReportId(id) {
				var data = {
					reportId: id,
				}
				getAllCateByReportId(data).then(
					res => {
						if (res.code == 200) {
							this.orderStatus = this.orderStatus.concat(res.data)

						} else {
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			listByReport(id) {
				listByReport(id).then(
					res => {
						if (res.code == 200) {
							this.result= res.data;
							// this.report1=res.data.reportId;
							// this.reportDate1=res.data.examDate
							// this.getAllCateByReportId(this.form.reportId)
			
						} else {
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			getByUserAndDate() {
				var data={
					 examDate:this.examDate,
					 userId:this.userId
				}
				getByUserAndDate(data).then(
					res => {
						if (res.code == 200) {
							this.form = res.data;
							// this.report1=res.data.reportId;
							// this.reportDate1=res.data.examDate
							// this.getAllCateByReportId(this.form.reportId)
			
						} else {
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			getUserReportList() {
				// var data={
				// 	 reportId:this.reportId,
				// }
				getUserReportList(this.userId).then(
					res => {
						if (res.code == 200) {
							this.list= res.data.map(item=>({
								name:'体检报告 '+item.examDate,
								reportId:item.reportId,
								examDate:item.examDate}));

						} else {
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			compareReport() {
				var data = {
					report1: this.report1,
					report2: this.report2,
					type:this.showType==10000?0:1

				}
				compareReport(data).then(
					res => {
						if (res.code == 200) {
							this.data=res.data
							this.comparison=res.data.comparison
							// this.reportInfo1=data.resport1
							// this.reportInfo2=data.resport2
						} else {
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			listByUser() {
				// var data={
				// 	 reportId:this.reportId,
				// }
				listByUser(this.userId).then(
					res => {
						if (res.code == 200) {
							this.tags = res.data;

						} else {
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			cancel(item) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定取消订单吗',
					success: function(res) {
						if (res.confirm) {
							var data = {
								orderId: item.orderId
							};
							cancelOrder(data).then(res => {
								if (res.code == 200) {
									uni.showToast({
										icon: 'success',
										title: '订单已取消',
									});
									that.mescroll.resetUpScroll()
								} else {
									uni.showToast({
										icon: 'none',
										title: res.msg,
									});
								}
							});
						} else if (res.cancel) {}
					}
				});
			},
			// tab切换
			orderStatusChange(item) {
				this.showType = item.cateId
				this.compareReport()
				// this.mescroll.resetUpScroll()
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(page) {
				//联网加载数据
				var that = this;
				var data = {
					status: this.showType,
					page: page.num,
					pageSize: page.size
				};
				// getMyDoctorOrderList(data).then(res => {
				// 	if(res.code==200){
				// 		//设置列表数据
				// 		if (page.num == 1) {
				// 			that.dataList = res.data.list; 

				// 		} else {
				// 			that.dataList = that.dataList.concat(res.data.list);

				// 		}
				// 		that.mescroll.endBySize(res.data.list.length, res.data.total);

				// 	}else{
				// 		uni.showToast({
				// 			icon:'none',
				// 			title: "请求失败",
				// 		});
				// 		that.dataList = null;
				// 		that.mescroll.endErr();
				// 	}
				// });
			},
			showDetail(item) {
				if (item.orderType == 1) {
					uni.navigateTo({
						url: '/pages_doctor/doctorOrderIM?orderId=' + item.orderId
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.mt{
		margin-top: 254rpx;
	}
	.content {
		padding: 20upx;

		.top-fixed {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 10;
			background: #fff;
		}
.rotated{
transform: rotate(180deg);
}
		.contrast {
			padding: 20rpx 30rpx;

			.left {
				width: 304rpx;
				height: 128rpx;
				background: #008FD3;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				display: flex;
				
				align-items: center;
				justify-content: center;
&.column{
	flex-direction: column;
}
				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					line-height: 40rpx;
					color: #FFFFFF;
					text-align: center;
				}

				.time {
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}

			.middle {
				width: 56rpx;
				height: 56rpx;
				line-height: 56rpx;
				background: #008FD3;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #FFFFFF;
				text-align: center;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
			}

			.right {
				width: 304rpx;
				height: 124rpx;
				background: #E4F6FF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #008FD3;
                 &.date{
					 display: flex;
					 flex-direction: column;
					 align-items: center;
					 justify-content: center;
				 }
				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #008FD3;
				}
				.time {
					font-weight: 400;
					font-size: 24rpx;
					color: #008FD3;
					text-align: center;
				}
				// .form-input{
					
				// }
			}
		}

		.pub-tab-box {
			box-sizing: border-box;
			width: 100%;
			// padding: 0 40upx;
			background-color: #FFFFFF;

			.tab-inner {
				height: 88upx;
				line-height: 88upx;
				display: flex;
				align-items: center;
				position: relative;
				// justify-content: space-between;
				// overflow-x: auto;
			}

			.item {
				// flex: 1;
				font-size: 28upx;
				white-space: nowrap;
				line-height: 1;
				font-family: PingFang SC;
				font-weight: 500;
				color: #626468;
				// margin-right: 60upx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 30rpx;

				&:last-child {
					margin-right: 0;
				}

				&.active {
					font-weight: bold;
					color: #222426;

					&::after {
						content: "";
						width: 48rpx;
						height: 8rpx;
						background: linear-gradient(120deg, #31A1FE 0%, #008FD3 100%);
						position: absolute;
						bottom: 0;
						border-radius: 6upx 6upx 0upx 0;
					}
				}

				.text {
					position: relative;
					z-index: 1;
				}

				.tab-bg {
					width: 72upx;
					height: 28upx;
					position: absolute;
					top: 17upx;
					left: 50%;
					transform: translateX(-36upx);
					z-index: -1;
				}
			}
		}

		.btn-box2 {
			z-index: 9999;
			width: 100%;
			padding: 30upx;
			position: fixed;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			background: #FFFFFF;


			.sub-btn {
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #008FD3;
				border-radius: 44upx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					margin-right: 16rpx;
				}
			}
		}

		.form-box {
			padding: 0 30upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin-bottom: 20upx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;

			.form-title {
				font-family: PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: #222426;
				text-align: left;
				padding: 30rpx 0;
				display: block;
			}

			.line {
				border-top: 1rpx solid #EFF3F7;
				border-bottom: 1rpx solid #EFF3F7;
			}

			.form-item {
				width: 100%;
				padding: 30upx 0;
				display: flex;
				align-items: flex-start;

				.label {

					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #626468;
					text-align: left;
					padding-right: 20rpx;
					box-sizing: border-box;
				}

				.flex1 {
					width: 30%;
				}

				.flex2 {
					width: 25%;
				}

				.flex3 {
					width: 20%;
				}
			}
		}

		.index-body {
			.title-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 30rpx 0;

				.left-title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #222426;
					text-align: left;
				}

				.right {
					width: 216rpx;
					height: 64rpx;
					font-weight: 400;
					font-size: 24rpx;
					color: #626468;
					justify-content: center;
					background: #FFFFFF;
					border-radius: 32rpx 32rpx 32rpx 32rpx;

					text {
						margin-left: 5rpx;
					}
				}
			}
		}

		.sms-list {
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;

			.item {
				padding: 0rpx 20rpx;
				background: #FFFFFF;

				.item-box {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;

					border-bottom: 1rpx solid #ECECEC;
					height: 150rpx;
					padding: 30rpx 0;

					.left {
						flex: 1;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						justify-content: space-between;
						height: 100%;


						.title {
							font-family: PingFang SC, PingFang SC;
							font-weight: 600;
							font-size: 32rpx;
							color: #222426;
							text-align: left;
						}

						.unit {
							font-weight: 400;
							font-size: 28rpx;
							color: #898E91;
							text-align: left;
						}

						.num {
							font-family: PingFang SC, PingFang SC;
							font-weight: 600;
							font-size: 32rpx;
							color: #FF5030;
							text-align: left;
							margin-right: 16rpx;
						}

						.tag {
							width: 58rpx;
							height: 30rpx;
							line-height: 30rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 21rpx;
							color: #FF4B33;
							text-align: center;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							border: 1rpx solid #FFA599;
						}

						.reference {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #898E91;
							text-align: left;
						}
					}

				}

				&:last-child .item-box {
					border-bottom: 0;
				}
			}

		}

	}
</style>