ledehui-admin/src/view/fund/bean-withdraw.vue

<template>
  <div class="page-box" v-loading="loading > 0">
    <Header :title="title"></Header>
    <div class="container">
      <div class="content">
        <!-- 表格 -->
        <div class="filter-box">
          <div class="filter">
            <div class="filter-item">
              <div class="label">审核状态</div>
              <el-select
                v-model="filter.status"
                size="small"
                class="select"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in statusType"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <!-- <div class="filter-item">
              <div class="label">审核状态</div>
              <el-select
                v-model="filter.way"
                size="small"
                class="select"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in wayType"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div> -->
            <div class="filter-item">
              <div class="label">用户ID：</div>
              <el-input
                class="input"
                v-model="filter.uid"
                placeholder="请输入内容"
                size="small"
              ></el-input>
            </div>
            <div class="filter-item">
              <div class="label">用户姓名：</div>
              <el-input
                class="input"
                style="width: 200px"
                v-model="filter.name"
                placeholder="请输入内容"
                size="small"
              ></el-input>
            </div>
            <div class="filter-item">
              <div class="label">创建时间：</div>
              <el-date-picker
                v-model="date"
                type="datetimerange"
                align="right"
                unlink-panels
                class="date-input"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00', '23:59:59']"
                size="small"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="btn-box">
            <button class="search" @click="search">筛选</button>
            <button class="reset" @click="reset">重置</button>
          </div>
        </div>
        <!-- <div class="filter-box filter-box2">
          <div class="btn-box btn-box2">
            <button class="search" @click="batchAuditBeanWithdraw(1)">通过</button>
            <button class="reset" @click="batchAuditBeanWithdraw(2)">驳回</button>
          </div>
          <div class="btn-box btn-box2">
            <button class="search" @click="order2excel">一键到账</button>
            <button class="reset" @click="order2excel">导出</button>
          </div>
        </div> -->
        <el-table
          :data="list"
          class="table no-border-table"
          ref="table"
          :header-cell-style="{
            border: 'none',
            color: '#333',
            background: '#f6f6f6',
            borderBottom: '1px solid #E8E8E8',
            height: '54px',
          }"
          :row-style="{
            height: '54px',
          }"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="55" :selectable="selectable">
          </el-table-column> -->
          <el-table-column prop="created" align="center" label="提审时间">
            <div slot-scope="scope">
              {{ scope.row.created | dateFormat }}
            </div>
          </el-table-column>
          <el-table-column
            prop="uid"
            align="center"
            label="用户ID"
          ></el-table-column>
          <el-table-column
            prop="balance"
            align="center"
            label="变现金豆数量"
          ></el-table-column>
          <el-table-column prop="actualBalance" align="center" label="到账金额/元">
            <!-- <div slot-scope="scope">
              {{ statusMap[scope.row.status] }}
            </div> -->
          </el-table-column>
          <el-table-column
            prop="nickname"
            align="center"
            label="用户昵称"
          ></el-table-column>
          <el-table-column prop="oid" align="center" label="审核状态">
            <div slot-scope="scope">
              {{ statusMap[scope.row.status] }}
            </div></el-table-column
          >
          <el-table-column label="操作" align="center" width="300">
            <div
              slot-scope="scope"
              style="display: flex; justify-content: center"
            >
              <div
                style="display: flex; justify-content: center"
                v-if="scope.row.status === 1"
              >
                <button
                  size="mini"
                  class="table-btn"
                  @click="passBeanWithdraw(scope.row.id)"
                >
                  通过
                </button>
              </div>
              <div
                style="display: flex; justify-content: center"
                v-if="scope.row.status === 1"
              >
                <button
                  size="mini"
                  class="table-btn"
                  @click="refuteBeanWithdraw(scope.row.id)"
                >
                  驳回
                </button>
              </div>
              <div style="display: flex; justify-content: center">
                <button
                  size="mini"
                  class="table-btn"
                  @click="toDetail(scope.row.id)"
                >
                  查看
                </button>
              </div>
              <div
                style="display: flex; justify-content: center"
                v-if="scope.row.status === 4"
              >
                <button
                  size="mini"
                  class="table-btn"
                  @click="refuteBeanWithdraw(scope.row.id)"
                >
                  待驳回
                </button>
              </div>
            </div>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页按钮 -->
      <div class="footer">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          background
          layout="total, prev, pager, next, jumper"
          :page-size="size"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      title="提现详情"
      :visible.sync="detailShow"
      class="dialog"
      width="640px"
      top="25vh"
    >
      <div class="detail-box">
        <div class="detail-right">
          <div class="row row1">提现金额/元：{{ detail.balance }}</div>
          <div class="row row1">到账金额/元：{{ detail.actualBalance }}</div>
          <div class="row">
            <div class="label">ID：</div>
            {{ detail.uid }}
          </div>
          <div class="row">
            <div class="label">提现方式：</div>
            <!-- {{ wayMap[detail.way] }} -->
            银行卡
          </div>
          <!-- <div v-if="detail.way === 1">
            <div class="row">
              <div class="label">姓名：</div>
              {{ detail.name }}
            </div>
            <div class="row">
              <div class="label">收款码：</div>
              <el-image
                class="img"
                style="width: 100px;height: 100px"
                :src="detail.wx_pic"
                fit="cover"
                :preview-src-list="[detail.wx_pic]"
              >
              </el-image>
            </div>
          </div>
          <div v-if="detail.way === 2">
            <div class="row">
              <div class="label">姓名：</div>
              {{ detail.name }}
            </div>
            <div class="row">
              <div class="label">收款码：</div>
              <el-image
                class="img"
                style="width: 100px;height: 100px"
                :src="detail.zfb_pic"
                fit="cover"
                :preview-src-list="[detail.zfb_pic]"
              >
              </el-image>
            </div>
          </div> -->
          <div>
            <div class="row">
              <div class="label">银行卡号：</div>
              {{ detail.card }}
            </div>
            <div class="row">
              <div class="label">开户银行：</div>
              {{ detail.openBank }}
            </div>
            <div class="row">
              <div class="label">姓名：</div>
              {{ detail.cardName }}
            </div>
          </div>
        </div>
        <div class="detail-left">
          <div class="row">
            <div class="label">审核状态：</div>
            {{ statusMap[detail.status] || "" }}
          </div>
          <!-- <div class="row">
            <div class="label">提现状态：</div>
            {{ wayMap[detail.way] || "" }}
          </div> -->
          <div class="row">
            <div class="label">创建时间：</div>
            {{ detail.created }}
          </div>
          <div class="row">
            <div class="label">审核时间：</div>
            {{ detail.auditTime }}
          </div>
          <!-- <div class="row">
            <div class="label">到账时间：</div>
            {{ detail.arrivalTime }}
          </div> -->
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :show-close="false"
      :close-on-click-modal="false"
      title="生成中..."
      :visible.sync="showProgressDialog"
      width="30%"
      center
    >
      <el-progress
        :percentage="progress"
        :text-inside="true"
        :stroke-width="18"
      ></el-progress>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
import Header from '../../components/common/header';
import myUtils from '../../components/common/whatever2excel';
import dayjs from 'dayjs';
export default {
  components: {
    Header
  },
  name: 'user-manage',
  data() {
    return {
      currentPage: 1, // 当前页码
      size: 20, // 每页条数
      total: 0, // 总页数
      loading: 0, // 加载中
      title: {
        // 页面标题
        firstTitile: '资金管理',
        secondTitle: '金豆提现记录'
      },
      filter: {
        uid: null,
        status: 0,
        name: ''
      },
      statusType: [
      {
          name: '全部',
          value: 0
        },
        {
          name: '提现申请待审核(资金已冻结) ',
          value: 1
        },
        {
          name: '提现审核通过，待发放',
          value: 2
        },
        {
          name: '提现审核驳回',
          value: 3
        },
        {
          name: '发放失败，等待撤销',
          value: 4
        },
        {
          name: '发放失败，已撤销',
          value: 5
        },
        {
          name: '提现已发放',
          value: 6
        }
      ],
      wayType: [
        {
          name: '全部',
          value: -1
        },
        {
          name: '提现申请待审核(资金已冻结) ',
          value: 1
        },
        {
          name: '提现审核通过，待发放',
          value: 2
        },
        {
          name: '提现审核驳回',
          value: 3
        },
        {
          name: '发放失败，等待撤销',
          value: 4
        },
        {
          name: '发放失败，已撤销',
          value: 5
        },
        {
          name: '提现已发放',
          value: 6
        }
      ],
      statusMap: {
        1: '提现申请待审核(资金已冻结) ',
        2: '提现审核通过，待发放',
        3: '提现审核驳回',
        4: '发放失败，等待撤销',
        5: '发放失败，已撤销',
        6: '提现已发放'
      },
      wayMap: {
        1: '微信',
        2: '支付宝',
        3: '银行卡'
      },
      list: [], // 用户列表
      date: [],
      showProgressDialog: false,
      progress: 0,
      multipleSelection: [],
      detailShow: false,
      detail: {}
    };
  },
  filters: {
    // 时间格式化
    dateFormat(date) {
      if (!date) return '请选择时间';
      let day = dayjs(date);
      return day.format('YYYY-MM-DD HH:mm:ss');
    }
  },
  async mounted() {
    // await this.getType();
    // 获取列表
    this.getList();
  },
  computed: {},
  methods: {
    // 切换页码
    handleCurrentChange(page) {
      this.multipleSelection = [];
      this.currentPage = page;
      this.getList();
    },
    selectable(row, index) {
      if (row.status === 1) return true;
      return false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 获取提现列表
    getList() {
      this.multipleSelection = [];
      this.filter.start = this.date[0] || '';
      this.filter.end = this.date[1] || '';
      this.loading++;
      this.httpGet(this.$root.getBeanWithdrawList, {
        page: this.currentPage,
        size: this.size,
        ...this.filter
      }).then(
        (res) => {
          this.loading--;
          this.list = res.list;
          this.total = res.total;
        },
        (res) => {
          this.loading--;
          this.$message.error(res);
        }
      );
    },
    // 过滤
    search() {
      this.currentPage = 1;
      this.multipleSelection = [];
      this.getList();
    },
    // 重置过滤
    reset() {
      this.filter = { uid: null, status: 0, name: '' };
      this.date = [];
      this.multipleSelection = [];
      this.getList();
    },
    toDetail(id) {
      // this.detail = detail;
      this.loading++;
      this.httpGet(this.$root.getBeanWithdrawInfo, {
        id
      }).then(
        (res) => {
          this.loading--;
          this.detail = res;
          this.detailShow = true;
        },
        (res) => {
          this.loading--;
          this.$message.error(res);
        }
      );
    },
    passBeanWithdraw(id) {
      this.$confirm(
        `<p class='title'><i class='icon el-icon-question'></i>提醒</p><p class='text'>确定要通过该审核吗？</p>`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'cancel-btn',
          confirmButtonClass: 'confirm-btn',
          customClass: 'confirm-box',
          dangerouslyUseHTMLString: true,
          showClose: false,
          type: 'none'
        }
      ).then(() => {
        this.loading++;
        this.httpPut(this.$root.passBeanWithdraw, {
          id
        }).then(
          (res) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.loading--;
            this.getList();
          },
          (res) => {
            this.loading--;
            this.$message.error(res);
          }
        );
      });
    },
    refuteBeanWithdraw(id) {
      this.$confirm(
        `<p class='title'><i class='icon el-icon-question'></i>提醒</p><p class='text'>确定要驳回该审核吗？</p>`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'cancel-btn',
          confirmButtonClass: 'confirm-btn',
          customClass: 'confirm-box',
          dangerouslyUseHTMLString: true,
          showClose: false,
          type: 'none'
        }
      ).then(() => {
        this.loading++;
        this.httpPut(this.$root.refuteBeanWithdraw, {
          id
        }).then(
          (res) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.loading--;
            this.getList();
          },
          (res) => {
            this.loading--;
            this.$message.error(res);
          }
        );
      });
    },
    batchAuditBeanWithdraw(status) {
      console.log(this.multipleSelection);
      if (!this.multipleSelection.length) {
        this.$message.error('请选择记录');
        return;
      }
      let str = '通过';
      if (status === 2) str = '驳回';
      this.$confirm(
        `<p class='title'><i class='icon el-icon-question'></i>提醒</p><p class='text'>确定要${str}该审核吗？</p>`,
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'cancel-btn',
          confirmButtonClass: 'confirm-btn',
          customClass: 'confirm-box',
          dangerouslyUseHTMLString: true,
          showClose: false,
          type: 'none'
        }
      ).then(() => {
        this.loading++;
        this.httpPut(this.$root.batchAuditBeanWithdraw, {
          way: status,
          id: this.multipleSelection.map((item) => {
            return item.id;
          })
        }).then(
          (res) => {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.loading--;
            this.multipleSelection = [];
            this.getList();
          },
          (res) => {
            this.loading--;
            this.$message.error(res);
          }
        );
      });
    },
    async order2excel() {
      this.loading++;
      let list = [];
      let totalPage = null;
      let data = {
        page: this.currentPage,
        size: this.size,
        ...this.filter
      };
      await this.httpGet(this.$root.getBeanWithdrawList, data).then(
        (res) => {
          this.loading--;
          totalPage = Math.ceil(parseInt(res.total) / this.size);
        },
        () => {
          this.loading--;
        }
      );
      this.showProgressDialog = true;
      this.progress = 0;
      await this.getAllPages(totalPage, list).then(
        () => {
          this.showProgressDialog = false;
          this.jsonFormatAndToExcel(list);
        },
        (err) => {
          console.error(err);
          this.showProgressDialog = false;
        }
      );
    },
    async getAllPages(totalPage, list) {
      for (let i = 1; i <= totalPage; i++) {
        let data = {
          page: i,
          size: this.size,
          ...this.filter
        };
        await this.httpGet(this.$root.getBeanWithdrawList, data).then((res) => {
          list.push(...res.list);
          this.progress = Math.floor((i / totalPage) * 100);
          console.log('page' + i, list.length);
        });
        // console.log(5555, list);
      }
    },
    jsonFormatAndToExcel(list) {
      let formatList = [];
      list.forEach((item) => {
        let obj = {
          用户ID: item.uid,
          提现金额: item.balance,
          身份证号: item.identityCard,
          审核状态: this.statusMap[item.status],
          提现状态: this.wayMap[item.way],
          创建时间: item.created,
          审核时间: item.auditTime,
          到账时间: item.arrivalTime
        };
        formatList.push(obj);
      });
      myUtils.json2excel(formatList);
    }
  }
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import '~assets/public.styl';
</style>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~assets/main.styl';

.page-box {
  height: 100%;
  width: 100%;
  flex-y(flex-start, flex-start);
  overflow-y: hidden;
  background: bg-color;

  .container {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    flex-y(flex-start, flex-start);
    padding: 10px;

    // content 表格
    .content {
      flex: 1;
      width: 100%;
      font-size: 14px;
      background: white;
      box-sizing: border-box;
      padding: 24px 32px;
      border-radius: 2px;

      .filter-box2 {
        flex-x();

        .btn-box {
          width: auto;
        }
      }

      // 按钮
      .btn {
        width: 100px;
        height: 32px;
        line-height: 32px;
        confirm-btn();
        font-size: 14px;
        margin: 16px 0;
      }

      .import {
        flex-x(flex-end);
        margin-top: 16px;

        .import-btn {
          confirm-btn();
          height: 32px;
          padding: 0 15px;
          white-space: nowrap;
        }
      }

      // 表格按钮
      .table-btn {
        // width: 65px;
        height: 24px;
        line-height: 24px;
        color: gray3;
        font-size: 12px;
        margin-right: 8px;
        cancel-btn();
        padding: 0 8px;
      }

      .filter-item {
        margin-right: 12px;
      }

      .select, .input {
        width: 120px;
      }

      .date-input {
        width: 350px;
      }

      .btn-box {
        margin: 0;
      }

      .btn-box2 {
        width: 100%;
        flex-x(flex-start);
        margin-top: 8px;

        .search {
          width: 108px;
        }
      }

      .table {
        margin-top: 24px !important;
      }
    }
  }

  .footer {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
    flex-x(flex-end);
    background: white;
    word(14px, #999);

    span {
      word(20px, #333);
      font-weight: 600;
      margin-left: 3px;
    }
  }

  .dialog-content {
    flex-y();
  }

  .form {
    width: 100%;
    flex-center();
    margin: 8px 0;
  }

  .detail-box {
    padding: 0 16px 16px;
    flex-x(flex-start, flex-start);

    .detail-right, .detail-left {
      flex: 1;

      .row {
        width: 100%;
        line-height: 32px;
        word(14px, #333);
        flex-x(flex-start);

        .label {
          width: 72px;
          word(14px, #666);
        }
      }

      .row1 {
        word(16px, #333);
      }
    }
  }
}
</style>