DaXingTiJian/mH5/src/views/ShowReport.vue

<template>
	<div>
		<LoadingD :status="loading"></LoadingD>
		<div class="showreport" v-if="reportinfo !=''">
			<div class="top">
				<van-row class="title">
					<van-col span="6">姓名：</van-col>
					<van-col span="18">{{reportinfo.name}}</van-col>
				</van-row>
				<van-row class="title">
					<van-col span="6">姓名：</van-col>
					<van-col span="18">{{reportinfo.tel}}</van-col>
				</van-row>
				<!-- <van-row class="title">
					<van-col span="6">性别：</van-col>
					<van-col span="18" v-if="reportinfo.sex==0">女</van-col>
					<van-col span="18" v-if="reportinfo.sex==1">男</van-col>
				</van-row> -->
				<van-row class="title">
					<van-col span="6">身份证：</van-col>
					<van-col span="18">{{reportinfo.id_card_num}}</van-col>
				</van-row>
				<van-row class="button">
					<!-- <van-col span="12"><van-button @click="gotoHealthCertificate" size="small" plain>查看健康证</van-button></van-col> -->
					<van-col span="24"><van-button  @click="previewReport" plain>查看报告</van-button></van-col>
				</van-row>
				<div class="title1">{{title}}</div>
			</div>
			<div class="bottom" v-if="reportinfo.items.length>0">
				<van-row style="margin-top: 20px;color: #9e9e9e;">
					<van-col span="4"></van-col>
					<van-col span="16">项目</van-col>
					<van-col span="4">结果</van-col>
				</van-row>
				<van-row v-for="(item, index) in reportinfo.items" :key="index" class="list">
					<van-col v-if="item.flag == '' || item.flag == null" span="4"><van-icon name="checked"
							color="#4dde79" size="20px" /></van-col>
					<van-col v-else span="4"><van-icon name="warning" color="#de554d" size="20px" /></van-col>
					<van-col span="16">{{ item.item_name }}</van-col>
					<van-col v-if="item.flag == '' || item.flag == null" span="4"><span
							style="color: #ccc;">无</span></van-col>
					<van-col v-else span="4">{{item.item_result}}</van-col>
				</van-row>

			</div>
		</div>

		<van-popup v-model:show="showPicker" round position="bottom">
			<van-picker :columns="columns" @cancel="showPicker = false" @confirm="selectPDF" />
		</van-popup>
	</div>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		RouterLink,
		useRouter,
		useRoute,
	} from 'vue-router';
	import {
		GetPersonReportDetail
	} from "@/api/api.js";
	import {
		showToast,
		showDialog
	} from 'vant';
	const route = useRoute()
	const router = useRouter();
	let type=route.query.type
	let loading = ref(false)
	let title=ref("");
	let list = [{
			name: "细菌性痢疾",
			value: "无"
		}, {
			name: "伤寒和副伤赛",
			value: "无"
		}, {
			name: "病毒性肝炎(甲型、戌型)",
			value: "无"
		}, {
			name: "活动性肺结核",
			value: "无"
		},
		{
			name: "化脓性或渗出性皮肤病",
			value: "无"
		}, {
			name: "手部真菌感染性疾病(如手癣、指甲癣等)",
			value: "无"
		}, {
			name: "霍乱",
			value: "无"
		}, {
			name: "阿米巴性痢疾",
			value: "无"
		}, {
			name: "手部湿疹",
			value: "无"
		}, {
			name: "手部的银屑病或者鳞屑",
			value: "无"
		},
	]
	document.title = '报告查询'
	let reportinfo = ref('')
	const getDetail = () => {
		let sfz = sessionStorage.getItem('sfz');
		loading.value = true
		GetPersonReportDetail({
			sfz: sfz,
			type:type
		}).then(res => {
			loading.value = false
			if (res.status) {
				reportinfo.value = res.data.info
				if(reportinfo.value.type==1){
					title.value="北京市从业人员体检结果"
				}
				if(reportinfo.value.type==2){
					title.value="老年人体检报告查询"
				}
				for (var i = 0; i < reportinfo.value.pdfs; i++) {
					let ii = 0;
					ii = i + 1;
					console.log(999)
					columns.value.push({
						text: '报告' + ii,
						value: i
					});
				}

				console.log(columns.value);
			} else {
				showToast(res.msg);
			}

		})
	}
	//跳转查看报告
	const previewReport = () => {
		// if(reportinfo.value.report_file !=undefined &&   reportinfo.value.report_file.length>2){
		// 	//router.push('/previewReport?tijian_num='+reportinfo.value.report_file)
		// 	  window.location.href=import.meta.env.VITE_APP_FILE_URL+  reportinfo.value.report_file
		// }else{
		// 	showDialog({
		// 		title: '通知',
		// 		message: "暂无报告可查询",
		// 		messageAlign: 'left',
		// 		confirmButtonText: '好的',
		// 		theme: 'round-button',
		// 		confirmButtonColor: "#33cdc9"
		// 	}).then(() => {

		// 	});
		// }
		if (reportinfo.value.pdfs > 0) {
			showPicker.value = true;


		} else {
			showDialog({
				title: '通知',
				message: "暂无报告可查询",
				messageAlign: 'left',
				confirmButtonText: '好的',
				theme: 'round-button',
				confirmButtonColor: "#33cdc9"
			}).then(() => {

			});
		}
	}
	const gotoHealthCertificate = () => {
		if (reportinfo.value.result_status == 1) {
			router.push('/healthCertificate')
		} else {
			showToast('暂无对应此次体检结果的健康证');
		}
	}
	let showPicker = ref(false);
	let columns = ref([])
	const selectPDF = ({
		selectedOptions
	}) => {
		showPicker.value = false;
		console.log(selectedOptions[0].value);

		router.push('/previewReport?recordid=' + reportinfo.value.id + '&pdf_num=' + selectedOptions[0].value)
	}
	onMounted(() => {
		getDetail()
	})
</script>
<style scoped>
	.showreport {
		height: 100vh;
		background: radial-gradient(circle at top center, #33cdc9 30%, #e3e3e3, transparent 2%);
		padding-top: 20px;
	}

	.title1 {
		text-align: center;
		font-size: 18px;
		background-color: #fff;
		padding: 10px 40px;
		border-radius: 20px;
		box-shadow: 0px 5px 5px #add2d1;
		color: #333;

		transform: translateY(20px);
		white-space: nowrap;
	}

	.top {
		color: #ffffff;
		background-color: #33cdc9;
		border: 1px solid #fff;
		margin: auto 10px;
		border-radius: 20px;
		padding: 20px 20px 0px 20px;


	}

	.top .button {
		margin-top: 10px;
	}

	.top .button .van-col {
		padding-left: 10px;
		padding-right: 10px;
	}

	.top .button .van-button {
		width: 100%;
	}

	.top .title {
		text-align: center;
		font-size: 18px;
		font-weight: 900;
		text-align: right;
		margin-top: 10px;

	}

	.top .title .van-col:last-child {
		text-align: left;
		padding-left: 10px;

	}

	.bottom {
		background-color: #fff;
		padding: 20px;


	}

	.bottom .list {
		margin-top: 10px;
		padding-bottom: 10px;
		border-bottom: 1px dotted #ddd;
	}
</style>