ihotel-h5/pages/order_mark/order_mark.vue

<template>
	<view class="content">
		<!-- 第一层模块 -->
		<view class="one-order3" v-if="orderList.houseOrder.orderStatus == 8">
			<view class="one-order-title">订单已完成 / 期待您再次光临<text class="all-price">￥{{orderList.houseOrder.payPrice}}</text></view>
			<view class="one-order-menshi">水电扣除<text class="menshi-price">￥{{orderList.totalFree}}</text></view>
			<!-- <view class="room-button-6"@click="getOrderDelete(orderList.houseOrder.orderNumber)">
				<text>删除订单</text>
			</view> -->
			<view class="room-button2-6" @click="navigateToWanchengZaici(orderList.houseOrder.houseId)">
				<text>再次预定</text>
			</view>
		</view>
		<view class="one-order3" v-else-if="orderList.houseOrder.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 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.houseOrder.orderStatus == 9">订单已取消 / 期待您再次光临</text>
				<text v-if="orderList.houseOrder.orderStatus == 1">请在15分钟之内支付</text>
				<text v-if="orderList.houseOrder.orderStatus == 3">预定成功 / 等待您的入住</text>
				<text v-if="orderList.houseOrder.orderStatus == 4">办理成功 / 期待您的到来</text>
				<text class="all-price">￥{{orderList.houseOrder.payPrice}}</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.houseOrder.orderStatus != 4&&orderList.houseOrder.orderStatus != 9">
				
				<text v-if="orderList.houseOrder.orderStatus == 1" @click="openQu(orderList.houseOrder.orderNumber,'warn',orderList.houseOrder.houseNumberId)">取消订单</text>
				<text v-if="orderList.houseOrder.orderStatus == 3" @click="openQu(orderList.houseOrder.orderNumber,'warn',orderList.houseOrder.houseNumberId)">办理退款</text>
			</view>
			<view class="room-button2" :class="{'buttonNo': orderList.houseOrder.orderStatus == 4}">
				<text v-if="orderList.houseOrder.orderStatus == 9" @click="navigateToZaici(orderList.houseOrder.reserveLiveTime,orderList.houseOrder.reserveLeaveTime,orderList.houseOrder.houseId)">再次预定</text>
				<!-- <text v-if="orderList.houseOrder.orderStatus == 9" @click="openDel(orderList.houseOrder.orderNumber,'warn',orderList.houseOrder.houseNumberId)">删除</text> -->
				<text v-if="orderList.houseOrder.orderStatus == 1" @click="getOrderPay(orderList.houseOrder.id,orderList.houseOrder.price)">支付</text>
				<text v-if="orderList.houseOrder.orderStatus == 4" @click="openTui(orderList.houseOrderid.orderNumber,'warn')">办理退房</text>
				<text v-if="orderList.houseOrder.orderStatus == 3" @click="openRu(orderList.houseOrder.id,'warn')">办理入住</text>
			</view>
		</view>
		<!-- 第二层模块 -->
		<view class="two-order" :class="{'two-order3': orderList.houseOrder.orderStatus == 4,'two-order4': orderList.houseOrder.orderStatus == 8||orderList.houseOrder.orderStatus == 5}">
			<view class="two-order-title">订单信息</view>
			<view class="two-order-name">预定人信息：<text class="two-order-txt">{{orderList.houseOrder.reserveName}}</text></view>
			<view class="two-order-phone">手机号码：<text class="two-order-txt">{{orderList.houseOrder.reservePhone}}</text></view>
			<view class="two-order-count">订  单  号：<text class="two-order-txt">{{orderList.houseOrder.orderNumber}}</text></view>
			<view class="two-order-time">下单时间：<text class="two-order-txt">{{orderList.houseOrder.createTime}}</text></view>
			<view class="two-order-xing">户         型：<text class="two-order-txt">{{orderList.house.roomName}}</text></view>
			<view class="two-order-zhuTime">入离时间：
				<text class="two-order-txt" v-if="orderList.houseOrder.reserveLiveTime,orderList.houseOrder.reserveLeaveTime">
				<view>入住日{{orderList.houseOrder.reserveLiveTime}}后   </view>
				<view>离店日{{orderList.houseOrder.reserveLeaveTime}}前</view></text>
			</view>
			<view class="two-order-secret" v-if="orderList.houseOrder.orderStatus ==4">房间门锁密码：{{orderList.passWord}}</view>
			<view class="two-order-shui" v-if="orderList.houseOrder.orderStatus == 8||orderList.houseOrder.orderStatus ==5||orderList.houseOrder.orderStatus ==4">水起码：{{orderList.startOfWater}}吨</view>
			<view class="two-order-dian" v-if="orderList.houseOrder.orderStatus == 8||orderList.houseOrder.orderStatus ==5||orderList.houseOrder.orderStatus ==4">电起码：{{orderList.startOfElectric}}度</view>
			<view class="two-order-shui2" v-if="orderList.houseOrder.orderStatus == 8||orderList.houseOrder.orderStatus == 5">水止码：{{orderList.endOfWater}}吨</view>
			<view class="two-order-dian2" v-if="orderList.houseOrder.orderStatus == 8||orderList.houseOrder.orderStatus == 5">电止码：{{orderList.endOfElectric}}度</view>
			<view class="two-order-lidian2" v-if="orderList.houseOrder.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:{},//订单整体
				orderId:'',//订单号
				billXin:'',//结账信息
				order_txt:'',//弹框提示信息
				msgType:'warn',
				msgType2:'warn',
				order_txt:'',//
				order_txt2:'',//
				tankuang:false,//弹框是否确定
				order_txt_id:'',
				houseNumberId:'',
				
				appId: "",     //公众号ID，由商户传入
				timeStamp: "",     //时间戳，自1970年以来的秒数     
				nonceStr: "",      //随机串     
				package: "",
				signType: "",     //微信签名方式：     
				paySign:'',
			}
		},
		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 = []
				  var data="?houseOrderId="+_self.orderId
				  getorderdetail(data).then((res) => {
					if (res.success) {
						_self.orderList=res.data
						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.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,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(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,houseNumberId) {
				this.order_txt_id=orderId
				this.houseNumberId=houseNumberId
				this.msgType2 = type
				this.order_txt2='确定取消订单？'
				this.$refs.popup_order2.open()
			},
			// 订单结账信息
			getOrderBill() {
				  let _self = this
				  var data=_self.orderId
				  getorderbill(data).then((res) => {
					if (res.success) {
						if(res.data.flag!='3') {
							this.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:"../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) {
				if(localStorage.getItem('code')=='undefined'){
					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) {
				  		_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 if(res.code=='500'){
				  		uni.navigateTo({
				  			url:'/pages/huoquCode/huoquCode'
				  		})
				  	}
				  }).catch((err) => {
				  	uni.navigateTo({
				  		url:'/pages/huoquCode/huoquCode'
				  	})
				  });
				 //  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.navigateTo({
			        		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:"../index/index"
					// url:'../order_room/order_room?roomTypeId='+roomTypeId
				})
			},
			// 办理入住
			getOrderHold(order_txt_id) {
				let _self = this
				getorderhold(_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.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
				getorderreturn(_self.order_txt_id).then((res) => {
					if (res.success) {
						this.order_txt='退房成功'
						this.$refs.popup_order.open()
						this.getOrderInfo()
						this.getOrderBill()
						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.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>