hotelHomestayWx/pages/house/orderInfo.vue

<template>
	<view class="page" :style="{'height':(h-th)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="订单详情" :showIcon="false" :titleStyle="titleStyle"></c-nav-bar>
		<view class="body">
			<!-- 个人信息 -->
			<view class="uname">
				<text style="margin-right: 20rpx;">{{orderInfo.guestName}}</text>
				<text>{{orderInfo.guestPhone}}</text>
			</view>
			<!-- 房间信息  -->
			<view class="room">
				<!-- 房间/预定信息 -->
				<view class="reservations">
					<text style="font-size: 30rpx; color: #333333; font-weight: 700;">{{orderInfo.houseBaseName}}-{{orderInfo.roomNumber}}</text>
					<text style="font-size: 24rpx; color: #39CE77;" v-if="isOrderPanding">{{getStatusText()}}</text>
				</view>
				<!-- 时间/价格 -->
				<view class="time-price">
					<text style="font-size: 30rpx; color: #777;">{{orderInfo.arriveDate}}入住  {{orderInfo.num}}晚</text>
					<text style="font-size: 30rpx; color: #245BED;">￥{{orderInfo.orderAmount}}</text>
				</view>
				<!-- 入住人数 -->
				<view class="house-person">
					<text style="font-size: 30rpx; color: #777;">入住人</text>
					<view class="right" >
						<text style="font-size: 30rpx; color: #777; ">{{orderInfo.checkInNums}}人 </text>
						<u-icon name="arrow-right" @click.native="goStayCheck"></u-icon>
						<!-- <u-icon name="arrow-right" ></u-icon>  -->
					</view>
				</view>
			</view>
			<!-- 订单信息 -->
	
			<u-cell-group :border="false"
				customStyle="background-color: #fff;border-radius: 16rpx;width: 690rpx;margin:0 auto;">
				<u-cell>
					<text slot="icon" style="font-size: 30rpx; margin-right: 50rpx;">订单号</text>
					<view slot="title" class="title">
						<text>{{orderInfo.orderCode}}</text>
					</view>
				</u-cell>
				<u-cell>
					<text slot="icon" style="font-size: 30rpx; margin-right: 20rpx;">创建时间</text>
					<view slot="title" class="title">
						<text>{{orderInfo.orderTime}}</text>
					</view>
				</u-cell>
				<u-cell>
					<text slot="icon" style="font-size: 30rpx; margin-right: 20rpx;">办理员工</text>
					<view slot="title" class="title">
						<text>何伟婷</text>
					</view>
				</u-cell>
				<u-cell>
					<text slot="icon" style="font-size: 30rpx; margin-right: 20rpx;">取消原因</text>
					<view slot="title" class="title">
						<text>-</text>
					</view>
				</u-cell>	
				<u-cell>
					<text slot="icon" style="font-size: 30rpx; margin-right: 80rpx;">备注</text>
					<view slot="title" class="title">
						<text>-</text>
					</view>
				</u-cell>
				
				
			</u-cell-group>
			<!-- 按钮 -->
			<view class="button">
				<button class="edit" @click="editOrder(id)">编辑订单</button>
				<button  class="goRoom">办理入住</button>
			</view>
		</view>
		
		</view>
</template>

<script>
	export default{
		data(){
			return {
				orderId:'1744697594837209090',
				orderInfo:[]
			}
		},
		onLoad(){
			this.getOrderInfo()
		},
		methods:{
			// 获取数据
			getOrderInfo(){
				this.$api.get(`/merchant/hotel/order/getMerchantOrderInfo/${this.orderId}`,{
					orderId:'1744697594837209090',
				}).then((res)=>{
					// console.log(res)
					if(res.data.code==0){
						this.orderInfo = res.data.data
						// console.log(this.orderInfo)
					}
				})
			},
			// 客房状态
			getStatusText(){
				if(this.orderInfo.orderStatus === -1){
					return '待确定'
				}else if(this.orderInfo.orderStatus ===1){
					return '已预订'
				}else if(this.orderInfo.orderStatus ===2){
					return '已入住'
				}else if(this.orderInfo.orderStatus ===3){
					return '已退房'
				}else if(this.orderInfo.orderStatus ===4){
					return '已取消'
				}else{
					return '状态异常'
				}
			},
			goStayCheck(id){
				uni.navigateTo({
				  url: '/pages/house/stayCheck'
				})
				// console.log(1111)
			},
			editOrder(id){
				uni.navigateTo({
					url:`/pages/house/stayCheck?id=${this.orderId}`
				})
			}
		},
		computed:{
			isOrderPanding(){
				return this.orderInfo.orderStatus === 1
			}
		}
	}
</script>

<style lang="scss">
	.page {
		background: #F3F4F4;
		padding-bottom: 260rpx;
		box-sizing: border-box;
		overflow-y: auto;
		overflow-x: auto;
	}
	.body{
		padding-top: 20rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	.uname{
		width: 665rpx;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		padding-left: 30rpx;
		font-size: 30rpx;
		border-radius: 10rpx;
		
	}
	.room{
		margin-top: 20rpx;
		width: 92%;
		height: 246rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		padding: 30rpx;
	}
	.orderTip{
		padding: 30rpx;
		padding-top: 0;
		width: 690rpx;
		height: 514rpx;
		background-color: #fff;
		border-radius: 10rpx;
		
	}
	.button{
		position: fixed;
		bottom: 120rpx;
		height: 96rpx;
		width: 690rpx;
		// background-color: teal;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		border-radius: 10rpx;
	}
	.goRoom{
		// border-radius: ;
		width: 330rpx;
		height: 96rpx;
		border-radius: 48rpx;
		font-size: 34rpx;
		background-color: #1372FF;
		color: #fff;
	}
	.edit{
		width: 330rpx;
		height: 96rpx;
		border-radius: 48rpx;
		font-size: 34rpx;
		background-color: #E2EDFC;
		color: #1372FF;
	}
	.reservations{
		display: flex;
		justify-content: space-between;
	}
	.time-price{
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	.house-person{
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}
	.right{
		display: flex;
	}
	

</style>