GambleAdmin/src/views/studio/index.vue

<template>
<div class="app-container calendar-list-container">
  <div class="app-container" v-show="visible.firstLayer">
    <div class="app-container">
      <el-date-picker
        v-model="date"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="開始日期"
        end-placeholder="结束日期"
        align="right">
      </el-date-picker>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜尋</el-button>
    </div>
    <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
      style="width: 100%">
      <el-table-column label="工作室上繳金額" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.all}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="工作室實收維護費" >
        <template slot-scope="scope">
          <span>{{scope.row.maintenanceFee}}</span>
        </template>
      </el-table-column>
    </el-table>

  </div>
  <router-view :bucket="bucket"></router-view>
</div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex'
import { fetchStudiosDetail } from '@/api/studio'
import waves from '@/directive/waves' // 水波纹指令
import moment from 'moment-timezone'
import { Decimal } from 'decimal.js';

export default {
  directives: {
    waves
  },
  data() {
    return {
      list: [],
      listLoading: true,
      bucket: '',
      listQuery: {
        // startAt: moment().subtract(1, 'weeks').day(7).hour(16).minute(0).second(0),
        // endAt: moment().day(7).hour(11).minute(59).second(59)
      },
      temp: {},
      pickerOptions: {
        shortcuts: [{
          text: '本週',
          onClick(picker) {
            const end = moment().startOf('isoweek').day(7).hour(11).minute(59).second(59)
            const start = moment().startOf('isoweek').subtract(1, 'weeks').day(7).hour(16).minute(0).second(0)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '上週',
          onClick(picker) {
            const end = moment().startOf('isoweek').subtract(1, 'weeks').day(7).hour(11).minute(59).second(59)
            const start = moment().startOf('isoweek').subtract(2, 'weeks').day(7).hour(16).minute(0).second(0)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      date: null
    }
  },
  created() {
    this.getList()
    this.SetVisible(1)
  },
  computed: {
    ...mapGetters([
      'visible'
    ])
  },
  methods: {
    ...mapActions([
      'SetVisible'
    ]),
    getList() {
      this.listLoading = true
      fetchStudiosDetail(this.listQuery).then(response => {
        console.log('eee', response.data)
        let data = {
          bookies: {},
          members: {}
        }
        // console.log('ddd', data)
        if(response.data.length !== 0){
          response.data.map((item)=>{
              if(item.isBookie){
                  data.bookies.serviceFees = new Decimal(item.serviceFees)
                  data.bookies.count = new Decimal(item.count)
              }else{
                  data.members.serviceFees = new Decimal(item.serviceFees)
                  data.members.count = new Decimal(item.count)
              }
          })
          this.list.push({
          all: data.bookies.serviceFees.plus(data.members.serviceFees).minus(data.bookies.count.times(500)).times(0.2).valueOf(),
          // all: (data.bookies.serviceFees - (data.bookies.count * 500) + data.members.serviceFees) * 0.2,
          maintenanceFee: data.bookies.count.times(500).valueOf()
          })
        }else{
          this.list = [];
        }

        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      if (this.date) {
        this.listQuery.startAt = moment.utc(this.date[0]).format()
        this.listQuery.endAt = moment.utc(this.date[1]).format()
      } else {
        this.listQuery.startAt = null
        this.listQuery.endAt = null
      }
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    moment(time) {
      return moment(time).tz('Asia/Taipei').format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>