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

<!-- 下单详情 -->
<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;">
						<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">立即结算</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.navigateBack({
			delta: 1
		})
	}
	// 勾选开通会员
	const checkbox=ref([0])
	const hobby=ref([
		{
			text:"",
			value:0
		}
	])

	//获取顶部安全距离
	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, .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, .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, .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>