更新各种状态订单跳转传参和不同参数不同页面

pages/index/css/index.css

@@ -31,32 +31,68 @@
 	height: 44px;
 }
 /* <!-- 第一层公寓名称卡片 --> */
-.uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title[data-v-19622063] {
-    font-size: 17px;
-    color: #3a3a3a;
-    font-weight: 600;
+.uni-ka{
+	width: 710rpx;
+	height: 254rpx;
+	background: rgba(255, 255, 255, 1);
+	border-radius: 10px;
+}
+.uni-title{
+	position: absolute;
+	margin-left: 29rpx;
+	margin-top: 21rpx;
+	color: rgba(0, 0, 0, 1);
+	font-size: 34rpx;
+	font-weight: 500;
+}
+.uni-sub-title{
+	position: absolute;
+	margin-left: 31rpx;
+	margin-top: 77rpx;
+	color: rgba(153, 153, 153, 1);
+	font-size: 20rpx;
+	font-weight: 400;
 }
-.uni-card .uni-card__header .uni-card__header-extra .uni-card__header-extra-text[data-v-19622063] {
-    font-size: 12px;
-    color: #909399;
+.uni-extra{
+	position: absolute;
+	margin-left: 560rpx;
+	margin-top: 71rpx;
+	color: rgba(102, 102, 102, 1);
+	font-size: 24rpx;
+	font-weight: 400;
 }
 .uni-body{
+	position: absolute;
+	margin-left: 31rpx;
+	margin-top: 144rpx;
 	color: rgba(0, 0, 0, 1);
 	font-size: 14px;
 	font-weight: 500;
 }
+.uni-body2{
+	position: absolute;
+	margin-left: 31rpx;
+	margin-top: 147rpx;
+	color: rgba(153, 153, 153, 1);
+	font-size: 24rpx;
+	font-weight: 400;
+}
 .uni-map{
+	position: absolute;
 	float: right;
 	width: 50rpx;
 	height: 79rpx;
 	margin: 0 auto;
-	margin-left: 12px;
+	margin-left: 552rpx;
+	margin-top: 137rpx;
 }
 .uni-phone{
+	position: absolute;
 	float: right;
 	width: 50rpx;
 	height: 79rpx;
-	margin-left: 10px;
+	margin-left: 630rpx;
+	margin-top: 137rpx;
 }
 /* 第二层工具 */
 .item-list{
@@ -348,7 +384,8 @@
 	width: 650rpx;
 	height: 100rpx;
 	background: rgba(255, 255, 255, 1);
-	box-shadow: 0rpx -4rpx 10rpx rgba(0, 0, 0, 0.15);
+	box-shadow: inset 0rpx -4rpx 10rpx rgba(0, 0, 0, 0.15);
+	box-sizing: border-box;
 }
 .fu-price{
 	width: 363rpx;
@@ -360,7 +397,7 @@
 }
 .fu-zhifu{
 	float: right;
-	width: 287rpx;
+	width: 288rpx;
 	height: 100rpx;
 	background: rgba(41, 109, 227, 1);
 	color: rgba(255, 255, 255, 1);

pages/index/index.vue

@@ -5,14 +5,15 @@
 			<view class="welcome"><image class="welcome_img" src="../../static/index/welcome.png"></image></view>
 		</view>
 		<!-- 第一层公寓名称卡片 -->
-		<uni-card style="margin-top: -40px;margin-bottom:0px; width:660rpx;height: 254rpx;" title="墨轩湖姬子公寓（南昌交通学院）" sub-title="2021年装修 | 智能门锁 | 房间wifi | 免费停车" extra="设施/详情＞" @click="navigateToXiangqing">
-		</uni-card>
-		<uni-card style="margin-top: -22px;margin-bottom:0px; width:660rpx;height: 254rpx;">
+		<view class="uni-ka" style="margin-top: -40px;margin-bottom:0px;">
+			<text class="uni-title">墨轩湖姬子公寓（南昌交通学院）</text>
+			<text class="uni-sub-title">2021年装修 | 智能门锁 | 房间wifi | 免费停车</text>
+			<text class="uni-extra" @click="navigateToXiangqing">设施/详情＞</text>
 			<text class="uni-body">宜春市靖安县北高速路口什么路899号</text>
 			<image class="uni-phone" @click="telphone(phone)" src="../../static/index/index_phone.svg"></image>
 			<image class="uni-map" @click="mapDaohang" src="../../static/index/index_map.svg"></image>
 			<br><text class="uni-body2">距离我520km</text>
-		</uni-card>
+		</view>
 		<!-- 第二层工具 -->
 		<view class="item-list">
 		  <view class="item-list-one" @click="navigateToXuzhi">
@@ -128,6 +129,31 @@
 </template>
 
 <script>
+	/**
+	 * 获取任意时间
+	 */
+	function getDate(date, AddDayCount = 0) {
+		if (!date) {
+			date = new Date()
+		}
+		if (typeof date !== 'object') {
+			date = date.replace(/-/g, '/')
+		}
+		const dd = new Date(date)
+
+		dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
+
+		const y = dd.getFullYear()
+		const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
+		const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
+		return {
+			fullDate: y + '-' + m + '-' + d,
+			year: y,
+			month: m,
+			date: d,
+			day: dd.getDay()
+		}
+	}
 	// 导入图片
 	import room1 from '../../static/index/swiper_img1.svg'
 	import room2 from '../../static/index/swiper_img1.svg'
@@ -139,7 +165,10 @@
 					lunar: true,
 					range: true,
 					insert: false,
-					selected: []
+					selected: [],
+					startDate:'',
+					date:'',
+					endDate:''
 				},
 				room:[
 					{id:1,room_img:({ url: "../../static/index/room_image.svg" }),name:'01户型',before_price:'¥419',price:'¥0.00',mark1:'22m',mark2:'无早',mark3:'大床'},
@@ -171,28 +200,31 @@
 				this.showCalendar = true
 			})
 			// TODO 模拟请求异步同步数据
-			// setTimeout(() => {
-			// 	this.info.date = getDate(new Date(),-30).fullDate
-			// 	this.info.startDate = getDate(new Date(),-60).fullDate
-			// 	this.info.endDate =  getDate(new Date(),30).fullDate
-			// 	this.info.selected = [{
-			// 			date: getDate(new Date(),-3).fullDate,
-			// 			info: '打卡'
-			// 		},
-			// 		{
-			// 			date: getDate(new Date(),-2).fullDate,
-			// 			info: '签到',
-			// 			data: {
-			// 				custom: '自定义信息',
-			// 				name: '自定义消息头'
-			// 			}
-			// 		},
-			// 		{
-			// 			date: getDate(new Date(),-1).fullDate,
-			// 			info: '已打卡'
-			// 		}
-			// 	]
-			// }, 2000)
+			setTimeout(() => {
+				console.log('date:'+getDate(new Date()).fullDate)
+				console.log('startDate:'+getDate(new Date()).fullDate)
+				console.log('endDate:'+getDate(new Date(),6).fullDate)
+				this.info.date = getDate(new Date()).fullDate
+				this.info.startDate = getDate(new Date()).fullDate
+				this.info.endDate =  getDate(new Date(),6).fullDate
+				this.info.selected = [{
+						date: getDate(new Date(),-3).fullDate,
+						info: '打卡'
+					},
+					{
+						date: getDate(new Date(),-2).fullDate,
+						info: '签到',
+						data: {
+							custom: '自定义信息',
+							name: '自定义消息头'
+						}
+					},
+					{
+						date: getDate(new Date(),-1).fullDate,
+						info: '已打卡'
+					}
+				]
+			}, 2000)
 		},
 		methods: {
 			// 跳转到入住须知
@@ -248,6 +280,13 @@
 			},
 			confirm(e) {
 				console.log('confirm 返回:', e)
+				if(e.range.data.length<2){
+					uni.showToast({
+						icon:'none',
+						title:'请选择时间范围'
+					})
+					return
+				}
 			},
 			change(e) {
 				console.log('1change 返回:', e)

pages/my_orderlist/css/my_orderlist.css

@@ -40,7 +40,7 @@
 	margin-top: 5rpx;
 }
 .room-xinxi{
-	display: -webkit-box;
+	/* display: -webkit-box; */
 	flex-direction: column;
 	align-items: center;
 	width: 710rpx;

pages/my_orderlist/my_orderlist.vue

@@ -13,7 +13,7 @@
 		<!-- 订单样式 -->
 		<view class="room-kuang">
 			<view class="room-xinxi" v-for="(item,index) in troom" :key="index">
-				<view @click="navigateToOrderMark(item.id)">
+				<view @click="navigateToOrderMark(item.types)">
 				<image class="room-image" :src="item.srcUrl"></image>
 				<view class="room-name">{{item.name}}</view>
 				<view class="room-time">{{item.time}}</view>
@@ -77,6 +77,7 @@
 			room.forEach(el => el.isChecked = false);
 			this.room = room;
 			this.troom = room;//真实数据赋值给页面数据
+			this.changeTab(this.Inv)
 		},
 		onLoad(option) {
 			this.Inv=option.Inv;
@@ -118,11 +119,10 @@
 				this.timeupSecond = 1799
 			},
 			// 跳转到订单详情
-			navigateToOrderMark(id) {
+			navigateToOrderMark(types) {
 				// console.log(id)
 				uni.navigateTo({
-					url: "../order_mark/order_mark?ids="+id,
-					complete: () => {console.log("调用完成,id:"+id)}
+					url: "../order_mark/order_mark?types="+types,
 				})
 			},
 			

pages/order_mark/css/order_mark.css

@@ -6,6 +6,39 @@
 	background-color: #F2F3F5;
 }
 /* 第一层模块 */
+.one-order3{
+	width: 750rpx;
+	height: 438rpx;
+	background: rgba(41, 109, 227, 1);
+}
+.room-button-6{
+	position: absolute;
+	margin-left: 159rpx;
+	margin-top: 250rpx;
+	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-6{
+	position: absolute;
+	margin-left: 410rpx;
+	margin-top: 250rpx;
+	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;
+}
 .one-order{
 	width: 750rpx;
 	height: 646rpx;
@@ -13,6 +46,7 @@
 }
 .one-order-title{
 	position: absolute;
+	width: 720rpx;
 	margin-left: 30rpx;
 	margin-top: 34rpx;
 	color: rgba(255, 255, 255, 1);
@@ -21,13 +55,13 @@
 	line-height: 62rpx;
 }
 .all-price{
-	position: absolute;
-	margin-left: 284rpx;
+	float: right;
+	margin-right: 29rpx;
 	font-size: 32rpx;
-	line-height: 47rpx;
 }
 .one-order-menshi{
 	position: absolute;
+	width: 720rpx;
 	margin-left: 30rpx;
 	margin-top: 135rpx;
 	color: rgba(255, 255, 255, 1);
@@ -36,11 +70,12 @@
 	line-height: 41rpx;
 }
 .menshi-price{
-	position: absolute;
-	margin-left: 545rpx;
+	float: right;
+	margin-right: 28rpx;
 }
 .one-order-fuli{
 	position: absolute;
+	width: 720rpx;
 	margin-left: 30rpx;
 	margin-top: 196rpx;
 	color: rgba(255, 255, 255, 1);
@@ -49,11 +84,12 @@
 	line-height: 41rpx;
 }
 .fuli-price{
-	position: absolute;
-	margin-left: 507rpx;
+	float: right;
+	margin-right: 28rpx;
 }
 .one-order-yufukuan{
 	position: absolute;
+	width: 720rpx;
 	margin-left: 30rpx;
 	margin-top: 257rpx;
 	color: rgba(255, 255, 255, 1);
@@ -61,6 +97,10 @@
 	font-weight: 400;
 	line-height: 41rpx;
 }
+.yufukuan-price{
+	float: right;
+	margin-right: 28rpx;
+}
 .one-order-zhu{
 	position: absolute;
 	margin-left: 32rpx;
@@ -109,6 +149,16 @@
 	font-size: 28rpx;
 	font-weight: 400;
 }
+.two-order3{
+	margin-top: -30rpx;
+	width: 690rpx;
+	height: 563rpx;
+	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;
@@ -150,6 +200,16 @@
 .two-order-txt{
 	color: rgba(102, 102, 102, 1);
 }
+.two-order-shui{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 431rpx;
+}
+.two-order-dian{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 486rpx;
+}
 .order-mark{
 	margin-top: 174rpx;
 	text-align: center;

pages/order_mark/order_mark.vue

@@ -1,40 +1,50 @@
 <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-order3" :class="{'one-order3': orderList2.types == 6}" v-if="orderList2.types === 6">
+			<view class="one-order-title">{{orderList2.orderTitle}}<text class="all-price">{{orderList2.allPrice}}</text></view>
+			<view class="one-order-menshi">{{orderList2.orderShuidian}}<text class="menshi-price">{{orderList2.shuidianPrice}}</text></view>
+			<view class="room-button-6">
+				<text>删除订单</text>
+			</view>
+			<view class="room-button2-6">
+				<text>再次预定</text>
+			</view>
+		</view>
+		<view class="one-order" v-else>
+			<view class="one-order-title">{{orderList2.orderTitle}}<text class="all-price">{{orderList2.allPrice}}</text></view>
+			<view class="one-order-menshi">门市价<text class="menshi-price">{{orderList2.menshiPrice}}</text></view>
+			<view class="one-order-fuli">教师福利<text class="fuli-price">{{orderList2.fuliPrice}}</text></view>
+			<view class="one-order-yufukuan">预付款<text class="yufukuan-price">{{orderList2.yufukuanPrice}}</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> -->
+				<text v-if="orderList2.types === 1">支付</text>
+				<text v-if="orderList2.types === 4">删除订单</text>
+				<text v-if="orderList2.types === 3">办理续住</text>
+				<text v-if="orderList2.types === 2">办理入住</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> -->
+				<text v-if="orderList2.types === 1">取消订单</text>
+				<text v-if="orderList2.types === 3">办理退房</text>
+				<text v-if="orderList2.types === 2">取消订单</text>
+				<text v-if="orderList2.types === 4">再次预定</text>
 			</view>
 		</view>
 		<!-- 第二层模块 -->
-		<view class="two-order">
+		<view class="two-order" :class="{'two-order3': orderList2.types == 6||orderList2.types == 3}">
 			<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 class="two-order-zhuTime">入离时间：<text class="two-order-txt">入住日14：00后   离店日12：00前</text></view>
+			<view class="two-order-shui" v-if="orderList2.types === 6">水起码：</view>
+			<view class="two-order-dian" v-if="orderList2.types === 6">电起码：</view>
 		</view>
 		
 		<view class="order-mark">您的满意是我们最大的追求</view>
@@ -46,35 +56,41 @@
 		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}
+					// {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}
 				],
+				orderList2:[]
 			}
 		},
-		// 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
+		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}
+			]
+			orderList.forEach(el => el.isChecked = false);
+			this.orderList = orderList;
+			this.orderList2 = orderList;//真实数据赋值给页面数据
+			// 获取当前小程序的页面栈
+			let pages = getCurrentPages();
+			// 数组中索引最大的页面--当前页面
+			let currentPage = pages[pages.length-1];
+			// 打印出当前页面中的 options
+			// console.log(currentPage.options)      //正常打印出 options 值
+			// console.log(this.orderList)
+			for(let i=0;i<this.orderList.length;i++) {
+				if(currentPage.options.types==this.orderList[i].types){
+					this.orderList2=this.orderList[i]
+				}
+			}
+			// console.log(this.orderList2)
 		},
-		mounted() {
+		onload(option){
+			console.log('不能执行onload')
 		},
 		methods:{
 			
@@ -83,5 +99,5 @@
 </script>
 
 <style>
-	@import url(./css/order_mark.css);
+	@import url("./css/order_mark.css");
 </style>

pages/order_room/order_room.vue

@@ -83,7 +83,6 @@
 			}
 		},
 		onLoad() {
-			
 		},
 		methods: {
 			openCalendar() {