|
|
@@ -1,87 +1,112 @@
|
|
|
<template>
|
|
|
- <scroll-view class="page" scroll-x="true" scroll-y="true" :style="{'height':(h-th)+'px','padding-top':mt+'px'}"
|
|
|
- @scroll="scroll" id="page">
|
|
|
- <c-nav-bar title="房态" :showIcon="false" :titleStyle="titleStyle"></c-nav-bar>
|
|
|
- <view class="content" v-if="xdata.length!=0">
|
|
|
- <view class="tj">
|
|
|
- <text class="label">房间总数：</text>
|
|
|
- <text>{{info.totalRooms}}</text>
|
|
|
- <text class="label">在入住房间数：</text>
|
|
|
- <text>{{info.checkinRooms}}</text>
|
|
|
- <text class="label">待入住房间数：</text>
|
|
|
- <text>{{info.bookRooms}}</text>
|
|
|
+ <view class="page" :style="{'padding-top':mt+'px'}">
|
|
|
+ <view class="leftFixed" v-if="leftData.length!=0" :style="{'top':mt+49+'px'}">
|
|
|
+ <view class="year">
|
|
|
+ <u-icon name="calendar-fill" color="#B9C2D2" size="40" style="margin-bottom:10rpx;"></u-icon>
|
|
|
+ <text style="font-size: 24rpx;">2024</text>
|
|
|
</view>
|
|
|
- <view class="date">
|
|
|
- <view class="item" :style="{'left':scrollLeft+'px'}">
|
|
|
- <u-icon name="calendar-fill" color="#B9C2D2" size="40" style="margin-bottom:10rpx;"></u-icon>
|
|
|
- <text style="font-size: 24rpx;">2024</text>
|
|
|
- </view>
|
|
|
- <view class="item" v-for="(item,keynme,index) in xdata" :key="index">
|
|
|
- <text>{{item.rentDate.substring(5)}}</text>
|
|
|
- <text>{{weeks[item.rentWeek]}}</text>
|
|
|
- <text>剩{{item.spareRooms}}</text>
|
|
|
+ <view v-for="(item,key,i) in leftData" :key="i" class="fixedItem">
|
|
|
+ <view class="head" v-if="indexArr[i]==key.split('-')[0]">
|
|
|
+ <text>{{key.split('-')[0]}}F</text>
|
|
|
+ <view class="rightIcon" @click="open(i,key.split('-')[0],false)" v-if="opens[i]">
|
|
|
+ <text>收起</text>
|
|
|
+ <u-icon name="arrow-up-fill" size="18" style="margin-left: 10rpx;"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="rightIcon" @click="open(i,key.split('-')[0],true)" v-else>
|
|
|
+ <text>展开</text>
|
|
|
+ <u-icon name="arrow-down-fill" size="18" style="margin-left: 10rpx;"></u-icon>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ <template v-if="opens[i]">
|
|
|
+ <view class="roomType" :style="{'left':scrollLeft+'px'}">{{key.split('-')[1]}}</view>
|
|
|
+ <text v-for="(item2,index2) in item" class="roomNumber">
|
|
|
+ {{item2.roomNumber}}
|
|
|
+ </text>
|
|
|
+ </template>
|
|
|
</view>
|
|
|
- <view class="floorData" v-if="leftData.length!=0">
|
|
|
- <view v-for="(item,key,i) in leftData" :key="i"
|
|
|
- style="margin-bottom: 16rpx;padding-top: 108rpx;position: relative;"
|
|
|
- :class="indexArr[i]==key.split('-')[0]?'big':opens[i]?'small':'pd0'">
|
|
|
- <view class="head" v-if="indexArr[i]==key.split('-')[0]" :style="{'left':scrollLeft+'px'}">
|
|
|
- <text>{{key.split('-')[0]}}F</text>
|
|
|
- <view class="rightIcon" @click="open(i,key.split('-')[0],false)" v-if="opens[i]">
|
|
|
- <text>收起</text>
|
|
|
- <u-icon name="arrow-up-fill" size="18" style="margin-left: 10rpx;"></u-icon>
|
|
|
- </view>
|
|
|
- <view class="rightIcon" @click="open(i,key.split('-')[0],true)" v-else>
|
|
|
- <text>展开</text>
|
|
|
- <u-icon name="arrow-down-fill" size="18" style="margin-left: 10rpx;"></u-icon>
|
|
|
- </view>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <c-nav-bar title="房态" :showIcon="false" :titleStyle="titleStyle"></c-nav-bar>
|
|
|
+ <view class="content" v-if="xdata.length!=0">
|
|
|
+ <view class="tj" :style="{'top':mt+'px'}">
|
|
|
+ <text class="label">房间总数：</text>
|
|
|
+ <text>{{info.totalRooms}}</text>
|
|
|
+ <text class="label">在入住房间数：</text>
|
|
|
+ <text>{{info.checkinRooms}}</text>
|
|
|
+ <text class="label">待入住房间数：</text>
|
|
|
+ <text>{{info.bookRooms}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="date">
|
|
|
+ <view class="item">
|
|
|
+ <u-icon name="calendar-fill" color="#B9C2D2" size="40" style="margin-bottom:10rpx;"></u-icon>
|
|
|
+ <text style="font-size: 24rpx;">2024</text>
|
|
|
</view>
|
|
|
- <template v-if="opens[i]">
|
|
|
- <view class="roomType" :style="{'left':scrollLeft+'px'}">{{key.split('-')[1]}}</view>
|
|
|
- <view class="table">
|
|
|
- <view class="tr" v-for="(item2,index2) in item" :key="index2">
|
|
|
- <view class="td" :style="{'left':scrollLeft+'px'}">{{item2.roomNumber}}</view>
|
|
|
- <view class="td" v-for="(roomData,ind) in xdata" :key="ind"
|
|
|
- :class="'s'+delDataStatus(item2.roomNumber,item2.houseBaseId,roomData.roomDataList,'status')">
|
|
|
- <!-- 空置房-->
|
|
|
- <template
|
|
|
- v-if="delDataStatus(item2.roomNumber,item2.houseBaseId,roomData.roomDataList,'status') == 1">
|
|
|
- <view
|
|
|
- @click="check(item2.roomNumber,item2.houseBaseId,roomData,i + '-'+index2+ '-'+ ind)"
|
|
|
- class="cellBox">
|
|
|
- {{item2.roomNumber|delDataStatus(item2.houseBaseId,roomData.roomDataList,'price')}}
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view @click="tabCli(item2.roomNumber,item2.houseBaseId,roomData.roomDataList)"
|
|
|
- class="tdP">
|
|
|
- <text>{{item2.roomNumber|delDataStatus(item2.houseBaseId,roomData.roomDataList,'guestName')}}</text>
|
|
|
- <text>{{item2.roomNumber|delDataStatus(item2.houseBaseId,roomData.roomDataList,'status')}}</text>
|
|
|
+ <view class="item" v-for="(item,keynme,index) in xdata" :key="index">
|
|
|
+ <text>{{item.rentDate.substring(5)}}</text>
|
|
|
+ <text>{{weeks[item.rentWeek]}}</text>
|
|
|
+ <text>剩{{item.spareRooms}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="floorData" v-if="leftData.length!=0">
|
|
|
+ <view v-for="(item,key,i) in leftData" :key="i" style="margin-bottom: 16rpx;">
|
|
|
+ <view class="head" v-if="indexArr[i]==key.split('-')[0]" style="opacity: 0;">
|
|
|
+ <text>{{key.split('-')[0]}}F</text>
|
|
|
+ <view class="rightIcon" @click="open(i,key.split('-')[0],false)" v-if="opens[i]">
|
|
|
+ <text>收起</text>
|
|
|
+ <u-icon name="arrow-up-fill" size="18" style="margin-left: 10rpx;"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view class="rightIcon" @click="open(i,key.split('-')[0],true)" v-else>
|
|
|
+ <text>展开</text>
|
|
|
+ <u-icon name="arrow-down-fill" size="18" style="margin-left: 10rpx;"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <template v-if="opens[i]">
|
|
|
+ <view class="roomType" style="opacity: 0;">{{key.split('-')[1]}}</view>
|
|
|
+ <view class="table">
|
|
|
+ <view class="tr" v-for="(item2,index2) in item" :key="index2">
|
|
|
+ <view class="td" :style="{'left':scrollLeft+'px'}">{{item2.roomNumber}}</view>
|
|
|
+ <view class="td" v-for="(roomData,ind) in xdata" :key="ind"
|
|
|
+ :class="'s'+delDataStatus(item2.roomNumber,item2.houseBaseId,roomData.roomDataList,'status')">
|
|
|
+ <!-- 空置房-->
|
|
|
+ <template
|
|
|
+ v-if="delDataStatus(item2.roomNumber,item2.houseBaseId,roomData.roomDataList,'status') == 1">
|
|
|
+ <view
|
|
|
+ @click="check(item2.roomNumber,item2.houseBaseId,roomData,i + '-'+index2+ '-'+ ind)"
|
|
|
+ class="cellBox">
|
|
|
+ {{item2.roomNumber|delDataStatus(item2.houseBaseId,roomData.roomDataList,'price')}}
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <view
|
|
|
+ @click="tabCli(item2.roomNumber,item2.houseBaseId,roomData.roomDataList)"
|
|
|
+ class="tdP">
|
|
|
+ <text>{{item2.roomNumber|delDataStatus(item2.houseBaseId,roomData.roomDataList,'guestName')}}</text>
|
|
|
+ <text>{{item2.roomNumber|delDataStatus(item2.houseBaseId,roomData.roomDataList,'status')}}</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <!-- 点击时状态 -->
|
|
|
+ <view class="cover" v-if="checkPosition.indexOf(i + '-'+index2+ '-'+ ind) > -1"
|
|
|
+ @click="check(item2.roomNumber,item2.houseBaseId,roomData,i + '-'+index2+ '-'+ ind)">
|
|
|
+ <u-icon name="checkbox-mark" size="36" color="#fff"></u-icon>
|
|
|
</view>
|
|
|
- </template>
|
|
|
- <!-- 点击时状态 -->
|
|
|
- <view class="cover" v-if="checkPosition.indexOf(i + '-'+index2+ '-'+ ind) > -1"
|
|
|
- @click="check(item2.roomNumber,item2.houseBaseId,roomData,i + '-'+index2+ '-'+ ind)">
|
|
|
- <u-icon name="checkbox-mark" size="36" color="#fff"></u-icon>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
+ </template>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="opration" v-if="checkDataRoomId.length!=0">
|
|
|
+ <text @click="areaShow=true">关房</text>
|
|
|
+ <text @click="createOrder()">新增</text>
|
|
|
+ </view>
|
|
|
+ <Tabbar :tabbarIndex="1"></Tabbar>
|
|
|
+ <!-- 关房 -->
|
|
|
+ <u-picker :itemHeight="88" :immediateChange="true" :show="areaShow" :columns="areaTxt" title="房态选择"
|
|
|
+ :defaultIndex="passengerDefault" @cancel="areaShow=false;clearData();"
|
|
|
+ @confirm="passengerConfirm"></u-picker>
|
|
|
</view>
|
|
|
- <view class="opration" v-if="checkDataRoomId.length!=0">
|
|
|
- <text @click="areaShow=true">关房</text>
|
|
|
- <text @click="createOrder()">新增</text>
|
|
|
- </view>
|
|
|
- <Tabbar :tabbarIndex="1"></Tabbar>
|
|
|
- <!-- 关房 -->
|
|
|
- <u-picker :itemHeight="88" :immediateChange="true" :show="areaShow" :columns="areaTxt" title="房态选择"
|
|
|
- :defaultIndex="passengerDefault" @cancel="areaShow=false;clearData();"
|
|
|
- @confirm="passengerConfirm"></u-picker>
|
|
|
- </scroll-view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -377,21 +402,29 @@
|
|
|
background: #F3F4F4;
|
|
|
padding-bottom: 40rpx;
|
|
|
box-sizing: border-box;
|
|
|
- overflow-y: auto;
|
|
|
overflow-x: auto;
|
|
|
|
|
|
- .tj {
|
|
|
- padding: 30rpx 0;
|
|
|
- text-align: center;
|
|
|
- text {
|
|
|
- font-size: 28rpx;
|
|
|
- color: #f44;
|
|
|
- font-weight: bold;
|
|
|
- margin: 0 10rpx;
|
|
|
-
|
|
|
- &.label {
|
|
|
- color: #333;
|
|
|
- margin: 0
|
|
|
+ .content {
|
|
|
+
|
|
|
+
|
|
|
+ .tj {
|
|
|
+ padding: 30rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ height: 98rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: absolute;
|
|
|
+ width: 750rpx;
|
|
|
+ left: 0;
|
|
|
+ text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #f44;
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 0 10rpx;
|
|
|
+
|
|
|
+ &.label {
|
|
|
+ color: #333;
|
|
|
+ margin: 0
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -402,7 +435,7 @@
|
|
|
position: relative;
|
|
|
border: 1rpx solid #E9F0F5;
|
|
|
margin-bottom: 30rpx;
|
|
|
- padding-left: 130rpx;
|
|
|
+ margin-top:98rpx;
|
|
|
|
|
|
.item {
|
|
|
min-width: 130rpx;
|
|
|
@@ -420,13 +453,6 @@
|
|
|
border: 0;
|
|
|
}
|
|
|
|
|
|
- &:first-child {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- width: 130rpx;
|
|
|
- }
|
|
|
-
|
|
|
text {
|
|
|
&:nth-child(2) {
|
|
|
margin: 6rpx 0;
|
|
|
@@ -435,59 +461,61 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .floorData {
|
|
|
-
|
|
|
- .head,
|
|
|
- .roomType {
|
|
|
- padding: 0 30rpx;
|
|
|
- display: flex;
|
|
|
- width: 400rpx;
|
|
|
- // justify-content: space-between;
|
|
|
- }
|
|
|
+ .head,
|
|
|
+ .roomType {
|
|
|
+ padding: 0 30rpx;
|
|
|
+ display: flex;
|
|
|
+ width: 400rpx;
|
|
|
+ // justify-content: space-between;
|
|
|
+ }
|
|
|
|
|
|
- .head {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
+ .head {
|
|
|
+ // position: absolute;
|
|
|
+ // top: 0;
|
|
|
+ // left: 0;
|
|
|
|
|
|
- &>text {
|
|
|
- &:first-child {
|
|
|
- font-size: 32rpx;
|
|
|
- margin-right: 30rpx;
|
|
|
- }
|
|
|
+ &>text {
|
|
|
+ &:first-child {
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-right: 30rpx;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .rightIcon {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #1F2425;
|
|
|
+ .rightIcon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #1F2425;
|
|
|
|
|
|
- }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .roomType {
|
|
|
- position: absolute;
|
|
|
- top: 40rpx;
|
|
|
- left: 0;
|
|
|
+ .roomType {
|
|
|
+ // position: absolute;
|
|
|
+ // top: 40rpx;
|
|
|
+ // left: 0;
|
|
|
|
|
|
- color: #333;
|
|
|
- font-size: 24rpx;
|
|
|
- // position: relative;
|
|
|
- padding-left: 44rpx;
|
|
|
- margin: 20rpx 0 16rpx;
|
|
|
+ color: #333;
|
|
|
+ font-size: 24rpx;
|
|
|
+ position: relative;
|
|
|
+ padding-left: 44rpx;
|
|
|
+ margin: 20rpx 0 16rpx;
|
|
|
|
|
|
- &::after {
|
|
|
- position: absolute;
|
|
|
- content: "";
|
|
|
- height: 24rpx;
|
|
|
- width: 5rpx;
|
|
|
- background-color: #1372FF;
|
|
|
- left: 30rpx;
|
|
|
- top: 4rpx;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
+ &::after {
|
|
|
+ position: absolute;
|
|
|
+ content: "";
|
|
|
+ height: 24rpx;
|
|
|
+ width: 5rpx;
|
|
|
+ background-color: #1372FF;
|
|
|
+ left: 30rpx;
|
|
|
+ top: 4rpx;
|
|
|
+ z-index: 1;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .floorData {
|
|
|
+
|
|
|
+
|
|
|
|
|
|
.table {
|
|
|
border: 1rpx solid #E9F0F5;
|
|
|
@@ -500,19 +528,18 @@
|
|
|
align-items: center;
|
|
|
background-color: #fff;
|
|
|
position: relative;
|
|
|
- padding-left: 130rpx;
|
|
|
|
|
|
&:last-child {
|
|
|
border: 0;
|
|
|
}
|
|
|
|
|
|
.td {
|
|
|
- &:first-child {
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
+ // &:first-child {
|
|
|
+ // position: absolute;
|
|
|
+ // left: 0;
|
|
|
+ // top: 0;
|
|
|
+ // z-index: 1;
|
|
|
+ // }
|
|
|
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -628,4 +655,39 @@
|
|
|
.pd0 {
|
|
|
padding: 0 !important;
|
|
|
}
|
|
|
+
|
|
|
+ .leftFixed {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 232rpx;
|
|
|
+ z-index: 12;
|
|
|
+
|
|
|
+ .year {
|
|
|
+ min-width: 130rpx;
|
|
|
+ width: 130rpx;
|
|
|
+ height: 136rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 20rpx;
|
|
|
+ border-right: 1rpx solid #E9F0F5;
|
|
|
+ background-color: #fff;
|
|
|
+ margin-bottom: 35rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fixedItem {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+
|
|
|
+ .roomNumber {
|
|
|
+ height: 84rpx;
|
|
|
+ display: inline-block;
|
|
|
+ width: 130rpx;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
