yudao-mall-uniapp/pages/XDHome/technician/grabOrders/grabOrders.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;">
				<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:-140rpx">
			<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;min-width: 120rpx;">抢单技师</view>
						<view class="ss-flex-1"></view>
						<view style="font-size: 22rpx;color:#5AB8D1;" class="ss-flex-2 ss-col-center">
							<view style="width:40rpx;height:40rpx" v-for="it in 10">
								<image class="wh" style="border-radius: 20rpx;" referrerpolicy="no-referrer"
										src="/static/lanhu_shouye/pskrims113novhztuh3djro4dewm6siic9cbfccd-f457-4e94-a2a5-bf7808d1dd3f.png" />
							</view>
						</view>
						<text class="textIcon icon-gengduo" @click="jumpTechnicianList"
							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: 10rpx;">
						<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"
							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: 10rpx;">
						<view style="font-size: 27rpx;color:#44484B;font-weight: 600;min-width: 120rpx;">服务地址</view>
						<view class="ss-flex-1"></view>
						<view style="font-size: 22rpx;color:#5AB8D1;">山东省烟台市莱山区华庭路橡树湾小区10-515哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</view>
					</view>
					<view class="ss-flex-2 ss-col-center" style="margin-top: 10rpx;">
						<view style="font-size: 27rpx;color:#44484B;font-weight: 600;">出行方式</view>
						<view class="ss-flex-1"></view>
						<view style="font-size: 22rpx;color:#5AB8D1;">请选择出行方式</view>
						<text class="textIcon icon-gengduo"
							style="font-size: 30rpx;color:#44484B;font-weight: 650;margin-left: 20rpx;"></text>
					</view>
					<view style="margin-top: 10rpx;font-size: 16rpx;color: #97999B;">
						注：单程30公里，预计需要40分钟，当前车费预估参考滴滴快车计费标准
					</view>
				</view>
				<!-- 会员卡 -->
				<view class="public-box member-box" style="margin-top: 20rpx;" v-if="isShow">
					<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" v-if="isShow">
					<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;" v-if="isShow">
				<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" v-if="isShow">立即结算</view>
			<view class="settlement-box" v-else @click="offerReward">立即悬赏</view>
		</view>
		<!-- 悬赏弹窗 -->
		<uni-popup ref="popup" background-color="#fff" :is-mask-click="false">
			<view class="reward-popup-box">
				<view class="reward-title">悬赏抢单</view>
				<view class="two-title">悬赏规则</view>
				<view class="rule-info-box">1.起商价</view>
				<view class="rule-info-box">2.悬赏好处</view>
				<view class="rule-info-box">3.不悬赏自动取消订单</view>
				<view class="ss-flex-2 ss-col-center" style="margin-top: 30rpx;">
					<view class="colse-box" @click="closeInfo">先等等</view>
					<view class="confirm-box" style="margin-left: 20rpx;" @click="closeInfo">立即悬赏</view>
				</view>
				<view class="dimension-box">
					或者你想
					<text style="color: #E98A3D;">修改备注/</text>
					<text style="color: #E98A3D;">服务地址/</text>
					<text style="color: #E98A3D;">联系电话</text>
				</view>
			</view>
		</uni-popup>
	</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.navigateBack({
			delta: 1
		})
	}
	// 跳转到抢单技师列表
	const jumpTechnicianList=async()=>{
		uni.navigateTo({
			url: '/pages/XDHome/technicianList/technicianList'
		});
	}
	
	
	// 是否选择了技师
	const isShow=ref(false)
	
	// 勾选开通会员
	const checkbox = ref([0])
	const hobby = ref([{
		text: "",
		value: 0
	}])

	// 悬赏
	const popup=ref()
	// 打开悬赏弹窗
	const offerReward=async()=>{
		popup.value.open('center')
	}
	// 关闭悬赏弹窗
	const closeInfo=async()=>{
		popup.value.close('center')
	}


	//获取顶部安全距离
	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-popup .uni-popup__wrapper{
		width: 65%;
		border-radius: 10rpx;
		box-sizing: border-box;
	}
</style>
<style scoped lang="scss">
	.dimension-box{
		font-size: 18rpx;
		color: #474C4F;
		margin-top:10rpx;
		padding-left:5rpx
	}
	.confirm-box{
		font-size: 22rpx;
		color: #E9853E;
		background-color: #FFF8EF;
		box-sizing: border-box;
		padding: 5rpx 40rpx;
		border: 1rpx solid #F7B279;
		border-radius: 5rpx;
		letter-spacing: 2rpx;
	}
	.colse-box{
		font-size: 22rpx;
		color: #444;
		background-color: #EFEEF1;
		box-sizing: border-box;
		padding: 5rpx 40rpx;
		border-radius: 5rpx;
		letter-spacing: 2rpx;
	}
	.rule-info-box{
		font-size: 25rpx;
		color: #464646;
		margin-top: 10rpx;
		font-weight: 600;
		letter-spacing: 2rpx;
	}
	.two-title{
		font-size: 22rpx;
		color: #161616;
	}
	.reward-title{
		margin-top: 5rpx;
		text-align: center;
		font-size: 28rpx;
		color: #55AEC3;
	}
	.reward-popup-box{
		width: 100%;
		min-height: 150rpx;
		box-sizing: border-box;
		padding: 10rpx 25rpx;
	}
	.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, .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;
	}

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