页面画写完成

pages/home/index.vue

@@ -8,7 +8,7 @@
 		</u-navbar>
 		<view class="bg" :style="{'padding-top':(mt+30)+'px'}">
 			<view class="b_money">
-				<text>{{orderMoney.toFixed(2)}}</text>
+				<text>{{resData.orderMoney.toFixed(2)}}</text>
 				<text>今日订单金额</text>
 			</view>
 			<view class="b_items">
@@ -46,6 +46,32 @@
 				</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>
@@ -58,8 +84,9 @@
 				name:'一家民宿',
 				nameList:[['一家民宿','我家民宿','他家民宿']],
 				show:false,
-				orderMoney:66614,
+				list:[],
 				resData:{
+					orderMoney:66614,
 					yrzNum:68,
 					drzNum:0,
 					dqrNum:12,
@@ -67,14 +94,83 @@
 					zrddNum:48,
 					zrscNum:48,
 					zrkfNum:20,
-					rzl:'69.65%'
-				}
+					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;
 			}
 		}
 	}
@@ -134,6 +230,149 @@
 				}
 			}
 		}
+		
+		.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{