CZC/operationSupport/src/views/payService/RechargeRecord.vue

<template>
  <div class="main">
    <div class="search">
      <el-input
        clearable
        placeholder="输入用户名字/手机号码"
        class="search-input"
        v-trim
        v-model.trim="mixins_query.likeName"
      ></el-input>
      <el-select
        class="width65"
        placeholder="充值方式"
        v-model="mixins_query.paymentMethod"
        clearable
      >
        <el-option
          label="微信"
          :value="7"
        ></el-option>
        <el-option
          label="支付宝"
          :value="2"
        ></el-option>
        <el-option
          label="现金"
          :value="3"
        ></el-option>
        <el-option
          label="预存"
          :value="4"
        ></el-option>
        <el-option
          label="其他"
          :value="5"
        ></el-option>
      </el-select>
      <el-date-picker
        v-model="times"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="至"
        start-placeholder="选择开始日期"
        end-placeholder="选择结束日期"
        @change="effectiveDateToggle"
      ></el-date-picker>
      <el-button
        type="primary"
        class="search-btn"
        @click="mixins_search"
        icon="el-icon-search"
      >查询 </el-button>

      <div class="search-icon">
        <el-tooltip
          class="item"
          effect="light"
          placement="bottom"
          content="返回"
        >
          <i
            class="zoniot_font zoniot-icon-fanhui"
            @click="close()"
          ></i>
        </el-tooltip>
      </div>
    </div>
    <div class="table-top">
      <div class="name">
        {{ name }} <span class="totle">充值总金额：{{ balance || '-' }} 元</span>
      </div>
    </div>
    <div class="roles-wrap">
      <zz-table
        :cols="cols"
        :settings="{ showIndex: true, stripe: true }"
        :loading="mixins_onQuery"
        :data="mixins_list"
        :pageset="mixins_pageset"
        @page-change="pageChange"
      >
      </zz-table>
    </div>
  </div>
</template>

<script>
import list from '@utils/list.js';
export default {
  mixins: [list],
  props: ['params'],
  name: 'RechargeRecord',
  data () {
    return {
      cols: [
        {
          label: '充值时间',
          prop: 'createDate'
        },
        {
          label: '充值人姓名',
          prop: 'userName'
        },
        {
          label: '手机号',
          prop: 'phone'
        },
        {
          label: '充值方式',
          prop: 'paymentMethod',
          format (val) {
            if (val == '7') {
              return '微信';
            } else if (val == '2') {
              return '支付宝';
            } else if (val == '3') {
              return '现金';
            } else if (val == '4') {
              return '预存';
            } else if (val == '5') {
              return '其他';
            }
          }
        },
        {
          label: '充值金额(元)',
          prop: 'amount'
        },
        {
          label: '水费余额(元)',
          prop: 'balance'
        },
        {
          label: '备注',
          prop: 'remark'
        }
      ],
      mixins_post: 'post',
      publicData: {},
      times: '',
      balance: '',
      name: ''
    };
  },
  created () {
    this.mixins_dataUrl = '/czc-charge/payment/record/page';
    if (this.$route.query || this.params) {
      const { accountType, name, paymentType, id } = this.params || this.$route.query;
      let typeName = '水';
      if (accountType == 1) {
        typeName = '物业';
      } else if (accountType == 2) {
        typeName = '水';
      } else if (accountType == 3) {
        typeName = '电';
      }

      this.cols[5].label = typeName + '费余额(元)';
      this.name = name;
      this.publicData = {
        accountType: accountType,
        paymentType: paymentType,
        houseId: id
      };
      this.mixins_query = this.publicData;
      this.getSun();
      this.mixins_search();
    }
  },
  mounted () { },
  methods: {
    close () {
      this.$parent.viewActive = 'index';

      // let activeRout = this.$route;
      // let tagsList = this.$store.getters['getTagsList'];
      // tagsList.forEach((item, index) => {
      //     if (item.title == activeRout.meta.title || item.path == activeRout.path) {
      //         tagsList.splice(index, 1);
      //         history.go(-1);
      //         return true;
      //     }
      // });
    },
    getSun () {
      this.$http
        .post('/czc-charge/payment/record/sum/amount', this.publicData)
        .then(({ data, status, msg }) => {
          if (status == 0) {
            this.balance = data;
          } else {
            this.$message.error(msg);
          }
        })
        .catch(() => { });
    },
    effectiveDateToggle (va) {
      let arr = va;
      if (!arr) {
        arr = ['', ''];
      }
      this.mixins_query.startTime = arr[0] + ' 00:00:00';
      this.mixins_query.endTime = arr[1] + ' 23:59:59';
    }
  }
};
</script>
<style scoped lang='scss'>
@import '@assets/css/public-style.scss';
.table-top {
    width: 1660px;
    height: 60px;
    line-height: 60px;
    background: #ffffff;
    font-size: 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    padding-left: 20px;
    color: #424656;
    .totle {
        font-size: 12px;
        margin-left: 40px;
    }
}
</style>