订单详情和各操作功能

App.vue

@@ -1,8 +1,12 @@
 <script>
 	export default {
 		onLaunch: function() {
-			console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
 			console.log('App Launch')
+			// console.log(localStorage.getItem('token')=='null')
+			if(localStorage.getItem('token')=='null') {
+				window.location.href ='https://open.wecard.qq.com/connect/oauth/authorize?app_key=4FD5599032819781&response_type=code&scope=snsapi_userinfo&ocode=1015730314&redirect_uri=http%3A%2F%2Fchuanghai-dev.natapp1.cc%2Fihotel%2FhotelUser%2FweixiaoAuth&state=http%3A%2F%2Fchuanghai-dev.natapp1.cc%2Fihotel%2FhotelUser%2FweixiaoAuth';
+			}
+			
 		},
 		onShow: function() {
 			console.log('App Show')

main.js

@@ -5,8 +5,8 @@ import App from './App'
 import axios from "axios"
 import qs from 'qs'
 import getUrlKey from './utils/getToken.js'
-localStorage.setItem('user_token',getUrlKey('user_token'))
-console.log(localStorage.getItem('user_token'))
+localStorage.setItem('token',getUrlKey('token'))
+console.log(localStorage.getItem('token'))
 
 //引入公共接口
 import {myRequest} from './utils/api.js'

manifest.json

@@ -86,6 +86,9 @@
                     "key" : "BJUBZ-4V3CD-G7Q4K-HFQBZ-AJI6K-WLFAF"
                 }
             }
+        },
+        "router" : {
+            "base" : "/ihotel/"
         }
     }
 }

pages.json

@@ -36,6 +36,12 @@
 		}
 	},
 	{
+		"path": "pages/zhifuchenggong/zhifuchenggong",
+		"style":{
+			"navigationBarTitleText": "支付成功"
+		}
+	},
+	{
 		"path": "pages/gongyuxiangqing/gongyuxiangqing",
 		"style":{
 			"navigationBarTitleText": "公寓详情"

pages/gongyuxiangqing/css/gongyuxiangqing.css

@@ -52,17 +52,29 @@
 		font-weight: 700;
 		font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 	}
-	.sheshi_txt{
+	/* .sheshi_txt{
 		margin-left: 90rpx;
 		margin-top: 30rpx;
 		margin-right: 15rpx;
 		color: rgba(128, 128, 128, 1);
 		font-size: 28rpx;
 		font-weight: 400;
+	} */
+	.sheshi_txt_left{
+		position: absolute;
+		float: left;
+		margin-left: 90rpx;
+		/* margin-top: -430rpx; */
+		margin-right: 15rpx;
+		color: rgba(128, 128, 128, 1);
+		font-size: 28rpx;
+		font-weight: 400;
 	}
 	.sheshi_txt_right{
+		position: absolute;
+		float: right;
 		margin-left: 420rpx;
-		margin-top: -430rpx;
+		/* margin-top: -430rpx; */
 		margin-right: 15rpx;
 		color: rgba(128, 128, 128, 1);
 		font-size: 28rpx;

pages/gongyuxiangqing/gongyuxiangqing.vue

@@ -7,14 +7,16 @@
 				<text style="display: block;text-indent: 56rpx;">所以监听用户的截图操作，提示用户进行分享，既缩短了以前分享截图的操作路径，避免了在之前长路径中的行为流失（比如截图完成后忘记分享或觉得麻烦放弃分享等等），也让用户觉得更加贴心。</text>
 				         <text style="display: block;text-indent: 56rpx;">用户分享内容到社交媒体或好友，不应该是一种粗暴的强制行为，我们应该在保证产品本身内容有吸引力的核心前提下，仔细揣摩用户心理，结合产品本身的特色，在不同情境下提供给用户最合适的分享平台及方式，让用户分享成为一种水到渠。</text>
 				        <text style="display: block;text-indent: 56rpx;">营业时间：24小时</text>
-				         <text style="display: block;text-indent: 56rpx;">联系电话：<text @click="telphone(phone)" style="color:rgba(41, 109, 227, 1);">0791-256987</text></text>
+				         <text style="display: block;text-indent: 56rpx;">联系电话：<text @click="telphone(phone)" style="color:rgba(41, 109, 227, 1);">{{phone}}</text></text>
 			</view>
 		</view>
 		<!-- 第二部分，公寓设施 -->
 		<view class="sheshi">
 			<view class="sheshi_title">公寓设施</view>
-			<view class="sheshi_txt" v-for="(item,index) in sheshiList" :key="index">
-				<image class="sheshi_icon" src="../../static/gongyuxiangqing/sheshi_icon.png"></image>{{item.list}}
+			<view class="sheshi_txt_left">
+				<view style="margin-top: 30rpx;" class="sheshi_txt" v-for="(item,index) in sheshiList" :key="index">
+					<image class="sheshi_icon" src="../../static/gongyuxiangqing/sheshi_icon.png"></image>{{item.list}}
+				</view>
 			</view>
 			<view class="sheshi_txt_right">
 				<view style="margin-top: 30rpx;" v-for="(item,index) in sheshiList2" :key="index">
@@ -45,7 +47,7 @@
 					{id:5,list:'电水壶'},
 					{id:6,list:'免费瓶装水'},
 				],
-				phone:'15079248859'
+				phone:'0791-82293574'
 			}
 		},
 		onLoad() {

pages/index/css/index.css

@@ -110,8 +110,8 @@
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	width: 150rpx;
-	margin-right: 30rpx;
+	width: 306rpx;
+	/* margin-right: 60rpx; */
 	margin-top: 20px;
 }
 .img-btn{
@@ -247,10 +247,10 @@
 	font-weight: 400;
 }
 .room-price{
-	/* position: absolute; */
+	position: absolute;
 	/* margin-left: 605rpx; */
 	margin-top: 46rpx;
-	margin-right: -550rpx;
+	margin-left: 606rpx;
 	color: rgba(255, 87, 51, 1);
 	font-size: 42rpx;
 	font-weight: 500;
@@ -428,10 +428,9 @@
 	line-height: 100rpx;
 }
 /* uni-calendar选中背景色 */
-
 >>>.uni-calendar-item--isDay[data-v-6097fd5b] {
     background-color: #fff;
-    opacity: 0.5;
+    opacity: 0.8;
     color: #2979ff;
 }
 >>>.uni-calendar-item--before-checked[data-v-6097fd5b] {
@@ -448,4 +447,15 @@
 
 /* >>>.uni-calendar-item--multiple[data-v-6097fd5b] {
     opacity: 0.5;
-} */
+} */
+/* 弹出框 */
+.kuang_txt{
+	align-items: center;
+	justify-content: center;
+	padding: 15rpx;
+	height: 150rpx;
+	width: 180rpx;
+	line-height: 150rpx;
+	text-align: center;
+	background-color: #fff;
+}

pages/index/index.vue

@@ -11,28 +11,36 @@
 			<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('115.387261','28.788671')" src="../../static/index/index_map.svg"></image>
-			<br><text class="uni-body2">距离我520km</text>
+			<a href="https://uri.amap.com/marker?position=115.387261,28.788671&name=南昌交通学院智慧公寓">
+				<image class="uni-map" @click="mapDaohang('115.387261','28.788671')" src="../../static/index/index_map.svg"></image>
+			</a>
+			<br><text class="uni-body2">距离我{{distance}}km</text>
 		</view>
 		<!-- 第二层工具 -->
 		<view class="item-list">
 		  <view class="item-list-one" @click="navigateToXuzhi">
-		    <image src="../../static/index/index_xuzhi.svg" class="img-btn" height="100%" width="100%"></image>
+		    <image src="../../static/index/xuzhi.png" class="img-btn" height="100%" width="100%"></image>
 			<text class="list-txt">入住须知</text>
 		  </view>
 		  <view class="item-list-one" @click="navigateToDairuzhu">
-		    <image src="../../static/index/index_ruzhu.svg" class="img-btn"></image>
+		    <image src="../../static/index/ruzhu.png" class="img-btn"></image>
 		    <text class="list-txt">办理入住</text>
 		  </view>
-		  <view class="item-list-one" @click="navigateToXuzhu">
+		  <!-- <view class="item-list-one" @click="navigateToXuzhu">
 		    <image src="../../static/index/index_xuzhu.svg" class="img-btn"></image>
 		    <text class="list-txt">办理续住</text>
-		  </view>
+		  </view> -->
 		  <view class="item-list-one" @click="navigateToTuifang">
-		    <image src="../../static/index/index_tuifang.svg" class="img-btn"></image>
+		    <image src="../../static/index/tuifang.png" class="img-btn"></image>
 		    <text class="list-txt">办理退房</text>
 		  </view>
 		</view>
+		<!-- 退房失败时弹框 -->
+		<uni-popup ref="popup_tui" type="center" width="300rpx" height="300rpx" background-color="#fff">
+			<view class="kuang_txt">
+				<text>请先订房</text>
+			</view>
+		</uni-popup>
 		<!-- 第三层订房 -->
 		<view class="room-list">
 			<!-- 选择住房日期 -->
@@ -43,7 +51,7 @@
 				</view>
 				<view class="select-center">
 					<view class="select-line1"></view>
-					<view class="select-circle">1晚</view>
+					<view class="select-circle">{{ruzhu_num}}晚</view>
 					<view class="select-line2"></view>
 				</view>
 				<view class="select-time-one">
@@ -62,7 +70,7 @@
 			<!-- 房型列表 -->
 			<view class="room-kuang">
 				<view class="room-xinxi" v-for="(item,index) in roomType" :key="index">
-					<image class="room-image" src="item.masterImage" @click="inputDialogToggle(item.id)"></image>
+					<image class="room-image" :src="item.masterImage" @click="inputDialogToggle(item.id)"></image>
 					<view class="room-name">{{item.typeName}}</view>
 					<view class="room-mark">{{item.typeShortDesc}}</view>
 					<view class="room-icon">
@@ -73,9 +81,9 @@
 					</view>
 					<view class="before-price"><strike>¥{{item.usualPrice}}</strike></view>
 					<view class="room-price">¥{{item.discountPrice}}</view>
-					<view class="room-button" :class="{'room-button2': item.enableNum == 0}" @click="navigateToOrderRoom(item.enableNum,item.id,item.typeName)">
+					<view class="room-button" :class="{'room-button2': item.enableNum == 0}">
 						<text v-if="item.enableNum==0">已满</text>
-						<text v-else>订</text>
+						<text v-else @click="navigateToOrderRoom(item.enableNum,item.id,item.typeName)">订</text>
 					</view>
 					<view class="room-line"  v-if="index<(roomType.length-1)"></view>
 				</view>
@@ -179,8 +187,6 @@
 		}
 	}
 	// 导入图片
-	import room1 from '../../static/index/swiper_img1.svg'
-	import room2 from '../../static/index/swiper_img1.svg'
 	import AMap from "../../lib/qqmap-wx-jssdk.js"
 	export default {
 		data() {
@@ -195,12 +201,16 @@
 					date:'',
 					endDate:''
 				},
+				distance: 0, //"距离"
 				startTime:'',//默认到店日期
 				endTime:'',//默认离店日期
 				startDate:'',//默认到店日期接口数据
 				endDate:'',//默认离店日期接口数据
 				startWeek:'',// 默认入店日
 				endWeek:'',// 默认离店
+				payMount:0,//房间价格
+				freeRoom:0,//房间剩余
+				ruzhu_num:1,//入住夜晚数
 				//续住里选择器
 				infoXu: {
 					lunar: true,
@@ -214,20 +224,9 @@
 				roomType:[],
 				typeText:'',//房型详细描述
 				indicatorDots: true,//滚动图片提示条默认出现
-				img:[
-					{
-						value: '1',
-						srcUrl:room1,
-						name: '图1'
-					},
-					{
-						value: '2',
-						srcUrl:room2,
-						name: '图2'
-					},
-				],
-				phone:'15079248859',//电话
-				latitude: '', // 默认定在首都
+				img:[],//轮播图里图片
+				phone:'0791-82293574',//电话
+				latitude: '', // 默认当前纬度
 				longitude:'',
 				scale: 12, // 默认16
 				markers: [],
@@ -241,6 +240,9 @@
 			this.endDate =  getDate(new Date(),1).fullDate2
 			this.getRoomType()
 		},
+		mounted() {
+			
+		},
 		onReady() {
 			this.$nextTick(() => {
 				this.showCalendar = true
@@ -269,23 +271,57 @@
 					this.getLocationInfo();
 				})
 				.catch(() => {
+					const that = this;
+					uni.getLocation({
+						type: "gcj02",
+						success: function(res) {
+							// 暂时
+							that.longitude = res.longitude;
+							that.latitude = res.latitude;
+							var long = 0;
+							var lat = 0;
+							//小数点保留六位  经度
+							if (that.longitude.toString().indexOf('.') > 0) {
+								const longlatsplit = that.longitude.toString().split('.');
+								if (longlatsplit.length >= 2) {
+									long = parseFloat(longlatsplit[0] === "" ? 0 : longlatsplit[0]) + parseFloat("." + longlatsplit[1].slice(0,6));
+								}
+							}
+							if (that.latitude.toString().indexOf('.') > 0) {
+								const longlatsplit1 = that.latitude.toString().split('.');
+								if (longlatsplit1.length >= 2) {
+									lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat("." + longlatsplit1[1].slice(0,6));
+								}
+							}
+							that.distance = that.getMapDistance(lat,long,'28.788671','115.387261');
+							that.markers = [{
+								id: "",
+								latitude: res.latitude,
+								longitude: res.longitude,
+								iconPath: "../../static/img/phone.png",
+								width: that.markerHeight, //宽
+								height: that.markerHeight, //高
+							}, ];
+						},
+					});
 					//   不同意给出弹框，再次确认
-					this.openConfirm()
-						.then(() => {
-							this.getLocationInfo();
-						})
-						.catch(() => {
-							this.rejectGetLocation();
-						});
+					// this.openConfirm()
+					// 	.then(() => {
+					// 		this.getLocationInfo();
+					// 	})
+					// 	.catch(() => {
+					// 		this.rejectGetLocation();
+					// 	});
 				});
 		},
 			
 		methods: {
+			
 			// 房型接口
 			getRoomType() {
 			  let _self = this
 			  _self.roomType = []
-			  this.$axios.get("/ihotel/roomType/list?startTime="+this.startDate+"&endTime="+this.endDate).then(res => {
+			  this.$axios.get("/ihotel/roomType/list?startDate="+this.startDate.substring(0,10)+"&endDate="+this.endDate.substring(0,10)).then(res => {
 				res = res.data
 				if (res.success) {
 					// console.log(res)
@@ -323,16 +359,15 @@
 			  this.$axios.get("/ihotel/hotelOrder/user/order/page?curPage=1&pageSize=100",
 			  {
 				  headers:{
-					  'user_token':localStorage.getItem('user_token')
+					  'user_token':localStorage.getItem('token')
 				  }
 			  }).then(res => {
 				res = res.data
 				if (res.success) {
-					// console.log(res)
 				  res.data.list.forEach(data => {
 					if (data.flag !== '-1') {
 					  _self.xuzhu_type.push(data.orderStatu)
-					  console.log(_self.xuzhu_type)
+					  // console.log(_self.xuzhu_type)
 					}
 				  })
 				} else {
@@ -355,11 +390,26 @@
 			},
 			// 订房间 
 			navigateToOrderRoom(enableNum,id,typeName) {
-				if (enableNum>=1){
-					uni.navigateTo({
-					  url: "../order_room/order_room?roomTypeId="+id +"&enableStartTime="+this.startDate+"&enableEndTime="+this.endDate+"&startTime="+this.startTime+"&endTime="+this.endTime+"&startWeek="+this.startWeek+"&endWeek="+this.endWeek+"&typeName="+typeName,
-					});
-				}
+				let _self = this
+				_self.roomType = []
+				this.$axios.get("/ihotel/hotelOrder/user/order/confirm?startTime="+this.startDate.substring(0,10)+"&endTime="+this.endDate.substring(0,10)+'&roomTypeId='+id).then(res => {
+					res = res.data
+					if (res.success) {
+						// console.log(res)
+					  this.payMount=res.data.totalAmount
+					  this.freeRoom=res.data.freeNum
+					  this.ruzhu_num=res.data.nums
+					  if (enableNum>=1){
+							uni.navigateTo({
+							  url: "../order_room/order_room?roomTypeId="+id +"&enableStartTime="+this.startDate+"&enableEndTime="+this.endDate+"&startTime="+this.startTime+"&endTime="+this.endTime+"&typeName="+typeName+"&payMount="+this.payMount+"&freeRoom="+this.freeRoom+'&ruzhu_num='+this.ruzhu_num,
+							});
+						}
+						this.getRoomType()
+					} else {
+					  alert(res.message)
+					}
+				});
+				
 				
 			},
 			//办理入住跳转
@@ -370,9 +420,26 @@
 			},
 			//办理退房
 			navigateToTuifang(){
-				uni.navigateTo({
-					url:"../my_orderlist/my_orderlist?Inv=3"
-				})
+				this.xuzhu_panduan=[]
+				setTimeout(() => {
+					this.getOrderPage()
+				},1)
+				setTimeout(() => {
+					for (let i=0;i<this.xuzhu_type.length;i++){
+						this.xuzhu_type.forEach(val => {
+							if(val[i]==3) {
+								this.xuzhu_panduan.push(val)
+							}
+						})
+					}
+					if(this.xuzhu_panduan.length>1) {
+						uni.navigateTo({
+							url:"../my_orderlist/my_orderlist?Inv=3"
+						})
+					}else if(this.xuzhu_panduan.length<1) {
+						this.$refs.popup_tui.open()
+					}
+				},150)
 			},
 			//户型详情弹窗
 			inputDialogToggle(id) {
@@ -420,17 +487,16 @@
 				this.$refs.popup_picker.open()
 			},
 			change(e) {
-				console.log('1change 返回:', e)
-				// 模拟动态打卡
-				// if (this.info.selected.length > 3) return
-				this.info.selected.push({
-					date: e.range.before,
-					info: '到店'
-				})
-				this.info.selected.push({
-					date: e.range.after,
-					info: '离店'
-				})
+				this.info.selected=[
+					{
+						date: e.range.before,
+						info: '到店'
+					},
+					{
+						date: e.range.after,
+						info: '离店'
+					}
+				]
 				if(e.range.before!=''&&e.range.after=='') {
 					this.startWeek='周'+e.lunar.ncWeek.substring(2,3)
 				} else if(e.range.before!=''&&e.range.after!=''){
@@ -440,6 +506,7 @@
 				this.endTime=e.range.after.substring(5,7)+'月'+e.range.after.substring(8,10)+'日'
 				this.startDate = e.range.before +' 14:00:00'
 				this.endDate =  e.range.after +' 12:00:00'
+				this.ruzhu_num=parseInt(((new Date(e.range.after).getTime())-(new Date(e.range.before).getTime()))/1000/60/60/24)
 				if(this.endDate !=' 12:00:00') {
 					this.getRoomType()
 				}
@@ -509,10 +576,9 @@
 								lat = parseFloat(longlatsplit1[0] === "" ? 0 : longlatsplit1[0]) + parseFloat("." + longlatsplit1[1].slice(0,6));
 							}
 						}
-						// cookie.set("longitude", long);
-						// cookie.set("latitude", lat);
 						console.log("纬度", lat);
-						// this.distance(that.latitude,that.longitude);
+						that.distance = that.getMapDistance(lat,long,'28.788671','115.387261');
+						console.log(that.distance)
 						that.markers = [{
 							id: "",
 							latitude: res.latitude,
@@ -521,7 +587,6 @@
 							width: that.markerHeight, //宽
 							height: that.markerHeight, //高
 						}, ];
-						that.getList();
 					},
 				});
 			},
@@ -530,19 +595,20 @@
 				return new Promise((resolve, reject) => {
 					uni.showModal({
 						title: "请求授权当前位置",
-						content: "我们需要获取地理位置信息，为您推荐附近的美食",
+						content: "我们需要获取地理位置信息，为您推荐路线",
 						success: (res) => {
-							if (res.confirm) { 
-								uni.openSetting().then((res) => {
-									if (res[1].authSetting["scope.userLocation"] === true) {
-										resolve(); // 打开地图权限设置
-									} else {
-										reject();
-									}
-								});
-							} else if (res.cancel) {
-								reject();
-							}
+							// if (res.confirm) { 
+							// 	uni.openSetting().then((res) => {
+							// 		if (res[1].authSetting["scope.userLocation"] === true) {
+							// 			resolve(); // 打开地图权限设置
+							// 		} else {
+							// 			reject();
+							// 			console.log('reject')
+							// 		}
+							// 	});
+							// } else if (res.cancel) {
+							// 	reject();
+							// }
 						},
 					});
 				});
@@ -558,32 +624,33 @@
 			},
 			//打开地图导航
 			mapDaohang(lon,lat){
-				console.log("获取经纬度ssssfff", lon, lat);
-					//打开地图，并将门店位置传入
-					uni.getLocation({
-						success: res => {
-							// res.latitude=lat;
-							// res.longitude=lon;
-							console.log('location success', parseFloat(lat), parseFloat(lon))
-							uni.openLocation({
-								latitude: parseFloat(lat),
-								longitude: parseFloat(lon),
-								scale: 18
-							})
-						}
-						
-					})
-				//  uni.chooseLocation({
-				// 	success: (res) => {
-				// 		console.log('位置名称：' + res.name);
-				// 		console.log('详细地址：' + res.address);
-				// 		console.log('纬度：' + res.latitude);
-				// 		console.log('经度：' + res.longitude);
-				// 		this.positionName = res.name
-				// 	}
-				// })
 			},
 			
+			//进行经纬度转换为距离的计算
+			Rad(d) {
+				return d * Math.PI / 180.0; //经纬度转换成三角函数中度分表形式。
+			},
+			/*
+			 计算距离，参数分别为第一点的纬度，经度；第二点的纬度，经度
+			 默认单位km
+			*/
+			getMapDistance(lat1, lng1, lat2, lng2) {
+				// console.log(this.Rad(lat1))
+				// console.log(this.Rad(lng1))
+				// console.log(this.Rad(lat2))
+				// console.log(this.Rad(lng2))
+				// console.log(this.Rad(28.678651))
+				var radLat1 = this.Rad(lat1);
+				var radLat2 = this.Rad(lat2);
+				var a = radLat1 - radLat2;
+				var b = this.Rad(lng1) - this.Rad(lng2);
+				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
+					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
+				s = s * 6378.137; // EARTH_RADIUS;
+				s = Math.round(s * 10000) / 10000; //输出为公里
+				s=s.toFixed(2);
+				return s;
+			},
 		}
 	}
 </script>

pages/my_orderlist/css/my_orderlist.css

@@ -12,7 +12,7 @@
 	display: flex;
 	top: 0;
 	width: 100%;
-	white-space: nowrap; 
+	white-space: nowrap;
 }
 
 .inv-h {
@@ -107,11 +107,12 @@
 	margin-top: 155rpx;
 	font-size: 24rpx;
 	font-weight: 400;
+	color:#FF5733;
 }
 .room-count-txt{
 	position: absolute;
-	margin-left: 201rpx;
-	margin-top: 153rpx;
+	margin-left: 205rpx;
+	margin-top: 155rpx;
 	color: rgba(128, 128, 128, 1);
 	font-size: 24rpx;
 	font-weight: 400;

pages/my_orderlist/my_orderlist.vue

@@ -23,27 +23,30 @@
 					<text v-if="item.orderStatu==1">待支付</text>
 					<text v-if="item.orderStatu==2">待入住</text>
 					<text v-if="item.orderStatu==3">已入住</text>
-					<text v-if="item.orderStatu==4">待结账</text>
+					<text v-if="item.orderStatu==4">
+						待结账
+					</text>
 					<text v-if="item.orderStatu==5">已完成</text>
 				</view>
 				<view class="room-price">￥{{item.payAmount}}</view>
 				</view>
-				<uni-countdown v-if="item.orderStatu == 1" class="room-count" color="#FF5733" :show-day="false" :second="timeupSecond" @timeup="timeup" />
+				<uni-countdown v-if="item.orderStatu == 1" class="room-count" color="#FF5733" :show-day="false" :second="timeupSecond" @timeup="timeup(item.createTime)" />
 				<text v-if="item.orderStatu == 1" class="room-count-txt">之后取消</text>
-				<view class="room-button">
-					<text v-if="item.orderStatu == 0">删除</text>
-					<text v-if="item.orderStatu == 1">取消订单</text>
-					<text v-if="item.orderStatu == 5">删除</text>
-					<text v-if="item.orderStatu == 2">取消订单</text>
-					<text v-if="item.orderStatu == 3" @click="getOrderReturn(item.id)">退房</text>
+				<view class="room-button" v-if="item.orderStatu != 4 && item.orderStatu != 2 && item.orderStatu != 3">
+					<text v-if="item.orderStatu == 0" @click="getOrderDelete(item.id)">删除</text>
+					<text v-if="item.orderStatu == 1" @click="getOrderCancel(item.id)">取消订单</text>
+					<text v-if="item.orderStatu == 5" @click="getOrderDelete(item.id)">删除</text>
+					<!-- <text v-if="item.orderStatu == 2">取消订单</text> -->
+					<!-- <text v-if="item.orderStatu == 3" @click="navigateToXuzhu">续住</text> -->
 				</view>
 				<view class="room-button2" :class="{'room-button3': item.orderStatu == 1 || item.orderStatu == 4}">
 					<text v-if="item.orderStatu == 0" @click="navigateToZaici(item.enableStartTime,item.enableEndTime,item.roomTypeId)">再次预定</text>
 					<text v-if="item.orderStatu == 1" @click="getOrderPay(item.id)">支付</text>
-					<text v-if="item.orderStatu == 4">去支付</text>
-					<text v-if="item.orderStatu == 5">再次预定</text>
-					<text v-if="item.orderStatu == 2">办理入住</text>
-					<text v-if="item.orderStatu == 3" @click="navigateToXuzhu">续住</text>
+					<text v-if="item.orderStatu == 4" @click="navigateToJiezhang(item.id)">去处理</text>
+					<text v-if="item.orderStatu == 5" @click="navigateToWanchengZaici()">再次预定</text>
+					<text v-if="item.orderStatu == 2" @click="getOrderHold(item.id)">办理入住</text>
+					<text v-if="item.orderStatu == 3" @click="getOrderReturn(item.id)">退房</text>
+					
 				</view>
 				<view class="room-line"  v-if="index<(troom.length-1)"></view>
 			</view>
@@ -130,7 +133,7 @@
 				Inv: 6,
 				room:[],
 				troom:[],
-				timeupSecond: 600,
+				timeupSecond:null,
 				//续住里选择器
 				infoXu: {
 					lunar: true,
@@ -155,12 +158,7 @@
 		},
 		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},
-			]
+			var room = []
 			// list数组中为每一项添加双向绑定的属性---这个属性要在页面显示(onShow)添加
 			room.forEach(el => el.isChecked = false);
 			this.room = room;
@@ -170,6 +168,12 @@
 		onLoad(option) {
 			this.Inv=option.Inv;
 		},
+		/**
+		* 生命周期函数--监听页面卸载
+		*/
+		onUnload: function () {
+		  clearInterval(this.timer);
+		},
 		mounted(){
 		},
 		onReady() {
@@ -199,7 +203,7 @@
 				  this.$axios.get("/ihotel/hotelOrder/user/order/page?curPage=1&pageSize=100&statu="+Inv2,
 				  {
 					  headers:{
-						  'user_token':localStorage.getItem('user_token')
+						  'user_token':localStorage.getItem('token')
 					  }
 				  }).then(res => {
 					res = res.data
@@ -220,41 +224,100 @@
 				  this.$axios.get(`/ihotel/hotelOrder/user/order/pay/${id}`,
 				  {
 					  headers:{
-						  'user_token':localStorage.getItem('user_token')
+						  'user_token':localStorage.getItem('token')
 					  }
 				  }).then(res => {
 					res = res.data
 					if (res.success) {
-						window.location.href = res.data.payUrl;
+						if(res.data.payAmount==0) {
+							uni.navigateTo({
+								url: '../zhifuchenggong/zhifuchenggong?orderId='+res.data.orderId
+							})
+						} else {
+							window.location.href = res.data.payUrl;
+						}
+						
 					} else {
-					  console.log('获取订单列表失败')
+						alert(res.message)
+					  console.log('支付失败')
 					}
 				  });
 			},
 			// 办理退房
 			getOrderReturn(id) {
 				let _self = this
-				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('user_token');
+				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('token');
 				this.$axios.put(`/ihotel/hotelOrder/user/order/return/${id}`,).then(res => {
 					res = res.data
 					if (res.success) {
 						console.log(res)
-					  res.data.list.forEach(data => {
-						if (data.flag !== '-1') {
-							alert('退房成功')
-						}
-					  })
+						alert('退房成功')
+						this.getOrderPage()
+					} else {
+						alert(res.message)
+					}
+				});
+			},
+			// 办理入住
+			getOrderHold(id) {
+				let _self = this
+				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('token');
+				this.$axios.put(`/ihotel/hotelOrder/user/order/hold/${id}`,).then(res => {
+					res = res.data
+					if (res.success) {
+						alert('办理入住成功')
+						this.getOrderPage()
 					} else {
-					  alert('退房失败')
+						alert(res.message)
 					}
 				});
 			},
-			// 再次预订
+			// 删除订单
+			getOrderDelete(id) {
+				let _self = this
+				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('token');
+				this.$axios.delete(`/ihotel/hotelOrder/user/order/${id}`,).then(res => {
+					res = res.data
+					if (res.success) {
+						alert('删除订单成功')
+						this.getOrderPage()
+					} else {
+						alert(res.message)
+					}
+				});
+			},
+			// 待支付取消订单
+			getOrderCancel(id) {
+				let _self = this
+				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('token');
+				this.$axios.put(`/ihotel/hotelOrder/user/order/cancel/${id}`,).then(res => {
+					res = res.data
+					if (res.success) {
+						alert('取消成功')
+						this.getOrderPage()
+					} else {
+						alert(res.message)
+					}
+				});
+			},
+			// 订单取消再次预订
 			navigateToZaici(enableStartTime,enableEndTime,roomTypeId){
 				uni.navigateTo({
 					url:"../order_room/order_room?enableStartTime="+enableStartTime+"&enableEndTime="+enableEndTime+"&startTime="+enableStartTime.substring(5,7)+'月'+enableStartTime.substring(8,10)+'日'+"&endTime="+enableEndTime.substring(5,7)+'月'+enableEndTime.substring(8,10)+'日'+"&roomTypeId="+roomTypeId
 				})
 			},
+			// 订单已完成再次预订
+			navigateToWanchengZaici(){
+				uni.navigateBack({
+					delta:5
+				})
+			},
+			//处理结账
+			navigateToJiezhang(id) {
+				uni.navigateTo({
+					url:"../order_mark/order_mark?orderId="+id
+				})
+			},
 			/*
 			  * @Explain：选项卡点击切换
 			  */
@@ -280,11 +343,42 @@
 				})
 			},
 			// 倒计时
-			timeup() {
-				uni.showToast({
-					title: '时间到'
-				})
-				this.timeupSecond = 0
+			timeup(createTime) {
+				    var that = this;
+				    /**setInterval间歇调用 */
+				    that.timer = setInterval(function () {
+					//订单下单时间
+					var buy_time = createTime;
+					//计算剩余下单时间
+					var time = (new Date(buy_time).getTime() + 10* 60 * 1000) - (new Date().getTime());
+					if(time>0){
+					  //计算剩余的分钟
+					  var minutes = parseInt(time / 1000 / 60 % 60, 10);
+					  //计算剩余的秒数
+					  var seconds = parseInt(time / 1000 % 60, 10);
+					  that.timeupSecond=parseInt(time / 1000);
+					  // console.log(that.timeupSecond)
+					  //判断分钟和秒数小于10要在前面加个0.
+					  if(minutes<10){
+						minutes = '0' + minutes;
+					  }
+					  if (seconds < 10) {
+						seconds = '0' + seconds;
+					  }
+					  var timer = minutes + ":" + seconds;
+					  // that.setData({
+					  //   timer: timer
+					  // })
+					}
+				}, 1000);
+				if(that.timeupSecond==0) {
+					uni.showToast({
+						title: '时间到'
+					})
+					this.getOrderPage()
+				}
+				
+				// this.timeupSecond = 0
 			},
 			// 跳转到订单详情
 			navigateToOrderMark(id) {

pages/myself/css/myself.css

@@ -20,19 +20,33 @@
 	margin-top: 40rpx;
 	width: 110rpx;
 	height: 110rpx;
-	background: rgba(204, 204, 204, 1);
 	border-radius: 55px;
 }
 .person_name{
-	margin-left: 162rpx;
-	margin-top: -110rpx;
+	position: absolute;
+	margin-left: 22rpx;
+	margin-top: 50rpx;
 	color: rgba(0, 0, 0, 1);
-	font-size: 32rpx;
-	font-weight: 500;
+	font-size: 36rpx;
+	font-weight: 600;
+}
+.person_identity{
+	position: absolute;
+	margin-left: 14rpx;
+	width: 91rpx;
+	height: 38rpx;
+	background: rgba(41, 109, 227, 1);
+	border-radius: 145rpx;
+	color: rgba(255, 255, 255, 1);
+	font-size: 20rpx;
+	font-weight: 400;
+	line-height: 38rpx;
+	text-align: center;
 }
 .person_phone{
-	margin-left: 162rpx;
-	margin-top: 10rpx;
+	position: absolute;
+	margin-left: 22rpx;
+	margin-top: 98rpx;
 	color: rgba(128, 128, 128, 1);
 	font-size: 24rpx;
 	font-weight: 400;

pages/myself/myself.vue

@@ -2,8 +2,15 @@
 	<view class="content">
 		<view class="person">
 			<image class="person_touxiang" src="../../static/my/touxiang.svg"></image>
-			<view class="person_name">李老师</view>
-			<view class="person_phone">13279845567</view>
+			<text class="person_name">{{cardName}}
+				<text class="person_identity">
+					<text v-if="cardIdentity==0">其他</text>
+					<text v-if="cardIdentity==1">学生</text>
+					<text v-if="cardIdentity==4">教职工</text>
+					<text v-if="cardIdentity==5">校友</text>
+				</text>
+			</text>
+			<text class="person_phone">卡号：{{cardNum}}</text>
 		</view>
 		<!-- 第二部分，我的订单 -->
 		<view class="my_order">
@@ -46,10 +53,10 @@
 			    <image src="../../static/my/person_phone.svg" class="img-btn"></image>
 			    <text class="list-txt">人工热线</text>
 			  </view>
-			  <view class="item-list-one" @click="navigateToCard">
+			  <!-- <view class="item-list-one" @click="navigateToBaoxiu">
 			    <image src="../../static/my/baoxiu.svg" class="img-btn"></image>
 			    <text class="list-txt">房间报修</text>
-			  </view>
+			  </view> -->
 			</view>
 		</view>
 	</view>
@@ -59,29 +66,39 @@
 	export default {
 		data() {
 			return {
-				sheshiList:[
-					{id:1,list:'免费洗刷用品'},
-					{id:2,list:'24小时热水'},
-					{id:3,list:'客房wifi覆盖'},
-					{id:4,list:'电视'},
-					{id:5,list:'电吹风'},
-					{id:6,list:'分体式空调'},
-				],
-				sheshiList2:[
-					{id:1,list:'吹风机'},
-					{id:2,list:'宽带上网接口'},
-					{id:3,list:'独立卫生间'},
-					{id:4,list:'拖鞋'},
-					{id:5,list:'电水壶'},
-					{id:6,list:'免费瓶装水'},
-				],
-				phone:'15079248859',//电话
+				phone:'0791-82293574',//客服热线电话
+				cardName:'',//用户名
+				cardIdentity:'',//身份
+				cardNum:'',//卡号
 			}
 		},
 		onLoad() {
-			
+			this.getUserInfo()
 		},
 		methods: {
+			// 获取用户信息
+			getUserInfo() {
+				  let _self = this
+				  this.$axios.get("/ihotel/hotelUser/userInfo",
+				  {
+					  headers:{
+						  'user_token':localStorage.getItem('token')
+					  }
+				  }).then(res => {
+					res = res.data
+					if (res.success) {
+						if (res.data.statu == '1') {
+						  _self.cardName=res.data.name
+						  _self.cardIdentity=res.data.identityType
+						  _self.cardNum=res.data.cardNumber
+						}else {
+							alert('您没有权限，请联系客服')
+						}
+					} else {
+					  console.log('获取用户信息失败')
+					}
+				  });
+			},
 			//跳转到全部订单
 			navigateToAll(){
 				uni.navigateTo({
@@ -92,59 +109,45 @@
 			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("调用完成")}
+					url: "../my_orderlist/my_orderlist?Inv=2"
 				})
 			},
 			//跳转到已入住订单
 			navigateToYiruzhu(){
 				uni.navigateTo({ 
-					url: "../my_orderlist/my_orderlist?Inv=3",
-					success: res => {console.log("调用成功")},
-					fail: () => {console.log("调用失败")},
-					complete: () => {console.log("调用完成")}
+					url: "../my_orderlist/my_orderlist?Inv=3"
 				})
 			},
 			//跳转到已取消订单
 			navigateToYiquxiao(){
 				uni.navigateTo({ 
-					url: "../my_orderlist/my_orderlist?Inv=0",
-					success: res => {console.log("调用成功")},
-					fail: () => {console.log("调用失败")},
-					complete: () => {console.log("调用完成")}
+					url: "../my_orderlist/my_orderlist?Inv=0"
 				})
 			},
 			//跳转到待结账订单
 			navigateToDaijiezhang(){
 				uni.navigateTo({ 
-					url: "../my_orderlist/my_orderlist?Inv=4",
-					success: res => {console.log("调用成功")},
-					fail: () => {console.log("调用失败")},
-					complete: () => {console.log("调用完成")}
+					url: "../my_orderlist/my_orderlist?Inv=4"
 				})
 			},
 			//跳转到已完成订单
 			navigateToYiwancheng(){
 				uni.navigateTo({ 
-					url: "../my_orderlist/my_orderlist?Inv=5",
-					success: res => {console.log("调用成功")},
-					fail: () => {console.log("调用失败")},
-					complete: () => {console.log("调用完成")}
+					url: "../my_orderlist/my_orderlist?Inv=5"
 				})
 			},
 			//拨打人工热线
 			telphone(phone){
 				uni.makePhoneCall({ phoneNumber: phone }) // 传参带入号码即可
+			},
+			//跳转到房间报修
+			navigateToBaoxiu(){
+				window.location.href='https://jtishfw.ncjti.edu.cn/baoxiu/repair-h5/#/'
 			}
 		}
 	}

pages/order_mark/css/order_mark.css

@@ -138,6 +138,9 @@
 	text-align: center;
 	line-height: 82rpx;
 }
+.buttonNo{
+	margin-left: 285rpx;
+}
 /* 第二层模块 */
 .two-order{
 	margin-top: -30rpx;
@@ -159,6 +162,16 @@
 	font-size: 28rpx;
 	font-weight: 400;
 }
+.two-order4{
+	margin-top: -30rpx;
+	width: 690rpx;
+	height: 673rpx;
+	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;
@@ -210,6 +223,16 @@
 	margin-left: 30rpx;
 	margin-top: 486rpx;
 }
+.two-order-shui2{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 541rpx;
+}
+.two-order-dian2{
+	position: absolute;
+	margin-left: 30rpx;
+	margin-top: 596rpx;
+}
 .order-mark{
 	margin-top: 174rpx;
 	text-align: center;

pages/order_mark/order_mark.vue

@@ -1,50 +1,77 @@
 <template>
 	<view class="content">
 		<!-- 第一层模块 -->
-		<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">
+		<view class="one-order3" v-if="orderList.orderStatu == 5">
+			<view class="one-order-title">订单已完成 / 期待您再次光临<text class="all-price">￥{{orderList.shouldFree}}</text></view>
+			<view class="one-order-menshi">水电扣除<text class="menshi-price">￥{{orderList.totalFree}}</text></view>
+			<view class="room-button-6"@click="getOrderDelete(orderList.orderId)">
 				<text>删除订单</text>
 			</view>
-			<view class="room-button2-6">
+			<view class="room-button2-6" @click="navigateToWanchengZaici()">
 				<text>再次预定</text>
 			</view>
 		</view>
+		<view class="one-order3" v-else-if="orderList.orderStatu == 4">
+			<view class="one-order-title">待结账</view>
+			<view class="one-order-menshi" v-if="billXin.flag==1">
+				预退款<text class="menshi-price">￥{{billXin.refundFee}}</text>
+			</view>
+			<view class="one-order-menshi" v-if="billXin.flag==2">
+				预补缴<text class="menshi-price">￥{{billXin.supperFee}}</text>
+			</view>
+			<view class="room-button-6">
+				<text>删除订单</text>
+			</view>
+			<view class="room-button2-6" v-if="billXin.flag==1">
+				<text>退款</text>
+			</view>
+			<view class="room-button2-6" v-if="billXin.flag==2">
+				<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-title">
+				<text v-if="orderList.orderStatu == 0">订单已取消 / 期待您再次光临</text>
+				<text v-if="orderList.orderStatu == 1">请在10分钟之内支付</text>
+				<text v-if="orderList.orderStatu == 2">预定成功 / 等待您的入住</text>
+				<text v-if="orderList.orderStatu == 3">办理成功 / 期待您的到来</text>
+				<text class="all-price">￥{{orderList.payAmount}}</text>
+			</view>
+			<view class="one-order-menshi">门市价<text class="menshi-price">￥{{orderList.roomTypeUsualPrice}}</text></view>
+			<view class="one-order-fuli">教师福利<text class="fuli-price">￥{{orderList.roomTypeDiscountPrice}}</text></view>
+			<view class="one-order-yufukuan">
+				预付款<text class="yufukuan-price">￥{{orderList.payAmount}}</text>
+			</view>
 			<view class="one-order-zhu">
 				注：水费为0.62元/吨，电费为1.1元/度；补助吨数为3吨，补助度
 				数为10度，超出标准需在预付款中扣除，未超出原路返回预
 				付款
 			</view>
-			<view class="room-button">
-				<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 class="room-button" v-if="orderList.orderStatu != 2&& orderList.orderStatu != 3">
+				<text v-if="orderList.orderStatu == 0" @click="navigateToZaici(orderList.enableStartTime,orderList.enableEndTime,orderList.roomTypeId)">再次预定</text>
+				<text v-if="orderList.orderStatu == 1" @click="getOrderCancel(orderList.orderId)">取消订单</text>
+				<!-- <text v-if="orderList.orderStatu == 3">办理续住</text> -->
 			</view>
-			<view class="room-button2">
-				<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 class="room-button2" :class="{'buttonNo': orderList.orderStatu == 3}">
+				<text v-if="orderList.orderStatu == 0" @click="getOrderDelete(orderList.orderId)">删除</text>
+				<text v-if="orderList.orderStatu == 1" @click="getOrderPay(orderList.orderId)">支付</text>
+				<text v-if="orderList.orderStatu == 3" @click="getOrderReturn(orderList.orderId)">办理退房</text>
+				<text v-if="orderList.orderStatu == 2" @click="getOrderHold(orderList.orderId)">办理入住</text>
 			</view>
 		</view>
 		<!-- 第二层模块 -->
-		<view class="two-order" :class="{'two-order3': orderList2.types == 6||orderList2.types == 3}">
+		<view class="two-order" :class="{'two-order3': orderList.orderStatu == 3,'two-order4': orderList.orderStatu == 5||orderList.orderStatu == 4}">
 			<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-shui" v-if="orderList2.types === 6">水起码：</view>
-			<view class="two-order-dian" v-if="orderList2.types === 6">电起码：</view>
+			<view class="two-order-name">预定信息：<text class="two-order-txt">{{orderList.userName}}</text></view>
+			<view class="two-order-phone">手机号码：<text class="two-order-txt">{{orderList.userPhone}}</text></view>
+			<view class="two-order-count">订  单  号：<text class="two-order-txt">{{orderList.orderId}}</text></view>
+			<view class="two-order-time">下单时间：<text class="two-order-txt">{{orderList.createTime}}</text></view>
+			<view class="two-order-xing">户         型：<text class="two-order-txt">{{orderList.roomTypeName}}</text></view>
+			<view class="two-order-zhuTime">入离时间：<text class="two-order-txt" v-if="orderList.enableStartTime,orderList.enableEndTime">入住日{{orderList.enableStartTime.substring(11,16)}}后   离店日{{orderList.enableEndTime.substring(11,16)}}前</text></view>
+			<view class="two-order-shui" v-if="orderList.orderStatu == 5||orderList.orderStatu ==4||orderList.orderStatu ==3">水起码：{{orderList.startOfWater}}吨</view>
+			<view class="two-order-dian" v-if="orderList.orderStatu == 5||orderList.orderStatu ==4||orderList.orderStatu ==3">电起码：{{orderList.startOfElectric}}度</view>
+			<view class="two-order-shui2" v-if="orderList.orderStatu == 5||orderList.orderStatu == 4">水起码：{{orderList.startOfWater}}吨</view>
+			<view class="two-order-dian2" v-if="orderList.orderStatu == 5||orderList.orderStatu == 4">电起码：{{orderList.startOfElectric}}度</view>
 		</view>
 		
 		<view class="order-mark">您的满意是我们最大的追求</view>
@@ -55,45 +82,160 @@
 	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}
-				],
-				orderList2:[]
+				orderList:'',//订单整体
+				orderId:'',//订单号
+				billXin:'',//结账信息
 			}
 		},
 		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.orderId==this.orderList[i].types){
-					this.orderList2=this.orderList[i]
-				}
-			}
-			// console.log(this.orderList2)
+			this.orderId=currentPage.options.orderId
+			this.getOrderInfo(this.orderId)
+			this.getOrderBill(this.orderId)
 		},
 		onload(option){
 			console.log('不能执行onload')
 		},
 		methods:{
-			
+			//获取每个订单详情
+			getOrderInfo() {
+				  let _self = this
+				  _self.orderList = []
+				  this.$axios.get(`/ihotel/hotelOrder/user/order/${this.orderId}`,
+				  {
+					  headers:{
+					  		'user_token':localStorage.getItem('token')
+					  }
+				  }
+				  ).then(res => {
+					res = res.data
+					if (res.success) {
+						console.log(res)
+						this.orderList=res.data
+					} else {
+					  console.log('获取订单列表失败')
+					}
+				  });
+			},
+			// 订单结账信息
+			getOrderBill() {
+				  let _self = this
+				  this.$axios.get(`/ihotel/hotelOrder/user/order/bill/${this.orderId}`,
+				  {
+					  headers:{
+						  'user_token':localStorage.getItem('token')
+					  }
+				  }).then(res => {
+					res = res.data
+					if (res.success) {
+						// console.log(res)
+						if(res.data.flag!='3') {
+							this.billXin=res.data
+						}
+						
+					} else {
+					  console.log('获取结账信息失败')
+					}
+				  });
+			},
+			// 订单取消再次预订
+			navigateToZaici(enableStartTime,enableEndTime,roomTypeId){
+				uni.navigateTo({
+					url:"../order_room/order_room?enableStartTime="+enableStartTime+"&enableEndTime="+enableEndTime+"&startTime="+enableStartTime.substring(5,7)+'月'+enableStartTime.substring(8,10)+'日'+"&endTime="+enableEndTime.substring(5,7)+'月'+enableEndTime.substring(8,10)+'日'+"&roomTypeId="+roomTypeId
+				})
+			},
+			// 待支付取消订单
+			getOrderCancel(orderId) {
+				let _self = this
+				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('token');
+				this.$axios.put(`/ihotel/hotelOrder/user/order/cancel/${orderId}`,).then(res => {
+					res = res.data
+					if (res.success) {
+						alert('取消成功')
+						this.getOrderInfo()
+					} else {
+						alert(res.message)
+					}
+				});
+			},
+			// 支付订单
+			getOrderPay(orderId) {
+				  let _self = this
+				  this.$axios.get(`/ihotel/hotelOrder/user/order/pay/${orderId}`,
+				  {
+					  headers:{
+						  'user_token':localStorage.getItem('token')
+					  }
+				  }).then(res => {
+					res = res.data
+					if (res.success) {
+						if(res.data.payAmount==0) {
+							uni.navigateTo({
+								url: '../zhifuchenggong/zhifuchenggong?orderId='+res.data.orderId
+							})
+						} else {
+							window.location.href = res.data.payUrl;
+						}
+					} else {
+						alert(res.message)
+					  console.log('支付失败')
+					}
+				  });
+			},
+			// 删除订单
+			getOrderDelete(orderId) {
+				let _self = this
+				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('token');
+				this.$axios.delete(`/ihotel/hotelOrder/user/order/${orderId}`,).then(res => {
+					res = res.data
+					if (res.success) {
+						alert('删除订单成功')
+						this.getOrderInfo()
+					} else {
+						alert(res.message)
+					}
+				});
+			},
+			// 订单已完成再次预订
+			navigateToWanchengZaici(){
+				uni.navigateBack({
+					delta:5
+				})
+			},
+			// 办理入住
+			getOrderHold(orderId) {
+				let _self = this
+				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('token');
+				this.$axios.put(`/ihotel/hotelOrder/user/order/hold/${orderId}`,).then(res => {
+					res = res.data
+					if (res.success) {
+						alert('办理入住成功')
+						this.getOrderInfo()()
+					} else {
+						alert(res.message)
+					}
+				});
+			},
+			// 办理退房
+			getOrderReturn(orderId) {
+				let _self = this
+				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('token');
+				this.$axios.put(`/ihotel/hotelOrder/user/order/return/${orderId}`,).then(res => {
+					res = res.data
+					if (res.success) {
+						console.log(res)
+						alert('退房成功')
+						this.getOrderInfo()
+						this.getOrderBill()
+					} else {
+						alert(res.message)
+					}
+				});
+			},
 		}
 	}
 </script>

pages/order_room/css/order_room.css

@@ -228,8 +228,17 @@
 	text-align: center;
 }
 .zhushi-mark{
-	display: list-item;
-	margin-left: 30rpx;
+	position: inherit;
+	margin-left: 40rpx;
+}
+.zhushi-circle{
+	margin-left: -20rpx;
+	margin-top: 20rpx;
+	position: absolute;
+	width: 8rpx;
+	height: 8rpx;
+	border-radius: 50px;
+	background: rgba(153, 153, 153, 1);
 }
 /* 支付框 */
 .fukuan{
@@ -259,10 +268,39 @@
 	text-align: center;
 	line-height: 100rpx;
 }
+.room-button2{
+	float: right;
+	width: 287rpx;
+	height: 100rpx;
+	background: rgba(128, 127, 131, 0.5);
+	color: rgba(255, 255, 255, 1);
+	font-size: 40rpx;
+	font-weight: 400;
+	text-align: center;
+	line-height: 100rpx;
+}
 /* 日期选择器弹窗 */
 .popup_bg_picker{
 	width: 700rpx;
 	height: 800rpx;
 	background: rgba(255, 255, 255, 1);
 	border-radius: 6rpx;
+}
+/* uni-calendar选中背景色 */
+
+>>>.uni-calendar-item--isDay[data-v-6097fd5b] {
+    background-color: #fff;
+    opacity: 0.8;
+    color: #2979ff;
+}
+>>>.uni-calendar-item--before-checked[data-v-6097fd5b] {
+    background-color: #0055ff;
+    color: #fff;
+	opacity: 1;
+}
+
+>>>.uni-calendar-item--after-checked[data-v-6097fd5b] {
+    background-color: #0055ff;
+    color: #fff;
+	opacity: 1;
 }

pages/order_room/order_room.vue

@@ -18,7 +18,7 @@
 				</view>
 				<view class="select-center">
 					<view class="select-line1"></view>
-					<view class="select-circle">1晚</view>
+					<view class="select-circle">{{ruzhu_num}}晚</view>
 					<view class="select-line2"></view>
 				</view>
 				<view class="select-time-one">
@@ -67,12 +67,17 @@
 		</view>
 		<!-- 注释 -->
 		<view class="zhushi">
-			<text class="zhushi-mark">低价保证</text> <text class="zhushi-mark">入住免房费</text> <text class="zhushi-mark">提前选好房</text>
+			<text class="zhushi-mark"><text class="zhushi-circle"></text>低价保证</text> 
+			<text class="zhushi-mark"><text class="zhushi-circle"></text>入住免房费</text> 
+			<text class="zhushi-mark"><text class="zhushi-circle"></text>提前选好房</text>
 		</view>
 		<!-- 支付框 -->
 		<view class="fukuan">
 			<view class="fu-price"><text style="font-size: 28rpx;">总计：</text>¥{{payMount}}</view>
-			<view class="fu-zhifu" @click="getOrderSubmit(payMount)">立即支付</view>
+			<view class="fu-zhifu" :class="{'room-button2': freeRoom == 0}">
+				<text v-if="freeRoom==0">房间已满</text>
+				<text v-else @click="getOrderSubmit()">立即支付</text>
+			</view>
 		</view>
 		
 	</view>
@@ -144,21 +149,26 @@
 				submitToken:'',//请求令牌
 				roomTypeId:'',//房间类型id
 				remark:'',//备注要求
-				payMount:0.01,//应付金额
+				payMount:0,//应付金额
+				freeRoom:0,//剩余房间
+				ruzhu_num:1,//入住夜晚
 			}
 		},
 		onLoad(option) {
 			console.log(option)
+			this.payMount=Number(option.payMount)
+			this.ruzhu_num=option.ruzhu_num
+			this.freeRoom=option.freeRoom
 			this.roomTypeId=option.roomTypeId
 			this.typeName=option.typeName
 			this.startTime=option.startTime
 			this.endTime=option.endTime
 			this.startDate=option.enableStartTime
 			this.endDate=option.enableEndTime
-			this.startWeek=option.startWeek
-			this.endWeek=option.endWeek
+			this.startWeek=this.getweekday(this.startDate)
+			this.endWeek=this.getweekday(this.endDate)
 			this.mayTime=this.startDate.substring(0,11)+"18:00:00"
-			// console.log(this.mayTime)
+			// console.log(this.getweekday(this.startDate))
 			this.getUserInfo()
 			this.getTokenSubmit()
 		},
@@ -180,7 +190,7 @@
 				  this.$axios.get("/ihotel/hotelOrder/user/submit/token",
 				  {
 					  headers:{
-						  'user_token':localStorage.getItem('user_token')
+						  'user_token':localStorage.getItem('token')
 					  }
 				  }).then(res => {
 					res = res.data
@@ -197,7 +207,7 @@
 				  this.$axios.get("/ihotel/hotelUser/userInfo",
 				  {
 					  headers:{
-						  'user_token':localStorage.getItem('user_token')
+						  'user_token':localStorage.getItem('token')
 					  }
 				  }).then(res => {
 					res = res.data
@@ -216,9 +226,10 @@
 			},
 			// 提交订单
 			getOrderSubmit() {
+				console.log('提交')
 				this.payUrl=''
 				let _self = this
-				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('user_token');
+				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('token');
 				this.$axios.defaults.headers.common['request_token'] = this.submitToken;
 				this.$axios.defaults.headers.common['Content-Type'] ='application/json'
 				this.$axios.post("/ihotel/hotelOrder/user/order/submit",
@@ -235,13 +246,27 @@
 				).then(res => {
 					res = res.data
 					if (res.success) {
-						window.location.href = res.data.payUrl;
+						if(res.data.payAmount==0) {
+							uni.navigateTo({
+								url:'../zhifuchenggong/zhifuchenggong?orderId='+res.data.orderId
+							})
+						} else {
+							window.location.href = res.data.payUrl;
+						}
+						
 					} else {
 						alert(res.message)
 					  console.log('提交订单失败')
 					}
 				});
 			},
+			// 计算指定时间是周几
+			getweekday(date){
+			   // date例如:'2022-03-05'
+				var weekArray = new Array("周日","周一", "周二", "周三", "周四", "周五", "周六")
+				var weeka  = weekArray[new Date(date).getDay()]
+				return weeka
+			},
 			//日历选择器
 			openCalendar() {
 				this.$refs.popup_picker.open()
@@ -250,14 +275,16 @@
 				console.log('1change 返回:', e)
 				// 模拟动态打卡
 				// if (this.info.selected.length > 5) return
-				this.info.selected.push({
-					date: e.range.before,
-					info: '到店'
-				})
-				this.info.selected.push({
-					date: e.range.after,
-					info: '离店'
-				})
+				this.info.selected=[
+					{
+						date: e.range.before,
+						info: '到店'
+					},
+					{
+						date: e.range.after,
+						info: '离店'
+					}
+				]
 				if(e.range.before!=''&&e.range.after=='') {
 					this.startWeek='周'+e.lunar.ncWeek.substring(2,3)
 				} else if(e.range.before!=''&&e.range.after!=''){

pages/zhifuchenggong/css/zhifuchenggong.css

@@ -0,0 +1,46 @@
+.content {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.text-area {
+		display: flex;
+		justify-content: center;
+	}
+	.top-line{
+		margin-top: 0rpx;
+		margin-left: 0;
+		position: absolute;
+		width: 750rpx;
+		height: 1rpx;
+		background: #CCCCCC;
+	}
+	.item{
+		margin-top: 0rpx;
+		margin-left: 0;
+		width: 750rpx;
+		height: 1206rpx;
+	}
+	.success-img{
+		margin-left: 242rpx;
+		margin-top: 73rpx;
+		width: 261rpx;
+		height: 266rpx;
+	}
+	.success-text{
+		margin-left: 276rpx;
+		margin-top: 433rpx;
+		font-size: 49rpx;
+		font-family: Microsoft YaHei-3970(82674968);
+		font-weight: 400;
+		color: #333333;
+	}
+	.success button{
+		margin-left: 233rpx;
+		margin-top: 110rpx;
+		width: 280rpx;
+		height: 104rpx;
+		border-radius: 52rpx;
+	}

pages/zhifuchenggong/zhifuchenggong.vue

@@ -0,0 +1,39 @@
+<template>
+	<view class="content">
+		<view class="text-area">
+			<text class="top-line"></text>
+				<view class="item">
+					<image src="../../static/success.png" class="success-img"></image>
+					<text class="success-text">支付成功</text>
+					<view class="success">
+						<button form-type="submit" type="primary" @click="success">我知道了</button>
+					</view>
+				</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				orderId:'',//订单id
+			}
+		},
+		onLoad(option) {
+			this.orderId=option.orderId
+			console.log(this.orderId)
+		},
+		methods: {
+			success() {
+				uni.navigateTo({
+					url:'../order_mark/order_mark?orderId='+this.orderId
+				})
+			},
+		}
+	}
+</script>
+
+<style>
+	@import url("./css/zhifuchenggong.css");
+</style>