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="show=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>{{resData.orderMoney.toFixed(2)}}</text>
				<text>今日订单金额</text>
			</view>
			<view class="b_items">
				<view>
					<text>{{resData.yrzNum}}</text>
					<text>已入住</text>
				</view>
				<view>
					<text>{{resData.drzNum}}</text>
					<text>待入住</text>
				</view>
				<view>
					<text>{{resData.dqrNum}}</text>
					<text>待确认</text>
				</view>
				<view>
					<text>{{resData.dclNum}}</text>
					<text>待处理</text>
				</view>
				<view>
					<text>{{resData.zrddNum}}</text>
					<text>昨日订单</text>
				</view>
				<view>
					<text>{{resData.zrscNum}}</text>
					<text>昨日售出</text>
				</view>
				<view>
					<text>{{resData.zrkfNum}}</text>
					<text>昨日空房</text>
				</view>
				<view>
					<text>{{resData.rzl}}</text>
					<text>入住率</text>
				</view>
			</view>
		</view>
		<view class="title">
			<text>今日新增</text>
			<view>
				<text>全部</text>
				<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
			</view>
		</view>
		<view class="card" v-for="(item,index) in list" :key="index">
			<view class="c_top">
				<text>订单号：{{item.no}}</text>
				<text :class="statusStyle[item.status]||'s_default'">{{statusCfg[item.status]}}</text>
			</view>
			<view class="c_middle">
				<image :src="item.img"></image>
				<view class="cm_info">
					<view class="cmi_title">{{item.name}}</view>
					<view class="cmi_pre">{{item.person}}</view>
					<view class="cmi_pre">{{item.phone}}</view>
					<view class="cmi_pre">{{item.date}}<span>{{item.nights}}</span></view>
				</view>
				<view class="cm_price">￥{{item.price.toFixed(2)}}</view>
			</view>
			<view class="c_bottom">
				<view class="btn" :class="item.status==0||item.status==4?'btn_xq':''">{{btnTextCfg[item.status]}}</view>
			</view>
		</view>
		<Tabbar :tabbarIndex="0"></Tabbar>
		<u-picker :show="show" :columns="nameList" @close="show=false" @cancel="show=false" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name:'一家民宿',
				nameList:[['一家民宿','我家民宿','他家民宿']],
				show:false,
				list:[],
				resData:{
					orderMoney:66614,
					yrzNum:68,
					drzNum:0,
					dqrNum:12,
					dclNum:16,
					zrddNum:48,
					zrscNum:48,
					zrkfNum:20,
					rzl:'69.65%',
					list:[//status:0 待支付、1 待确认、2 已预订、3 已入住、4 已取消
						{
							no:'A20231213102359619119',
							status:2,
							img:'../../static/room1.png',
							name:'海景房-305',
							person:'李琳',
							phone:'13911924328',
							date:'03/11 - 03/12',
							price:1288,
							nights:'(共两晚)'
						},
						{
							no:'A20231213102359619119',
							status:3,
							img:'../../static/room2.png',
							name:'海景房-306',
							person:'郑一璇',
							phone:'15753988251',
							date:'03/11 - 03/12',
							price:1288,
							nights:'(共两晚)'
						},
						{
							no:'A20231213102359619119',
							status:4,
							img:'../../static/room3.png',
							name:'海景房-307',
							person:'钱萌',
							phone:'13710484614',
							date:'03/11 - 03/12',
							price:1288,
							nights:'(共两晚)'
						},
						{
							no:'A20231213102359619119',
							status:1,
							img:'../../static/room4.png',
							name:'海景房-308',
							person:'赵健民',
							phone:'15877425550',
							date:'03/11 - 03/12',
							price:1288,
							nights:'(共两晚)'
						},
						{
							no:'A20231213102359619119',
							status:0,
							img:'../../static/room5.png',
							name:'海景房-309',
							person:'李琳',
							phone:'13911924328',
							date:'03/11 - 03/12',
							price:1288,
							nights:'(共两晚)'
						}
					]
				},
				statusCfg:{0:'待支付',1:'待确认',2:'已预订',3:'已入住',4:'已取消'},
				statusStyle:{0:'s_dzf',1:'s_dqr',2:'s_yyd',3:'s_yrz',4:'s_yqx'},
				btnTextCfg:{0:'详情',1:'确认订单',2:'办理入住',3:'办理退房',4:'详情'}
			}
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			console.log('触底啦~');
		},
		methods: {
			confirm(e){
				this.name = e.value[0];
				this.show = false;
			},
			getList(){
				this.list = this.resData.list;
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F3F4F4;
		padding-bottom: 40rpx;
		box-sizing: border-box;
		.bg{
			width: 100%;
			height: 660rpx;
			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;
					}
				}
			}
		}
	
		.s_dzf{
			color: #F9423A !important;
		}
		.s_dqr{
			color: #FF9100 !important;
		}
		.s_yyd{
			color: #39CE77 !important;
		}
		.s_yrz{
			color: #1372FF !important;
		}
		.s_yqx{
			color: #4C5F76 !important;
		}
		.s_default{
			color: #111111 !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>