CustomerRecharge.vue 2.46 KB
<template>
  <div class="Dashboard-DataCard CustomerRecharge">
    <div class="Dashboard-SearchBar">
      <search-item label="运营商">
        <operator-select
          :accessType="1"
          :value="filters.operateId"
          @input="val => getRechargeOrderList({operateId: val})"
        />
      </search-item>
      <el-radio-group
        class="Dashboard-Radio"
        :value="filters.timeType"
        @input="val => getRechargeOrderList({timeType: val})"
      >
        <el-radio
          class="Dashboard-Radio-item"
          :label="0"
        >本日</el-radio>
        <el-radio
          class="Dashboard-Radio-item"
          :label="1"
        >本月</el-radio>
        <el-radio
          class="Dashboard-Radio-item"
          :label="2"
        >本年</el-radio>
      </el-radio-group>
    </div>
    <div class="Dashboard-title">充值视图
      <div class="CustomerRechargeChart-tip">
        <span
          class="CustomerRecharge-tooltip"
          style="background-color:#4e82fb;"
        ></span> 总充值:
        <span style="color:#f00;">{{ rechargeCount && rechargeCount.rechargeMoney ? (rechargeCount.rechargeMoney).toFixed(2) : '0.00' }}</span>
        <span
          class="CustomerRecharge-tooltip"
          style="background-color:#26c9a8;"
        ></span> 充值人数:
        <span style="color:#f00;">{{ rechargeCount && rechargeCount.rechargeMen ? rechargeCount.rechargeMen : 0 }}</span>
      </div>
    </div>
    <Chart :data="rechargeList" />
  </div>
</template>

<script>
import Chart from './chart';
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'CustomerRecharge',
  components: {
    Chart,
  },
  computed: {
    ...mapGetters('Dashboard/customerRecharge', [
      'rechargeList',
      'rechargeCount',
      'filters',
    ]),
  },
  created() {
    this.initData();
  },
  methods: {
    ...mapActions('Dashboard/customerRecharge', [
      'updateFilters',
      'getRechargeOrderList',
    ]),
    initData() {
      this.getRechargeOrderList();
    },
  },
};
</script>

<style lang="scss">
.CustomerRecharge {
  .Dashboard-title {
    display: flex;
    align-items: center;
  }
  .CustomerRechargeChart-tip {
    position: absolute;
    right: 0;
    color: #333;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
    .CustomerRecharge-tooltip {
      display: inline-block;
      width: 10px;
      height: 5px;
      margin-bottom: 2px;
      margin-left: 10px;
    }
  }
}
</style>