gaobuyiyuan_baogao/高埗医院体检平台报告对比/pages/main/list/list.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年3月19日 09:51:09
	 */
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		HospitalExtraReportStatusAction,
		ReportListAction,
		$image,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import Empty from '../../../components/Empty.vue';
	let tishi=ref('')
	const $props = defineProps({
		id_number: {
			type: String,
			default: ''
		},
		hospital: {
			type: String,
			default: ''
		},
	});
	const ReportList = async () => {
		uni.showLoading({
			title: '加载中'
		});
		const response = await ReportListAction({
			id_number: $props.id_number
		})
		uni.hideLoading();
		$response(response, () => {
			report_list.value = response.data.list
			if(report_list.value.length===0){
				tishi.value='暂无报告'
			}
		})
	}
	const report_list = ref([])

	const toPage = (page) => {
		uni.navigateTo({
			url: `/pages/main/${page}/${page}?hospital=${$props.hospital}&id_number=${$props.id_number}`
		})
	}
	const toReport = (id) => {
		uni.navigateTo({
			url: `/pages/main/report/report?hospital=${$props.hospital}&type=1&id=${id}`
		})
	}

	const report_status = ref(false)
	const HospitalExtraReportStatus = async () => {
		const response = await HospitalExtraReportStatusAction()
		$response(response, () => {
			report_status.value = response.data.info.open === 1
		})
	}

	onMounted(() => {
		ReportList()
		HospitalExtraReportStatus()
	})
</script>
<template>
	<view>
		<view v-if="!!report_status" class="top_button_group_wrapper">
			<view @click="toPage('choose')" class="top_button_wrapper top_button1_wrapper">
				<view class="top_button_icon_wrapper">
					<image :src="$image('/storage/assets/report/home/报告对比@2x.png')"></image>
				</view>
				<view class="top_button_text_wrapper">报告对比</view>
			</view>
			<view @click="toPage('analysis')" class="top_button_wrapper top_button2_wrapper">
				<view class="top_button_icon_wrapper">
					<image :src="$image('/storage/assets/report/home/趋势分析@2x.png')"></image>
				</view>
				<view class="top_button_text_wrapper">趋势分析</view>
			</view>
		</view>
		<view class="tip_wrapper">
			<text class="tip_title_wrapper">温馨提示：</text>
			<text class="tip_text_wrapper">如电子报告与纸质报告不相符，请以纸质版报告为准</text>
		</view>
		<view v-if="report_list.length>0" class="report_list_wrapper" :style="{top : !!report_status ? '222rpx' : '85rpx'}">
			<view @click="toReport(i.id)" class="report_item_wrapper" v-for="(i,k) in report_list" :key="k">
				<view class="report_item_icon_wrapper">
					<image :src="$image('/storage/assets/report/home/报告@2x.png')"></image>
				</view>
				<view class="report_item_content_wrapper">
					<view class="report_item_content_title_wrapper">{{ i.title }}</view>
					<view style="display: flex;justify-content: space-between;">
						<view class="report_item_content_desc_wrapper">{{ i.desc }}</view>
						<view class="report_item_content_desc_wrapper" style="color: #7accaa;">{{ i.tj_type }}</view>
					</view>
					
				</view>
				<view class="report_item_right_wrapper">
					<image :src="$image('/storage/assets/report/home/右箭头@2x.png')"></image>
				</view>
			</view>
		</view>
		<view v-else style="margin-top: 20%; font-size: 28rpx; color: #666; text-align: center;">
			<view v-if="tishi!==''" style="display: flex;align-items: center;width: 100%; justify-content: center;">
				<Empty title="暂无报告" style="width: 30%;"></Empty>
					 
			</view>
		</view>
	</view>
</template>
<style scoped>
	.report_item_right_wrapper image {
		width: 15rpx;
		height: 26rpx;
		display: block;
	}

	.report_item_right_wrapper {
		position: absolute;
		width: 15rpx;
		height: 26rpx;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.report_item_content_desc_wrapper {
		font-size: 22rpx;
		font-weight: 500;
		color: #939898;
		line-height: 1;
		margin-top: 18rpx;
	}

	.report_item_content_title_wrapper {
		font-size: 28rpx;
		font-weight: bold;
		color: #222222;
		line-height: 1;
	}

	.report_item_content_wrapper {
		margin-left: 35rpx;
	}

	.report_item_icon_wrapper image {
		width: 45rpx;
		height: 50rpx;
		display: block;
	}

	.report_item_icon_wrapper {
		width: 45rpx;
		height: 50rpx;
		margin-left: 21rpx;
	}

	.report_item_wrapper {
		position: relative;
		width: 710rpx;
		height: 130rpx;
		background: #F3FAFA;
		box-shadow: 0px 1rpx 0px 0px rgba(22, 197, 169, 0.2);
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		margin: 20rpx auto 0;
	}

	.report_list_wrapper {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: #ffffff;
		overflow-y: auto;
		padding-bottom: 20rpx;
	}

	.tip_title_wrapper {
		font-weight: bold;
	}

	.tip_wrapper {
		width: 750rpx;
		height: 70rpx;
		background: linear-gradient(90deg, #FCF4E0 0%, #F9E6C0 100%);
		margin-top: 16rpx;
		font-size: 24rpx;
		color: #B37531;
		line-height: 70rpx;
		text-align: center;
	}

	.top_button_text_wrapper {
		font-size: 32rpx;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 1;
		margin-left: 18rpx;
	}

	.top_button_icon_wrapper image {
		width: 68rpx;
		height: 68rpx;
		display: block;
	}

	.top_button_icon_wrapper {
		width: 68rpx;
		height: 68rpx;
	}

	.top_button2_wrapper {
		background: #2C88FE;
		margin-left: 25rpx;
	}

	.top_button1_wrapper {
		background: #16C5A9;
		margin-right: 25rpx;
	}

	.top_button_wrapper {
		width: 310rpx;
		height: 84rpx;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.top_button_group_wrapper {
		height: 120rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>