Explorar o código

增加顶部订单内容

htc hai 9 meses
pai
achega
96c1112ac0
Modificáronse 1 ficheiros con 97 adicións e 5 borrados
  1. 97 5
      pages/home/index.vue

+ 97 - 5
pages/home/index.vue

@@ -1,12 +1,51 @@
 <template>
-	<view class="page" :style="{'height':(h-th)+'px'}">
+	<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"></view>
+		<view class="bg" :style="{'padding-top':(mt+30)+'px'}">
+			<view class="b_money">
+				<text>{{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>
 		<Tabbar :tabbarIndex="0"></Tabbar>
 		<u-picker :show="show" :columns="nameList" @close="show=false" @cancel="show=false" @confirm="confirm"></u-picker>
 	</view>
@@ -18,7 +57,18 @@
 			return {
 				name:'一家民宿',
 				nameList:[['一家民宿','我家民宿','他家民宿']],
-				show:false
+				show:false,
+				orderMoney:66614,
+				resData:{
+					yrzNum:68,
+					drzNum:0,
+					dqrNum:12,
+					dclNum:16,
+					zrddNum:48,
+					zrscNum:48,
+					zrkfNum:20,
+					rzl:'69.65%'
+				}
 			}
 		},
 		methods: {
@@ -35,12 +85,54 @@
 		background: #F3F4F4;
 		padding-bottom: 40rpx;
 		box-sizing: border-box;
-		overflow-y: auto;
 		.bg{
 			width: 100%;
-			height: 743rpx;
+			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;
+						}
+					}
+				}
+			}
 		}
 	}