hainan_2024_zhenghe/h5/pages/main/tj/zhuanjiaxq.vue

<template>
	<TabBar ></TabBar>
	<view class="zhuanjiamain">
		
		<view class="tishi">温馨提示：<span style="color: #e95513;">若要增加项目可以到现场预检咨询</span></view>
		<view v-if="content.combo_info">
			<view class="combo_title">
				<view>{{content.combo_info.combo_name}}</view>
				<uni-tooltip>
					<!-- 定义插槽，插槽名为 content -->
					<template v-slot:content>
						<!-- 在这里编写自定义的 HTML 或组件 -->
						<view class="w-50vw">
							<text>该套餐仅预约专家咨询，现场个性化定制套餐</text>
						</view>
					</template>
						
					<!-- 触发提示的按钮 -->
					<view    class="wenhao">?</view>
				</uni-tooltip>
			</view>
			<view class="combo_tags_wrapper">
				<view class="combo_tag_wrapper" v-for="(ii, kk) in content.combo_info.tags" :key="kk"
					:style="{  color: ii.text_color, background: '#fff',}">
					{{ ii.text }}
				</view>
			</view>
			<view class="combo_price_wrapper">
				<view class="combo_price_box_wrapper">
					<view class="combo_true_price_wrapper">
						<text class="combo_true_price_icon_wrapper">¥</text>
						<text class="combo_true_price_number_wrapper">{{ content.combo_info.price }}</text>
					</view> 
				</view>
			</view>
			<view class="shuoming">
				<view class="title">
					说明：
				</view>
				<view>由健康管理中心专家为您推荐适合套餐或制定个性化套餐，咨询定制费30元，套餐加项享8折优惠。</view>
			</view>
			<view class="shuoming">
				<view class="title">
					注意事项：
				</view>
				<view>体检前三天保持清淡饮食，避免饮酒；体检当天早晨需空腹，禁食、禁水（慢性病患者服药请遵医嘱）；穿着宽松舒适衣物，不佩戴金属物品。</view>
			</view>
			<view style="position: absolute; bottom: 140rpx;right: 40rpx;">
				<view class="yuyue_button" @click="toUrl('/pages/main/yytjsj/yytjsj_new')">
					预约
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import TabBar from "@/common/TabBar.vue";
	import {
		ref
	} from "vue";
	import {
		$api,
		$response,
		$image
	} from "@/api";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		useStore
	} from "@/store";
	const $store = useStore();
	
 
	let personId=ref("");
	let buy_info=ref({});
	let content=ref({});
	 const $props = defineProps({
	 	comboid: {
	 		type: String,
	 		default: "",
	 	},
		})
		
	const getBuyInfo = async () => {
		if( $props.comboid=="" || $props.comboid==undefined){
			uni.showToast({
				title: "套餐id不能为空",
				icon: "none",
			});
			return false
		}
		buy_info.value.combo_id=$props.comboid
		buy_info.value.person_id=personId.value
		buy_info.value.hospital=buy_info.value.hospital?buy_info.value.hospital:1
		$store.setBuyInfo(buy_info.value)
		// 获取购买信息
		let obj = {
			item_ids: [],
			combo_id: $props.comboid,
			hospital: $store.save_info?.hospital?$store.save_info?.hospital:1,
			person_id: personId.value,
			group_id: null,
			duo_xuan_yi: null,
			wj: null,
			sanfang_code:buy_info.value.sanfang_code?.code_num?buy_info.value.sanfang_code:null
		};
	    uni.showLoading();
		const response = await $api("BuyInfo", obj);
		$response(response, () => {
			uni.hideLoading();
			 content.value=response.data
		});
	};
	const toUrl=(url)=>{
		$store.setCheckupTypeId({id:1})
		uni.navigateTo({
			url: url,
		});
	}
	onShow(() => {
		$store.setCheckupTypeId({id:1})
		$store.setYuYueFangShi("yujianzixun")
		personId.value = $store.getUser().person_id || "";
		buy_info.value=$store.getBuyInfo()
		
		 getBuyInfo()
	});
</script>

<style scoped>
	.zhuanjiamain{
		padding:40rpx;
		background-color: #fff;
		height: calc( 100vh - 164rpx);
	}
	.tishi{
		font-size: 28rpx;
		margin-bottom: 26rpx;
	}
	.wenhao{
		height: 30rpx;
		width: 30rpx;
		background-color: #009FA8;
		line-height: 30rpx;
		border-radius: 30rpx;
		color: #fff;
		text-align: center;
		font-size: 24rpx;
		margin-left: 10rpx;margin-top: 4rpx;
	}
	.combo_title{
		    display: flex;
			font-weight: 900;
			font-size: 36rpx;
			color: #3E3A39;
			line-height: 32rpx;
	}
	.combo_tags_wrapper {
		display: flex;
		align-items: center;
		margin-top: 13rpx;
	}
	.combo_tag_wrapper {
		padding-left: 13rpx;
		padding-right: 13rpx;
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 5rpx;
		font-weight: 400;
		font-size: 18rpx;
		color: #47abd8;
		margin: 10rpx 8rpx 10rpx 0rpx;
		border: 2rpx solid #009da5;
	}
	.combo_true_price_wrapper {
		font-weight:600;
		font-size: 18rpx;
		color: #E95513;
		line-height: 1;
	}
	
	.combo_true_price_number_wrapper {
		font-size: 38rpx;
	}
	
	.combo_price_wrapper {
		display: flex;
		align-items: end;
		justify-content: space-between;
		margin-top: 21rpx;
	}
	
	.combo_price_box_wrapper {
		display: flex;
		align-items: end;
	}
	.beizhu{
		font-size: 26rpx;
		
		color: #333;
		margin-top: 40rpx;
	}
	.yuyue_button{
		width: 180rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 70rpx;
		background-color: #009FA8;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
	}
	.shuoming{
		font-size: 28rpx;
		margin-top: 20rpx;
		margin-bottom: 40rpx;
	}
	.title{
		border-left: 3px solid #009FA8;
		padding-left: 8rpx;
		margin-top: 40rpx;
		margin-bottom: 20rpx;
		font-weight: 700;
	}
</style>