hotelHomestayWx/pages/home/details.vue

<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>