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) {
						if (res.data.data.length > 6 && res.data.data.length == 6) {
							this.list = res.data.data.splice(0, res.data.data.length - 3);
							console.log('000000', this.list);
							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 if (res.data.data.length == 3) {
							this.list = res.data.data.splice(0, res.data.data.length - 2);
							console.log('1111', this.list);
							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.list = res.data.data.splice(0, res.data.data.length - 2);
							console.log('2222', this.list);
							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;
		box-sizing: border-box;

		.table {
			box-sizing: border-box;
			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: 160rpx;
					min-height: 160rpx;
					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>