更新订单样式，新增支付功能，再次预订跳转功能

pages/index/index.vue

@@ -73,7 +73,7 @@
 					</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)">
+					<view class="room-button" :class="{'room-button2': item.enableNum == 0}" @click="navigateToOrderRoom(item.enableNum,item.id,item.typeName)">
 						<text v-if="item.enableNum==0">已满</text>
 						<text v-else>订</text>
 					</view>
@@ -354,10 +354,10 @@
 				});
 			},
 			// 订房间 
-			navigateToOrderRoom(enableNum) {
+			navigateToOrderRoom(enableNum,id,typeName) {
 				if (enableNum>=1){
 					uni.navigateTo({
-					  url: "../order_room/order_room",
+					  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,
 					});
 				}
 				

pages/my_orderlist/css/my_orderlist.css

@@ -11,23 +11,30 @@
 	height: 98rpx;
 	display: flex;
 	top: 0;
-	width: 750rpx;
+	width: 100%;
+	white-space: nowrap; 
 }
 
 .inv-h {
+	display: inline-flex;
 	font-size: 28rpx;
 	flex: 1;
 	text-align: center;
+	margin-left: 5rpx;
+	margin-right: 5rpx;
+	padding-left: 20rpx;
+	padding-right: 20rpx;
 	height: 98rpx;
 	line-height: 98rpx;
 	color: rgba(128, 128, 128, 1);
 }
 
 .inv-h-se {
+	/* display: inline-flex; */
 	color: rgba(0, 0, 0, 1);
 	font-size: 28rpx;
 	font-weight: bold;
-	height: 98rpx;
+	height: 92rpx;
 	line-height: 98rpx;
 	border-bottom: 6rpx solid rgba(41, 109, 227, 1);
 }

pages/my_orderlist/my_orderlist.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="content">
 		<!-- 切换栏 -->
-		<view class="inv-h-w">
+		<scroll-view :scroll-x="true" class="inv-h-w">
 			<view :class="['inv-h',Inv==6?'inv-h-se':'']" @click="changeTab(6)">全部</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>
@@ -9,7 +9,7 @@
 			<view :class="['inv-h',Inv==0?'inv-h-se':'']" @click="changeTab(0)">已取消</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>
+		</scroll-view>
 		<!-- 订单样式 -->
 		<view class="room-kuang">
 			<view class="room-xinxi" v-for="(item,index) in troom" :key="index">
@@ -37,9 +37,10 @@
 					<text v-if="item.orderStatu == 2">取消订单</text>
 					<text v-if="item.orderStatu == 3" @click="getOrderReturn(item.id)">退房</text>
 				</view>
-				<view class="room-button2" :class="{'room-button3': item.orderStatu == 1}">
-					<text v-if="item.orderStatu == 0">再次预定</text>
-					<text v-if="item.orderStatu == 1">支付</text>
+				<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>
@@ -129,7 +130,7 @@
 				Inv: 6,
 				room:[],
 				troom:[],
-				timeupSecond: 1800,
+				timeupSecond: 600,
 				//续住里选择器
 				infoXu: {
 					lunar: true,
@@ -189,9 +190,13 @@
 			// 订单列表
 			getOrderPage() {
 				  let _self = this
+				  var Inv2=this.Inv
 				  _self.troom = []
 				  _self.room = []
-				  this.$axios.get("/ihotel/hotelOrder/user/order/page?curPage=1&pageSize=100&statu="+this.Inv,
+				  if (this.Inv==6) {
+					  Inv2=''
+				  }
+				  this.$axios.get("/ihotel/hotelOrder/user/order/page?curPage=1&pageSize=100&statu="+Inv2,
 				  {
 					  headers:{
 						  'user_token':localStorage.getItem('user_token')
@@ -201,46 +206,56 @@
 					if (res.success) {
 						// console.log(res)
 					  res.data.list.forEach(data => {
-						if (data.flag !== '-1') {
-						  _self.troom.push(data)
-						  _self.room.push(data)
-						}
+						_self.troom.push(data)
+						_self.room.push(data)
 					  })
 					} else {
 					  console.log('获取订单列表失败')
 					}
 				  });
 			},
+			// 支付订单
+			getOrderPay(id) {
+				  let _self = this
+				  this.$axios.get(`/ihotel/hotelOrder/user/order/pay/${id}`,
+				  {
+					  headers:{
+						  'user_token':localStorage.getItem('user_token')
+					  }
+				  }).then(res => {
+					res = res.data
+					if (res.success) {
+						window.location.href = res.data.payUrl;
+					} else {
+					  console.log('获取订单列表失败')
+					}
+				  });
+			},
 			// 办理退房
 			getOrderReturn(id) {
-				// this.header = {
-				// 	'user_token':localStorage.getItem('user_token')
-				// }
-				// this.$myRequest({
-				// 	url: `/ihotel/hotelOrder/user/order/return/${id}`,
-				// 	headers: this.header,
-				// }).then(res => {
-				// 	console.log(res)
-				// }).catch(err => {
-				// 	console.log(err)
-				// })
-			  let _self = this
-			  this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('user_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('退房成功')
+				let _self = this
+				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('user_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('退房成功')
+						}
+					  })
+					} else {
+					  alert('退房失败')
 					}
-				  })
-				} else {
-				  alert('退房失败')
-				}
-			  });
+				});
 			},
-			/**
+			// 再次预订
+			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
+				})
+			},
+			/*
 			  * @Explain：选项卡点击切换
 			  */
 			changeTab(Inv) {
@@ -255,9 +270,9 @@
 					}
 				})
 				that.troom = arr;
-				if(this.Inv == 6){//获取全部数据
-					that.troom = that.room;
-				}
+				// if(this.Inv == 6){//获取全部数据
+				// 	that.troom = that.room;
+				// }
 				//滚动到顶部
 				uni.pageScrollTo({
 					duration: 0, //过渡时间必须为0，否则运行到手机会报错
@@ -269,7 +284,7 @@
 				uni.showToast({
 					title: '时间到'
 				})
-				this.timeupSecond = 1799
+				this.timeupSecond = 0
 			},
 			// 跳转到订单详情
 			navigateToOrderMark(id) {

pages/order_room/order_room.vue

@@ -13,8 +13,8 @@
 		<view class="two_all">
 			<view class="select-time" @click="openCalendar">
 				<view class="select-time-one">
-				  <text class="select-list">周四入住</text>
-				  <text class="select-list-time">07月21日</text>
+				  <text class="select-list">{{startWeek}}入住</text>
+				  <text class="select-list-time">{{startTime}}</text>
 				</view>
 				<view class="select-center">
 					<view class="select-line1"></view>
@@ -22,8 +22,8 @@
 					<view class="select-line2"></view>
 				</view>
 				<view class="select-time-one">
-				  <text class="select-list">周五离店</text>
-				  <text class="select-list-time">07月22日</text>
+				  <text class="select-list">{{endWeek}}离店</text>
+				  <text class="select-list-time">{{endTime}}</text>
 				</view>
 			</view>
 			<uni-popup ref="popup_picker" :mask-click="true">
@@ -33,7 +33,7 @@
 				</view>
 			</uni-popup>
 			<view class="form_bg">
-				<view class="form_title">01户型</view>
+				<view class="form_title">{{typeName}}</view>
 				<!-- 自定义表单 -->
 				<view class="form-name">{{cardName}}</view>
 				<view class="form-line"></view>
@@ -61,7 +61,7 @@
 				<text v-if="cardIdentity==5">校友</text>
 				】
 			</view>
-			<view class="three-mark">本人可以免费入住，需要预交费<text style="color: rgba(255, 87, 51, 1);">20.00</text>元，即可享受权益</view>
+			<view class="three-mark">本人可以免费入住，需要预交费<text style="color: rgba(255, 87, 51, 1);">{{payMount}}</text>元，即可享受权益</view>
 			<view class="three-zhu">注：水费为0.62元/吨，电费为1.1元/度；补助吨数为3吨，补助度数
          为10度，超出标准需在预付款中扣除，未超出原路返回预付款</view>
 		</view>
@@ -71,8 +71,8 @@
 		</view>
 		<!-- 支付框 -->
 		<view class="fukuan">
-			<view class="fu-price"><text style="font-size: 28rpx;">总计：</text>¥20.00</view>
-			<view class="fu-zhifu">立即支付</view>
+			<view class="fu-price"><text style="font-size: 28rpx;">总计：</text>¥{{payMount}}</view>
+			<view class="fu-zhifu" @click="getOrderSubmit(payMount)">立即支付</view>
 		</view>
 		
 	</view>
@@ -129,16 +129,38 @@
 				},
 				startTime:'',//到店日期
 				endTime:'',//离店日期
+				startDate:'',//默认到店日期接口数据
+				endDate:'',//默认离店日期接口数据
+				startWeek:'',// 默认入店日
+				endWeek:'',// 默认离店
 				array: ['18:00前到店', '19:00前到店', '20:00前到店', '21:00前到店'],
 				index: 0,
+				mayTime:'',// 预计到店时间
+				typeName:'',//户型名
 				textNum:0,//输入框当前字数
 				cardName:'',//用户名
 				cardPhone:'',//用户电话
 				cardIdentity:'',//身份
+				submitToken:'',//请求令牌
+				roomTypeId:'',//房间类型id
+				remark:'',//备注要求
+				payMount:0.01,//应付金额
 			}
 		},
-		onLoad() {
+		onLoad(option) {
+			console.log(option)
+			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.mayTime=this.startDate.substring(0,11)+"18:00:00"
+			// console.log(this.mayTime)
 			this.getUserInfo()
+			this.getTokenSubmit()
 		},
 		onReady() {
 			this.$nextTick(() => {
@@ -146,15 +168,29 @@
 			})
 			// TODO 模拟请求异步同步数据
 			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
-			}, 2000)
+			}, 20)
 		},
 		methods: {
+			// 获取请求令牌
+			getTokenSubmit() {
+				  let _self = this
+				  this.$axios.get("/ihotel/hotelOrder/user/submit/token",
+				  {
+					  headers:{
+						  'user_token':localStorage.getItem('user_token')
+					  }
+				  }).then(res => {
+					res = res.data
+					if (res.success) {
+						this.submitToken=res.data.submitToken
+					} else {
+					  console.log('获取请求令牌失败')
+					}
+				  });
+			},
 			// 获取用户信息
 			getUserInfo() {
 				  let _self = this
@@ -178,6 +214,34 @@
 					}
 				  });
 			},
+			// 提交订单
+			getOrderSubmit() {
+				this.payUrl=''
+				let _self = this
+				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('user_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",
+				{
+					"enableStartTime":this.startDate,//入住时间
+					"enableEndTime":this.endDate,//离店时间
+					"roomTypeId":this.roomTypeId,//房间类型id
+					"payAmount":this.payMount,//需支付金额
+					"userName":this.cardName,
+					"userPhone":this.cardPhone,
+					"mayIntoTime":this.mayTime,
+					"remark":this.remark,
+				}
+				).then(res => {
+					res = res.data
+					if (res.success) {
+						window.location.href = res.data.payUrl;
+					} else {
+						alert(res.message)
+					  console.log('提交订单失败')
+					}
+				});
+			},
 			//日历选择器
 			openCalendar() {
 				this.$refs.popup_picker.open()
@@ -185,7 +249,7 @@
 			change(e) {
 				console.log('1change 返回:', e)
 				// 模拟动态打卡
-				if (this.info.selected.length > 5) return
+				// if (this.info.selected.length > 5) return
 				this.info.selected.push({
 					date: e.range.before,
 					info: '到店'
@@ -194,17 +258,29 @@
 					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!=''){
+					this.endWeek='周'+e.lunar.ncWeek.substring(2,3)
+				}
+				this.startTime=e.range.before.substring(5,7)+'月'+e.range.before.substring(8,10)+'日'
+				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'
 			},
 			//选择器
 			bindPickerChange: function(e) {
-				// console.log('picker发送选择改变，携带值为', e.detail.value)
+				console.log('picker发送选择改变，携带值为', e.detail.value)
 				this.index = e.detail.value
+				this.mayTime = this.startDate.substring(0,11)+this.array[this.index].substring(0,5)+":00"
+				// console.log(this.mayTime)
 			},
 			// 输入框
 			bindTextAreaBlur: function (e) {
 				// console.log(e.detail.cursor)
 				// console.log(e.detail.value)
 				this.textNum=e.detail.cursor
+				this.remark=e.detail.value
 			}
 		}
 	}