feat:提交静态页预约下单

pages.json

@@ -692,6 +692,13 @@
 					{
 						"navigationBarTitleText" : "项目列表"
 					}
+				},
+				{
+					"path" : "reservationPlaceOrder/reservationPlaceOrder",
+					"style" : 
+					{
+						"navigationBarTitleText" : "预约下单"
+					}
 				}
 			]
 		}

pages/XDHome/technician/itemList/itemList.vue

@@ -81,7 +81,7 @@
 								<view class="maney-number-box">498.00</view>
 							</view>
 							<view class="ss-flex-1"></view>
-							<view class="reservation-box">立即预约</view>
+							<view class="reservation-box" @click="placeOrder(item)">立即预约</view>
 						</view>
 					</view>
                 </view>
@@ -172,6 +172,14 @@ import {
 			item.number=5
 		}
 	}
+	
+	// 预约下单
+	const placeOrder=async(item)=>{
+		console.log(item,'传递的参数')
+		uni.navigateTo({
+			url: '/pages/XDHome/technician/reservationPlaceOrder/reservationPlaceOrder?item='
+		});
+	}
 	//获取顶部安全距离
 	const app = uni.getSystemInfoSync()
 	const bottomHeightOne = (app.statusBarHeight) + 'rpx'

pages/XDHome/technician/reservationPlaceOrder/reservationPlaceOrder.vue

@@ -0,0 +1,491 @@
+<!-- 预约下单 -->
+<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:-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"
+							style="font-size: 30rpx;color:#44484B;font-weight: 650;margin-left: 20rpx;"></text>
+					</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 {
+		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 checkbox = ref([0])
+	const hobby = ref([{
+		text: "",
+		value: 0
+	}])
+
+	//获取顶部安全距离
+	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;
+	}
+</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, .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>

pages/moban.vue

@@ -1,4 +1,4 @@
-<!-- 项目列表 -->
+<!-- 布局模板 -->
 <template>
 	<view class="body" :style="'padding-top:'+bottomHeight">
 		<!-- 头部 -->

static/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4663271 */
-  src: url('https://at.alicdn.com/t/c/font_4663271_apzyost96po.woff2?t=1725249305975') format('woff2'),
-       url('https://at.alicdn.com/t/c/font_4663271_apzyost96po.woff?t=1725249305975') format('woff'),
-       url('https://at.alicdn.com/t/c/font_4663271_apzyost96po.ttf?t=1725249305975') format('truetype');
+  src: url('https://at.alicdn.com/t/c/font_4663271_23srq9bgl39.woff2?t=1725260301402') format('woff2'),
+       url('https://at.alicdn.com/t/c/font_4663271_23srq9bgl39.woff?t=1725260301402') format('woff'),
+       url('https://at.alicdn.com/t/c/font_4663271_23srq9bgl39.ttf?t=1725260301402') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-chenghao:before {
+  content: "\e619";
+}
+
 .icon-jianhao-:before {
   content: "\e605";
 }