<!-- 下单详情 -->
<template>
	<view class="orderDetails-body" :style="'padding-top:' + bottomHeight">
		<!-- 头部 -->
		<view class="bg-box">
			<view class="ss-flex-2 public-box" style="margin-top: 20rpx">
				<view class="ss-flex-2 ss-row-around">
					<view class="ss-flex-2 ss-col-center" @click="backTo">
						<text class="textIcon icon-fanhui" style="font-size: 30rpx; color: #fff"></text>
						<view style="margin-left: 15rpx; font-size: 26rpx; color: #fff">预约下单哈哈</view>
					</view>
				</view>
				<view class="ss-flex-1"></view>
				<text class="textIcon icon-kefu" style="font-size: 32rpx; color: #fff"></text>
				<text class="textIcon icon-tongzhiguanli"
					style="font-size: 32rpx; color: #fff; margin-left: 25rpx; margin-right: 10rpx"></text>
			</view>
			<!-- 选择地址框 -->
			<view class="public-box top-box-info ss-flex-2 ss-col-center" style="padding: 20rpx 10rpx">
				<text class="textIcon icon-ditu" style="font-size: 30rpx; color: #35aec9"></text>
				<view class="ss-flex-2" style="flex-wrap: wrap; margin-left: 20rpx">
					<view class="add-title">选择您的地址与联系方式</view>
					<view class="add-message">技师将到达指定地址服务，清晰地址有助于更快到达</view>
				</view>
				<view class="ss-flex=1"></view>
				<text class="textIcon icon-gengduo" style="font-size: 32rpx; color: #333; font-weight: 750"></text>
			</view>
			<!-- 安心购 -->
			<view class="public-box top-box-info ss-flex-2 ss-col-center">
				<text class="textIcon icon-anquan" style="font-size: 28rpx; color: #36afca"></text>
				<view style="font-size: 24rpx; color: #4fbad0; margin-left: 5rpx">安心购</view>
				<view class="vertical-line"></view>
				<view style="font-size: 22rpx; color: #4fbad0; margin-left: 5rpx">
					未服务全额退.爽约包退.不满意重服务.全程保障
				</view>
			</view>
		</view>
		<view class="list-wrap">
			<scroll-view scroll-y="true" class="list">
				<!-- 技师服务列表 -->
				<view class="public-box giveService-box">
					<!-- 服务详情信息 -->
					<view class="ss-flex-2 ss-row-left" v-for="i in 3">
						<view style="width: 130rpx; height: 130rpx">
							<image class="wh" referrerpolicy="no-referrer"
								src="/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png" />
						</view>
						<view class="ss-flex-1" style="margin-left: 10rpx">
							<view class="ss-flex-2">
								<view style="font-size: 28rpx; color: #404751; padding-top: 2rpx; font-weight: 600">精油按摩
								</view>
								<view style="color: #b7b7b7; margin-left: 15rpx"><text
										style="font-size: 22rpx">X</text><text
										style="font-size: 27rpx; margin-left: 2rpx">1</text></view>
								<view class="ss-flex-1"></view>
								<view class="ss-flex-2 ss-col-center">
									<text class="textIcon icon-renzheng" style="font-size: 24rpx"></text>
									<view style="margin-left: 5rpx; font-size: 18rpx; color: #4e555c">160分钟</view>
								</view>
							</view>
							<view class="ss-flex-2" style="margin-top: 5rpx; flex-wrap: wrap">
								<view class="small-items">精油按摩</view>
								<view class="vertical-line"></view>
								<view class="small-items">舒缓疲劳</view>
								<view class="vertical-line"></view>
								<view class="small-items">代金卷</view>
								<view class="vertical-line"></view>
								<view class="small-items">免路费</view>
								<view class="vertical-line"></view>
								<view class="small-items">单程免路费</view>
								<view class="vertical-line"></view>
								<view class="small-items">双程免路费</view>
							</view>
							<view class="ss-flex-2 ss-col-center">
								<view class="ss-flex-2 ss-col-center">
									<text class="textIcon icon-renminbi1688"
										style="font-size: 30rpx; color: red"></text>
									<view style="margin-left: 3rpx; font-size: 25rpx; color: red">999.98</view>
								</view>
								<view class="horizontal-line">会员价：999.89</view>
								<view class="ss-flex-1"></view>
							</view>
						</view>
					</view>
					<!-- 技师 服务时间  出行方式默认 打车 -->
					<view class="ss-flex-2 ss-col-center" style="margin-top: 20rpx">
						<view style="font-size: 28rpx; color: #3f454f; font-weight: 650">服务技师</view>
						<view class="ss-flex-1"></view>
						<view class="ss-flex-2 ss-col-center">
							<view style="width: 50rpx; height: 50rpx; border-radius: 25rpx">
								<image class="wh" style="border-radius: 25rpx" referrerpolicy="no-referrer"
									src="/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png" />
							</view>
							<view style="font-size: 23rpx; color: #444; margin-left: 10rpx; margin-right: 50rpx">王琳
							</view>
						</view>
					</view>
					<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx">
						<view style="font-size: 28rpx; color: #3f454f; font-weight: 650">服务时间</view>
						<view class="ss-flex-1"></view>
						<view style="font-size: 22rpx; color: #5cbed3">2024-07-04 10:52:00</view>
						<view style="width: 50rpx; text-align: center">
							<text class="textIcon icon-gengduo"
								style="font-size: 32rpx; color: #333; font-weight: 700"></text>
						</view>
					</view>
					<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx">
						<view style="font-size: 28rpx; color: #3f454f; font-weight: 650">出行方式</view>
						<view class="ss-flex-1"></view>
						<view style="font-size: 22rpx; color: #5cbed3">请选择出行方式</view>
						<view style="width: 50rpx; text-align: center">
							<text class="textIcon icon-gengduo"
								style="font-size: 32rpx; color: #333; font-weight: 700"></text>
						</view>
					</view>
					<view style="font-size: 18rpx; color: #5e636b; margin-top: 10rpx; font-weight: 600">
						注：单程22.9公里，预计需要30分钟，当前车费预估参考滴滴快车计费标准
					</view>
				</view>
				<!-- 会员卡 -->
				<view class="public-box member-box" style="margin-top: 20rpx">
					<view class="ss-flex-2">
						<view class="ss-flex-2 ss-col-center member-item-box">
							<text class="textIcon icon-huiyuan"
								style="font-size: 30rpx; color: #ef8338; font-weight: 650"></text>
							<view style="color: #ef8338; font-size: 24rpx; font-weight: 650">会员卡套餐</view>
						</view>
						<view class="ss-flex-1"></view>
						<view class="check-info-box">勾选开通</view>
					</view>
					<view class="ss-flex-2 ss-col-center" style="margin-left: 50rpx">
						<text style="font-size: 22rpx; color: #555; font-weight: 650">开通月卡会员本单可立省</text>
						<text class="textIcon icon-renminbi1688"
							style="font-size: 24rpx; color: #e40214; font-weight: 650"></text>
						<text style="font-size: 22rpx; color: #e40214; font-weight: 650">11.95</text>
						<view class="ss-flex-1"></view>
						<text class="textIcon icon-renminbi1688"
							style="font-size: 33rpx; color: #e50315; font-weight: 650"></text>
						<text style="font-size: 32rpx; color: #e50315; font-weight: 650">38</text>
						<view style="margin-left: 10rpx">
							<text class="textIcon icon-renminbi1688" style="
                  font-size: 24rpx;
                  color: #919190;
                  font-weight: 650;
                  text-decoration: line-through;
                "></text>
							<text style="
                  font-size: 22rpx;
                  color: #919190;
                  font-weight: 650;
                  text-decoration: line-through;
                ">40</text>
						</view>
						<uni-data-checkbox style="margin-left: 40rpx" selectedColor="#F4AB78" multiple
							v-model="checkbox" :localdata="hobby"></uni-data-checkbox>
					</view>
					<view style="margin-left: 50rpx" class="ss-flex-2 ss-col-center">
						<text style="font-size: 19rpx; color: #f19250">开通嘀咚到位会员卡&nbsp;享受多重会员权益</text>
						<text class="textIcon icon-kongxinwenhao"
							style="font-size: 22rpx; color: #f19250; font-weight: 650; margin-left: 10rpx"></text>
						<view class="ss-flex-1"></view>
					</view>
					<view class="ss-flex-2 ss-row-center">
						<view class="ss-flex-2 ss-col-center more-member-box">
							<text style="font-size: 18rpx; color: #f29758">更多会员套餐</text>
							<text class="textIcon icon-xiangxiashuangjiantou"
								style="font-size: 20rpx; color: #f19250; font-weight: 650; margin-left: 10rpx"></text>
						</view>
					</view>
				</view>
				<!-- 价钱明细以及优惠卷 -->
				<view class="price-box public-box">
					<view style="font-size: 30rpx; color: #414851; font-weight: 550">价格明细</view>
					<view class="ss-flex-2 ss-row-center" style="margin-top: 10rpx">
						<view style="font-size: 27rpx; color: #555">套餐总价</view>
						<view class="ss-flex-1"></view>
						<view class="ss-flex-2 ss-row-center" style="margin-right: 50rpx">
							<text class="textIcon icon-renminbi1688"
								style="font-size: 30rpx; color: #555; font-weight: 650"></text>
							<text style="font-size: 28rpx; color: #555">398.00</text>
						</view>
					</view>
					<view class="ss-flex-2 ss-row-center" style="margin-top: 10rpx">
						<view style="font-size: 27rpx; color: #555">出行路费</view>
						<view class="ss-flex-1"></view>
						<view class="ss-flex-2 ss-row-center" style="margin-right: 50rpx">
							<text class="textIcon icon-renminbi1688"
								style="font-size: 30rpx; color: #555; font-weight: 650"></text>
							<text style="font-size: 28rpx; color: #555">98.00</text>
						</view>
					</view>
					<view class="ss-flex-2 ss-row-center" style="margin-top: 10rpx" @click="jumpPreferential">
						<view style="font-size: 27rpx; color: #555">通用优惠卷</view>
						<text class="textIcon icon-youhuijuan"
							style="font-size: 35rpx; font-weight: 650; color: #ff3938; margin-left: 5rpx"></text>
						<view class="ss-flex-1"></view>
						<view class="ss-flex-2 ss-row-center">
							<text class="textIcon icon-renminbi1688"
								style="font-size: 30rpx; color: #e92c3a; font-weight: 650"></text>
							<text style="font-size: 28rpx; color: #e92c3a">-10.00</text>
						</view>
						<text class="textIcon icon-gengduo" style="
                font-size: 32rpx;
                color: #555;
                font-weight: 650;
                width: 50rpx;
                text-align: right;
                margin-top: 3rpx;
              "></text>
					</view>
					<view class="ss-flex-2 ss-row-center ss-row-left" style="margin-top: 30rpx">
						<text class="textIcon icon-weibiaoti-" style="font-size: 33rpx; color: #e92c3a"></text>
						<text style="font-size: 24rpx; color: #e92c3a">已为您选择最佳优惠</text>
					</view>
					<view style="width: 100%; height: 2rpx; background-color: #d6d6d9; margin-top: 10rpx"></view>
					<view class="ss-flex-2 ss-row-center ss-row-right" style="padding: 10rpx; margin-top: 20rpx">
						<view class="ss-flex-2 ss-col-center">
							<text style="font-size: 32rpx; color: #333; font-weight: 650">已优惠</text>
							<text class="textIcon icon-renminbi1688"
								style="font-size: 30rpx; color: #e92c3a; font-weight: 650"></text>
							<text style="font-size: 32rpx; color: #e92c3a">10.00</text>
						</view>
						<view class="ss-flex-2 ss-col-center" style="margin-left: 40rpx">
							<text style="font-size: 32rpx; color: #333; font-weight: 650">需支付</text>
							<text class="textIcon icon-renminbi1688"
								style="font-size: 30rpx; color: #333; font-weight: 650"></text>
							<text style="font-size: 32rpx; color: #333">416.00</text>
						</view>
					</view>
				</view>
				<!-- 备注 -->
				<view class="public-box price-box" style="box-sizing: border-box">
					<textarea class="text-area-box-info" maxlength="300" auto-height disabled
						placeholder="请提前告知特殊情况(选填)" />
					<!-- 自己定的一些常用语 -->
					<view class="ss-flex-2 ss-row-center ss-row-left" style="flex-wrap: wrap">
						<view class="expressions-box" v-for="i in 7"> 肌肉拉伤233 </view>
					</view>
				</view>
				<!-- 号码保护 -->
				<view class="ss-flex-2 ss-row-center ss-col-center public-box price-box" style="margin-top: 20rpx">
					<view>
						<view class="ss-flex-2 ss-row-center ss-col-center ss-row-left">
							<text class="textIcon icon-yuyinyinsixiaohao"
								style="font-size: 30rpx; color: #36afca; font-weight: 650"></text>
							<text style="font-size: 28rpx; color: #333; font-weight: 650; margin-left: 5rpx">号码保护</text>
						</view>
						<view style="font-size: 20rpx; color: #a8a8a8; margin-top: 10rpx">
							隐藏手机号，保护隐私，通话录音，保驾护航
						</view>
					</view>
					<view class="ss-flex-1"></view>
					<text class="textIcon icon-gengduo" style="font-size: 30rpx; color: #333; font-weight: 650"></text>
				</view>
				<view style="width: 100%; height: 20rpx"></view>
			</scroll-view>
		</view>

		<!-- 底部结算 -->
		<view class="bottom-info-box ss-flex-2 ss-row-center ss-col-center">
			<view style="color: #fff; margin-left: 30rpx">
				<view class="ss-flex-2 ss-col-center">
					<text>合计：</text>
					<text class="textIcon icon-renminbi1688"
						style="font-size: 34rpx; color: #fff; font-weight: 650"></text>
					<text style="color: #fff; font-weight: 650">465.25</text>
				</view>
				<view class="ss-flex-2 ss-col-center" style="font-size: 24rpx; margin-top: 15rpx">
					<text>已优惠：</text>
					<text class="textIcon icon-renminbi1688"
						style="font-size: 24rpx; color: #fff; font-weight: 650"></text>
					<text style="color: #fff">10.00</text>
				</view>
			</view>
			<view class="ss-flex-1"></view>
			<view class="settlement-box" @click="settlement">立即结算</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';

	// 返回上一页
	const backTo = async () => {
		uni.redirectTo({
			url: '/pages/XDHome/technician/grabOrders/grabOrders',
		});
	};
	// 勾选开通会员
	const checkbox = ref([0]);
	const hobby = ref([{
		text: '',
		value: 0,
	}, ]);

	//空白的结算页面
	const settlement = async () => {
		uni.redirectTo({
			url: '/pages/XDHome/technician/payBlank/payBlank',
		});
	}

	//跳转到优惠劵
	const jumpPreferential = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/myFeat/discountCoupons/discountCoupons',
		});
	}
	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	const bottomHeight = ref(bottomHeightOne);
</script>
<style scoped>
	/deep/ .uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
		border-radius: 16rpx !important;
		border: 2rpx solid #f49f64 !important;
	}
</style>
<style scoped lang="scss">
	.settlement-box {
		padding: 15rpx;
		padding-left: 50rpx;
		padding-right: 50rpx;
		margin-right: 30rpx;
		background-color: #fff;
		color: #35aec9;
		font-weight: 650;
		border-radius: 10rpx;
	}

	.bottom-info-box {
		width: 100%;
		height: 120rpx;
		background-color: #2eafcf;
	}

	.expressions-box {
		font-size: 22rpx;
		color: #8e8e8e;
		background-color: #eeeef0;
		border-radius: 10rpx;
		margin-top: 10rpx;
		margin-right: 10rpx;
		padding: 5rpx 20rpx;
	}

	.text-area-box-info {
		background-color: #eeeef0;
		font-size: 22rpx;
		width: 100%;
		min-height: 140rpx;
		border-radius: 10rpx;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.price-box {
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
		margin-top: 20rpx;
		box-sizing: border-box;
		padding: 15rpx;
	}

	.check-info-box {
		font-size: 20rpx;
		color: #f2a066;
		border: 2rpx solid #f2a066;
		border-radius: 15rpx;
		margin-right: 70rpx;
		height: 35rpx;
		padding: 3rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		box-sizing: border-box;
		margin-top: 10rpx;
	}

	.more-member-box {
		margin-top: 20rpx;
		padding: 5rpx 40rpx;
		box-sizing: border-box;
		background-color: #fbd9c0;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
	}

	.member-item-box {
		background-color: #fbd9c0;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		border-top-left-radius: 20rpx;
		border-bottom-right-radius: 40rpx;
	}

	.member-box {
		background-color: #fff8f0;
		border-radius: 20rpx;
		box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
	}

	.horizontal-line {
		font-size: 16rpx;
		color: #999;
		text-decoration: line-through;
		margin-left: 10rpx;
		margin-top: 5rpx;
	}

	.vertical-line {
		width: 2rpx;
		background-color: #999;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.small-items {
		font-size: 24rpx;
		color: #858689;
	}

	.giveService-box {
		background-color: #fff;
		padding: 15rpx;
		border-radius: 10rpx;
		box-shadow: 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.3);
	}

	.add-message {
		font-size: 18rpx;
		color: #a2a2a2;
	}

	.add-title {
		font-size: 23rpx;
		color: #3e464f;
		font-weight: 650;
		‌letter-spacing: 2px;
	}

	.vertical-line {
		width: 2rpx;
		height: 30rpx;
		background-color: #36afca;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}

	.top-box-info {
		margin-top: 30rpx;
		padding: 10rpx 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.bg-box {
		width: 100%;
		height: 300rpx;
		background: url('@/static/top-bg.png') no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
	}

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

	// 中部滚动
	.list-wrap {
		flex-grow: 1;
		position: relative;
	}

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

	.list-scroll-view {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-left: 2vw;
		margin-right: 2vw;
	}

	.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>