Project-Annex/operationSupport/src/views/payService/expenseReport/Water.vue

<template>
    <div class="main">
        <div class="search_bottom_tab">
            <div class="tab_list" v-for="(item, index) in tabs" :class="activeIndex == index ? 'active' : ''" :key="index">
                充值金额：50000元
                {{ item.label }}{{ item.value }}
            </div>
            <!-- <div class="tab_list">充值金额：50000元</div> -->
        </div>
        <zz-table
            :cols="cols"
            :settings="{ showIndex: true, stripe: true }"
            :loading="mixins_onQuery"
            :data="mixins_list"
            :pageset="mixins_pageset"
            @page-change="pageChange"
        >
        </zz-table>
    </div>
</template>

<script>
import list from '@utils/list.js';
export default {
    mixins: [list],
    data() {
        return {
            cols: [
                {
                    label: '社区名称',
                    prop: 'communityName'
                },
                {
                    label: '房间',
                    prop: 'assets'
                },
                {
                    label: '业主',
                    prop: 'residentName'
                },
                {
                    label: '业主手机号',
                    prop: 'residentPhone'
                },
                {
                    label: '水费余额(元)',
                    prop: 'balance'
                },
                {
                    label: '最后扣费时间',
                    prop: 'lastPayTime'
                }
            ],
            tabs: [
                {
                    label: '充值金额',
                    value: '0'
                },
                {
                    label: '扣费金额',
                    value: '0'
                }
            ],
            activeIndex: 1,
            mixins_post: 'post'
        };
    },
    created() {
        this.mixins_dataUrl = '/sc-charge/house/account/page';
        this.mixins_query = {
            accountType: 2
        };
        // this.mixins_search();
    },
    mounted() {},
    methods: {
        getParent(query) {
            Object.assign(this.mixins_query, query);
            this.mixins_search();
        }
    }
};
</script>
<style scoped lang='scss'>
@import '@assets/css/public-style.scss';
.search_bottom_tab {
    height: 60px;
    line-height: 60px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 20px;
    padding: 0 20px;
    box-sizing: border-box;
    .tab_list {
        display: inline-block;
        border-bottom: 1px solid transparent;
        cursor: pointer;
        &:not(:last-child) {
            margin-right: 40px;
        }
        &.active {
            color: $mainTextColor;
            border-color: $mainTextColor;
        }
    }
}
</style>