yudao-mall-uniapp/pages/XDHome/technician/reservationPlaceOrder/reservationPlaceOrder.vue

<!-- 预约下单 -->
<template>
	<view class="body" :style="'padding-top:' + bottomHeight">
		<view class="bg-box">
			<!-- 导航 -->
			<view class="ss-flex-2 ss-col-center ss-margin-width2" style="position: relative">
				<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>
				<text class="textIcon icon-kefu icon-navigation"></text>
				<text class="textIcon icon-tongzhiguanli icon-navigation" style="margin-left: 30rpx"></text>
			</view>
			<!-- 选择地址框 -->
			<view class="public-box top-box-info ss-flex-2 ss-col-center" style="padding: 20rpx 10rpx"
				@click="jumpNewAddress">
				<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" style="margin-top: -20rpx">
			<scroll-view scroll-y="true" class="list">
				<!-- 服务项目信息 -->
				<view class="service-box">
					<!-- 左右布局 -->
					<view class="ss-flex-2" v-for="i in 3" style="margin-bottom: 10rpx">
						<view style="width: 180rpx">
							<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; margin-top: 5rpx">
							<!-- 服务大项 -->
							<view class="ss-flex-2 ss-col-center">
								<view>精油按摩</view>
								<view class="ss-flex-2 ss-col-center ss-row-center" style="margin-left: 10rpx">
									<text class="textIcon icon-chenghao"
										style="font-size: 30rpx; color: #c3c4c4; padding-top: 10rpx"></text>
									<view style="font-size: 28rpx; color: #c3c4c4; padding-top: 4rpx">2</view>
								</view>
								<view class="ss-flex-1"></view>
								<view class="ss-flex-2 ss-col-center ss-row-center">
									<text class="textIcon icon-fenzhong"
										style="font-size: 22rpx; color: #3a4450"></text>
									<view
										style="font-size: 20rpx; color: #3a4450; margin-left: 10rpx; padding-top: 5rpx">
										80分钟</view>
								</view>
							</view>
							<!-- 服务小项 -->
							<view class="ss-flex-2 event-wrap" style="margin-top: 5rpx; flex-wrap: wrap">
								<view class="ss-flex-2" v-for="i in 4">
									<view class="event-box">舒缓疲劳{{ i }}</view>
									<view class="line-box"></view>
								</view>
							</view>
							<!-- 价格以及预约 -->
							<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx">
								<view class="ss-flex-2 ss-col-center ss-row-center">
									<text class="textIcon icon-renminbi1688 icon-rmb"></text>
									<view class="maney-number-box">498.00</view>
								</view>
								<view class="ss-flex-1"></view>
							</view>
						</view>
					</view>
					<view style="width: 100%; height: 20rpx"></view>
					<view class="ss-flex-2 ss-col-center">
						<view style="font-size: 27rpx; color: #44484b; font-weight: 600">服务时间</view>
						<view class="ss-flex-1"></view>
						<view style="font-size: 22rpx; color: #5ab8d1">2024-07-02 15:14:41</view>
						<text class="textIcon icon-gengduo" @click="jumpServiceTime"
							style="font-size: 30rpx; color: #44484b; font-weight: 650; margin-left: 20rpx"></text>
					</view>
					<!-- <view class="ss-flex-2 ss-col-center" style="margin-top: 20rpx">
            <view style="font-size: 27rpx; color: #44484b; font-weight: 600">服务人数</view>
            <view class="ss-flex-1"></view>
            <view style="width: 100rpx; margin-right: 50rpx">
              <uni-data-select
                class="wh"
                v-model="perpeoNumber"
                :localdata="range"
                :clear="false"
              ></uni-data-select>
            </view>
          </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="jumpGrabOrder">下单等待技师抢单</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 backPage = async () => {
		uni.redirectTo({
			url: '/pages/XDHome/technician/itemList/itemList',
		});
	};
	// 跳转到服务时间页面进行选择时间
	const jumpServiceTime = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/technician/serviceTimePage/serviceTimePage?item=',
		});
	};
	// 勾选开通会员
	const checkbox = ref([0]);
	const hobby = ref([{
		text: '',
		value: 0,
	}, ]);
	//跳转到优惠劵
	const jumpPreferential = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/myFeat/discountCoupons/discountCoupons',
		});
	}
	// 跳转到抢单等待
	const jumpGrabOrder = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/technician/grabOrders/grabOrders?item=',
		});
	};

	// 服务人数
	const perpeoNumber = ref(0);
	const range = ref([{
			value: 0,
			text: '1'
		},
		{
			value: 1,
			text: '2'
		},
		{
			value: 2,
			text: '3'
		},
		{
			value: 3,
			text: '4'
		},
		{
			value: 4,
			text: '5'
		},
	]);
	// 跳转到新增地址
	const jumpNewAddress = async () => {
		uni.navigateTo({
			url: '/pages/XDHome/technician/newAddress/newAddress',
		});
	};

	//获取顶部安全距离
	const app = uni.getSystemInfoSync();
	const bottomHeightOne = app.statusBarHeight + 'rpx';
	const bottomHeight = ref(bottomHeightOne);
	onLoad((option) => {
		console.log(option.item, '获取的项目信息数据');
	});
</script>
<style scoped>
	/deep/ .uni-data-checklist .checklist-group .checklist-box .checkbox__inner {
		border-radius: 16rpx !important;
		border: 2rpx solid #f49f64 !important;
	}

	/deep/.uni-select {
		height: 40rpx !important;
		font-size: 24rpx !important;
	}
</style>
<style scoped lang="scss">
	.settlement-box {
		font-size: 26rpx;
		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;
	}

	.maney-number-box {
		font-size: 30rpx;
		color: #e60012;
		margin-left: 5rpx;
		padding-top: 5rpx;
		font-weight: 650;
	}

	.icon-rmb {
		font-size: 30rpx;
		color: #e60012;
		font-weight: 700;
	}

	.line-box {
		width: 2rpx;
		height: 30rpx;
		background-color: #d2d3d5;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.event-box {
		font-size: 22rpx;
		color: #909295;
		height: 30rpx;
		line-height: 30rpx;
		box-sizing: border-box;
	}

	.event-wrap {
		width: 100%;
		max-height: 60rpx;
		min-height: 60rpx;
		overflow-y: auto;
	}

	.service-box {
		width: 95%;
		margin-left: 2.5%;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 10rpx;
		padding: 10rpx;
		padding-bottom: 30rpx;
		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;
	}

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

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

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

	// 上中下布局样式
	.body {
		display: flex;
		flex-direction: column;
		height: 100vh;
		// background: linear-gradient(to bottom, #08A3E9, #F8FCFF);
		background-color: #efeef1;
	}

	.head {
		text-align: center;
	}

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

	.list {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

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