<!-- 套餐详情 -->
<template>
	<view class="body" :style="'padding-top:' + bottomHeight">
		<!-- 导航 -->
		<view class="ss-flex-2 ss-col-center"
			style="position: relative;background-color: #10A5E8;width: 100%;padding: 20rpx;">
			<view class="ss-flex-2 ss-col-center">
				<text class="textIcon icon-fanhui icon-navigation" @click="backPage"></text>
				<view style="margin-left: 15rpx; color: #fff; font-size: 28rpx">套餐详情</view>
			</view>
			<view class="ss-flex-1"></view>
		</view>

		<!-- 大图片 -->
		<view class="big-image-box">
			<image class="wh" referrerpolicy="no-referrer"
				src="/static/lanhu_shouye/pserz4p1s8x8wkob1c0bat390gscqet6q2w9869d84a-bcd7-4f8a-a669-dda68333c1f2.png" />
		</view>
		<view style="width: 100%;height: 20rpx;"></view>

		<!-- 中部 -->
		<view class="list-wrap">
			<scroll-view scroll-y="true" class="list">
				<view class="list-scroll-view">


					<!-- 项目详情卡片 -->
					<view class="card-box">
						<!-- 嘀咚会员 -->
						<view class="ss-flex-2 ss-col-center bg-jian-box">
							<text class="textIcon icon-huiyuanV icon-navigation"></text>
							<view style="font-size: 28rpx;color: #fff;margin-left: 10rpx;font-weight: 650;">嘀动会员</view>
							<view style="font-size: 17rpx;color: #fff;margin-left: 20rpx;margin-top: 8rpx;">
								会员下单，预计再省50.90元</view>
							<view class="ss-flex-1"></view>
							<view class="open-box">立即开通</view>
						</view>
						<!-- 项目详情 -->
						<view class="project-info">
							<view class="ss-flex-2 ss-col-center">
								<text class="textIcon icon-renminbi1688 icon-navigation"
									style="font-size: 30rpx;color: red;font-weight: 650;"></text>
								<view style="font-size: 30rpx;color: red;font-weight: 650;">399.25</view>
								<view class="huiyuan-box ss-flex-2 ss-col-center" style="margin-left: 15rpx;">
									<view style="font-size: 16rpx;color: #fff;background-color: #10A5E8;padding: 2rpx;">
										会员价</view>
									<view class="ss-flex-2 ss-col-center" style="padding: 2rpx;">
										<text class="textIcon icon-renminbi1688 icon-navigation"
											style="font-size: 16rpx;color: red;font-weight: 650;"></text>
										<view style="font-size: 16rpx;color: red;font-weight: 650;">349.25</view>
									</view>
								</view>
								<view class="ss-flex-1"></view>
							</view>
							<view style="font-size: 32rpx;color: #3D444C;font-weight: 650;margin-top: 10rpx;">精油按摩
							</view>
							<view class="ss-flex-2 ss-col-center" style="margin-top:10rpx;">
								<text style="margin-right: 10rpx;font-size: 20rpx;color: #B7B7B9;">120分钟</text>
								<text style="margin-right: 10rpx;font-size: 20rpx;color: #B7B7B9;">改善睡眠</text>
								<view class="ss-flex-1"></view>
								<text style="margin-right: 10rpx;font-size: 20rpx;color: #B7B7B9;">498人选择</text>
							</view>
							<!-- 项目特色 -->
							<view class="characteristic-box">
								<view style="font-size: 28rpx;color: #000000;font-weight: 600;">项目特色</view>
								<view style="font-size: 20rpx;color: #666;margin-top: 10rpx;" v-for="i in 12">疏通经络
								</view>
							</view>
						</view>
					</view>

					<!-- 项目描述 -->
					<view class="message-info-box">
						<view style="font-size: 28rpx;font-weight: 650;color: #000000;">项目描述</view>
						<view style="font-size: 32rpx;font-weight: 650;color: #000000;margin-top: 10rpx;">服务说明</view>
						<view class="meassage-item-box">
							<view class="ss-flex-2 ss-col-center" style="border-bottom: 1rpx solid #E9E8EA;">
								<view class="title-box">服务时长</view>
								<view class="content-box">120分钟</view>
							</view>
							<view class="ss-flex-2 ss-col-center" style="border-bottom: 1rpx solid #E9E8EA;">
								<view class="title-box">服务姿势</view>
								<view class="content-box">仰卧位+俯卧位</view>
							</view>
							<view class="ss-flex-2 ss-col-center" style="border-bottom: 1rpx solid #E9E8EA;">
								<view class="title-box">服务流程</view>
								<view class="content-box">头部20min,脖子20min,腹部20min,背部25min,四肢经络40min</view>
							</view>
							<view class="ss-flex-2 ss-col-center" style="border-bottom: 1rpx solid #E9E8EA;">
								<view class="title-box">适宜人群</view>
								<view class="content-box">失眠、偏头痛、久坐办公室、免疫力差、缺乏锻炼者（中老年人）</view>
							</view>
							<view class="ss-flex-2 ss-col-center" style="border-bottom: 1rpx solid #E9E8EA;">
								<view class="title-box">禁忌症状</view>
								<view class="content-box">
									水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等水火烫伤、骨折、皮肤病等
								</view>
							</view>
							<view class="ss-flex-2 ss-col-center" style="border-bottom: 1rpx solid #E9E8EA;">
								<view class="title-box">用品提供</view>
								<view class="content-box">养生裤、床单、口罩、按摩毛巾鞋套、精油等（消耗品一客一用，自备消毒用品）</view>
							</view>
						</view>
					</view>

					<!-- 下单须知 -->
					<view class="orderNotice-box">
						<uni-collapse ref="collapse" v-model="open" @change="changeOpen">
							<uni-collapse-item title="预约须知">
								<view class="content">
									<text
										class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text>
								</view>
							</uni-collapse-item>
						</uni-collapse>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		computed
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh,
		onReady,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	// uni.hideTabBar();
	const open=ref(['0'])
	const changeOpen=async(e)=>{
		console.log(e,'打开')
	}
	// 返回上一页
	const backPage = async () => {
		uni.navigateBack({
			delta:1
		})
	};

	const bottomHeight = ref('0rpx');
	// #ifdef APP-PlUS
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	bottomHeight.value = bottomHeightOne
	// #endif
</script>
<style scoped lang="scss">
	.content {
		padding: 5rpx 40rpx;
	}

	.text {
		font-size: 22rpx;
		color: #666;
	}

	.orderNotice-box {
		width: 95%;
		margin-left: 2.5%;
		padding: 10rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.content-box {
		width: 80%;
		height: 100%;
		padding: 20rpx;
		text-align: left;
		padding-left: 20rpx;
		font-size: 20rpx;
		background-color: #fff;
		color: #868A90;
		box-sizing: border-box;
		border-left: 1rpx solid #E9E8EA;
	}

	.title-box {
		width: 20%;
		height: 100%;
		padding: 20rpx;
		text-align: center;
		font-size: 21rpx;
		color: #3EB3CB;
		box-sizing: border-box;
	}

	.meassage-item-box {
		width: 100%;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin-top: 10rpx;
		background-color: #C2E8F8;
		border: 1rpx solid #E9E8EA;
	}

	.message-info-box {
		width: 95%;
		min-height: 240rpx;
		margin-top: 20rpx;
		margin-left: 2.5%;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
		background-color: #fff;
		border-radius: 10rpx;
	}

	.characteristic-box {
		width: 100%;
		padding: 20rpx 10rpx;
		box-sizing: border-box;
		background-color: #E3F4FA;
		border-radius: 15rpx;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}

	.huiyuan-box {
		border: 1rpx solid #6FC6F0;
		box-sizing: border-box;
	}

	.project-info {
		width: 100%;
		min-height: 400rpx;
		padding: 10rpx 20rpx;
		background-color: #fff;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		box-sizing: border-box;
	}

	.open-box {
		padding: 6rpx 30rpx;
		font-size: 22rpx;
		background-color: #fff;
		color: #58BCD3;
		border-radius: 20rpx;
	}

	.bg-jian-box {
		padding: 15rpx 20rpx;
		width: 100%;
		box-sizing: border-box;
		background: linear-gradient(to right, #019FE8, #5FC3D1);
		border-radius: 10rpx;
	}

	.card-box {
		width: 95%;
		margin-left: 2.5%;
		margin-top: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
	}

	.big-image-box {
		width: 100%;
		height: 400rpx;
		box-sizing: border-box;
	}

	.icon-navigation {
		font-size: 32rpx;
		color: #fff;
		font-weight: 700;
	}

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		background-color: #A6DEF7;
		height: 100vh;
		box-sizing: border-box;
	}

	.head {
		text-align: center;
	}

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
		width: 100%;
		box-sizing: border-box;
	}

	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 20rpx;
		box-sizing: border-box;
	}

	.list-scroll-view {
		width: 100%;
		margin-bottom: 20rpx;
		box-sizing: border-box;
	}

	.course-card {
		width: 47vw;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	// 底部
	.tools {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.tools-item {
		width: 45px;
		text-align: center;
		font-size: 14px;
		padding: 20px;
	}
</style>