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>{{item.stayedInRooms||0}}</text>
					<text>已入住</text>
				</view>
				<view @tap="toTurn">
					<text>{{item.toCheckinRooms||0}}</text>
					<text>待入住</text>
				</view>
				<view>
					<text>{{item.undeterminedOrders||0}}</text>
					<text>待确认</text>
				</view>
				<view>
					<text>{{item.pendingOrders||0}}</text>
					<text>待处理</text>
				</view>
				<view>
					<text>{{item.yestOrders||0}}</text>
					<text>昨日订单</text>
				</view>
				<view @tap="toTurn">
					<text>{{item.yestSaleRooms||0}}</text>
					<text>昨日售出</text>
				</view>
				<view @tap="toTurn">
					<text>{{item.yestVacantRooms||0}}</text>
					<text>昨日空房</text>
				</view>
				<view>
					<text>{{item.yestCheckinRatio||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">
				<view class="c_top">
					<text>订单号：{{item.orderCode}}</text>
					<text v-if='item.orderStatus==-1&&item.status==1' class="orange">待确认</text>
					<text v-else-if='item.status==0&&item.orderStatus==-1' class="red">待支付</text>
					<text v-else-if='item.orderStatus==1&&item.status==1' 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" @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" :class="item.orderStatus==3||item.orderStatus==4?'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"></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();
		},
		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 t = this.shList.find(d=>d.merchantId==uni.getStorageSync('homestayId'));
						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);
						this.getDetails();
						this.page = 1;
						this.finished = false;
						this.list = [];
						this.getList();
					} else{
						this.item = null;
						this.list = [];
						uni.setStorageSync('merchantId',t.merchantId);
					} 
				}
			},
			getDetails(){
				this.$api.get('/merchant/hotel/home/getHotelHomeInfo/'+uni.getStorageSync('homestayId')).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'),
					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');
						})
						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'
				})
			},
			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>