src/views/account/index.vue

<template>
  <div class="">
    <!--卡片-->
    <el-row :gutter="16" class="">
      <el-col :span="12">
        <el-card class="box-card">
          <el-row :gutter="24">
            <el-col :span="8" style="text-align: center">
              <svg-icon icon-class="recharge" class="svg-icon" style="width: 48px;height: 48px" />
            </el-col>
            <el-col :span="12" :offset="4">
              <el-row :gutter="16"><el-col :span="24">充值账户(元)</el-col></el-row>
              <el-row :gutter="16" class="common-color font-size24" style="margin-top: 4px"><el-col :span="24">{{rechargeBalance|fen2Yuan}}</el-col></el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <el-row :gutter="24">
            <el-col :span="8" style="text-align: center">
              <svg-icon icon-class="give" style="width: 48px;height: 48px" />
            </el-col>
            <el-col :span="12" :offset="4">
              <el-row :gutter="16"><el-col :span="24">赠送账户(元)</el-col></el-row>
              <el-row :gutter="16" class="common-color font-size24" style="margin-top: 4px"><el-col :span="24">{{presentBalance|fen2Yuan}}</el-col></el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!--账户明细 sta-->
    <el-card shadow="always" class="card-second-top margin-top-24">
      <el-tabs :tab-position="tabPosition" >
        <el-tab-pane label="充值记录">
          <el-table
            :data="rechargeTableData"
            style="width: 100%;"
            :show-overflow-tooltip="true">
            <el-table-column
              prop="acctType"
              label="账户类型"
              :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span v-if="scope.row.acctType == 1">账户余额</span>
                <span v-if="scope.row.acctType == 7">充值赠送</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="rechargeFee"
              label="充值金额"
              :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{(scope.row.rechargeFee) |fen2Yuan}} </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="rechargeBalance"
              label="充值后余额">
              <template slot-scope="scope">
                <span>{{(scope.row.rechargeBalance) |fen2Yuan}} </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="rechargeTime"
              label="充值时间"
              :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{(scope.row.rechargeTime) |string2Date(7)}} </span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :page-size="5"
            :pager-count="11"
            layout="prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleSizeChange"
            @prev-click="handleSizeChange"
            @next-click="handleSizeChange">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="支出记录">
          <el-table
            :data="payOutTableData"
            style="width: 100%;"
            :show-overflow-tooltip="true">
            <el-table-column
              prop="acctType"
              label="账户类型"
              :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span v-if="scope.row.acctType == 1">账户余额</span>
                <span v-if="scope.row.acctType == 7">充值赠送</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="tradeFee"
              label="交易金额"
              :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{(scope.row.tradeFee) |fen2Yuan}} </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="tradeBalance"
              label="交易后余额">
              <template slot-scope="scope">
                <span>{{(scope.row.tradeBalance) |fen2Yuan}} </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="tradeDetialType"
              label="交易类型">
              <template slot-scope="scope">
                <span v-if="scope.row.tradeDetialType == 101">停车支付</span>
                <span v-if="scope.row.tradeDetialType == 102">停车预付</span>
                <span v-if="scope.row.tradeDetialType == 103">停车补缴</span>
                <span v-if="scope.row.tradeDetialType == 104">共享车位</span>
                <span v-if="scope.row.tradeDetialType == 201">余额充值</span>
                <span v-if="scope.row.tradeDetialType == 202">押金充值</span>
                <span v-if="scope.row.tradeDetialType == 301">会员卡购买</span>
                <span v-if="scope.row.tradeDetialType == 302">会员卡续费</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="tradeTime"
              label="交易时间"
              :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{(scope.row.tradeTime) |string2Date(7)}} </span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :page-size="5"
            :pager-count="21"
            layout="prev, pager, next"
            :total="total2"
            @size-change="handleSizeChange2"
            @current-change="handleSizeChange2"
            @prev-click="handleSizeChange2"
            @next-click="handleSizeChange2">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
// import { getList } from '@/api/table'
import pagination from '@/components/Pagination/index.vue';
import LoadingBar from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import {getAcctPersonGroupByAcctType,queryCustRechargeFeeStaticMsg,queryAcctPayOutForPage} from '@/api/account';
import {fen2Yuan,string2Date} from '@/filters/index';
export default {
  components:{
    'i-pagination': pagination
  },
  filters: {
  },
  data() {
    return {
      rechargeBalance:0,
      presentBalance:0,
      list: null,
      tabPosition:'top',
      listLoading: true,
      btnLoading:false,
      loading:false,
      rechargeTableData: [
      ],
      payOutTableData: [
      ],
      /** 分页*/
      total: 0,
      currentPage: 1,
      pageSize: 5,
      total2: 0,
      currentPage2: 1,
      pageSize2: 5,
    }
  },
  mounted: function() {
    this.getAcctPersonGroupByAcctType();
    this.queryCustRechargeFeeStaticMsg();
    this.queryAcctPayOutForPage();
  },
  methods: {
    /**
     * 获取查询参数
     */
    getQueryParams: function() {
      let userInfo = this.$store.state.user.userInfo;
      let beginTime = new Date();
      let endTime = new Date();
      beginTime.setFullYear(2017);
      let req = {
        beginTime:beginTime,
        endTime:endTime,
        sysCode:'10003',
        custId:userInfo.custId,
        // custId:'501519113641649119232',//账户支出
        //custId:'501522943145292840960',//账户充值
      }
      return req;
    },
    /**
     * 查询车主账户信息
     */
    getAcctPersonGroupByAcctType: function() {
      let req = this.getQueryParams();
      getAcctPersonGroupByAcctType(req).then(response =>{
        if(response.code=='8888'){
          let data = response.data;
          let rechargeBalance = 0;
          let presentBalance = 0;
          data.forEach(item=>{
            if(item.acctType == 1){
              rechargeBalance += item.acctBalance;
            }
            if(item.acctType == 7){
              presentBalance += item.acctBalance;
            }
          });
          this.rechargeBalance = rechargeBalance;
          this.presentBalance = presentBalance;
        }else{
          console.log(response);
        }
      });
    },
    /**
     * 查询车主充值记录
     */
    queryCustRechargeFeeStaticMsg: function() {
      let req = this.getQueryParams();
      req.baseRequest={
        pageNum:this.currentPage,
        pageSize:this.pageSize,
      },
      queryCustRechargeFeeStaticMsg(req).then(response =>{
        if(response.code=='8888'){
          this.rechargeTableData = response.data.rows;
          this.total = response.data.total;
        }else{
          console.log(response);
        }
      });
    },
    /**
     * 查询车主支出记录
     */
    queryAcctPayOutForPage: function() {
      let req = this.getQueryParams();
      req.baseRequest={
        pageNum:this.currentPage2,
        pageSize:this.pageSize2,
      },
        queryAcctPayOutForPage (req).then(response =>{
          if(response.code=='8888'){
            this.payOutTableData = response.data.rows;
            this.total2 = response.data.total;
          }else{
            console.log(response);
          }
        });
    },
    // 获取子组件页码方法
    handleSizeChange: function(page) {
      console.log(page)
      this.currentPage = page;
      /** 调用表格数据.*/
      this.queryCustRechargeFeeStaticMsg();
    },
    // 获取子组件页码方法
    handleSizeChange2: function(page) {
      console.log(page)
      this.currentPage2 = page;
      /** 调用表格数据.*/
      this.queryAcctPayOutForPage();
    },
  },
}
</script>
<style lang="scss" scoped >
  .serch-wrap{
    background-color: #FFF;
    padding: 15px;
  }
  .el-card__header{
    padding:10px 20px!important;;
  }
</style>