123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- <template>
- <div class="main">
- <div class="search_bottom_tab">
- <div
- class="tab_list"
- v-for="(item, index) in tabs"
- @click="toggle(index + 1)"
- :class="activeIndex == index + 1 ? 'active' : ''"
- :key="index"
- >
- {{ item.label }}{{ item.value }}元
- </div>
- </div>
- <zz-table
- :cols="activeIndex == 1 ? cols : statusCols"
- :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: 'createDate'
- },
- {
- label: '充值方式',
- prop: 'paymentMethod',
- format(val) {
- if (val == '1') {
- return '微信';
- } else if (val == '2') {
- return '支付宝';
- } else if (val == '3') {
- return '现金';
- } else if (val == '4') {
- return '预存';
- } else if (val == '5') {
- return '其他';
- }
- }
- },
- {
- label: '充值人姓名',
- prop: 'userName'
- },
- {
- label: '手机号',
- prop: 'phone'
- },
- {
- label: '充值金额(元)',
- prop: 'amount'
- },
- {
- label: '备注',
- prop: 'remark'
- }
- ],
- statusCols: [
- {
- label: '社区名称',
- prop: 'communityName'
- },
- {
- label: '房间',
- prop: 'assets'
- },
- {
- label: '扣费时间',
- prop: 'createDate'
- },
- {
- label: '上期读数',
- prop: 'previousReading'
- },
- {
- label: '本期读数',
- prop: 'currentReading'
- },
- {
- label: '用电量(度)',
- prop: 'volume'
- },
- {
- label: '扣费金额(元)',
- prop: 'amount'
- }
- ],
- tabs: [
- {
- label: '充值金额:',
- value: '0'
- },
- {
- label: '扣费金额:',
- value: '0'
- }
- ],
- activeIndex: 1,
- mixins_post: 'post'
- };
- },
- created() {
- this.mixins_dataUrl = '/sc-charge/payment/record/page';
- this.mixins_query.accountType = 3;
- this.mixins_query.paymentType = 1;
- Object.assign(this.mixins_query, this.$parent.mixins_query);
- this.getSun(1);
- this.getSun(2);
- this.mixins_search();
- },
- mounted() {},
- methods: {
- toggle(index) {
- this.activeIndex = index;
- this.mixins_query.paymentType = index;
- this.mixins_search();
- },
- getSun(type) {
- this.$http
- .post('/sc-charge/payment/record/sum/amount', { accountType: 3, paymentType: type })
- .then(({ data, status, msg }) => {
- if (status == 0) {
- if (type == 1) {
- this.tabs[0].value = data;
- } else if (type == 2) {
- this.tabs[1].value = data;
- }
- } else {
- this.$message.error(msg);
- }
- })
- .catch(() => {});
- },
- getParent(query) {
- Object.assign(this.mixins_query, query);
- this.mixins_search();
- },
- exportExcel() {
- this.__exportExcel('/sc-charge/payment/record/export/excel', this.mixins_query);
- }
- }
- };
- </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;
- color: #424656;
- &:not(:last-child) {
- margin-right: 40px;
- }
- &.active {
- color: $mainTextColor;
- border-color: $mainTextColor;
- }
- }
- }
- </style>
|