|
@@ -1,29 +1,536 @@
|
|
|
<template>
|
|
|
<view class="page" :style="{'height':(h-th)+'px','padding-top':mt+'px'}">
|
|
|
- <c-nav-bar title="房态" :showIcon="false"></c-nav-bar>
|
|
|
-
|
|
|
+ <c-nav-bar title="房态" :showIcon="false" :titleStyle="titleStyle"></c-nav-bar>
|
|
|
+ <view class="content">
|
|
|
+ <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>
|
|
|
+ <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]">
|
|
|
+ <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">{{key.split('-')[1]}}</view>
|
|
|
+ <view class="table">
|
|
|
+ <view class="tr" v-for="(item2,index2) in item" :key="index2">
|
|
|
+ <view class="td">{{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>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </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>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ var that;
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ areaShow: false,
|
|
|
+ passengerDefault: [0],
|
|
|
+ areaTxt: [
|
|
|
+ ['清洁中', '暂停使用', '保留房', '空置房']
|
|
|
+ ],
|
|
|
+ area: [{
|
|
|
+ label: '清洁中',
|
|
|
+ id: 4
|
|
|
+ }, {
|
|
|
+ label: '暂停使用',
|
|
|
+ id: 5
|
|
|
+ }, {
|
|
|
+ label: '保留房',
|
|
|
+ id: 6
|
|
|
+ }, {
|
|
|
+ label: '空置房',
|
|
|
+ id: 0
|
|
|
+ }],
|
|
|
+ titleStyle: {
|
|
|
+ fontSize: '34rpx',
|
|
|
+ fontWeight: "bold",
|
|
|
+ },
|
|
|
+ dateArr: [1, 2, 3, 4, 5],
|
|
|
+ xdata: [], //纵向列
|
|
|
+ leftData: [], //横向列,
|
|
|
+ indexArr: [], //楼层索引,
|
|
|
+ opens: [],
|
|
|
+ statusTxt: {
|
|
|
+ '-1': '待确定',
|
|
|
+ '1': '已预订',
|
|
|
+ '2': '已入住',
|
|
|
+ '3': '已退房',
|
|
|
+ '4': '清洁中',
|
|
|
+ '5': '暂停使用',
|
|
|
+ '6': '保留房',
|
|
|
+ },
|
|
|
+ weeks: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
|
|
|
+ checkPosition: [],
|
|
|
+ checkDataDate: [],
|
|
|
+ checkPrice: [],
|
|
|
+ checkDataRoomId: [],
|
|
|
+ checkStatus:''
|
|
|
}
|
|
|
},
|
|
|
+ onLoad() {
|
|
|
+ that = this;
|
|
|
+ this.getLeftData();
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ delDataStatus(roomNumber, id, roomId, name) {
|
|
|
+ for (let i = 0; i < roomId.length; i++) {
|
|
|
+ if (id == roomId[i].houseBaseId && roomNumber == roomId[i].roomNumber) {
|
|
|
+ if (name == "status") {
|
|
|
+ return that.statusTxt[roomId[i][name]]
|
|
|
+ } else {
|
|
|
+ return roomId[i][name] || ''
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
-
|
|
|
+ init() {
|
|
|
+ this.getLeftData();
|
|
|
+ this.getData();
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ //关房
|
|
|
+ tabCli(roomNumber, id, roomId) {
|
|
|
+ this.clearData();
|
|
|
+ if (roomNumber) {
|
|
|
+ let obj = {};
|
|
|
+ for (let i = 0; i < roomId.length; i++) {
|
|
|
+ if (id == roomId[i].houseBaseId && roomNumber == roomId[i].roomNumber) {
|
|
|
+ obj = roomId[i];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(obj.status==2||obj.status==3){
|
|
|
+ //到详情
|
|
|
+ }else{
|
|
|
+ //更改状态
|
|
|
+ this.areaShow = true;
|
|
|
+ this.checkDataRoomId = [obj.id];
|
|
|
+ this.checkStatus = obj.status;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //确定关房
|
|
|
+ passengerConfirm(e) {
|
|
|
+ let status = this.area[e.indexs[0]].id;
|
|
|
+ this.$api.post('/merchant/hotel/room/state/updRoomState', {
|
|
|
+ roomIds: this.checkDataRoomId,
|
|
|
+ status: status
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code == 0) {
|
|
|
+ console.log(res.data)
|
|
|
+ this.clearData();
|
|
|
+ this.areaShow = false;
|
|
|
+ this.init()
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //新增订单
|
|
|
+ createOrder(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:'/pages/house/createOrder?roomId='+this.checkDataRoomId
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //展开收起
|
|
|
+ open(i, F, val) {
|
|
|
+ this.opens[i] = !this.opens[i];
|
|
|
+ let list = this.leftData;
|
|
|
+ for (var i = 0; i < Object.keys(list).length; i++) {
|
|
|
+ var index = i; // 索引
|
|
|
+ var key = Object.keys(list)[i].split('-')[0]; // key
|
|
|
+ if (F == key) {
|
|
|
+ this.opens[index] = val;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$forceUpdate();
|
|
|
+ },
|
|
|
+ delDataStatus(roomNumber, id, roomId, name) {
|
|
|
+ for (let i = 0; i < roomId.length; i++) {
|
|
|
+ if (id == roomId[i].houseBaseId && roomNumber == roomId[i].roomNumber) {
|
|
|
+ return roomId[i][name] + 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearData() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.checkDataDate = [];
|
|
|
+ this.checkPrice = [];
|
|
|
+ this.checkDataRoomId = [];
|
|
|
+ this.checkPosition = [];
|
|
|
+ }, 1500);
|
|
|
+ },
|
|
|
+ //选择房间
|
|
|
+ check(roomNumber, id, item, position) {
|
|
|
+ for (let i = 0; i < item.roomDataList.length; i++) {
|
|
|
+ if (
|
|
|
+ id == item.roomDataList[i].houseBaseId &&
|
|
|
+ roomNumber == item.roomDataList[i].roomNumber
|
|
|
+ ) {
|
|
|
+ //宫格位置标识
|
|
|
+ if (item.roomDataList[i].status == 0) {
|
|
|
+ if (this.checkPosition.indexOf(position) < 0) {
|
|
|
+ this.checkPosition.push(position);
|
|
|
+ } else {
|
|
|
+ let index = this.checkPosition.findIndex(
|
|
|
+ (pos) => pos == position
|
|
|
+ ); //选中的索引位置
|
|
|
+ this.checkPosition.splice(index, 1);
|
|
|
+ }
|
|
|
+ //房间id
|
|
|
+ if (this.checkDataRoomId.indexOf(item.roomDataList[i].id) < 0) {
|
|
|
+ this.checkDataRoomId.push(item.roomDataList[i].id);
|
|
|
+ } else {
|
|
|
+ let index = this.checkDataRoomId.findIndex(
|
|
|
+ (roomId) => roomId == item.roomDataList[i].id
|
|
|
+ );
|
|
|
+ this.checkDataRoomId.splice(index, 1);
|
|
|
+ }
|
|
|
+ //日期
|
|
|
+ if (this.checkPosition.indexOf(position) > -1) {
|
|
|
+ this.checkDataDate.push(item.rentDate);
|
|
|
+ this.checkPrice.push(item.roomDataList[i].price)
|
|
|
+ } else {
|
|
|
+ let index = this.checkDataDate.findIndex(
|
|
|
+ (date) => date == item.rentDate
|
|
|
+ );
|
|
|
+ this.checkDataDate.splice(index, 1);
|
|
|
+ //价格
|
|
|
+ let index2 = this.checkPrice.findIndex(
|
|
|
+ (price) => price == item.price
|
|
|
+ );
|
|
|
+ this.checkPrice.splice(index2, 1);
|
|
|
+ }
|
|
|
+ if (this.checkPosition.length == 0) {
|
|
|
+ this.checkDataDate = [];
|
|
|
+ this.checkPrice = [];
|
|
|
+ }
|
|
|
+ console.log(this.checkDataDate);
|
|
|
+ console.log(this.checkDataRoomId)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getLeftData() {
|
|
|
+ this.$api.get('/merchant/hotel/room/state/getHouseCategoryData/1711268640588517378').then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.data.code == 0) {
|
|
|
+ // for (let i; i < res.data.data.length; i++) {
|
|
|
+ // res.data.data[i].open = true;
|
|
|
+ // }
|
|
|
+ for (let i in res.data.data) {
|
|
|
+ let F = i.split('-')[0];
|
|
|
+ if (this.indexArr.indexOf(F) < 0) {
|
|
|
+ this.indexArr.push(F);
|
|
|
+ this.opens.push(true)
|
|
|
+ } else {
|
|
|
+ this.indexArr.push('');
|
|
|
+ this.opens.push(true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.leftData = res.data.data;
|
|
|
+ console.log(this.leftData)
|
|
|
+ console.log(this.indexArr)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getData() {
|
|
|
+ this.$api.get('/merchant/hotel/room/state/getDateRoomList', {
|
|
|
+ homestayId: '1711268640588517378',
|
|
|
+ nowDate: '',
|
|
|
+ status: ''
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code == 0) {
|
|
|
+ this.xdata = res.data.data;
|
|
|
+ }
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
- .page{
|
|
|
+ .opration {
|
|
|
+ height: 140rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ z-index: 9;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ text {
|
|
|
+ display: inline-block;
|
|
|
+ width: 160rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ border: 1rpx solid #D1D1D1;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 64rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ background-color: #1372FF;
|
|
|
+ color: #fff;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page {
|
|
|
background: #F3F4F4;
|
|
|
padding-bottom: 40rpx;
|
|
|
box-sizing: border-box;
|
|
|
overflow-y: auto;
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ border: 1rpx solid #E9F0F5;
|
|
|
+ margin-bottom: 30rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ 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;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ &:nth-child(2) {
|
|
|
+ margin: 6rpx 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .floorData {
|
|
|
+
|
|
|
+ .head,
|
|
|
+ .roomType {
|
|
|
+ padding: 0 30rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+
|
|
|
+ .head {
|
|
|
+ &>text {
|
|
|
+ &:first-child {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rightIcon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #1F2425;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .roomType {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table {
|
|
|
+ border: 1rpx solid #E9F0F5;
|
|
|
+ width: auto;
|
|
|
+ min-width: 100%;
|
|
|
+
|
|
|
+ .tr {
|
|
|
+ border-bottom: 1rpx solid #E9F0F5;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .td {
|
|
|
+ position: relative;
|
|
|
+ width: 130rpx;
|
|
|
+ min-width: 130rpx;
|
|
|
+ height: 83rpx;
|
|
|
+ border-right: 1rpx solid #E9F0F5;
|
|
|
+ background-color: #fff;
|
|
|
+ color: #1F2425;
|
|
|
+ font-size: 20rpx;
|
|
|
+
|
|
|
+ .tdP,.cellBox {
|
|
|
+ display: flex;
|
|
|
+ height: 100%;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ //已预订
|
|
|
+ &.s2 {
|
|
|
+ background-color: rgba(29, 202, 104, 0.1);
|
|
|
+ color: rgb(29, 202, 104);
|
|
|
+
|
|
|
+ text {
|
|
|
+ &:first-child {
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+ color: #1F2425;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 已入住
|
|
|
+ &.s3 {
|
|
|
+ color: rgb(19, 114, 255);
|
|
|
+ background-color: rgba(19, 114, 255, 0.1);
|
|
|
+
|
|
|
+ text {
|
|
|
+ &:first-child {
|
|
|
+ margin-bottom: 6rpx;
|
|
|
+ color: #1F2425;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 已退房
|
|
|
+ &.s4 {
|
|
|
+ color: rgb(219, 41, 195);
|
|
|
+ background-color: rgba(219, 41, 195, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ //待确定
|
|
|
+ &.s5 {
|
|
|
+ color: rgb(25, 185, 197);
|
|
|
+ background-color: rgba(25, 185, 197, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ //清洁中
|
|
|
+ &.s6 {
|
|
|
+ color: rgb(237, 86, 86);
|
|
|
+ background-color: rgba(237, 86, 86, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ //暂停使用
|
|
|
+ &.s7 {
|
|
|
+ color: rgb(41, 60, 115);
|
|
|
+ background-color: rgba(41, 60, 115, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ //保留房
|
|
|
+ &.s8 {
|
|
|
+ color: rgb(132, 68, 244);
|
|
|
+ background-color: rgba(132, 68, 244, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .cover {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: #1372FF;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|