CustomerConsumption.vue 2.42 KB
<template>
  <div class="Dashboard-DataCard CustomerConsumption">
    <div class="Dashboard-SearchBar">
      <search-item label="运营商">
        <operator-select
          :accessType="1"
          :value="filters.operatorId"
          @input="val => getConsumeOrderList({operatorId: val})"
        />
      </search-item>
      <search-item label="区域">
        <area-select
          :value="filters.areaId"
          @input="val => getConsumeOrderList({areaId: val})"
          type="user"
        />
      </search-item>
      <el-radio-group
        class="Dashboard-Radio"
        :value="filters.timeType"
        @input="val => getConsumeOrderList({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="CustomerConsumptionChart-tip"
        style="color:#333;font-size:14px;text-align: center;"
      >
        合计消费总金额:<span
          class="CustomerConsumption-total"
          style="color:#f00;"
        >0.00元</span>
        合计消费人数:<span
          class="CustomerConsumption-count"
          style="color:#f00;"
        >0人</span>
      </div>
    </div>
    <Chart
      :data="consumeList"
      :consumeCount="consumeCount"
    />
  </div>
</template>

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

export default {
  name: 'CustomerConsumption',
  components: {
    Chart,
  },
  computed: {
    ...mapGetters('Dashboard/customerConsumption', [
      'consumeList',
      'consumeCount',
      'filters',
    ]),
  },
  created() {
    this.initData();
  },
  methods: {
    ...mapActions('Dashboard/customerConsumption', [
      'updateFilters',
      'getConsumeOrderList',
    ]),
    initData() {
      this.getConsumeOrderList();
    },
  },
};
</script>

<style lang="scss">
.CustomerConsumption {
  .Dashboard-title {
    display: flex;
    align-items: center;
  }
  .CustomerConsumptionChart-tip {
    position: absolute;
    right: 0;
    top: 50px;
    margin-left: 10px;
    color: #333;
    font-size: 14px;
    font-weight: normal;
    text-align: center;
  }
}
</style>