新增房情表和房情详情表页面

pages/home/details.vue

@@ -0,0 +1,151 @@
+<template>
+	<view class="page" :style="{'height':h+'px','padding-top':mt+'px'}">
+		<c-nav-bar :title="title"></c-nav-bar>
+		<view class="table">
+			<view class="t_th">
+				<view class="b_grey b_rb">房型</view>
+				<view class="b_grey b_rb">数量</view>
+				<view class="b_grey b_rb">可售</view>
+				<view class="b_grey b_rb">占用</view>
+				<view class="b_grey b_rb">不可售</view>
+			</view>
+			<view v-if="list.length>0" class="t_item" v-for="(item,index) in list" :key="index">
+				<view class="b_grey b_rb">{{item.title}}</view>
+				<view class="b_rb" :class="(index==list.length-1||index==list.length-2)?'b_grey':''">{{item.num}}</view>
+				<view class="b_rb" :class="(index==list.length-1||index==list.length-2)?'b_grey':''">{{item.ksNum}}</view>
+				<view class="b_rb" :class="(index==list.length-1||index==list.length-2)?'b_grey':''">{{item.zyNum}}</view>
+				<view class="b_rb" :class="(index==list.length-1||index==list.length-2)?'b_grey':''">{{item.bksNum}}</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title:'',
+				item:null,
+				list:[]
+			}
+		},
+		onLoad(option) {
+			if(option.item){
+				this.item = JSON.parse(decodeURIComponent(option.item));
+				this.title = this.item.yr+'房情表';
+				this.getList();
+			} 
+		},
+		methods: {
+			getList(){
+				let resData = [
+					{
+						title:'大床房',
+						num:10,
+						ksNum:10,
+						zyNum:10,
+						bksNum:0,
+					},
+					{
+						title:'海景房',
+						num:10,
+						ksNum:10,
+						zyNum:10,
+						bksNum:0,
+					},
+					{
+						title:'标准间',
+						num:10,
+						ksNum:10,
+						zyNum:10,
+						bksNum:0,
+					},
+					{
+						title:'家庭房',
+						num:10,
+						ksNum:10,
+						zyNum:10,
+						bksNum:0,
+					}
+				];
+				let allNums = resData.reduce((cur,pre)=>cur+pre.num,0);
+				let ksNums = resData.reduce((cur,pre)=>cur+pre.ksNum,0);
+				let zyNums = resData.reduce((cur,pre)=>cur+pre.zyNum,0);
+				let bksNums = resData.reduce((cur,pre)=>cur+pre.bksNum,0);
+				resData.push({
+					title:'占房屋总数的比例',
+					num:'-',
+					ksNum:(ksNums/allNums*100).toFixed(2)+'%',
+					zyNum:(zyNums/allNums*100).toFixed(2)+'%',
+					bksNum:(bksNums/allNums*100).toFixed(2)+'%'
+				})
+				resData.push({
+					title:'总计',
+					num:allNums,
+					ksNum:ksNums,
+					zyNum:zyNums,
+					bksNum:bksNums
+				})
+				this.list = resData;
+			}
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	.page{
+		background: #F9FAFC;
+		.table{
+			width: 100%;
+			border-top: 1rpx solid #D1D1D1;
+			border-left: 1rpx solid #D1D1D1;
+			margin-top: 20rpx;
+			.t_th{
+				display: flex;
+				align-items: center;
+				justify-content: space-around;
+				&>view{
+					width: 25%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					padding: 20rpx 0;
+					box-sizing: border-box;
+					font-size: 24rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					color: #1F2425;
+				}
+			}
+		
+			.t_item{
+				display: flex;
+				align-items: center;
+				justify-content: space-around;
+				&>view{
+					width: 25%;
+					height: 106rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					box-sizing: border-box;
+					background: #ffffff;
+					font-size: 24rpx;
+					font-family: PingFang SC, PingFang SC;
+					font-weight: 400;
+					color: #1F2425;
+					text-align: center;
+				}
+			}
+		}
+		
+		.b_grey{
+			background: #FAFAFA !important;
+		}
+		
+		.b_rb{
+			border-right: 1rpx solid #D1D1D1;
+			border-bottom: 1rpx solid #D1D1D1;
+		}
+	}
+</style>