renli-pc/src/pages/statistics/memberRanking/memberRanking.vue

<template>
  <div>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="充值" name="充值">
        <div class="memberRanking-main-title">
          充值排行榜
        </div>
        <el-table :data="recList" :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)',color:'#eeeeee'}" max-height="600">
          <el-table-column align="center" prop="memberName" label="会员名字"></el-table-column>
          <el-table-column align="center" prop="memberRechargeMoney" label="充值金额"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="疗程" name="疗程">
        <div class="memberRanking-main-title">
          疗程排行榜
        </div>
        <el-table :data="courseList" :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)',color:'#eeeeee'}" max-height="600">
          <el-table-column align="center" prop="memberName" label="会员名字"></el-table-column>
          <el-table-column align="center" prop="memberCourseMoney" label="疗程金额"></el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="服务" name="服务">
        <div class="memberRanking-main-title">
          <div class="block">
            <span class="demonstration">服务排行榜(月)</span>
            <el-date-picker style="width: 180px;" v-model="month" type="month" :picker-options="pickerOptions" format="yyyy-MM" placeholder="选择月" @change="changeMonth">
            </el-date-picker>
          </div>
        </div>
        <el-table :data="cashList" :header-cell-style="{background: 'linear-gradient(#6cb3ff, #1873d4)',color:'#eeeeee'}" max-height="600">
          <el-table-column align="center" prop="memberName" label="会员名字"></el-table-column>
          <el-table-column align="center" prop="cashStatisticMoney" label="服务金额"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import {
  storeStatisticMemberList,
  memberRecharge,
  memberCourse,
} from "../../../api/statistics.js";
export default {
  data() {
    return {
      recList: [],
      courseList: [],
      cashList: [],
      queryForm: [],
      dateStr: null,
      activeName: "充值",
      month: null,
      pickerOptions: {
        //大于当前月分的日期不可选
        disabledDate: (time) => {
          var date = new Date();
          var year = date.getFullYear();
          var month = date.getMonth() + 1;
          if (month >= 1 && month <= 9) {
            month = "0" + month;
          }
          var currentdate = year.toString() + month.toString();

          var timeyear = time.getFullYear();
          var timemonth = time.getMonth() + 1;
          if (timemonth >= 1 && timemonth <= 9) {
            timemonth = "0" + timemonth;
          }
          var timedate = timeyear.toString() + timemonth.toString();
          return currentdate < timedate;
        },
      },
    };
  },
  methods: {
    change(res) {
      this.queryForm.startDates = res[0];
      this.queryForm.stopDates = res[1];
    },
    changeMonth(res) {
      if(!res){
        this.dateStr = this.formatTime(new Date(), "YYYY-MM");
        this.storeStatisticMemberList();
        return
      }
      this.dateStr = this.formatTime(res, "YYYY-MM");
      this.storeStatisticMemberList();
    },
    handleClick() {
      this.storeStatisticMemberList();
    },
    storeStatisticMemberList() {
      let params = {
        dateStr:this.dateStr
      }
      memberRecharge().then((res) => {
        console.log(res);
        if (res.code == "000000") {
          this.recList = res.rows;
        } else {
          this.$message.warning({
            message: "查询数据失败",
          });
        }
      });
      memberCourse().then((res) => {
        console.log(res);
        if (res.code == "000000") {
          this.courseList = res.rows;
        } else {
          this.$message.warning({
            message: "查询数据失败",
          });
        }
      });
      storeStatisticMemberList(params).then((res) => {
        if (res.code == "000000") {
          this.cashList = res.rows;
        } else {
          this.$message.warning({
            message: "查询数据失败",
          });
        }
      });
    },
  },
  created() {
    this.dateStr = this.formatTime(new Date(), "YYYY-MM");
    this.storeStatisticMemberList();
    this.month = this.formatTime(new Date(), "YYYY-MM");
  },
};
</script>

<style>
.memberRanking-main {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.memberRanking-main-table {
  width: 300px;
  margin: 20px;
}

.memberRanking-main-title {
  width: 100%;
  text-align: center;
  font-weight: 700;
  padding-bottom: 20px;
  height: 40px;
  line-height: 40px;
}
</style>