boss_app/components/incomeDetail/historicalIncome.vue

<template>
<div>
    <div style="display:flex;justify-content:flex-end;">
        <div @click="show = true" class="calendar">{{`${startTime} ~ ${endTime}`}}</div>
    </div>
    <u-calendar closeOnClickOverlay :minDate="minData" :show="show" mode="range" @close="close" @confirm="confirm"></u-calendar>
    <div class="content-detail">
        <div class="content-detail-top">
            <div>
                <div>
                    总营业额/元
                </div>
                <div>
                    65535元
                </div>
            </div>
            <div>
                <div>
                    实收
                </div>
                <div>
                    60000元
                </div>
            </div>
            <div>
                <div>
                    欠款（预付）/元
                </div>
                <div>
                    500
                </div>
            </div>
        </div>
        <div class="content-detail-bottom">
            <div>
                <div>间夜数</div>
                <div>1234</div>
            </div>
            <div>
                <div>入住率</div>
                <div>58%</div>
            </div>
            <div>
                <div>平均房价/元</div>
                <div>325</div>
            </div>
            <div>
                <div>RevPAR</div>
                <div>216</div>
            </div>
        </div>
    </div>
    <u-subsection style="margin-top:20px;" :list="listWay" mode="subsection" :current="currentWay" @change="WayChange"></u-subsection>
    <u-collapse @change="change" @close="closeColl" @open="open" v-if="currentWay==0 && dataListTime.length>0">
        <u-collapse-item title="" name="Docs guide" v-for="(item, index) in dataListTime" :key="index">
            <b slot="title" class="u-page__item__title__slot-title">{{index+1}} {{item.roomName}} 收款合计{{item.detailList.reduce((pre, cur)=> pre+cur.money,0 )}}元</b>
            <div class="collapse-content" v-for="(sItem, index) in item.detailList" :key="index">
                <div>
                    {{sItem.create_time}}
                </div>
                <div>
                    {{sItem.money}}元/ {{sItem.subject_type_name}} / {{sItem.pay_name}}
                </div>
                <div>
                    收款人：
                </div>
            </div>
        </u-collapse-item>
    </u-collapse>
    <!-- <u-empty v-else mode="data" /> -->
    <u-collapse v-if="currentWay==1 && dataListIncome.length>0">
        <u-collapse-item title="" name="Docs guide" v-for="(item, index) in dataListIncome" :key="index">
            <b slot="title" class="u-page__item__title__slot-title">{{index+1}} {{item.create_time}} 收款合计{{dataListIncome.reduce((pre, cur)=> pre+cur.money,0 )}}元</b>
            <div class="collapse-content" :key="index">
                <!-- <div>
                    {{item.create_time}}
                </div>
                <div>
                    {{item.money}}元/ {{item.room_name}} / {{item.subject_type_name}}
                </div>
                <div>
                    收款人：
                </div> -->
            </div>
        </u-collapse-item>
    </u-collapse>
    <!-- <u-empty v-else mode="data" /> -->
    <!-- <uni-table style="margin-top:20px;" ref="table" :loading="false" border stripe type="" emptyText="暂无更多数据" @selection-change="selectionChange" v-if="currentWay==1">
        <uni-tr>
            <uni-th width="60" align="center">序号</uni-th>
            <uni-th width="60" align="center">时间</uni-th>
            <uni-th width="60" align="center">金额</uni-th>
            <uni-th width="60" align="center">房号</uni-th>
            <uni-th width="60" align="center">费项</uni-th>
            <uni-th width="60" align="center">收款方式</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableListIncome" :key="index">
            <uni-td align="center">{{ index+1 }}</uni-td>
            <uni-td>
                <view class="name">{{ item.create_time }}</view>
            </uni-td>
            <uni-td align="center">{{ item.money }}</uni-td>
            <uni-td align="center">{{ item.room_name }}</uni-td>
            <uni-td align="center">{{ item.subject_type_name }}</uni-td>
            <uni-td align="center">{{ item.pay_name }}</uni-td>
        </uni-tr>
    </uni-table> -->
</div>
</template>

<script>
import {
    getRoomIncomeList,
    getTimeIncomeList,
    getPayMethodIncomeList,
    getMatterExpenditureList,
    getTimeExpenditureList,
    getPayMethodExpenditureList,
} from '../../utils/incomeDetail'
import { mapState } from 'vuex'


export default {
    data() {
        return {
            listWay: ['按房间', '按时间', '按收款方式'],
            currentWay: 0,
            dataListTime: [],
            dataListIncome: [],
            tableListIncome: [],
            show: false,
            startTime: (new Date().toLocaleDateString()).replace(/\//g, '-'),
            endTime: (new Date(new Date().getTime() + 24 * 60 * 60 * 1000).toLocaleDateString()).replace(/\//g, '-'),
            minData: (new Date(new Date().getTime() - 24 * 60 * 60 * 1000 * 30).toLocaleDateString()).replace(/\//g, '-'),
        }
    },
    computed:{
        ...mapState(['hotelId'])
    },
    watch:{
        hotelId(newVal, oldVal){
            if (newVal!=oldVal) {
                this.getData()
            }
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        getData() {
            if (this.currentWay == 0) {
                getRoomIncomeList({
                    startTime: this.startTime,
                    endTime: this.endTime,
                }).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.dataListTime = res.result
                    }
                })
            }
            if (this.currentWay == 1) {
                getTimeIncomeList({
                    startTime: this.startTime,
                    endTime: this.endTime,
                }).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.dataListIncome = res.result
                    }
                })
                
            }

        },
        WayChange(e) {
            this.currentWay = e
            this.getData()
        },
        /**
         * 日期选择确认
         */
        confirm(e) {
            this.show = false
            this.timeList = e
            this.startTime = e[0].replace(/\//g, '-')
            this.endTime = e[e.length - 1].replace(/\//g, '-')
            this.getData()
        },

        /**
         * 日期选择取消
         */
        close() {
            this.show = false
        },
        change(){

        },
        closeColl(){

        },
        open(){
            
        }
    }
}
</script>

<style lang="scss" scoped>
.calendar {
    border: 1px solid;
    padding: 5px 10px;
    border-radius: 5px;
    color: #409EFF;
    font-size: 12px;
    // min-width: 30%;
    margin-left: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.content-detail {
    background: #409EFF;
    padding: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 10px #000;
    color: #fff;
    height: 130px;
    justify-content: space-between;

    .content-detail-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;

        div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex: 1;
        }
    }

    .content-detail-bottom {
        display: flex;
        justify-content: space-between;

        div {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex: 1;
            font-size: 16px;
        }
    }
}

.collapse-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}
</style>