hotelHomestayWx/pages/house/orderInfo.vue

<template>
	<view class="page" :style="{'height':(h)+'px','padding-top':mt+'px'}">
		<c-nav-bar title="订单详情" showIcon="true" :titleStyle="titleStyle"></c-nav-bar>
		<view class="body" v-if="orderInfo.detailFormList[0]">
			<!-- 个人信息 -->
			<view class="uname">
				<text class="dtitle" style="margin-right: 50rpx;">{{orderInfo.guestName}}</text>
				<text class="dtitle" style="margin-right: 20rpx;">{{orderInfo.guestPhoneCopy}}</text>
				<image class="callphone"
					src="https://fsy.shengsi.gov.cn/file/20240710/efea82ea5afd4d719ba1d3f1c6bab998.png"
					@click="callPhone(orderInfo.guestPhone)"></image>
			</view>
			<!-- 房间信息  -->
			<view class="room">
				<!-- 房间/预定信息 -->
				<view class="reservations">
					<text class="dtitle">{{orderInfo.houseBaseName}}-{{orderInfo.detailFormList[0].roomNumber}}</text>
					<text class="r_status"
						:style="{'background': scolor[orderInfo.orderStatus]}">{{getStatusText()}}</text>
				</view>
				<!-- 时间/价格 -->
				<view class="time-price">
					<text style="font-size: 30rpx; color: #777;">{{orderInfo.arriveDate}}入住 {{orderInfo.num}}晚</text>
					<text style="font-size: 30rpx;font-weight: bold; color: #111;">￥{{orderInfo.orderAmount}}</text>
				</view>
				<!-- 入住成人人数 -->
				<view class="house-person">
					<text style="font-size: 30rpx; color: #777;">入住成人数量</text>
					<view class="right">
						<text style="font-size: 30rpx;font-weight: bold; color: #111; ">{{orderInfo.checkinGuests||0}}人
						</text>
					</view>
				</view>
				<!-- 入住儿童人数 -->
				<view class="house-person">
					<text style="font-size: 30rpx; color: #777;">入住儿童数量</text>
					<view class="right">
						<text
							style="font-size: 30rpx;font-weight: bold; color: #111; ">{{orderInfo.childCheckinNums||0}}人
						</text>
					</view>
				</view>
				<!-- 订单信息 -->
				<view class="r_line"></view>
				<view class="house-person">
					<text style="font-size: 30rpx; color: #777;">订单号</text>
					<view class="right">
						<text style="font-size: 30rpx; color: #111; text-align: right;">
							{{orderInfo.orderCode}}
						</text>
					</view>
				</view>
				<view class="house-person">
					<text style="font-size: 30rpx; color: #777;">创建时间</text>
					<view class="right">
						<text style="font-size: 30rpx; color: #111; text-align: right;">
							{{orderInfo.orderTime}}
						</text>
					</view>
				</view>
				<view class="house-person" v-if="orderInfo.orderStatus==4">
					<text style="font-size: 30rpx; color: #777;">取消原因</text>
					<view class="right">
						<text style="font-size: 30rpx; color: #111; text-align: right;">
							{{orderInfo.refundReason}}
						</text>
					</view>
				</view>
				<view class="house-person">
					<text style="font-size: 30rpx; color: #777;">备注</text>
					<view class="right">
						<text style="font-size: 30rpx; color: #111; text-align: right;">
							{{orderInfo.remarks}}
						</text>
					</view>
				</view>
			</view>
			<!-- 其他消费  -->
			<view class="room" v-if="breakFastList.length>0||otherList.length>0">
				<view class="reservations">
					<text class="dtitle">其他消费</text>
				</view>
				<view class="house-person" v-for="(item,index) in breakFastList" :key="index"
					v-if="breakFastList.length>0">
					<text style="font-size: 30rpx; color: #777;">{{item.breakfastName}} X{{item.num}}</text>
					<view class="right">
						<text style="font-size: 30rpx;font-weight: bold; color: #111; ">
							￥{{item.price*item.num}}
						</text>
					</view>
				</view>
				<view class="house-person" v-for="(item,index) in otherList" :key="index" v-if="otherList.length>0">
					<text style="font-size: 30rpx; color: #777;">{{item.projectName}} X{{item.num}}</text>
					<view class="right">
						<text style="font-size: 30rpx;font-weight: bold; color: #111; ">
							￥{{item.defaultPrice*item.num}}
						</text>
					</view>
				</view>
			</view>
			<block v-if="orderInfo.repastList&&orderInfo.repastList.length>0">
				<view class="room" v-for="(item,index) in orderInfo.repastList" :key="index">
					<view class="dtitle" style="margin: 6rpx 0 40rpx;">餐饮订单详情</view>
					<view class="reservations">
						<text class="dtitle" style="color: #111;">{{item.comboName}}</text>
						<text class="r_status"
							:style="{'background': scolor[item.orderStatus]}">{{repastStr[item.orderStatus]}}</text>
					</view>
					<view class="time-price">
						<text style="font-size: 28rpx; color: #717171;">预约时间 {{item.repastTime}}</text>
						<text style="font-size: 30rpx;font-weight: bold; color: #111;">￥{{item.orderAmount}}</text>
					</view>
					<view class="r_line"></view>
					<view class="house-person">
						<text style="font-size: 30rpx; color: #777;">预约人姓名</text>
						<view class="right">
							<text style="font-size: 30rpx; color: #111; text-align: right;">
								{{item.guestName}}
							</text>
						</view>
					</view>
					<block v-if="item.comboType==1">
						<view class="house-person">
							<text style="font-size: 30rpx; color: #777;">成人人数</text>
							<view class="right">
								<text style="font-size: 30rpx; color: #111; text-align: right;">
									{{item.num}}
								</text>
							</view>
						</view>
						<view class="house-person">
							<text style="font-size: 30rpx; color: #777;">儿童人数</text>
							<view class="right">
								<text style="font-size: 30rpx; color: #111; text-align: right;">
									{{item.repastNum}}
								</text>
							</view>
						</view>
					</block>
					<block v-if="item.comboType==2">
						<view class="house-person">
							<text style="font-size: 30rpx; color: #777;">就餐份数</text>
							<view class="right">
								<text style="font-size: 30rpx; color: #111; text-align: right;">
									{{item.num}}份
								</text>
							</view>
						</view>
					</block>
					<view class="house-person">
						<text style="font-size: 30rpx; color: #777;">订单编号</text>
						<view class="right">
							<text style="font-size: 30rpx; color: #111; text-align: right;">
								{{item.orderCode}}
							</text>
						</view>
					</view>
					<view class="house-person">
						<text style="font-size: 30rpx; color: #777;">备注</text>
						<view class="right">
							<text style="font-size: 30rpx; color: #111; text-align: right;">
								{{item.remarks}}
							</text>
						</view>
					</view>
				</view>
			</block>

			<!-- 按钮 -->
			<view class="button" v-if="orderInfo.orderStatus==-1||orderInfo.orderStatus==1||orderInfo.orderStatus==2">
				<!-- 待确认 -->
				<template v-if="orderInfo.orderStatus==-1">
					<button class="edit" @click="cancle()">取消订单</button>
					<button class="goRoom" @click="show2=true">确认订单</button>
				</template>
				<!-- 已预订 -->
				<template v-if="orderInfo.orderStatus==1">
					<button class="edit" @click="edit()">编辑订单</button>
					<button class="edit" @click="cancle()" type="info">取消订单</button>
					<button class="goRoom" @click="checkIn(2)" v-if="showRuzhu">办理入住</button>
				</template>
				<!-- 已入住 -->
				<template v-if="orderInfo.orderStatus==2">
					<button class="edit" @click="edit()">编辑订单</button>
					<button class="goRoom" @click="show3=true">办理退房</button>
				</template>
			</view>
		</view>
		<!-- 取消订单 -->
		<u-modal :show="show" @confirm="confirmCheck" :show-cancel-button="true" @cancel="show=false">
			<view class="slot-content">
				<input type="text" v-model="check.refundReason" placeholder="请输入原因" />
				<!-- <u-cell-group :border="false" customStyle="margin:0 -30rpx">
					<u-cell>
						<view slot="title" class="title">
							<u--input border="none" class="input" inputAlign="right" placeholderStyle="font-size:26rpx"
								placeholder="请输入原因" v-model="check.refundReason"></u--input>
						</view>
					</u-cell>
				</u-cell-group> -->
			</view>
		</u-modal>
		<!-- 确认订单 -->
		<u-modal :show="show2" content="确定该操作?" @confirm="confirmOrder" :show-cancel-button="true"
			@cancel="show2=false">
		</u-modal>
		<!-- 办理退房 -->
		<u-modal :show="show3" content="确定该操作?" @confirm="checkoutRoom" :show-cancel-button="true"
			@cancel="show3=false">
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					fontSize: '34rpx',
					fontWeight: "bold",
				},
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				show: false,
				show2: false,
				show3: false,

				check: {
					initiator: 1,
					refundReason: "",
					status: -1,
					orderCode: "",
				},
				showRuzhu: false,
				orderId: '',
				orderInfo: {
					detailFormList: []
				},
				id: '',
				scolor: {
					'-2': '#FF4141',
					'-1': '#FEA400',
					'1': '#FEA400',
					'2': '#A9B4C1',
					'3': '#A9B4C1',
					'4': '#A9B4C1',
					'5': '#A9B4C1',
				},
				repastStr: {
					'-2': '待支付',
					'1': '未核销',
					'2': '已核销',
					'4': '已取消',
					'5': '已退款'
				},
				breakFastList: [],
				otherList: [],
			}
		},
		onLoad(opt) {
			if (opt.orderId) {
				if (opt.orderType == 201) {
					this.id = opt.orderId;
					this.getrepast()
				} else {
					this.orderId = opt.orderId;
					this.getOrderInfo()
				}

			}

		},
		methods: {
			callPhone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber
				})
			},
			// 获取数据
			getOrderInfo() {
				this.$api.get(`/merchant/hotel/order/getOrderDetail/${this.orderId}`).then((res) => {
					if (res.data.code == 0) {
						this.orderInfo = res.data.data;
						this.breakFastList = this.orderInfo.detailFormList[0].breakfastData || [];
						this.otherList = this.orderInfo.detailFormList[0].otherData || [];
						if (this.orderInfo.guestPhone) this.orderInfo.guestPhoneCopy = this.$aesTm.tuomin(this
							.orderInfo.guestPhone, 2)
						if (new Date(this.orderInfo.arriveDate).Format('yyyy-MM-dd') == new Date().Format(
								'yyyy-MM-dd')) {
							this.showRuzhu = true;
						}
					}
				})
			},
			// 获取数据
			getrepast() {
				this.$api.get(`/merchant/hotel/repast${this.id}`).then((res) => {
					if (res.data.code == 0) {
						this.orderInfo = res.data.data;
						this.breakFastList = this.orderInfo.detailFormList[0].breakfastData || [];
						this.otherList = this.orderInfo.detailFormList[0].otherData || [];
						if (this.orderInfo.guestPhone) this.orderInfo.guestPhoneCopy = this.$aesTm.tuomin(this
							.orderInfo.guestPhone, 2)
						if (new Date(this.orderInfo.arriveDate).Format('yyyy-MM-dd') == new Date().Format(
								'yyyy-MM-dd')) {
							this.showRuzhu = true;
						}
					}
				})
			},
			// 客房状态
			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 === -2) {
					return '待支付'
				} else if (this.orderInfo.orderStatus === 3) {
					return '已退房'
				} else if (this.orderInfo.orderStatus === 4) {
					return '已取消'
				} else if (this.orderInfo.orderStatus === 5) {
					return '已退款'
				} else {
					return '状态异常'
				}
			},
			//添加入住人
			goStayCheck() {
				let list = JSON.stringify(this.orderInfo);
				uni.navigateTo({
					url: '/pages/house/stayCheck?orderInfo=' + list,
					events: {
						addSuccess: data => {
							this.orderInfo.detailFormList[0].checkInPersonList = data.data || [];
						}
					},
				})
			},
			// 确认订单
			confirmOrder() {
				this.$api
					.get(`/merchant/hotel/order/confirm/${this.orderInfo.id}`)
					.then((res) => {
						if (res.data.code !== 0) {
							return this.$showToast(res.data.msg);
						}
						this.show2 = false;
						this.$showToast('操作成功');
						setTimeout(() => {
							uni.reLaunch({
								url: '/pagesMy/orderList/orderList'
							})
						}, 1500)
					});
			},
			//取消订单
			cancle() {
				this.show = true;
				this.check.orderCode = this.orderInfo.orderCode;
			},
			//取消订单
			confirmCheck() {
				this.$api.post("/merchant/hotel/order/cancelOrder", this.check)
					.then((res) => {
						if (res.data.code !== 0) {
							return this.$showToast(res.data.msg);
						}
						this.show = false;
						this.$showToast('操作成功');
						setTimeout(() => {
							uni.reLaunch({
								url: '/pagesMy/orderList/orderList'
							})
						}, 1500)
					});
			},
			//办理入住
			checkIn(orderStatus) {
				uni.navigateTo({
					url: "/pages/house/createOrder?id=" + this.orderInfo.id + '&orderStatus=' + orderStatus
				})
			},
			// 编辑
			edit() {
				uni.navigateTo({
					url: "/pages/house/createOrder?id=" + this.orderInfo.id
				})
			},
			//办理退房
			checkoutRoom() {
				this.$api.get("/merchant/hotel/order/checkout/" + this.orderInfo.id)
					.then((res) => {
						if (res.data.code !== 0) {
							return this.$showToast(res.data.msg);
						}
						this.show = false;
						this.$showToast('操作成功');
						setTimeout(() => {
							uni.reLaunch({
								url: '/pagesMy/orderList/orderList'
							})
						}, 1500)
					});
			}
		},
		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: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #fff;
		padding-left: 30rpx;
		font-size: 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		position: relative;

		.callphone {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 50%;
			margin-top: -24rpx;
			right: 30rpx;
		}
	}

	.dtitle {
		font-family: PingFang-SC, PingFang-SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		line-height: 40rpx;
		width: calc(100% - 100rpx);
	}

	.room {
		margin-top: 20rpx;
		width: 100%;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.r_line {
			width: 100%;
			height: 1rpx;
			background: #efefef;
			margin: 24rpx 0;
		}
	}

	.orderTip {
		padding: 30rpx;
		padding-top: 0;
		width: 690rpx;
		height: 514rpx;
		background-color: #fff;
		border-radius: 10rpx;

	}

	.button {
		position: fixed;
		bottom: 0;
		height: 96rpx;
		width: 100%;
		margin-top: 20rpx;
		display: flex;
		gap:0 20rpx;
		justify-content: space-between;
		border-radius: 10rpx;
		z-index: 9;
		background-color: #fff;
		left: 0;
		padding: 24rpx 0;
	}

	.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;
		position: relative;

		.r_status {
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 33rpx;
			color: #fff;
			padding: 4rpx 9rpx;
			border-radius: 8rpx;
			position: absolute;
			right: 0;
			top: 50%;
			margin-top: -22rpx;
		}
	}

	.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>