新增订单页面和填写订单

pages.json

@@ -18,6 +18,18 @@
 		}
 	},
 	{
+		"path": "pages/my_orderlist/my_orderlist",
+		"style": {
+			"navigationBarTitleText": "我的订单"
+		}
+	},
+	{
+		"path": "pages/order_mark/order_mark",
+		"style": {
+			"navigationBarTitleText": "订单详情"
+		}
+	},
+	{
 		"path": "pages/ruzhuxuzhi/ruzhuxuzhi",
 		"style":{
 			"navigationBarTitleText": "入住须知"

pages/index/css/index.css

@@ -177,43 +177,50 @@
 	margin-top: 20rpx;
 }
 .room-image{
+	position: absolute;
 	margin-left: 31rpx;
 	width: 213rpx;
 	height: 161rpx;
 	border-radius: 5px;
 }
 .room-name{
-	margin-left: 16rpx;
+	position: absolute;
+	margin-left: 260rpx;
 	color: rgba(0, 0, 0, 1);
 	font-size: 34rpx;
 	font-weight: 400;
 }
 .room-mark{
-	margin-left: -106rpx;
+	position: absolute;
+	margin-left: 260rpx;
 	margin-top: 46rpx;
 	color: rgba(153, 153, 153, 1);
 	font-size: 24rpx;
 	font-weight: 400;
 }
 .room-icon{
-	margin-left: -146rpx;
+	position: absolute;
+	margin-left: 261rpx;
 	margin-top: 116rpx;
 }
 .before-price{
-	margin-left: 236rpx;
+	position: absolute;
+	margin-left: 606rpx;
 	color: rgba(153, 153, 153, 1);
 	font-size: 24rpx;
 	font-weight: 400;
 }
 .room-price{
-	margin-left: -86rpx;
+	position: absolute;
+	margin-left: 585rpx;
 	margin-top: 46rpx;
 	color: rgba(255, 87, 51, 1);
 	font-size: 42rpx;
 	font-weight: 500;
 }
 .room-button{
-	margin-left: -106rpx;
+	position: absolute;
+	margin-left: 579rpx;
 	margin-top: 96rpx;
 	width: 100rpx;
 	height: 66rpx;
@@ -226,7 +233,8 @@
 	line-height: 66rpx;
 }
 .room-line{
-	margin-left: -666rpx;
+	position: absolute;
+	margin-left: 0rpx;
 	margin-top: 194rpx;
 	width: 710rpx;
 	height: 1px;
@@ -248,6 +256,14 @@
 	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
 	font-weight: 400;
 }
+.popup_error{
+	position: absolute;
+	margin-left: 577rpx;
+	margin-top: 15rpx;
+	width: 32px;
+	height: 32px;
+	background-image: url(../../static/index/swiper_x.svg);
+}
 /* 轮播图 */
 .swiper{
 	position: absolute;
@@ -265,4 +281,22 @@
 	width: 650rpx;
 	height: 340rpx;
 	margin: 0;
+}
+.popup_title2{
+	position: absolute;
+	margin-left: 38rpx;
+	margin-top: 444rpx;
+	color: rgba(56, 56, 56, 1);
+	font-size: 28rpx;
+	font-weight: 500;
+	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+.popup_txt{
+	position: absolute;
+	margin-left: 46rpx;
+	margin-right: 43rpx;
+	margin-top: 496rpx;
+	color: rgba(128, 128, 128, 1);
+	font-size: 28rpx;
+	font-weight: 400;
 }

pages/index/index.vue

@@ -47,7 +47,7 @@
 				  <text class="select-list">周五离店</text>
 				  <text class="select-list-time">07月22日</text>
 				</view>
-				<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate"
+				<uni-calendar ref="calendar" :selected="info.selected" class="uni-calendar--hook" :clear-date="true" :date="info.date" :insert="info.insert" :lunar="info.lunar" :startDate="info.startDate"
 				:endDate="info.endDate" :range="info.range" @confirm="confirm" @close="close"/>
 			</view>
 			<!-- 房型列表 -->
@@ -57,10 +57,10 @@
 					<view class="room-name">{{item.name}}</view>
 					<view class="room-mark">{{item.mark1}} {{item.mark2}} {{item.mark3}}</view>
 					<view class="room-icon">
-						<image src="../../static/index/index_wifi.svg" style="width: 22rpx;height: 22rpx;"></image>
-						<image src="../../static/index/index_kongtiao.svg" style="width: 20rpx;height: 20rpx;margin-left: 10rpx;"></image>
-						<image src="../../static/index/index_nosmoking.svg" style="width: 22rpx;height: 22rpx;margin-left: 10rpx;"></image>
-						<image src="../../static/index/index_lock.svg" style="width: 23rpx;height: 23rpx;margin-left: 10rpx;"></image>
+						<image src="../../static/index/index_wifi.svg" style="width: 30rpx;height: 30rpx;"></image>
+						<image src="../../static/index/index_kongtiao.svg" style="width: 26rpx;height: 26rpx;margin-left: 10rpx;"></image>
+						<image src="../../static/index/index_nosmoking.svg" style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"></image>
+						<image src="../../static/index/index_lock.svg" style="width: 30rpx;height: 30rpx;margin-left: 10rpx;"></image>
 					</view>
 					<view class="before-price"><strike>{{item.before_price}}</strike></view>
 					<view class="room-price">{{item.price}}</view>
@@ -74,15 +74,18 @@
 		<uni-popup ref="inputDialog" type="dialog">
 			<view class="popup_bg">
 				<text class="popup_title">户型详情</text>
+				<text class="popup_error" @confirm="dialogInputConfirm"></text>
 				<!-- 轮播图 -->
-				<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
-					:duration="duration">
-					<swiper-item>
-						<view class="swiper-item" v-for="(item, index) in img" :key="index">
+				<swiper class="swiper" circular :indicator-dots="indicatorDots">
+					<swiper-item v-for="(item, index) in img" :key="index">
+						<view class="swiper-item">
 							<image :src="item.srcUrl" class="swiper-img"></image>
 						</view>
 					</swiper-item>
 				</swiper>
+				<text class="popup_title2">便利设施</text>
+				<view class="popup_txt">尤其是刚上线的产品，很难通过产品的内部体系来实现快速的用户增长，所以会更加依赖于分享来达到广泛的传播，获取目标用户。
+所以监听用户的截图操作，提示用户进行分享，既缩短了以前分享截...</view>
 			</view>
 			<!-- <uni-popup-dialog ref="baseClose"  mode="base" title="输入内容" value="对话框预置提示内容!"
 				placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog> -->
@@ -94,7 +97,7 @@
 <script>
 	// 导入图片
 	import room1 from '../../static/index/swiper_img1.svg'
-	import room2 from '../../static/index/room_image.svg'
+	import room2 from '../../static/index/swiper_img1.svg'
 	export default {
 		data() {
 			return {
@@ -102,7 +105,8 @@
 				info: {
 					lunar: true,
 					range: true,
-					insert: false
+					insert: false,
+					selected: []
 				},
 				room:[
 					{id:1,room_img:({ url: "../../static/index/room_image.svg" }),name:'01户型',before_price:'¥419',price:'¥0.00',mark1:'22m',mark2:'无早',mark3:'大床'},
@@ -110,6 +114,7 @@
 					{id:3,room_img:({ url: "../../static/index/room_image.svg" }),name:'01户型',before_price:'¥419',price:'¥0.00',mark1:'22m',mark2:'无早',mark3:'大床'},
 					{id:4,room_img:'url(../../static/index/index_bg.svg)',name:'02户型',before_price:'¥419',price:'¥0.00',mark1:'22m',mark2:'无早',mark3:'大床'},
 				],
+				indicatorDots: true,//滚动图片提示条默认出现
 				img:[
 					{
 						value: '1',
@@ -150,9 +155,8 @@
 			inputDialogToggle() {
 				this.$refs.inputDialog.open()
 			},
-			dialogInputConfirm(val) {
-				console.log(val)
-				this.value = val
+			dialogInputConfirm() {
+				console.log(1)
 				// 关闭窗口后，恢复默认内容
 				this.$refs.inputDialog.close()
 			},

pages/my_orderlist/css/my_orderlist.css

@@ -0,0 +1,156 @@
+.content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: #F2F3F5;
+}
+/*切换栏*/
+.inv-h-w {
+	background-color: #FFFFFF;
+	height: 98rpx;
+	display: flex;
+	top: 0;
+	width: 750rpx;
+}
+
+.inv-h {
+	font-size: 28rpx;
+	flex: 1;
+	text-align: center;
+	height: 98rpx;
+	line-height: 98rpx;
+	color: rgba(128, 128, 128, 1);
+}
+
+.inv-h-se {
+	color: rgba(0, 0, 0, 1);
+	font-size: 28rpx;
+	font-weight: bold;
+	height: 98rpx;
+	line-height: 98rpx;
+	border-bottom: 6rpx solid rgba(41, 109, 227, 1);
+}
+
+/* 订单样式 */
+.room-kuang{
+	display: block; 
+	width: 750rpx;
+	background-color: #FFFFFF;
+	margin-top: 5rpx;
+}
+.room-xinxi{
+	display: -webkit-box;
+	flex-direction: column;
+	align-items: center;
+	width: 710rpx;
+	height: 243rpx;
+	margin-top: 20rpx;
+}
+.room-image{
+	position: absolute;
+	margin-left: 51rpx;
+	margin-top: 10rpx;
+	width: 165rpx;
+	height: 125rpx;
+	border-radius: 5px;
+}
+.room-name{
+	position: absolute;
+	margin-left: 236rpx;
+	margin-top: 10rpx;
+	color: rgba(0, 0, 0, 1);
+	font-size: 34rpx;
+	font-weight: 400;
+}
+.room-time{
+	position: absolute;
+	margin-left: 236rpx;
+	margin-top: 56rpx;
+	color: rgba(166, 166, 166, 1);
+	font-size: 24rpx;
+	font-weight: 400;
+}
+.room-order{
+	position: absolute;
+	margin-left: 236rpx;
+	margin-top: 96rpx;
+	color: rgba(166, 166, 166, 1);
+	font-size: 24rpx;
+	font-weight: 400;
+}
+.room-type{
+	position: absolute;
+	margin-left: 627rpx;
+	color: rgba(128, 128, 128, 1);
+	font-size: 24rpx;
+	font-weight: 400;
+}
+.room-price{
+	position: absolute;
+	margin-left: 601rpx;
+	margin-top: 46rpx;
+	color: rgba(56, 56, 56, 1);
+	font-size: 42rpx;
+	font-weight: 500;
+}
+.room-count{
+	position: absolute;
+	margin-left: 51rpx;
+	margin-top: 155rpx;
+	font-size: 24rpx;
+	font-weight: 400;
+}
+.room-count-txt{
+	position: absolute;
+	margin-left: 201rpx;
+	margin-top: 153rpx;
+	color: rgba(128, 128, 128, 1);
+	font-size: 24rpx;
+	font-weight: 400;
+}
+.room-button{
+	position: absolute;
+	margin-left: 381rpx;
+	margin-top: 146rpx;
+	width: 146rpx;
+	height: 56rpx;
+	border: 1px solid rgba(41, 109, 227, 1);
+	border-radius: 4px;
+	text-align: center;
+	line-height: 56rpx;
+	color: rgba(41, 109, 227, 1);
+}
+.room-button2{
+	position: absolute;
+	margin-left: 551rpx;
+	margin-top: 146rpx;
+	width: 146rpx;
+	height: 56rpx;
+	border: 1px solid rgba(41, 109, 227, 1);
+	border-radius: 4px;
+	text-align: center;
+	line-height: 56rpx;
+	color: rgba(41, 109, 227, 1);
+}
+.room-button3{
+	position: absolute;
+	margin-left: 551rpx;
+	margin-top: 146rpx;
+	width: 146rpx;
+	height: 56rpx;
+	background: rgba(41, 109, 227, 1);
+	border-radius: 4px;
+	text-align: center;
+	line-height: 56rpx;
+	color: rgba(255, 255, 255, 1);
+	font-size: 28rpx;
+}
+.room-line{
+	position: absolute;
+	margin-left: 20rpx;
+	margin-top: 225rpx;
+	width: 710rpx;
+	height: 1px;
+	background: rgba(220, 225, 230, 1);
+}

pages/my_orderlist/my_orderlist.vue

@@ -0,0 +1,135 @@
+<template>
+	<view class="content">
+		<!-- 切换栏 -->
+		<view class="inv-h-w">
+			<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="changeTab(0)">全部</view>
+			<view :class="['inv-h',Inv==1?'inv-h-se':'']" @click="changeTab(1)">待支付</view>
+			<view :class="['inv-h',Inv==2?'inv-h-se':'']" @click="changeTab(2)">待入住</view>
+			<view :class="['inv-h',Inv==3?'inv-h-se':'']" @click="changeTab(3)">已入住</view>
+			<view :class="['inv-h',Inv==4?'inv-h-se':'']" @click="changeTab(4)">已取消</view>
+			<view :class="['inv-h',Inv==5?'inv-h-se':'']" @click="changeTab(5)">待结账</view>
+			<view :class="['inv-h',Inv==6?'inv-h-se':'']" @click="changeTab(6)">已完成</view>
+		</view>
+		<!-- 订单样式 -->
+		<view class="room-kuang">
+			<view class="room-xinxi" v-for="(item,index) in troom" :key="index">
+				<view @click="navigateToOrderMark(item.id)">
+				<image class="room-image" :src="item.srcUrl"></image>
+				<view class="room-name">{{item.name}}</view>
+				<view class="room-time">{{item.time}}</view>
+				<view class="room-order">{{item.order_num}}</view>
+				<view class="room-type">{{item.type}}</view>
+				<view class="room-price">{{item.price}}</view>
+				</view>
+				<uni-countdown v-if="item.types === 1" class="room-count" color="#FF5733" :show-day="false" :second="timeupSecond" @timeup="timeup" />
+				<text v-if="item.types === 1" class="room-count-txt">之后取消</text>
+				<view class="room-button">
+					<text v-if="item.type === '已取消'">删除</text>
+					<text v-if="item.type === '待支付'">取消订单</text>
+					<text v-if="item.type === '已完成'">删除</text>
+					<text v-if="item.type === '待入住'">取消订单</text>
+					<text v-if="item.type === '已入住'">删除</text>
+				</view>
+				<view class="room-button2" :class="{'room-button3': item.type == '待支付'}">
+					<text v-if="item.type === '已取消'">再次预定</text>
+					<text v-if="item.type === '待支付'">支付</text>
+					<text v-if="item.type === '已完成'">再次预定</text>
+					<text v-if="item.type === '待入住'">办理入住</text>
+					<text v-if="item.type === '已入住'">退房</text>
+				</view>
+				<view class="room-line"  v-if="index<(troom.length-1)"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	// 导入图片
+	import room1 from '../../static/index/room_image.svg'
+	import room2 from '../../static/index/room_image.svg'
+	export default {
+		data(){
+			return {
+				Inv: 0,
+				tabList:[
+					{id:1,name:'全部'},
+					{id:2,name:'待支付'},
+					{id:3,name:'待入住'},
+					{id:4,name:'已入住'},
+					{id:5,name:'已取消'},
+					{id:6,name:'待结账'},
+					{id:7,name:'已完成'},
+				],
+				room:[],
+				troom:[],
+				timeupSecond: 1800
+			}
+		},
+		onShow() {
+			// 模拟从后台拿到的数据
+			var room = [
+				{id:1,srcUrl:room1,name:'01户型',order_num:'订单号：23021260',price:'¥0.00',time:'2022.07.21 - 2022.07.22',type:'待支付',types:1},
+				{id:2,srcUrl:room2,name:'02户型',order_num:'订单号：23021261',price:'¥0.00',time:'2022.07.21 - 2022.07.22',type:'已取消',types:4},
+				{id:3,srcUrl:room1,name:'01户型',order_num:'订单号：23021262',price:'¥0.00',time:'2022.07.21 - 2022.07.22',type:'已完成',types:6},
+				{id:4,srcUrl:room2,name:'02户型',order_num:'订单号：23021263',price:'¥0.00',time:'2022.07.21 - 2022.07.22',type:'待入住',types:2},
+			]
+			// list数组中为每一项添加双向绑定的属性---这个属性要在页面显示(onShow)添加
+			room.forEach(el => el.isChecked = false);
+			this.room = room;
+			this.troom = room;//真实数据赋值给页面数据
+		},
+		onLoad(option) {
+			this.Inv=option.Inv;
+			// console.log(this.Inv)
+		},
+		mounted(){
+			// location.reload()//自动刷新
+			console.log(this.Inv)
+			this.changeTab(this.Inv)
+		},
+		methods:{
+			/**
+			  * @Explain：选项卡点击切换
+			  */
+			changeTab(Inv) {
+				var that = this;
+				this.Inv =Inv
+				var arr = [];
+				that.room.map(item => {//遍历真实数据，拿到所需要的数据放在页面数据tlist中，展示在页面上
+					if(item.types == this.Inv){
+						arr.push(item);
+					}
+				})
+				that.troom = arr;
+				if(this.Inv == 0){//获取全部数据
+					that.troom = that.room;
+				}
+				//滚动到顶部
+				uni.pageScrollTo({
+					duration: 0, //过渡时间必须为0，否则运行到手机会报错
+					scrollTop: 0 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离（如res.top - data.top）
+				})
+			},
+			// 倒计时
+			timeup() {
+				uni.showToast({
+					title: '时间到'
+				})
+				this.timeupSecond = 1799
+			},
+			// 跳转到订单详情
+			navigateToOrderMark(id) {
+				// console.log(id)
+				uni.navigateTo({
+					url: "../order_mark/order_mark?ids="+id,
+					complete: () => {console.log("调用完成,id:"+id)}
+				})
+			},
+			
+		},
+	}
+</script>
+
+<style>
+	@import url(./css/my_orderlist.css);
+</style>

pages/myself/myself.vue

@@ -8,31 +8,31 @@
 		<!-- 第二部分，我的订单 -->
 		<view class="my_order">
 			<view class="order_title">我的订单</view>
-			<view class="order_all">全部＞</view>
+			<view class="order_all" @click="navigateToAll">全部＞</view>
 			<view class="item-list">
-			  <view class="item-list-one" @click="navigateToXuzhi">
+			  <view class="item-list-one" @click="navigateToDaizhifu">
 			    <image src="../../static/my/no_zhifu.svg" class="img-btn"></image>
 			    <text class="list-txt">待支付</text>
 			  </view>
-			  <view class="item-list-one" @click="navigateToCard">
+			  <view class="item-list-one" @click="navigateToDairuzhu">
 			    <image src="../../static/my/dairuzhu.svg" class="img-btn"></image>
 			    <text class="list-txt">待入住</text>
 			  </view>
-			  <view class="item-list-one" @click="navigateToPay">
+			  <view class="item-list-one" @click="navigateToYiruzhu">
 			    <image src="../../static/my/yiruzhu.svg" class="img-btn"></image>
 			    <text class="list-txt">已入住</text>
 			  </view>
-			  <view class="item-list-one" @click="navigateToPay">
+			  <view class="item-list-one" @click="navigateToYiquxiao">
 			    <image src="../../static/my/yiquxiao.svg" class="img-btn"></image>
 			    <text class="list-txt">已取消</text>
 			  </view>
 			</view>
 			<view class="item-list">
-			  <view class="item-list-one" @click="navigateToXuzhi">
+			  <view class="item-list-one" @click="navigateToDaijiezhang">
 			    <image src="../../static/my/no_pay.svg" class="img-btn"></image>
 			    <text class="list-txt">待结账</text>
 			  </view>
-			  <view class="item-list-one" @click="navigateToCard">
+			  <view class="item-list-one" @click="navigateToYiwancheng">
 			    <image src="../../static/my/wancheng.svg" class="img-btn"></image>
 			    <text class="list-txt">已完成</text>
 			  </view>
@@ -81,7 +81,66 @@
 			
 		},
 		methods: {
-			
+			//跳转到全部订单
+			navigateToAll(){
+				uni.navigateTo({
+					url:"../my_orderlist/my_orderlist?Inv=0"
+				})
+			},
+			//跳转到待支付订单
+			navigateToDaizhifu(){
+				uni.navigateTo({ 
+					url: "../my_orderlist/my_orderlist?Inv=1",
+					success: res => {console.log("调用成功")},
+					fail: () => {console.log("调用失败")},
+					complete: () => {console.log("调用完成")}
+				})
+			},
+			//跳转到待入住订单
+			navigateToDairuzhu(){
+				uni.navigateTo({ 
+					url: "../my_orderlist/my_orderlist?Inv=2",
+					success: res => {console.log("调用成功")},
+					fail: () => {console.log("调用失败")},
+					complete: () => {console.log("调用完成")}
+				})
+			},
+			//跳转到已入住订单
+			navigateToYiruzhu(){
+				uni.navigateTo({ 
+					url: "../my_orderlist/my_orderlist?Inv=3",
+					success: res => {console.log("调用成功")},
+					fail: () => {console.log("调用失败")},
+					complete: () => {console.log("调用完成")}
+				})
+			},
+			//跳转到已取消订单
+			navigateToYiquxiao(){
+				uni.navigateTo({ 
+					url: "../my_orderlist/my_orderlist?Inv=4",
+					success: res => {console.log("调用成功")},
+					fail: () => {console.log("调用失败")},
+					complete: () => {console.log("调用完成")}
+				})
+			},
+			//跳转到待结账订单
+			navigateToDaijiezhang(){
+				uni.navigateTo({ 
+					url: "../my_orderlist/my_orderlist?Inv=5",
+					success: res => {console.log("调用成功")},
+					fail: () => {console.log("调用失败")},
+					complete: () => {console.log("调用完成")}
+				})
+			},
+			//跳转到已完成订单
+			navigateToYiwancheng(){
+				uni.navigateTo({ 
+					url: "../my_orderlist/my_orderlist?Inv=6",
+					success: res => {console.log("调用成功")},
+					fail: () => {console.log("调用失败")},
+					complete: () => {console.log("调用完成")}
+				})
+			}
 		}
 	}
 </script>

pages/order_mark/css/order_mark.css

@@ -0,0 +1,159 @@
+.content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: #F2F3F5;
+}
+/* 第一层模块 */
+.one-order{
+	width: 750rpx;
+	height: 646rpx;
+	background: rgba(41, 109, 227, 1);
+}
+.one-order-title{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 34rpx;
+	color: rgba(255, 255, 255, 1);
+	font-size: 34rpx;
+	font-weight: 400;
+	line-height: 62rpx;
+}
+.all-price{
+	position: absolute;
+	margin-left: 284rpx;
+	font-size: 32rpx;
+	line-height: 47rpx;
+}
+.one-order-menshi{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 135rpx;
+	color: rgba(255, 255, 255, 1);
+	font-size: 28rpx;
+	font-weight: 400;
+	line-height: 41rpx;
+}
+.menshi-price{
+	position: absolute;
+	margin-left: 545rpx;
+}
+.one-order-fuli{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 196rpx;
+	color: rgba(255, 255, 255, 1);
+	font-size: 28rpx;
+	font-weight: 400;
+	line-height: 41rpx;
+}
+.fuli-price{
+	position: absolute;
+	margin-left: 507rpx;
+}
+.one-order-yufukuan{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 257rpx;
+	color: rgba(255, 255, 255, 1);
+	font-size: 28rpx;
+	font-weight: 400;
+	line-height: 41rpx;
+}
+.one-order-zhu{
+	position: absolute;
+	margin-left: 32rpx;
+	margin-right: 29rpx;
+	margin-top: 341rpx;
+	color: rgba(255, 255, 255, 1);
+	font-size: 24rpx;
+	font-weight: 400;
+}
+.room-button{
+	position: absolute;
+	margin-left: 164rpx;
+	margin-top: 491rpx;
+	width: 175rpx;
+	height: 82rpx;
+	border: 1px solid rgba(255, 255, 255, 1);
+	border-radius: 9px;
+	color: rgba(255, 255, 255, 1);
+	font-size: 28rpx;
+	font-weight: 400;
+	text-align: center;
+	line-height: 82rpx;
+}
+.room-button2{
+	position: absolute;
+	margin-left: 415rpx;
+	margin-top: 491rpx;
+	width: 175rpx;
+	height: 82rpx;
+	border: 1px solid rgba(255, 255, 255, 1);
+	border-radius: 9px;
+	color: rgba(255, 255, 255, 1);
+	font-size: 28rpx;
+	font-weight: 400;
+	text-align: center;
+	line-height: 82rpx;
+}
+/* 第二层模块 */
+.two-order{
+	margin-top: -30rpx;
+	width: 690rpx;
+	height: 459rpx;
+	background: rgba(255, 255, 255, 1);
+	border-radius: 7px;
+	color: rgba(166, 166, 166, 1);
+	font-size: 28rpx;
+	font-weight: 400;
+}
+.two-order-title{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 30rpx;
+	color: rgba(0, 0, 0, 1);
+	font-size: 32rpx;
+	font-weight: 400;
+}
+.two-order-name{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 101rpx;
+}
+.two-order-phone{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 156rpx;
+}
+.two-order-count{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 211rpx;
+}
+.two-order-time{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 266rpx;
+}
+.two-order-xing{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 321rpx;
+}
+.two-order-zhuTime{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 376rpx;
+}
+.two-order-txt{
+	color: rgba(102, 102, 102, 1);
+}
+.order-mark{
+	margin-top: 174rpx;
+	text-align: center;
+	color: rgba(204, 204, 204, 1);
+	font-size: 20rpx;
+	font-weight: 400;
+}

pages/order_mark/order_mark.vue

@@ -0,0 +1,85 @@
+<template>
+	<view class="content">
+		<!-- 第一层模块 -->
+		<view class="one-order">
+			<view class="one-order-title">预定成功 / 等待您入住<text class="all-price">¥0</text></view>
+			<view class="one-order-menshi">门市价<text class="menshi-price">¥160</text></view>
+			<view class="one-order-fuli">教师福利<text class="fuli-price">¥150</text></view>
+			<view class="one-order-yufukuan">预付款<text class="menshi-price">¥20</text></view>
+			<view class="one-order-zhu">
+				注：水费为0.62元/吨，电费为1.1元/度；补助吨数为3吨，补助度
+				数为10度，超出标准需在预付款中扣除，未超出原路返回预
+				付款
+			</view>
+			<view class="room-button">
+				<!-- <text v-if="item.type === '已取消'">再次预定</text>
+				<text v-if="item.type === '待支付'">支付</text>
+				<text v-if="item.type === '已完成'">再次预定</text> -->
+				<text>办理入住</text>
+				<!-- <text v-if="item.type === '已入住'">退房</text> -->
+			</view>
+			<view class="room-button2">
+				<!-- <text v-if="item.type === '已取消'">删除</text>
+				<text v-if="item.type === '待支付'">取消订单</text>
+				<text v-if="item.type === '已完成'">删除</text> -->
+				<text>取消订单</text>
+				<!-- <text v-if="item.type === '已入住'">删除</text> -->
+			</view>
+		</view>
+		<!-- 第二层模块 -->
+		<view class="two-order">
+			<view class="two-order-title">订单信息</view>
+			<view class="two-order-name">预定信息：<text class="two-order-txt">李老师</text></view>
+			<view class="two-order-phone">手机号码：<text class="two-order-txt">13569855689</text></view>
+			<view class="two-order-count">订  单  号：<text class="two-order-txt">165404161161631</text></view>
+			<view class="two-order-time">下单时间：<text class="two-order-txt">2022.07.21  15:15:15</text></view>
+			<view class="two-order-xing">户         型：<text class="two-order-txt">01户型</text></view>
+			<view class="two-order-zhuTime">入住时间：<text class="two-order-txt">入住日14：00后   离店日12：00前</text></view>
+		</view>
+		
+		<view class="order-mark">您的满意是我们最大的追求</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				orderList:[
+					{id:1,orderTitle:'预定成功 / 等待您的支付',allPrice:'¥20.00',orderMenshi:'门市价',menshiPrice:'¥160',orderFuli:'教师福利',fuliPrice:'¥160',orderYufukuan:'预付款',yufukuanPrice:'¥20',types:1},
+					{id:4,orderTitle:'预定成功 / 等待您的入住',allPrice:'¥20.00',orderMenshi:'门市价',menshiPrice:'¥160',orderFuli:'教师福利',fuliPrice:'¥160',orderYufukuan:'预付款',yufukuanPrice:'¥20',types:2},
+					{id:2,orderTitle:'订单已取消 / 期待您再次光临',allPrice:'¥20.00',orderMenshi:'门市价',menshiPrice:'¥160',orderFuli:'教师福利',fuliPrice:'¥160',orderYufukuan:'预付款',yufukuanPrice:'¥20',types:4},
+					{id:3,orderTitle:'订单已完成 / 期待您再次光临',allPrice:'¥10.00',orderMenshi:'门市价',shuidianPrice:'¥10',orderShuidian:'水电扣除',types:6}
+				],
+			}
+		},
+		onShow() {
+			// 模拟从后台拿到的数据
+			var orderList = [
+				{id:1,orderTitle:'预定成功 / 等待您的支付',allPrice:'¥20.00',orderMenshi:'门市价',menshiPrice:'¥160',orderFuli:'教师福利',fuliPrice:'¥160',orderYufukuan:'预付款',yufukuanPrice:'¥20',types:1},
+				{id:4,orderTitle:'预定成功 / 等待您的入住',allPrice:'¥20.00',orderMenshi:'门市价',menshiPrice:'¥160',orderFuli:'教师福利',fuliPrice:'¥160',orderYufukuan:'预付款',yufukuanPrice:'¥20',types:2},
+				{id:2,orderTitle:'订单已取消 / 期待您再次光临',allPrice:'¥20.00',orderMenshi:'门市价',menshiPrice:'¥160',orderFuli:'教师福利',fuliPrice:'¥160',orderYufukuan:'预付款',yufukuanPrice:'¥20',types:4},
+				{id:3,orderTitle:'订单已完成 / 期待您再次光临',allPrice:'¥10.00',orderMenshi:'门市价',shuidianPrice:'¥10',orderShuidian:'水电扣除',types:6}
+			]
+		},
+		onload(option){
+			console.log('返回')
+			console.log(option.ids)
+			console.log(this.orderList)
+			// var arr =[]
+			// that.room.map(item => {
+			// 	if(option.id==this.orderList[i].id) {
+			// 		arr.push(item);
+			// 	}
+			// })
+			// this.orderList=arr
+		},
+		methods:{
+			
+		}
+	}
+</script>
+
+<style>
+	@import url(./css/order_mark.css);
+</style>

pages/order_room/css/order_room.css

@@ -136,91 +136,34 @@
 	border-radius: 5rpx;
 }
 .form_title{
-	/* margin-left: 29rpx;
-	margin-top: 22rpx; */
+	position: absolute;
+	margin-left: 29rpx;
+	margin-top: 166rpx;
 	color: rgba(128, 128, 128, 1);
 	font-size: 28rpx;
 	font-weight: 400;
 }
-/* 第三层订房 */
-.room-list{
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-start;
-	width: 710rpx;
-	/* height: 981rpx; */
-	margin-top: 20rpx;
-	margin-left: 10rpx;
-	background: rgba(255, 255, 255, 1);
-	border-radius: 10px, 10px, 0px, 0px;
-}
-
-/* 房型列表 */
-.room-kuang{
-	display: block; 
-	margin-top: 150rpx;
-}
-.room-xinxi{
-	display: -webkit-box;
-	flex-direction: column;
-	align-items: center;
-	width: 710rpx;
-	height: 213rpx;
-	margin-top: 20rpx;
-}
-.room-image{
-	margin-left: 31rpx;
-	width: 213rpx;
-	height: 161rpx;
-	border-radius: 5px;
-}
-.room-name{
-	margin-left: 16rpx;
+.form-name{
+	position: absolute;
+	margin-left: 29rpx;
+	margin-top: 238rpx;
 	color: rgba(0, 0, 0, 1);
-	font-size: 34rpx;
-	font-weight: 400;
-}
-.room-mark{
-	margin-left: -106rpx;
-	margin-top: 46rpx;
-	color: rgba(153, 153, 153, 1);
-	font-size: 24rpx;
+	font-size: 28rpx;
 	font-weight: 400;
 }
-.room-icon{
-	margin-left: -146rpx;
-	margin-top: 116rpx;
+.form-line{
+	position: absolute;
+	margin-left: 29rpx;
+	margin-top: 301rpx;
+	width: 650rpx;
+	background: rgba(204, 204, 204, 1);
+	border: 1px solid rgba(230, 230, 230, 1);
 }
-.before-price{
-	margin-left: 236rpx;
-	color: rgba(153, 153, 153, 1);
-	font-size: 24rpx;
+.form-phone{
+	position: absolute;
+	margin-left: 29rpx;
+	margin-top: 326rpx;
+	color: rgba(0, 0, 0, 1);
+	font-size: 28rpx;
 	font-weight: 400;
 }
-.room-price{
-	margin-left: -86rpx;
-	margin-top: 46rpx;
-	color: rgba(255, 87, 51, 1);
-	font-size: 42rpx;
-	font-weight: 500;
-}
-.room-button{
-	margin-left: -106rpx;
-	margin-top: 96rpx;
-	width: 100rpx;
-	height: 66rpx;
-	background: rgba(41, 109, 227, 1);
-	border-radius: 11px;
-	color: rgba(255, 255, 255, 1);
-	font-size: 36rpx;
-	font-weight: 500;
-	text-align: center;
-	line-height: 66rpx;
-}
-.room-line{
-	margin-left: -666rpx;
-	margin-top: 194rpx;
-	width: 710rpx;
-	height: 1px;
-	background: rgba(220, 225, 230, 1);
-}

pages/order_room/order_room.vue

@@ -31,18 +31,21 @@
 				</view>
 				<view class="form_bg">
 					<view class="form_title">01户型</view>
-					<!-- 自定义表单校验 -->
-					<!-- <uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData">
-						<uni-forms-item label="姓名" required name="name">
-							<uni-easyinput v-model="customFormData.name" placeholder="请输入姓名" />
-						</uni-forms-item>
-						<uni-forms-item label="年龄" required name="age">
-							<uni-easyinput v-model="customFormData.age" placeholder="请输入年龄" />
-						</uni-forms-item>
-						<uni-forms-item label="兴趣爱好" required name="hobby">
-							<uni-data-checkbox v-model="customFormData.hobby" multiple :localdata="hobbys" />
-						</uni-forms-item>
-					</uni-forms> -->
+					<!-- 自定义表单 -->
+					<view class="form-name">李希</view>
+					<view class="form-line"></view>
+					<view class="form-phone">13548790024</view>
+					<view class="form-line" style="margin-top: 389rpx;"></view>
+					<view class="uni-list-cell">
+						<view class="uni-list-cell-left">
+							当前选择
+						</view>
+						<view class="uni-list-cell-db">
+							<picker @change="bindPickerChange" :value="index" :range="array">
+								<view class="uni-input">{{array[index]}}</view>
+							</picker>
+						</view>
+					</view>
 				</view>
 			</view>
 			<button style="margin-bottom: 0rpx;" type="primary" @click="submit('customForm')">提交</button>
@@ -51,7 +54,7 @@
 		<!-- 第三层订房 -->
 		<view class="room-list">
 			<!-- 房型列表 -->
-			<view class="room-kuang">
+			<!-- <view class="room-kuang">
 				<view class="room-xinxi" v-for="(item,index) in room" :key="index">
 					<image class="room-image" src="../../static/index/room_image.svg"></image>
 					<view class="room-name">{{item.name}}</view>
@@ -67,7 +70,7 @@
 					<view class="room-button" @click="navigateToOrderRoom"><text>订</text></view>
 					<view class="room-line"  v-if="index<(room.length-1)"></view>
 				</view>
-			</view>
+			</view> -->
 			
 		</view>
 	</view>
@@ -83,6 +86,8 @@
 					range: true,
 					insert: false
 				},
+				array: ['18:00前到店', '19:00前到店', '20:00前到店', '21:00前到店'],
+				index: 0,
 			}
 		},
 		onLoad() {
@@ -98,6 +103,11 @@
 			confirm(e) {
 				console.log('confirm 返回:', e)
 			},
+			//选择器
+			bindPickerChange: function(e) {
+				// console.log('picker发送选择改变，携带值为', e.detail.value)
+				this.index = e.detail.value
+			},
 		}
 	}
 </script>