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-yufukuan">
				房费<text class="yufukuan-price">￥{{orderList.payAmount}}</text>
			</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>
			</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>

		<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: '',
			}
		},
		onload(options) {
			console.log('不能执行onload')
		},
		onShow() {
			// 获取当前小程序的页面栈
			let pages = getCurrentPages();
			// 数组中索引最大的页面--当前页面
			let currentPage = pages[pages.length - 1];
			// 打印出当前页面中的 options
			this.orderId = currentPage.options.orderId
			this.getOrderInfo(this.orderId)
			this.getOrderBill(this.orderId)
		},
		methods: {
			// 获取每个订单详情
			getOrderInfo() {
				let _self = this
				_self.orderList = []
				this.$axios.get(`/hotelReservation/zhotel/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(`/hotelReservation/zhotel/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: "/pages/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(`/hotelReservation/zhotel/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(`/hotelReservation/zhotel/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(`/hotelReservation/zhotel/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(`/hotelReservation/zhotel/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(`/hotelReservation/zhotel/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>