hotelorder_student_h5/pages/order_mark/order_mark.vue

<template>
	<view class="content">
		<!-- 第一层模块 -->
		<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" @click="navigateToWanchengZaici(orderList.roomTypeId)">
				<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">
				<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" 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="openQu()(orderList.orderId,'warn')">取消订单</text>
				<!-- <text v-if="orderList.orderStatu == 3">办理续住</text> -->
			</view>
			<view class="room-button2" :class="{'buttonNo': orderList.orderStatu == 3 || orderList.orderStatu == 2}">
				<text v-if="orderList.orderStatu == 0" @click="openDel(orderList.orderId,'warn')">删除</text>
				<text v-if="orderList.orderStatu == 1" @click="getOrderPay(orderList.orderId)">支付</text>
				<text v-if="orderList.orderStatu == 3" @click="openTui(orderList.orderId,'warn')">办理退房</text>
				<text v-if="orderList.orderStatu == 2" @click="openRu(orderList.orderId,'warn')">办理入住</text>
			</view>
		</view>
		<!-- 第二层模块 -->
		<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">{{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.roomNo}}</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-secret" v-if="orderList.orderStatu ==3">房间门锁密码：{{orderList.lockRealtimePassword}}</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>
		<!-- 提示时弹框 -->
		<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>
	export default {
		data(){
			return {
				orderList:'',//订单整体
				orderId:'',//订单号
				billXin:'',//结账信息
				order_txt:'',//弹框提示信息
				msgType:'warn',
				msgType2:'warn',
				order_txt:'',//
				order_txt2:'',//
				tankuang:false,//弹框是否确定
				order_txt_id:'',
			}
		},
		onShow() {
			// 获取当前小程序的页面栈
			let pages = getCurrentPages();
			// 数组中索引最大的页面--当前页面
			let currentPage = pages[pages.length-1];
			// 打印出当前页面中的 options
			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(`/hotel/ihotel-api/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('获取订单列表失败')
					}
				  });
			},
			//待确认的弹框操作
			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.order_txt_id)
					} else if(this.order_txt2=='确定入住？') {
						this.getOrderHold(this.order_txt_id)
					} else if(this.order_txt2=='确定取消订单？') {
						this.getOrderCancel(this.order_txt_id)
					}
				} 
			},
			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(orderId,type) {
				this.order_txt_id=orderId
				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(orderId,type) {
				this.order_txt_id=orderId
				this.msgType2 = type
				this.order_txt2='确定取消订单？'
				this.$refs.popup_order2.open()
			},
			// 订单结账信息
			getOrderBill() {
				  let _self = this
				  this.$axios.get(`/hotel/ihotel-api/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(order_txt_id) {
				let _self = this
				this.$axios.defaults.headers.common['user_token'] = localStorage.getItem('token');
				this.$axios.put(`/hotel/ihotel-api/ihotel/hotelOrder/user/order/cancel/${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()
					}
				});
			},
			// 支付订单
			getOrderPay(orderId) {
				  let _self = this
				  this.$axios.get(`/hotel/ihotel-api/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 {
						this.order_txt=res.message
						this.$refs.popup_order.open()
						console.log('支付失败')
					}
				  });
			},
			// 删除订单
			getOrderDelete(order_txt_id) {
				let _self = this
				this.$axios.defaults.headers.common['user_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.navigateTo({
					url:'../order_room/order_room?roomTypeId='+roomTypeId
				})
			},
			// 办理入住
			getOrderHold(order_txt_id) {
				let _self = this
				this.$axios.defaults.headers.common['user_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(order_txt_id) {
				let _self = this
				this.$axios.defaults.headers.common['user_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.getOrderBill()
					} else {
						this.order_txt=res.message
						this.$refs.popup_order.open()
					}
				});
			},
		}
	}
</script>

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