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.houseBaseName}}</view>
				<view class="b_rb" :class="(index==list.length-1||index==list.length-2)?'b_grey':''">{{item.totalNums}}</view>
				<view class="b_rb" :class="(index==list.length-1||index==list.length-2)?'b_grey':''">{{item.saleNums}}</view>
				<view class="b_rb" :class="(index==list.length-1||index==list.length-2)?'b_grey':''">{{item.occupyNums}}</view>
				<view class="b_rb" :class="(index==list.length-1||index==list.length-2)?'b_grey':''">{{item.unSaleNums}}</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.dateDay+'房情表';
				this.getList();
			} 
		},
		methods: {
			getList(){
				this.$api.get('/merchant/hotel/home/getRoomConditionList',{
					homestayId:uni.getStorageSync('homestayId'),
					dateDay:this.item.dateDay
				}).then(res=>{
					if(res.data.code===0){
						this.list = res.data.data.splice(0,res.data.data.length-3);
						let totalNums = this.list.reduce((cur,pre)=>cur+pre.totalNums,0);
						let saleNums = this.list.reduce((cur,pre)=>cur+pre.saleNums,0);
						let occupyNums = this.list.reduce((cur,pre)=>cur+pre.occupyNums,0);
						let unSaleNums = this.list.reduce((cur,pre)=>cur+pre.unSaleNums,0);
						this.list.push({
							houseBaseName:'占房屋总数的比例',
							totalNums:'-',
							saleNums:(saleNums/totalNums*100).toFixed(2)+'%',
							occupyNums:(occupyNums/totalNums*100).toFixed(2)+'%',
							unSaleNums:(unSaleNums/totalNums*100).toFixed(2)+'%'
						})
						this.list.push({
							houseBaseName:'总计',
							totalNums:totalNums,
							saleNums:saleNums,
							occupyNums:occupyNums,
							unSaleNums:unSaleNums
						})
					}else this.$showToast(res.data.msg)
				})
			}
		}
	}
</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>