hainan_2024/h5/pages/buy/contrast/contrast.vue

<script setup>
	import DraggableButton from "@/pages/components/goHome.vue";
	/**
	 * name：
	 * user：sa0ChunLuyu
	 * date：2024年9月11日 19:24:50
	 */
	import {
		ref,
		computed
	} from 'vue'
	import {
		$api,
		$response
	} from '@/api'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useStore
	} from '@/store'
	const $store = useStore()

	const combo_info = ref([null, null, null])
	const item_info = computed(() => {
		let item_map = {}
		for (let i = 0; i <= 2; i++) {
			if (!!combo_info.value[i]) {
				for (let j = 0; j <= combo_info.value[i].items.length - 1; j++) {
					let item_id = combo_info.value[i].items[j].id
					if (!(item_id in item_map)) {
						item_map[item_id] = {
							name: combo_info.value[i].items[j].name,
							group: combo_info.value[i].items[j].keshi_name,
							value: [false, false, false]
						}
					}
					item_map[item_id].value[i] = true
				}
			}
		}
		let data = []
		for (let i in item_map) {
			if (!same_item_show.value) {
				data.push(item_map[i])
			} else {
				let count = 0;
				for (let j = 0; j <= 2; j++) {
					if (!combo_info.value[j]) {
						count++
					} else {
						let item_id = combo_info.value[j].items[j].id
						if (item_map[i].value[j]) {
							count++
						}
					}
				}
				if (count !== 3) {
					data.push(item_map[i])
				}
			}
		}
		let group_map = {}
		for (let i in data) {
			if (!(data[i].group in group_map)) {
				group_map[data[i].group] = {
					group: data[i].group,
					items: []
				}
			}
			group_map[data[i].group].items.push(data[i])
		}
		let ret_list = []
		for (let i in group_map) {
			ret_list.push(group_map[i])
		}
		return ret_list
	})
	const base_info = computed(() => {
		let data = [{
			title: '体检类型',
			value: ['-', '-', '-'],
			show: true
		}, {
			title: '预约人数',
			value: ['-', '-', '-'],
			show: false
		}, {
			title: '项目数量',
			value: ['-', '-', '-'],
			show: true
		}, {
			title: '性别婚否',
			value: ['-', '-', '-'],
			show: true
		}]
		for (let i = 0; i <= 2; i++) {
			if (!!combo_info.value[i]) {
				data[0].value[i] = !!combo_info.value[i].checkup_type_name ? combo_info.value[i].checkup_type_name : '-'
				data[1].value[i] = `${combo_info.value[i].saleCount}人`
				data[2].value[i] = `${combo_info.value[i].item_count}个`
				let sex = '通用'
				if (combo_info.value[i].sex !== 0) {
					if (combo_info.value[i].sex === 1) {
						sex = '男通用'
					} else {
						sex = '女通用'
					}
				}
				data[3].value[i] = sex
			}
		}
		return data
	})

	const getComboCompare = async () => {
		let combo_ids = []
		$store.getComboContrast()
		for (let i in $store.combo_compare) {
			if (!!$store.combo_compare[i]) {
				combo_ids.push($store.combo_compare[i])
			}
		}
		if (combo_ids.length > 0) {
			uni.showLoading()
			const response = await $api('ComboCompare', {
				combo_ids
			})
			uni.hideLoading()
			$response(response, () => {
				combo_info.value = [null, null, null]
				if (response.data.list.length > 0) {
					combo_info.value[0] = response.data.list[0]
				}
				if (response.data.list.length > 1) {
					combo_info.value[1] = response.data.list[1]
				}
				if (response.data.list.length > 2) {
					combo_info.value[2] = response.data.list[2]
				}
			})
		}
	}

	const closeComboClick = (index) => {
		let combo_id = combo_info.value[index].combo_id
		combo_info.value[index] = null
		let store_list = JSON.parse(JSON.stringify($store.combo_compare))
		let select_index = store_list.indexOf(combo_id)
		if (select_index !== -1) {
			store_list.splice(select_index, 1)
		}
		$store.combo_compare = store_list
		$store.setComboContrast(store_list)
	}

	const mountedAction = () => {
		getComboCompare()
	}

	const config_ref = ref(null)
	const configRef = (e) => {
		if (!config_ref.value) {
			config_ref.value = e
			mountedAction()
		}
	}

	const chooseComboClick = () => {
		// uni.navigateBack()
		uni.navigateTo({
			url: '/pages/main/combo/combo?status=1'
		})
	}
	const toComboClick = (index) => {
		if (!!combo_info.value[index]) {
			let query = "?comboId=" + combo_info.value[index].combo_id;
			uni.navigateTo({
				url: "/pages/main/tj/tjxq" + query,
			});
		}
	}
	const same_item_show = ref(false)
	const changeSwitch = () => {
		same_item_show.value = !same_item_show.value
	}

	onShow(() => {
		if (!!config_ref.value) {
			mountedAction()
		}
	})
</script>
<template>
	<DraggableButton />
	<view>
		<view v-if="!!$store.config">
			<view :ref="configRef"></view>
		</view>
		<view class="top_background_wrapper"></view>
		<view class="combo_list_wrapper">
			<view class="combo_item_wrapper" v-for="(i,k) in 3" :key="k">
				<view v-if="!!combo_info[k]">
					<view @click="closeComboClick(k)" class="combo_close_wrapper">
						<image src="@/static/assets/contrast/close@2x.png"></image>
					</view>
					<view class="combo_name_wrapper">{{ combo_info[k].name }}</view>
					<view class="combo_price_wrapper">¥ {{ combo_info[k].price }}</view>
					<view @click="toComboClick(k)" class="combo_choose_wrapper">立即预约</view>
				</view>
				<view @click="chooseComboClick()" v-else>
					<view class="add_icon_wrapper">
						<image src="@/static/assets/contrast/add@2x.png"></image>
					</view>
					<view class="add_text_wrapper">添加套餐</view>
				</view>
			</view>
		</view>
		<view class="item_info_wrapper">
			<view class="title_wrapper">基本信息</view>
			<view class="table_wrapper">
				<template v-for="(i,k) in base_info">
					<view class="table_line_wrapper" v-if="!!i.show" :key="k">
						<view class="table_title_wrapper">{{ i.title }} </view>
						<view class="table_item_wrapper" v-for="(ii,ik) in i.value" :key="ik">{{ ii }}</view>
					</view>
				</template>
			</view>
			<view class="title_line_wrapper">
				<view class="title_wrapper">项目信息</view>
				<view class="show_wrapper">
					<view class="show_text_wrapper">隐藏相同项目</view>
					<switch @change="changeSwitch" style="transform:scale(0.6)" />
				</view>
			</view>
			<view class="table_wrapper table_large_wrapper">
				<view class="table_large_line_wrapper" v-if="item_info.length === 0">
					<view class="table_large_title_wrapper">
						<view class="table_large_title_show_wrapper">
							<view>科</view>
							<view>室</view>
							<view>检</view>
							<view>查</view>
						</view>
					</view>
				</view>
				<view v-for="(j,jk) in item_info" :key="jk">
					<view class="table_large_line_wrapper" v-for="(i,k) in j.items" :key="k">
						<view class="table_large_title_wrapper">
							<view class="table_large_title_show2_wrapper"
								v-if="(k + 1) === Math.min(Math.ceil(j.items.length / 2),4)">
								<view>{{ j.group }}</view>
							</view>
						</view>
						<view class="table_item_wrapper table_large_item_wrapper" v-for="(ii,ik) in i.value" :key="ik">
							<view class="table_large_text_wrapper">{{ ii ? i.name : '-' }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style scoped>
	.show_text_wrapper {
		font-size: 14rpx;
		color: #05050580;
	}

	.show_wrapper {
		display: flex;
		align-items: center;
		margin-top: 40rpx;
	}

	.title_line_wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.table_large_title_wrapper {
		font-weight: 400;
		font-size: 20rpx;
		color: #050505;
		line-height: 60rpx;
		text-align: center;
		width: 142rpx;
		text-align: center;
		height: 91rpx;
		position: relative;
		background: #F2F2F2;
		border-bottom: 1rpx solid #F2F2F2;
	}

	.table_large_title_show_wrapper {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		height: 420rpx;
		padding-top: 170rpx;
		background: #F2F2F2;
		z-index: 9;
	}

	.table_large_title_show2_wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 30rpx;
		height: 100%;
		width: calc(100% - 20rpx);
		margin: 0 auto;
	}

	.table_wrapper {
		width: calc(142rpx + 182rpx + 182rpx + 182rpx);
		margin: 27rpx auto 0;
		border: 1rpx solid #E5E5E5;
		border-radius: 5rpx;
	}

	.table_large_wrapper {
		min-height: 600rpx;
	}

	.table_line_wrapper {
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 20rpx;
		color: #050505;
		line-height: 61rpx;
		border-bottom: 1rpx solid #E5E5E5;
	}

	.table_large_line_wrapper {
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 20rpx;
		color: #050505;
		line-height: 61rpx;
	}

	.table_title_wrapper {
		width: 142rpx;
		height: 61rpx;
		line-height: 61rpx;
		text-align: center;
		background: #F2F2F2;
	}

	.table_line_wrapper:last-child {
		border-bottom: none;
	}

	.table_item_wrapper {
		width: 182rpx;
		height: 61rpx;
		line-height: 61rpx;
		text-align: center;
		border-left: 1rpx solid #E5E5E5;
	}

	.table_large_item_wrapper {
		height: 91rpx;
		line-height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1rpx solid #E5E5E5;
	}

	.table_large_line_wrapper:last-child .table_large_item_wrapper {
		border-bottom: none;
	}

	.table_large_text_wrapper {
		width: 170rpx;
		margin: 0 auto;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		text-align: center;
	}

	.item_info_wrapper {
		width: 730rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 5rpx;
		margin: 15rpx auto 0;
		overflow: hidden;
		padding-bottom: 33rpx;
	}

	.title_wrapper {
		width: 180rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #EDF6F5 0%, #BBDFE1 99%);
		border-radius: 0rpx 30rpx 30rpx 0rpx;
		font-weight: bold;
		font-size: 25rpx;
		color: #123531;
		text-align: center;
		line-height: 60rpx;
		margin-top: 40rpx;
		margin-left: 20rpx;
		overflow: hidden;
	}

	.combo_choose_wrapper {
		width: 180rpx;
		height: 54rpx;
		background: #239EA3;
		border-radius: 8rpx;
		margin: 23rpx auto 0;

		font-weight: 500;
		font-size: 24rpx;
		color: #F1F7F7;
		line-height: 54rpx;
		text-align: center;
	}

	.combo_price_wrapper {
		font-weight: 500;
		font-size: 30rpx;
		color: #EC3D15;
		line-height: 1;
		margin-top: 8rpx;
		text-align: center;
	}

	.combo_name_wrapper {
		width: 150rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #0E0E0E;
		line-height: 40rpx;
		min-height:80rpx;
		margin: 35rpx auto 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		text-align: center;
	}

	.combo_close_wrapper {
		position: absolute;
		width: 18rpx;
		height: 19rpx;
		top: 7rpx;
		right: 11rpx;
	}

	.combo_close_wrapper image {
		width: 18rpx;
		height: 19rpx;
		display: block;
		object-fit: contain;
	}

	.add_text_wrapper {
		text-align: center;
		font-weight: 500;
		font-size: 24rpx;
		color: #239EA3;
		line-height: 1;
		margin-top: 31rpx;
	}

	.add_icon_wrapper {
		width: 91rpx;
		height: 101rpx;
		margin: 44rpx auto 0;
	}

	.add_icon_wrapper image {
		width: 91rpx;
		height: 101rpx;
		display: block;
		object-fit: contain;
	}

	.combo_item_wrapper {
		width: 230rpx;
		height: 240rpx;
		background: #F7F7F7;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 10rpx;
		position: relative;
	}

	.top_background_wrapper {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		height: 38rpx;
		background: #239EA3;
		z-index: 0;
	}

	.combo_list_wrapper {
		position: relative;
		z-index: 1;
		width: 730rpx;
		height: 260rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 15rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
</style>