ihotel-h5/pages/order_mark/order_mark.vue

<template>
	<view class="content">
		<!-- 第一层模块 -->
		<view class="one-order3" v-if="hourOrder.orderStatus == 8">
			<view class="one-order-title">订单已完成 / 期待您再次光临<text class="all-price">￥{{hourOrder.payPrice}}</text></view>
			<view class="one-order-menshi">水电扣除<text class="menshi-price">￥{{orderList.totalFree}}</text></view>
			<!-- <view class="room-button-6"@click="getOrderDelete(hourOrder.orderNumber)">
				<text>删除订单</text>
			</view> -->
			<view style="height: 20px;"></view>
			<view class="room-button2-6" style="margin-bottom: 30px;" @click="navigateToWanchengZaici(hourOrder.houseId)">
				<text>再次预定</text>
			</view>
		</view>
		<view class="one-order3" v-else-if="hourOrder.orderStatus == 5">
			<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 style="height: 20px;"></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">
				<text v-if="hourOrder.orderStatus == 10">订单已支付未入住 / 请去前台处理</text>
				<text v-if="hourOrder.orderStatus == 9">订单已取消 / 期待您再次光临</text>
				<text v-if="hourOrder.orderStatus == 7">订单已退款 / 期待您再次光临</text>
				<text v-if="hourOrder.orderStatus == 1" style="font-weight: 600;">待支付</text>
				<text v-if="hourOrder.orderStatus == 3">预定成功 / 等待您的入住</text>
				<text v-if="hourOrder.orderStatus == 4">办理成功 / 期待您的到来</text>
				<text class="all-price">￥{{hourOrder.payPrice}}</text>
			</view>
			<text v-if="hourOrder.orderStatus == 1" class="room-count-txt">酒店房间有限，请尽快支付，超时订单将自动取消</text>
			<uv-count-down v-if="hourOrder.orderStatus == 1" class="room-count" color="#FF5733" :time="new Date((hourOrder.createTime).replace(/-/g,'/')).getTime() + 2 * 60 * 1000 - new Date().getTime()" format="mm:ss" @finish="finish(timeupSecond,item)"></uv-count-down>
			<!-- <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 style="height: 50px;" v-if="hourOrder.orderStatus == 1"></view>
			<view style="height: 20px;" v-else></view>
			<view class="room-button" v-if="hourOrder.orderStatus==1">
				
				<text v-if="hourOrder.orderStatus == 1" @click="openQu(hourOrder.orderNumber,'warn',hourOrder.houseNumberId)">取消订单</text>
				<!-- <text v-if="hourOrder.orderStatus == 3" @click="openQu(hourOrder.orderNumber,'warn',hourOrder.houseNumberId)">办理退款</text> -->
			</view>
			<view class="room-button2" v-if="hourOrder.orderStatus != 10" :class="{'buttonNo': hourOrder.orderStatus == 4 ||hourOrder.orderStatus == 9||hourOrder.orderStatus == 7||hourOrder.orderStatus == 3}">
				<text v-if="hourOrder.orderStatus == 9||hourOrder.orderStatus == 7" @click="navigateToZaici(hourOrder.reserveLiveTime,hourOrder.reserveLeaveTime,hourOrder.houseId)">再次预定</text>
				<!-- <text v-if="hourOrder.orderStatus == 9" @click="openDel(hourOrder.orderNumber,'warn',hourOrder.houseNumberId)">删除</text> -->
				<text v-if="hourOrder.orderStatus == 1" @click="getOrderPay(hourOrder.id,hourOrder.price)">支付</text>
				<text v-if="hourOrder.orderStatus == 4" @click="openTui(hourOrder.orderNumber,hourOrder.houseNumberId,'warn')">办理退房</text>
				<!-- <text v-if="hourOrder.orderStatus == 3" @click="openRu(hourOrder.id,'warn')">办理入住</text> -->
				
				<text v-if="hourOrder.orderStatus == 3 && hourOrder.payPrice==0" @click="openQu(hourOrder.orderNumber,'warn',hourOrder.houseNumberId)">取消订单</text>
				<text v-else-if="hourOrder.orderStatus == 3 && hourOrder.payPrice!=0" @click="openQu(hourOrder.orderNumber,'warn',hourOrder.houseNumberId)">办理退款</text>
			</view>
			<view style="height: 50px;"></view>
		</view>
		<!-- 第二层模块 -->
		<view class="two-order" :class="{'two-order3': hourOrder.orderStatus == 4,'two-order4': hourOrder.orderStatus == 8||hourOrder.orderStatus == 5}">
			<view class="two-order-title">订单信息</view>
			<view class="two-order-name">预定人信息：<text class="two-order-txt">{{hourOrder.reserveName}}</text></view>
			<view class="two-order-phone">手机号码：<text class="two-order-txt">{{hourOrder.reservePhone}}</text></view>
			<view class="two-order-count">订  单  号：<text class="two-order-txt">{{hourOrder.orderNumber}}</text></view>
			<view class="two-order-time">下单时间：<text class="two-order-txt">{{hourOrder.createTime}}</text></view>
			<view class="two-order-xing">户         型：<text class="two-order-txt">{{houde.roomName}}</text></view>
			<view class="two-order-zhuTime">入离时间：
				<text class="two-order-txt" v-if="hourOrder.reserveLiveTime,hourOrder.reserveLeaveTime">
				<view>入住日{{hourOrder.reserveLiveTime}}后   </view>
				<view>离店日{{hourOrder.reserveLeaveTime}}前</view></text>
			</view>
			<view class="two-order-secret" v-if="hourOrder.orderStatus ==4||hourOrder.orderStatus == 8"><text class="two-order-txt">入住时间：{{time_data(hourOrder.liveTime)}}</text></view>
			<view class="two-order-secret" v-if="hourOrder.orderStatus == 8"><text class="two-order-txt">退房时间：{{time_data(hourOrder.leaveTime)}}</text></view>
			<view class="two-order-secret" v-if="hourOrder.orderStatus ==4||hourOrder.orderStatus ==3"><text class="two-order-txt">房间门锁密码：{{hourOrder.keyPassWord	}}</text></view>
			<view class="two-order-shui" v-if="hourOrder.orderStatus == 8||hourOrder.orderStatus ==5"><text class="two-order-txt">水能耗：{{hourOrder.waterConsume}}吨</text></view>
			<view class="two-order-dian" v-if="hourOrder.orderStatus == 8||hourOrder.orderStatus ==5"><text class="two-order-txt">电能耗：{{hourOrder.electricConsume}}度</text></view>
			<view class="two-order-shui2" v-if="hourOrder.orderStatus == 8||hourOrder.orderStatus == 5"><text class="two-order-txt">水费：{{hourOrder.waterCost}}元</text></view>
			<view class="two-order-dian2" v-if="hourOrder.orderStatus == 8||hourOrder.orderStatus == 5"><text class="two-order-txt">电费：{{hourOrder.electricCost}}元</text></view>
			<view class="two-order-dian2" v-if="hourOrder.payPrice>0"><text class="two-order-txt">选择的身份：
				<template v-if="hourOrder.identityType==0">学生</template>
				<template v-if="hourOrder.identityType==1">学生家长</template>
				<template v-if="hourOrder.identityType==2">朋友</template>
				<template v-if="hourOrder.identityType==3">老师</template>
			</text></view>
			<view class="two-order-dian2" v-if="hourOrder.payPrice>0"><text class="two-order-txt">申请原因：
				<template v-if="hourOrder.reason==0">探视</template>
				<template v-if="hourOrder.reason==1">交流</template>
			</text></view>
			<!-- <view class="two-order-lidian2" v-if="hourOrder.orderStatus == 8">退房时间：{{}}</view> -->
		</view>
		
		<view class="order-mark">您的满意是我们最大的追求</view>
		<!-- 提示时弹框 -->
		<uni-popup ref="popup_order2" type="dialog">
			<uni-popup-dialog :type="msgType2" cancelText="关闭" confirmText="确定" :content='order_txt2' @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="popup_order" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" :content='order_txt'></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getorderdetail,
		getorderbill,
		quxiaoorder,
		getorderpay,
		getchapay,
		getorderdelete,
		getorderhold,
		getorderreturn
	} from '../../utils/api_hotel.js'
	export default {
		data(){
			return {
				orderList:{},//订单整体
				hourOrder:{},
				houde:{},
				orderId:'',//订单号
				billXin:'',//结账信息
				order_txt:'',//弹框提示信息
				msgType:'warn',
				msgType2:'warn',
				order_txt:'',//
				order_txt2:'',//
				tankuang:false,//弹框是否确定
				order_txt_id:'',
				houseNumberId:'',
				orderNumber:'',
				
				appId: "",     //公众号ID，由商户传入
				timeStamp: "",     //时间戳，自1970年以来的秒数     
				nonceStr: "",      //随机串     
				package: "",
				signType: "",     //微信签名方式：     
				paySign:'',
			}
		},
		// destroyed() {
		// 	console.log('销毁')
		//     // uni.removeStorageSync('orderId');
		// },
		onShow() {
			// console.log(new Date('2024-08-19T02:25:06.000+00:00').getHours(),'poo')
			this.orderId=uni.getStorageSync('orderId');
			this.getOrderInfo(this.orderId)
			
		},
		methods:{
			// 倒计时结束回调
			finish(timeupSecond,item) {
				// this.countDownTime = new Date(item.createTime).getTime() + 15 * 60 * 1000 - new Date().getTime()
				this.getOrderCancel(item.orderNumber,item.houseNumberId)
			},
			//转换时间格式
			time_data (date) {
			  var dd = new Date(date)
			  const y = dd.getFullYear()
			  const m = (dd.getMonth()+1) < 10 ? '0' + (dd.getMonth()+1) : (dd.getMonth()+1)
			  const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate()
			  const h = dd.getHours() < 10 ? '0' + dd.getHours() : dd.getHours()
			  const f = dd.getMinutes() < 10 ? '0' + dd.getMinutes() : dd.getMinutes()
			  const s = dd.getSeconds() < 10 ? '0' + dd.getSeconds() : dd.getSeconds()
			  var resDate = y + '-' + m + '-' + d+" "+h+":"+f+":"+s
			  return resDate
			},
			//获取每个订单详情
			getOrderInfo() {
				  let _self = this
				  _self.orderList = {}
				  _self.hourOrder={}
				  _self.houde={}
				  var data="?houseOrderId="+_self.orderId
				  getorderdetail(data).then((res) => {
					if (res.success) {
						_self.orderList=res.data
						_self.hourOrder=res.data.houseOrder
						_self.houde=res.data.house
						return;
						} else {
							console.log('获取订单列表失败')
						}
					}).catch((err) => {
						uni.showModal({
							content:err.message
						})
					});
			},
			//待确认的弹框操作
			dialogConfirm() {
				this.$refs.popup_order2.close()
				this.tankuang=true
				if(this.tankuang==true) {
					if(this.order_txt2=='确定删除？') {
						this.getOrderDelete(this.order_txt_id)
					} else if(this.order_txt2=='确定退房？') {
						this.getOrderReturn(this.orderNumber,this.houseNumberId)
					} else if(this.order_txt2=='确定入住？') {
						this.getOrderHold(this.order_txt_id)
					} else if(this.order_txt2=='确定取消订单？') {
						this.getOrderCancel(this.order_txt_id,this.houseNumberId)
					}
				} 
			},
			dialogClose(){
				this.$refs.popup_order2.close()
			},
			//删除弹框
			openDel(orderId,type){
				this.order_txt_id=orderId
				this.msgType2 = type
				this.order_txt2='确定删除？'
				this.$refs.popup_order2.open()
			},
			//退房弹框
			openTui(orderNumber,houseNumberId,type) {
				this.orderNumber=orderNumber
				this.houseNumberId=houseNumberId
				this.msgType2 = type
				this.order_txt2='确定退房？'
				this.$refs.popup_order2.open()
			},
			//入住弹框
			openRu(orderId,type) {
				this.order_txt_id=orderId
				this.msgType2 = type
				this.order_txt2='确定入住？'
				this.$refs.popup_order2.open()
			},
			//取消订单弹框
			openQu(order_txt_id,type,houseNumberId) {
				this.order_txt_id=order_txt_id
				this.houseNumberId=houseNumberId
				this.msgType2 = type
				this.order_txt2='确定取消订单？'
				this.$refs.popup_order2.open()
			},
			// 订单结账信息
			getOrderBill2() {
				  let _self = this
				  var data=_self.orderId
				  getorderbill(data).then((res) => {
					if (res.success) {
						if(res.data.flag!='3') {
							_self.billXin=res.data
						}
						return;
						} else {
							console.log('获取结账信息失败')
						}
					}).catch((err) => {
						this.$message.error(err.message)
					});
				 //  this.$axios.get(`/hotel/ihotel-api/ihotel/hotelOrder/user/order/bill/${this.orderId}`,
				 //  {
					//   headers:{
					// 	  '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.reLaunch({
					url:"/pages/index/index"
					// url:'../order_room/order_room?roomTypeId='+roomTypeId
				})
			},
			// 待支付取消订单
			getOrderCancel(order_txt_id,houseNumberId) {
				let _self = this
				var data={
					"usersId": localStorage.getItem('usersId'),
					"orderNumber": order_txt_id, //订单号
					"houseNumberId": houseNumberId, //房间号id
				}
				quxiaoorder(data).then((res) => {
					if (res.success) {
						this.order_txt='取消成功'
						this.$refs.popup_order.open()
						this.getOrderInfo()
						return;
					} else {
						this.order_txt=res.message
						this.$refs.popup_order.open()
					}
				}).catch((err) => {
					uni.showModal({
						content:err.message
					})
				});
			},
			// 支付订单
			getOrderPay(id,price) {
				// alert('支付',localStorage.getItem('openId2'))
				// if(!localStorage.getItem('openId2')){
				// 	uni.navigateTo({
				// 		url:'/pages/huoquCode/huoquCode'
				// 	})
				// 	return
				// }
				  let _self = this
				  var data={
						"houseOrderId": id, //订单号id
						"usersId": localStorage.getItem('usersId'), //用户id localStorage.getItem('usersId')
						"totalPrice": price //支付金额
					}
				  getorderpay(data).then((res) => {
				  	if (res.success) {
						if(res.data){
							_self.appId=res.data.appId
							_self.timeStamp=res.data.timeStamp
							_self.nonceStr=res.data.nonceStr
							_self.package=res.data.packageVal
							_self.signType=res.data.signType
							_self.paySign=res.data.paySign
							_self.onBridgeReady();
						}else{
							uni.navigateTo({
								url:'/pages/zhifuchenggong/zhifuchenggong'
							})
						}
				  	} else if(res.code=='500'){
				  	}
				  }).catch((err) => {
				  });
				 //  this.$axios.get(`/hotel/ihotel-api/ihotel/hotelOrder/user/order/pay/${orderId}`,
				 //  {
					//   headers:{
					// 	  '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 {
					// 	this.order_txt=res.message
					// 	this.$refs.popup_order.open()
					// 	console.log('支付失败')
					// }
				 //  });
			},
			onBridgeReady() {
			    WeixinJSBridge.invoke('getBrandWCPayRequest', {
			        "appId": this.appId,     //公众号ID，由商户传入     
			        "timeStamp": this.timeStamp,     //时间戳，自1970年以来的秒数     
			        "nonceStr": this.nonceStr,      //随机串     
			        "package": this.package,
			        "signType": this.signType,     //微信签名方式：     
			        "paySign": this.paySign //微信签名 
			    },
			    function(res) {
			        if (res.err_msg == "get_brand_wcpay_request:ok") {
			        	uni.reLaunch({
			        		url:'/pages/my_orderlist/my_orderlist?Inv=3'
			        	})
			            // 使用以上方式判断前端返回,微信团队郑重提示：
			            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
			        }else{
			        	this.chapayIf()
			        }
			    });
			},
			//查询是否支付成功
			chapayIf(){
				var data={
					"outTradeNo": this.orderNumber,//订单号id
				}
				getchapay(data).then((res) => {
					if (res.success) {
						if(res.data.tradeState=="SUCCESS"){
							uni.showModal({
								content:'支付成功',
								success: (res) => {
									uni.switchTab({
										url:'pages/my_orderlist/my_orderlist?Inv=3'
									})
								},
							})
						}else{
							uni.showModal({
								content:res.data.tradeStateDesc
							})
						}
						
						// return;
					} else {
					}
				}).catch((err) => {
					uni.showModal({
						content:err.message
					})
				});
			},
			// 删除订单
			getOrderDelete(order_txt_id) {
				let _self = this
				getorderdelete(_self.order_txt_id).then((res) => {
					if (res.success) {
						this.order_txt='删除订单成功'
						this.$refs.popup_order.open()
						this.getOrderInfo()
						return;
						} else {
							this.order_txt=res.message
							this.$refs.popup_order.open()
						}
					}).catch((err) => {
						this.$message.error(err.message)
					});
				// this.$axios.defaults.headers.common['token'] = localStorage.getItem('token');
				// this.$axios.delete(`/hotel/ihotel-api/ihotel/hotelOrder/user/order/${this.order_txt_id}`,).then(res => {
				// 	res = res.data
				// 	if (res.success) {
				// 		this.order_txt='删除订单成功'
				// 		this.$refs.popup_order.open()
				// 		this.getOrderInfo()
				// 	} else {
				// 		this.order_txt=res.message
				// 		this.$refs.popup_order.open()
				// 	}
				// });
			},
			// 订单已完成再次预订
			navigateToWanchengZaici(roomTypeId){
				uni.reLaunch({
					url:"/pages/index/index"
					// url:'../order_room/order_room?roomTypeId='+roomTypeId
				})
			},
			// 办理入住
			getOrderHold(order_txt_id) {
				let _self = this
				var data="?houseOrderId="+_self.order_txt_id+"&userId="+localStorage.getItem('usersId')
				getorderhold(data).then((res) => {
					if (res.success) {
						this.order_txt='办理入住成功'
						this.$refs.popup_order.open()
						this.getOrderInfo()
						return;
						} else {
							this.order_txt=res.message
							this.$refs.popup_order.open()
						}
					}).catch((err) => {
						uni.showModal({
							content:err.message
						})
					});
				// this.$axios.defaults.headers.common['token'] = localStorage.getItem('token');
				// this.$axios.put(`/hotel/ihotel-api/ihotel/hotelOrder/user/order/hold/${this.order_txt_id}`,).then(res => {
				// 	res = res.data
				// 	if (res.success) {
				// 		this.order_txt='办理入住成功'
				// 		this.$refs.popup_order.open()
				// 		this.getOrderInfo()
				// 	} else {
				// 		this.order_txt=res.message
				// 		this.$refs.popup_order.open()
				// 	}
				// });
			},
			// 办理退房
			getOrderReturn(orderNumber,houseNumberId) {
				let _self = this
				var data={
					"orderNumber":orderNumber ,//订单号
					"houseNumberId": houseNumberId//房间号id
				}
				getorderreturn(data).then((res) => {
					if (res.success) {
						this.order_txt='退房成功'
						this.$refs.popup_order.open()
						this.getOrderInfo()
						return;
					} else {
						this.order_txt=res.message
						this.$refs.popup_order.open()
					}
					}).catch((err) => {
						uni.showModal({
							content:err.message
						})
					});
				// this.$axios.defaults.headers.common['token'] = localStorage.getItem('token');
				// this.$axios.put(`/hotel/ihotel-api/ihotel/hotelOrder/user/order/return/${this.order_txt_id}`,).then(res => {
				// 	res = res.data
				// 	if (res.success) {
				// 		this.order_txt='退房成功'
				// 		this.$refs.popup_order.open()
				// 		this.getOrderInfo()
				// 		this.getOrderBill2()
				// 	} else {
				// 		this.order_txt=res.message
				// 		this.$refs.popup_order.open()
				// 	}
				// });
			},
		}
	}
</script>

<style>
	@import url("./css/order_mark.css");
</style>