share-fun-web/src/views/statistics/downloadImage/index.vue

<template>
  <div class="">
    <div class="m-10 bg-w p-20 br-10">
      <div class="f-sa-s">
        <div class="f-fs-c f-col">
          <div style="font-size: 16px;">总下载量</div>
          <div class="mt-4" style="font-weight: bold; font-size: 18px;">
            {{ statistics.all }}
          </div>
        </div>
        <div class="f-fs-c f-col">
          <div style="font-size: 16px;">月下载量</div>
          <div class="mt-4" style="font-weight: bold; font-size: 18px;">
            {{ statistics.month }}
          </div>
        </div>
        <div class="f-fs-c f-col">
          <div style="font-size: 16px;">周下载量</div>
          <div class="mt-4" style="font-weight: bold; font-size: 18px;">
            {{ statistics.week }}
          </div>
        </div>
      </div>
      <div class="f-sa-s mt-20">
        <div class="f-fs-c f-col">
          <div style="font-size: 16px;">总下载金额</div>
          <div class="mt-4" style="font-weight: bold; font-size: 18px;">
            {{ statistics.sumPaidPrice }}
          </div>
        </div>
        <div class="f-fs-c f-col">
          <div style="font-size: 16px;">总下载积分</div>
          <div class="mt-4" style="font-weight: bold; font-size: 18px;">
            {{ statistics.sumPoints }}
          </div>
        </div>
        <div class="f-fs-c f-col">
          <div style="font-size: 16px;">&nbsp;</div>
          <div class="mt-4" style="font-weight: bold; font-size: 18px;">
            &nbsp;
          </div>
        </div>
      </div>
    </div>

    <toolbar @on-filter="filterData" @on-reset="filterData" />

    <base-table
      class="m-10 bg-w p-20 br-10"
      :columns="columns"
      :items="items"
      :pagination="pagination"
      :page-change="pageChange"
    />
  </div>
</template>

<script>
import toolbar from './toolbar';
import mxFilterList from '@/mixins/filterList';
import { getDownloadPage, getDownloadCount } from '@/api/statistics';

export default {
  name: 'DownloadImage',

  components: { toolbar },

  mixins: [
    mxFilterList({
      fetchList: getDownloadPage // 在下方data再声明一个 fetchList: iGetList 同等效果
    })
  ],

  data() {
    return {
      columns: [
        {
          key: 'orderId',
          name: '订单编号',
          width: '160'
        },
        {
          key: 'kindergartenName',
          name: '幼儿园',
        },
        {
          key: 'activityName',
          name: '活动',
        },
        {
          key: 'listPreview',
          name: '图片',
          width: '180',
          render: (h, { row }) =>
            h('img', {
              style: {
                width: '160px',
                height: '90px'
              },
              class: 'pre-img',
              attrs: {
                src: row.listPreview
              },
              on: {
                click: () =>
                  this.$AdvanceViewImageModal({
                    items: [{ src: row.listPreview }]
                  })
              }
            })
        },
        {
          key: 'tempType',
          name: '照片类型',
          render: (h, { row }) => {
            if (row.isHdLogoPhoto) {
              return h('span', '高清图');
            }
            if (row.isOriginPhoto) {
              return h('span', '原图');
            }
          }
        },
        {
          key: 'nickname',
          name: '下载用户',
        },
        {
          key: 'payChannels',
          name: '支付渠道',
          width: this.$col.m
        },
        {
          key: 'payablePrice',
          name: '花费金额/积分(还没折算)',
          width: this.$col.b,
          render: (h,{row}) => h('span',`￥${row.payablePrice}`)
        },
        {
          key: 'photoTime',
          name: '拍摄时间',
          width: this.$col.b
        },
        {
          key: 'createAt',
          name: '下载时间',
          width: this.$col.b
        }
      ],
      statistics: {}
    };
  },

  methods:{
    async pageChange(page) {
      this.pagination.page = page;
      const inParams = {
        ...this.filter,
        ...this.internalFilterObj,
        page: this.pagination.page,
        size: this.pagination.pageSize
      };

      const { data, msg } = await this.apiList(inParams, {
        limit: this.pagination.pageSize,
        start: this.pagination.page
      });

      const res2 = await getDownloadCount(inParams)
      this.statistics = res2.data
      if ('data' in data) {
        const items = data.data;
        if (items.length === 0 && this.pagination.page > 1) {
          this.pageChange(1);
        } else {
          this.items = items;
          this.pagination.total = data.total;
        }
        this.loadCallBack(data);
      }
    }
  }
};
</script>

<style type="scss" scoped></style>