hotelHomestayWx/pages/home/index.vue

<template>
	<view class="page" :style="{'min-height':(h-th)+'px'}">
		<u-navbar bgColor="transparent">
			<view class="u-nav-slot" slot="left" style="display: flex;" @tap="shShow=true">
				<text>{{name}}</text>
				<u-icon name="arrow-down" size="28" :bold="true" color="#fff"></u-icon>
			</view>
		</u-navbar>
		<view class="bg" :style="{'padding-top':(mt+30)+'px'}">
			<view class="b_money">
				<text v-if="item">{{item.todayOrderAmount.toFixed(2)}}</text>
				<text v-else>0.00</text>
				<text>今日订单金额</text>
			</view>
			<view class="b_items">
				<view @tap="toTurn">
					<text v-if="item">{{item.stayedInRooms||0}}</text>
					<text v-else>0</text>
					<text>已入住</text>
				</view>
				<view @tap="toTurn">
					<text v-if="item">{{item.toCheckinRooms||0}}</text>
					<text v-else>0</text>
					<text>待入住</text>
				</view>
				<view @tap="toConfirm">
					<text v-if="item">{{item.undeterminedOrders||0}}</text>
					<text v-else>0</text>
					<text>待确认</text>
				</view>
				<view>
					<text v-if="item">{{item.pendingOrders||0}}</text>
					<text v-else>0</text>
					<text>待处理</text>
				</view>
				<view>
					<text v-if="item">{{item.yestOrders||0}}</text>
					<text v-else>0</text>
					<text>昨日订单</text>
				</view>
				<view @tap="toTurn">
					<text v-if="item">{{item.yestSaleRooms||0}}</text>
					<text v-else>0</text>
					<text>昨日售出</text>
				</view>
				<view @tap="toTurn">
					<text v-if="item">{{item.yestVacantRooms||0}}</text>
					<text v-else>0</text>
					<text>昨日空房</text>
				</view>
				<view>
					<text v-if="item">{{item.yestCheckinRatio||0}}%</text>
					<text v-else>0%</text>
					<text>入住率</text>
				</view>
			</view>
		</view>
		<view class="title">
			<text>今日新增</text>
			<view @tap="toAll">
				<text>全部</text>
				<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
			</view>
		</view>
		<block v-if="list.length>0">
			<view class="card" v-for="(item,index) in list" :key="index" @tap="handleDetail(item)">
				<view class="c_top">
					<text>订单号：{{item.orderCode}}</text>

					<text v-if='item.orderStatus==-1' class="orange">待确认</text>
					<text v-else-if='item.orderStatus==-2' class="red">待支付</text>
					<text v-else-if='item.orderStatus==1' class="green">已预订</text>
					<text v-else-if='item.orderStatus==5' class="green">已退款</text>
					<text v-else-if='item.orderStatus==4' class="green">已取消</text>
					<text v-else-if='item.orderStatus==2' class="green">已入住</text>
					<text v-else-if='item.orderStatus==3' class="green">已退房</text>
					<text v-else :class="statusClass[item.orderStatus]">{{status[item.orderStatus]}}</text>
				</view>
				<view class="c_middle">
					<image :src="item.cover"></image>
					<view class="cm_info">
						<view class="cmi_title">{{item.houseBaseName}}</view>
						<view class="cmi_pre">{{item.guestName}}</view>
						<view class="cmi_pre">{{item.guestPhone}}</view>
						<view class="cmi_pre">{{item.date}}<span>共{{item.num}}晚</span></view>
					</view>
					<view class="cm_price">￥{{item.orderAmount?item.orderAmount.toFixed(2):''}}</view>
				</view>
				<view class="c_bottom">
					<view class="btn" v-if="item.orderStatus==-1" :class="item.orderStatus==-1?'btn_jj':''"
						@tap="cancle(item)">拒绝</view>
					<view class="btn" v-if="item.orderStatus==-1" @tap="toConfrimOrder(item)">确认订单</view>
					<view class="btn" v-if="item.orderStatus==1&&item.istoday" @tap="checkIn(2,item)">办理入住</view>
					<view class="btn" v-if="item.orderStatus==2" @tap="toBltf(item)">办理退房</view>
					<view class="btn"
						v-if="item.orderStatus==3||item.orderStatus==4||(item.orderStatus==1&&!item.istoday)"
						:class="(item.orderStatus==3||item.orderStatus==4||(item.orderStatus==1&&!item.istoday))?'btn_xq':''"
						@tap="handleDetail(item)">详情</view>
				</view>
			</view>
		</block>
		<block v-else>
			<view class="empty">
				暂无数据
			</view>
		</block>
		<Tabbar :tabbarIndex="0"></Tabbar>
		<u-picker :show="shShow" :columns="nameList" @close="shShow=false" @cancel="shShow=false"
			@confirm="confirm" :immediateChange="true" itemHeight="88"></u-picker>
		<!-- 取消订单 -->
		<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="请输入原因" />
			</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 {
				name: '',
				shList: [],
				nameList: [],
				shShow: false,
				item: null,
				list: [],
				statusClass: ['', 'green', 'blue', 'grey', 'grey'],
				status: ['', '已预订', '已入住', '已退房', '已取消'],
				page: 1,
				limit: 10,
				finished: false,

				show: false,
				show2: false,
				show3: false,
				check: {
					initiator: 1,
					refundReason: "",
					status: -1,
					orderCode: "",
				},
				orderId: '',
				orderInfo: {}
			}
		},
		mounted() {
			this.getType();
			this.getDetails();
			this.getList();
		},
		onReachBottom() {
			if (this.finished) return
			this.getList();
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getType();
				this.getDetails();
				this.init();
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getType() {
				this.$api.post('/merchant/register/getMerchantStoreList').then(res => {
					if (res.data.code === 0) {
						this.shList = res.data.data;
						let shs = [];
						this.shList.forEach(d => shs.push(d.merchantName));
						this.nameList = [shs];
						let id = uni.getStorageSync('homestayId');
						if(!uni.getStorageSync('homestayId')) id = uni.getStorageSync('merchantId');
						let t = this.shList.find(d => d.merchantId == id);
						this.name = t ? t.merchantName : ''
					} else this.$showToast(res.data.msg);
				})
			},
			confirm(e) {
				this.name = e.value[0];
				this.shShow = false;
				
				let t = this.shList.find(d => d.merchantName == this.name);
				if (t) {
					if (t.merchantType == 2) { //酒店民宿
						uni.setStorageSync('homestayId', t.merchantId);
						uni.setStorageSync('merchantId', '');
						this.getDetails();
						this.page = 1;
						this.finished = false;
						this.list = [];
						this.getList();
					} else {
						this.item = null;
						this.list = [];
						uni.setStorageSync('homestayId', '');
						uni.setStorageSync('merchantId', t.merchantId);
						uni.setStorageSync('merchantName', t.merchantName);
						uni.reLaunch({
							url: '/pagesHouse/home/index'
						})
					}
				}
			},
			getDetails() {
				this.$api.get('/merchant/hotel/home/getHotelHomeInfo/' + (uni.getStorageSync('homestayId')||0)).then(res => {
					if (res.data.code === 0) {
						this.item = res.data.data;
					} else this.$showToast(res.data.msg);
				})
			},
			getList() {
				this.$api.get('/merchant/hotel/order/getMerchantOrderPageList', {
					homestayId: (uni.getStorageSync('homestayId')||0),
					limit: this.limit,
					page: this.page,
					orderStatus: '',
					orderTime:new Date().Format('yyyy-MM-dd')
				}).then(res => {
					if (res.data.code === 0) {
						this.list = [...this.list, ...res.data.data.list];
						this.list.forEach(l => {
							l.date = new Date(l.arriveDate).Format('MM/dd') + " - " + new Date(l.leaveDate)
								.Format('MM/dd');
							l.istoday = new Date().Format('yyyy-MM-dd') == new Date(l.arriveDate).Format(
								'yyyy-MM-dd') ? true : false;
						})
						if (res.data.data.list.length == 0) this.finished = true;
						else this.page++;
					} else this.$showToast(res.data.msg);
				})
			},
			handleDetail(item) {
				uni.navigateTo({
					url: '/pages/house/orderInfo?orderId=' + item.id
				})
			},
			toAll() {
				uni.navigateTo({
					url: '/pagesMy/orderList/orderList'
				})
			},
			toTurn() {
				uni.navigateTo({
					url: '/pages/home/condition'
				})
			},
			toConfirm(){
				uni.navigateTo({
					url:'/pagesMy/orderList/orderList?Type=0'
				})
			},
			cancle(item) {
				this.show = true;
				this.check.orderCode = item.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(() => {
							this.init();
						}, 1500)
					});
			},
			toConfrimOrder(item) {
				this.orderInfo = item;
				this.show2 = true;
			},
			// 确认订单
			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(() => {
							this.init();
						}, 1500)
					});
			},
			//办理入住
			checkIn(orderStatus, item) {
				this.orderInfo = item;
				uni.redirectTo({
					url: "/pages/house/createOrder?id=" + this.orderInfo.id + '&orderStatus=' + orderStatus
				})
			},
			toBltf(item) {
				this.orderInfo = item;
				this.show3 = true;
			},
			//办理退房
			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.show3 = false;
						this.$showToast('操作成功');
						setTimeout(() => {
							this.init();
						}, 1500)
					});
			},
			init() {
				this.page = 1;
				this.finished = false;
				this.list = [];
				this.getList();
			}
		}
	}
</script>

<style scoped lang="less">
	.page {
		background: #F3F4F4;
		padding-bottom: 40rpx;
		box-sizing: border-box;

		.bg {
			width: 100%;
			height: 743rpx;
			background: url(https://i.ringzle.com/file/20240107/8bc656fc64fd4386a6b336a7dc8c86d0.png) no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;

			.b_money {
				display: flex;
				flex-direction: column;
				align-items: center;

				text {
					font-size: 56rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: bold;
					color: #FFFFFF;

					&:last-child {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						margin-top: 21rpx;
					}
				}
			}

			.b_items {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;

				&>view {
					width: 25%;
					margin-top: 40rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					text {
						font-size: 40rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: bold;
						color: #FFFFFF;

						&:last-child {
							font-size: 26rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							margin-top: 10rpx;
						}
					}
				}
			}
		}

		.title {
			width: 100%;
			padding: 30rpx 30rpx 10rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&>text {
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				color: #333333;
			}

			&>view {
				display: flex;
				align-items: center;

				text {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-right: 10rpx;
				}
			}
		}

		.card {
			width: calc(100% - 60rpx);
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: 20rpx 30rpx 0;

			.c_top {
				width: 100%;
				padding: 30rpx;
				border-bottom: 1rpx solid #F1F1F1;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #333333;

					&:last-child {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
					}
				}
			}

			.c_middle {
				width: 100%;
				padding: 30rpx;
				border-bottom: 1rpx solid #F1F1F1;
				box-sizing: border-box;
				display: flex;
				position: relative;

				image {
					width: 180rpx;
					height: 180rpx;
					border-radius: 20rpx;
				}

				.cm_info {
					padding-left: 20rpx;

					.cmi_title {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						color: #333333;
						padding-bottom: 11rpx;
					}

					.cmi_pre {
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #777777;

						span {
							margin-left: 20rpx;
						}
					}
				}

				.cm_price {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					color: #F9423A;
					position: absolute;
					top: 50%;
					margin-top: -22.5rpx;
					right: 30rpx;
				}
			}

			.c_bottom {
				width: 100%;
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: flex-end;

				.btn {
					width: 160rpx;
					height: 56rpx;
					background: #1372FF;
					border-radius: 64rpx 64rpx 64rpx 64rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;

					&.btn_xq {
						background: #FFFFFF;
						border: 1rpx solid #D1D1D1;
						font-size: 24rpx;
						color: #999999;
					}

					&.btn_jj {
						background: #FFFFFF;
						border: 1rpx solid #F9423A;
						font-size: 24rpx;
						color: #FA6760;
					}

					&:last-child {
						margin-left: 20rpx;
					}
				}
			}
		}

		.empty {
			width: 100%;
			text-align: center;
			padding-top: 100rpx;
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #999999;
		}

		.red {
			color: #F9423A !important;
		}

		.green {
			color: #39CE77 !important;
		}

		.blue {
			color: #1372FF !important;
		}

		.grey {
			color: #4C5F76 !important;
		}

		.orange {
			color: #FF9100 !important;
		}
	}

	/deep/.u-nav-slot {
		&>text {
			font-size: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}

		.u-icon {
			margin: 8rpx 0 0 20rpx;
		}
	}
</style>