zhangwurenminyiyuan_tj/彰武县人民医院报告对比/pages/main/choose/choose.vue

<script setup>
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2023年3月19日 09:51:09
	 */
	import {
		onMounted,
		ref
	} from 'vue'
	import {
		ReportListAction,
		$image,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const $props = defineProps({
		id_number: {
			type: String,
			default: ''
		},
		hospital: {
			type: String,
			default: ''
		},
	});
	const ReportList = async () => {
		const response = await ReportListAction({
			id_number: $props.id_number
		})
		$response(response, () => {
			report_list.value = response.data.list
		})
	}
	const report_list = ref([])
	onMounted(() => {
		ReportList()
	})
	const choose_active = ref([])
	const chooseReportClick = (key) => {
	    let index = choose_active.value.indexOf(key);
	    if (index === -1) { // 如果当前点击的报告没有被选中
	        if (choose_active.value.length === 2) {
	            uni.$lu.toast("最多选择两份报告对比");
	        } else {
	            choose_active.value.push(key); // 添加到已选报告列表
	        }
	    } else { // 当前点击的报告已经被选中了，执行删除操作
	        choose_active.value.splice(index, 1); // 注意这里应该是index而不是key
	    }
	}

	const chooseDoneClick = () => {
		if (choose_active.value.length !== 2) {
			uni.$lu.toast("请选择两份报告对比")
		} else {
			let r1 = report_list.value[choose_active.value[0]].id
			let r2 = report_list.value[choose_active.value[1]].id
			uni.navigateTo({
				url: `/pages/main/contrast/contrast?hospital=${$props.hospital}&type=1&r1=${r1}&r2=${r2}`
			})
		}
	}
</script>
<template>
	<view>
		<view class="tip_top_blank_wrapper"></view>
		<view class="tip_wrapper">
			<view class="tip_icon_wrapper">
				<image :src="$image('/storage/assets/report/choose/提示@2x.png')"></image>
			</view>
			<view class="tip_text_wrapper">由于手机上显示体检报告，最多选择两份报告对比！</view>
			<view @click="chooseDoneClick()" class="tip_button_wrapper">对比</view>
		</view>
		<view class="report_list_wrapper">
			<view @click="chooseReportClick(k)" class="report_item_wrapper" v-for="(i,k) in report_list" :key="k">
				<view class="report_item_choose_wrapper">
					<image v-if="choose_active.indexOf(k) === -1" :src="$image('/storage/assets/report/choose/未选中@2x.png')">
					</image>
					<image v-else :src="$image('/storage/assets/report/choose/选中@2x.png')"></image>
				</view>
				<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 class="report_item_content_desc_wrapper">{{ i.desc }}</view>
				</view>
				<view class="report_item_right_wrapper">
					<image :src="$image('/storage/assets/report/home/右箭头@2x.png')"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.report_item_choose_wrapper image {
		width: 37rpx;
		height: 37rpx;
		display: block;
	}

	.report_item_choose_wrapper {
		width: 37rpx;
		height: 37rpx;
		margin-left: 20rpx;
	}

	.tip_top_blank_wrapper {
		height: 15rpx;
	}

	.tip_text_wrapper {
		width: 431rpx;
		text-align: left;
		font-size: 24rpx;
		font-weight: 500;
		color: #B37531;
		line-height: 36rpx;
		margin-left: 24rpx;
	}

	.tip_button_wrapper {
		width: 132rpx;
		height: 58rpx;
		background: #F96B09;
		border-radius: 12rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #F9E9C7;
		line-height: 58rpx;
		margin-left: 57rpx;
		text-align: center;
	}

	.tip_icon_wrapper image {
		width: 49rpx;
		height: 49rpx;
		display: block;
	}

	.tip_icon_wrapper {
		width: 49rpx;
		height: 49rpx;
		margin-left: 34rpx;
	}

	.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;
		top: 141rpx;
		background: #ffffff;
		padding-bottom: 20rpx;
		overflow-y: auto;
	}

	.tip_wrapper {
		width: 750rpx;
		height: 110rpx;
		background: linear-gradient(90deg, #FCF4E0 0%, #F9E6C0 100%);
		display: flex;
		align-items: center;
	}
</style>