peko-admin-web/src/views/invitationFission/dayDate.vue

<template>
  <div class="outer">
    <!-- 查询条件 -->
    <div class="inquire" style="display: inline-block; margin-right: 20px">
      <div class="block">
        <span class="demonstration">日期</span>
        <el-date-picker
          v-model="time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
    </div>
    <!-- 查询按钮 -->
    <el-button style="margin-top: -8px" type="primary" @click="getData()">查询</el-button>

    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      border
      style="width: 100%; margin-top: 25px"
    >
      <el-table-column prop="date" align="center" label="日期" />
      <el-table-column prop="inviteCount" align="center" label="有邀请的UV" />
      <el-table-column prop="invitedCount" align="center" label="邀请注册的UV" />
      <el-table-column
        prop="invitedCharge30Count"
        align="center"
        label="邀请的用户30天内充值UV"
      />
      <el-table-column
        prop="invitedChargeCount"
        align="center"
        label="邀请的用户累计充值UV"
      />
      <el-table-column
        prop="invitedCharge30Amount"
        align="center"
        label="邀请的用户30天内充值数额"
      />
      <el-table-column
        prop="invitedChargeAmount"
        align="center"
        label="邀请的用户累计充值数额"
      />
      <el-table-column align="center" label="操作" width="300">
        <template v-slot="scope">
          <el-button
            @click="details(scope.row)"
            class="primary"
            type="primary"
            size="default"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="margin-top: 10px"
      class="paginationClass"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
      layout="sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 详情 -->
    <el-dialog v-model="detailsDialog" :title="detailsTitle" width="65%" center>
      <!-- 条件 -->
      <span>用户ID </span>
      <el-input
        style="display: inline-block; width: 200px"
        v-model="detailsUserId"
        placeholder=""
        class="input"
      ></el-input>
      <!-- 查询按钮 -->
      <el-button style="" type="primary" @click="getDataDetailsDialog()">查询</el-button>
      <!-- 内表格 -->
      <el-table
        v-loading="loading"
        :data="tableDataIn"
        border
        style="width: 100%; margin-top: 25px"
      >
        <el-table-column prop="createTime" align="center" label="新增时间" />
        <el-table-column prop="nick" align="center" label="用户昵称" />
        <el-table-column prop="erbanNo" align="center" label="用户ID" />
        <el-table-column prop="inviteCode" align="center" label="填写邀请码" />
        <el-table-column align="center" label="是否补填">
          <template v-slot="scope">
            {{ scope.row.isRepair == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="邀请者">
          <template v-slot="scope">
            昵称：{{ scope.row.inviteNick }} ID：{{ scope.row.inviteErBanNo }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="邀请者的邀请者">
          <template v-slot="scope">
            昵称：{{ scope.row.grandInviteNick }} ID：{{ scope.row.grandInviteErBanNo }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否充值">
          <template v-slot="scope">
            {{ scope.row.isCharge == 1 ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="inviteCharge30Amount"
          align="center"
          label="邀请30天内充值"
        />
        <el-table-column prop="inviteChargeAmount" align="center" label="累计充值" />
        <el-table-column
          prop="inviteGiveAmount"
          align="center"
          label="累计接收代充转增"
        />
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 10px"
        class="paginationClass"
        v-model:current-page="currentPage2"
        v-model:page-size="pageSize2"
        :page-sizes="[10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 999999999]"
        layout="sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
      />
      <!-- 操作 -->
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="exportDate()"> 导出 </el-button>
          <el-button @click="detailsDialog = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {
  userInviteFissionRecordGetDailyPage,
  userInviteFissionRecordGetDailyDetailList,
  userInviteFissionRecordExport,
} from "@/api/invitationFission/invitationFission";
import { dateFormat } from "@/utils/system-helper";
import { ElMessage } from "element-plus";
export default {
  name: "dayDate",
  data() {
    return {
      loading: false,
      time: "",
      // 表格
      tableData: [],
      // 分页
      total: 10, //总页数
      currentPage: 1, //页码
      pageSize: 10, //条数
      // 分页
      total2: 10, //总页数
      currentPage2: 1, //页码
      pageSize2: 10, //条数
      detailsDialog: false, //详情弹窗控制
      detailsUserId: "",
      getDataDetailsDialogVal: null,
      detailsTitle: "xxxx-x-x的邀请数据",
      tableDataIn: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 查询按钮
    getData() {
      this.loading = true;
      let startTime = "";
      let endTime = "";
      if (this.time && this.time.length > 0) {
        startTime = dateFormat(this.time[0], "yyyy-MM-dd hh:mm:ss");
        endTime = dateFormat(this.time[1], "yyyy-MM-dd hh:mm:ss");
      }
      userInviteFissionRecordGetDailyPage({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        startTime: startTime,
        endTime: endTime,
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.loading = false;
      });
    },
    // 查看详情按钮
    details(val) {
      this.detailsTitle = `${val.date}的邀请数据`;
      this.getDataDetailsDialogVal = val;
      this.detailsDialog = true;
      this.loading = true;
      userInviteFissionRecordGetDailyDetailList({
        date: val.date,
        invitedErBanNo: this.detailsUserId,
        pageNum: this.currentPage2,
        pageSize: this.pageSize2,
      }).then((res) => {
        this.tableDataIn = res.data.records;
        this.loading = false;
        this.detailsUserId = "";
      });
    },
    // 查询
    getDataDetailsDialog() {
      this.loading = true;
      userInviteFissionRecordGetDailyDetailList({
        date: this.getDataDetailsDialogVal.date,
        invitedErBanNo: this.detailsUserId,
        pageNum: this.currentPage2,
        pageSize: this.pageSize2,
      }).then((res) => {
        this.tableDataIn = res.data.records;
        this.loading = false;
        this.detailsUserId = "";
      });
    },
    // 导出
    exportDate() {
      userInviteFissionRecordExport({
        date: this.getDataDetailsDialogVal.date,
        invitedErBanNo: this.detailsUserId,
      }).then((res) => {});
    },
    // 分页导航
    handleSizeChange() {
      this.getData();
    },
    handleCurrentChange() {
      this.getData();
    },
    // 分页导航
    handleSizeChange2() {
      this.getData();
    },
    handleCurrentChange2() {
      this.getData();
    },
  },
};
</script>
<style lang="less" scoped>
.outer {
  padding-top: 20px;
  background: #ecf0f5;
  border-top: 3px solid #d2d6de;
  .search {
    width: 100%;
    height: 41px;
    .searchLeft,
    .searchRight {
      width: 20%;
      float: left;
      span {
        margin-right: 10px;
      }
      .input {
        width: 75%;
      }
    }
  }
  .buttonBox {
    margin-top: 10px;
  }
  .authorityBox {
    .authoritySpan {
      margin-right: 20px;
    }
    .authorityInpput {
      width: 50%;
    }
  }
  .dialogTableVisibleBut {
    margin: -25px 0 20px 0px;
  }
}
</style>