boss_app/pages/roomOrders/roomOrders.vue

<template>
<view>
    <Header @change="switchChange">
        <template #search>
            <u--input v-model="keyWord" @change="searchWord" placeholder="房间号/姓名/手机号" border="surround" shape="circle" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" fontSize="12px" :customStyle="{border:'1px solid #e2e2e2',padding:'0 10px',margin:'0 10px',borderRadius:'20px'}">
            </u--input>
        </template>
        <template #section>
            <u-subsection :list="list" mode="subsection" :current="current" @change="sectionChange"></u-subsection>
        </template>
    </Header>
    <template>
        <div class="card-day">
            <div class="card-day-top">
                <div style="font-size: 16px;color:#409EFF;font-weight: bold;">今日{{list[current]}}概览</div>
                <div style="color:#409EFF;font-size:14px">
                    <!-- 合计 <span>{{roomTypeCount.reduce((pre, cur)=> pre+cur.count,0 )}}</span> 间 -->
                </div>
            </div>
            <div class="card-day-btm">
                <div v-for="(item, index) in cesRoomLayoutList" :key="index">
                    <div>
                        {{item.name}} {{filterRoomType(item.id)}}间
                    </div>
                </div>
            </div>
        </div>

        <div class="day-detail">
            <div class="day-detail-title">
                今日{{list[current]}}概览
            </div>
            <div v-for="item in roomList" :key="item.id">
                <template v-if="item.rooms.length>0">
                    <div style="color:rgb(255, 141, 26);text-align:right;border-bottom:1px solid #00000030;line-height:30px">{{item.name}}：{{item.rooms.length}}间</div>
                    <div @click="changeList(sItem.roomInfo.id)" v-for="(sItem, index) in item.rooms" :key="sItem.id" :class="{'list-active':sItem.roomInfo.id == curId}" :style="{height:'60px',borderBottom:index!=item.rooms.length-1?'1px solid #00000030':'',}">
                        <div style="margin-top:10px">
                            <span style="font-size: 16px; font-weight: bold;margin-right:10px;">{{sItem.roomInfo.name}}</span> <span style="font-size: 16px; font-weight: bold;">{{sItem.layout.name }}</span> <span style="margin-left:10px;">{{''}}</span>
                        </div>
                        <div class="day-detail-list" v-if="sItem.livingData.livingOrder">
                            <div style="width:35%;">{{sItem.livingData.livingCustomers.customerName}}/ {{sItem.livingData.livingCustomers.phone}}</div>
                            <div>{{sItem.livingData.livingOrder.dayCount}}天/{{sItem.livingData.livingOrder.arrivalTime.substr(5,5)}}</div>
                            <div>￥{{sItem.layout.marketPrice}}/付{{sItem.livingData.livingOrder.shouKuan}}/余{{sItem.livingData.livingOrder.shouKuan - sItem.livingData.livingOrder.xiaoFei}}</div>
                        </div>
                    </div>
                </template>

            </div>
        </div>
    </template>
    <div class="btm-subsection">
        <u-subsection v-if="current == 0" :list="list1" mode="subsection" :current="current1" @change="bottomChange"></u-subsection>
        <div v-if="current == 1" class="btm-subsection-btn">
            <div>续租缴费</div>
            <div style="background:#409EFF;color:#fff;">退房结账</div>
        </div>
    </div>
    <div style="width:100vw;height: 30px;"></div>
</view>
</template>

<script>
import Header from '@/components/header.vue'
import {
    getHotelRoomList,
    getCustomerSource,
    getRoomType
} from '../../utils/customerOrder'
export default {
    components: {
        Header
    },

    data() {
        return {
            value: 0,
            range: [{
                    value: 0,
                    text: "全部"
                },
                {
                    value: 1,
                    text: "沙县大酒店"
                },
                {
                    value: 2,
                    text: "游泳"
                },
            ],
            roomStatus: 3,
            list: ['全部', '预离', '续住', '欠费', '钟点', '散客', '团队', '联房'],
            list1: ['查看详情', '缴费', '退房结账'],
            current: 0,
            current1: 0,
            //酒店房子列表
            roomList: [],
            roomListCopy: [],
            //房型数量
            roomTypeCount: [],
            /**
             * 用户来源列表
             */
            customerSourceList: [],
            /**
             * 方块背景颜色列表
             */
            roomStatusColorList: [],
            /**
             * 房型列表
             */
            cesRoomLayoutList: [],
            keyWord: '',
            curId: null,
        };
    },
    onLoad(options) {
        console.log(options);
        if (options.current) {
            // this.sectionChange(options.current)
            this.current = options.current

        }
        this.getData()
    },
    filters: {},
    methods: {
        getData() {
            getHotelRoomList().then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.roomListCopy = res.result
                    this.filter()
                }
            })
            getCustomerSource().then(res => {
                console.log(res);
                if (res.code === 200 && res.result.records.length > 0) {
                    this.customerSourceList = res.result.records
                } else {
                    this.customerSourceList = []
                }
            })
            getRoomType().then(res => {
                console.log(res);
                if (res.code === 200 && res.result.records.length > 0) {
                    this.cesRoomLayoutList = res.result.records
                    this.current2 = res.result.records[0].id
                } else {
                    this.cesRoomLayoutList = []
                }
            })
        },

        changeList(idx){
            console.log(idx);
            this.curId = idx
        },

        searchWord(){
            this.filter()
        },

        /**筛选符合条件的房子列表
         * @param {Array} type 房子状态数组
         */
        filter(type = [3, 4]) {
            // console.log(type);
            let arr = []
            // arr = this.roomListCopy.filter(item => {
            //     return item.rooms.filter(ele => {
            //         return type.includes(ele.roomInfo.roomStatus)
            //     })
            // })
            this.roomListCopy.forEach(item => {
                item.rooms = item.rooms.filter(ele => {
                    return type.includes(ele.roomInfo.roomStatus)
                })
            })
            arr = JSON.parse(JSON.stringify(this.roomListCopy))
            // console.log(typeof this.keyWord);
            if (this.keyWord) {
                arr.forEach(item => {
                    item.rooms = item.rooms.filter(ele => {
                        return ele.roomInfo.name == this.keyWord ||
                            (ele.livingData && ele.livingData.livingCustomers ?
                                ele.livingData.livingCustomers.customerName == this.keyWord :
                                ele.bookingData && ele.bookingData.bookingCustomer ?
                                ele.bookingData.bookingCustomer.name == this.keyWord :
                                false) ||
                            (ele.livingData && ele.livingData.livingCustomers ?
                                ele.livingData.livingCustomers.phone == this.keyWord :
                                ele.bookingData && ele.bookingData.bookingCustomer ?
                                ele.bookingData.bookingCustomer.phone == this.keyWord :
                                false)
                    })
                })
            }
            // console.log('arrarrarrarr', arr);
            this.roomList = JSON.parse(JSON.stringify(arr))
            // console.log(this.roomList);
            if (this.roomList.length == 0) {
                return
            }
            let nameList = []
            this.roomList.forEach(ele => {
                ele.rooms.forEach(item => {
                    nameList.push(item.layout.name)
                })
            })
            this.roomTypeCount = this.count(nameList)
            // console.log(this.roomTypeCount);
            if (this.current == 1) {
                nameList = []
                this.roomList = this.filterLeave(this.roomList)
            }
            return arr
        },
        /**
         * 根据id计算每种房型的数量
         */
        filterRoomType(id) {
            let arr = JSON.parse(JSON.stringify(this.roomList))
            arr.forEach(item => {
                // console.log(item);
                item.rooms = item.rooms.filter(ele => {
                    return ele.layout.id == id
                })
            })
            let count = 0
            arr.forEach(ele => {
                count += ele.rooms.length
            })
            return count
        },
        /**统计数组中每个字符串出现的次数
         * @param {Array} arr 要统计的数组
         * @returns {Array}
         */
        count(arr) {
            let obj = {}
            let array = []
            arr.forEach(ele => {
                if (obj[ele]) {
                    obj[ele]++
                } else {
                    obj[ele] = 1
                }
            })
            Object.keys(obj).forEach(ele => {
                array.push({
                    name: ele,
                    count: obj[ele]
                })
            })
            return array
        },

        /**
         * 筛选预离状态的房间
         * @param {Array} arr 房间列表
         * @returns {Array}
         */
        filterLeave(arr) {
            if (!arr) {
                return
            }
            let array = JSON.parse(JSON.stringify(arr))
            array.forEach(ele => {
                ele.rooms = ele.rooms.filter(item => {
                    //比较时间
                    return item.livingData.livingOrder.dueOutTime == new Date().toISOString().slice(0, 10);
                })
            })
            return array
        },

        rightClick() {
            console.log('rightClick')
        },
        leftClick() {
            console.log('leftClick')
        },
        change(e) {
            console.log(e)
        },
        // 切换分段器
        sectionChange(index) {
            console.log(index)
            this.current = index
            if (index == 0) {
                this.filter()
            }
            if (index == 1) {
                let arr = this.filter()
                this.roomList = this.filterLeave(arr || [])
                console.log('1111111111111111111', this.roomList);
                if (this.roomList.some(ele => ele.rooms.length == 0) || this.roomList.length == 0) {
                    // debugger
                    this.roomTypeCount = [{
                            name: '高级商务标间',
                            count: 0
                        },
                        {
                            name: '麻将房',
                            count: 0
                        },
                        {
                            name: '零压高级大床房',
                            count: 0
                        },
                        {
                            name: '商务单人房',
                            count: 0
                        },
                        {
                            name: '特惠大床房',
                            count: 0
                        },
                    ]
                    return
                }
                let nameList = []
                this.roomList.forEach(ele => {
                    ele.rooms.forEach(item => {
                        nameList.push(item.layout.name)
                    })
                })
                this.roomTypeCount = this.count(this.roomList)
            }
        },
        bottomChange(index) {
            console.log(index)
            this.current1 = index
        },
        switchChange() {
            // this.$nextTick(() => {
                this.getData()
            // })
        }
    }
}
</script>

<style lang="scss" scoped>
/deep/.uni-select {
    border: none !important;
    text-align: center;
}

page {
    background-color: #f5f5f5;
}

.card-day {
    padding: 10px;
    background: #fff;
    margin-top: 8px;
    border-bottom: #00000030 1px solid;
}

.card-day-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: #00000030 1px solid;
    height: 30px;
}

.card-day-btm {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    gap: 10px;

    // div为偶数时右对齐
    div:nth-child(even) {
        text-align: right;
    }
}

.day-detail {
    background: #fff;
    padding: 10px;
    margin-top: 8px;

    .day-detail-title {
        font-weight: bold;
        font-size: 16px;
        color: #409EFF;
    }
}

.day-detail-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    font-size: 14px;
}

.btm-subsection {
    margin-top: 10px;
}
.list-active {
    background: rgb(228, 240, 253);
}
.btm-subsection-btn{
    display: flex;
    width: 100vw;
    align-items: center;
    background: #fff;
    >div{
        flex: 1;
        text-align: center;
        line-height: 50px;
    }
}
</style>