ihotel-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()">
				<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="getOrderCancel(orderList.orderId)">取消订单</text>
				<!-- <text v-if="orderList.orderStatu == 3">办理续住</text> -->
			</view>
			<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': 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.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>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				orderList:'',//订单整体
				orderId:'',//订单号
				billXin:'',//结账信息
			}
		},
		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(`/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>

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