boss/pages/main/index/qingtuanbao.vue

<template>
  <el-tabs v-model="activeTabName" type="border-card">
    <el-tab-pane label="青团宝结算订单" name="first">
      <div id="cloud-job">
        <div class="title">
          <el-form label-width="180px">
            <el-form-item label="已结算总金额（税后）：">{{titleInfo.totalSuccessPay}}元</el-form-item>
            <el-form-item label="已提现总金额（税后）：">{{titleInfo.totalDraw}}元</el-form-item>
            <el-form-item label="待提现总额（税后）：">{{titleInfo.totalWaitDraw}}元</el-form-item>
          </el-form>
        </div>
        <div class="table">
          <el-table v-if="tableData.length" border stripe style="width: 100%" :data="tableData">
            <el-table-column
              v-for="(prop, index) of tableProps"
              :key="index"
              :prop="prop"
              :label="tableHeaders[index]"
            >
              <template slot-scope="scope">
                <a
                  class="lblue point"
                  v-if="prop === 'projectName'"
                  :href="scope.row | projectLink"
                  target="_blank"
                >{{scope.row[prop]}}</a>
                <a
                  class="lblue point"
                  v-else-if="prop === 'nickname'"
                  @click="clickDev(scope.row.uid)"
                  target="_blank"
                >{{scope.row[prop]}}</a>
                <span class="lblue point" v-else-if="prop === 'order_no'">
                  <nuxt-link
                    :to="{path:'/main/orders_detail?id='+scope.row.order_no}"
                  >{{scope.row.order_no}}</nuxt-link>
                </span>
                <span v-else>{{scope.row[prop]}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          @current-change="changePagination"
          :current-page.sync="currentPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="totalCount"
        ></el-pagination>
      </div>
    </el-tab-pane>
    <el-tab-pane label="青团宝提现订单" name="second">
      <div id="cloud-job">
        <div class="title">
          <el-form label-width="230px">
            <el-form-item label="青团宝企业账户可用余额：">{{drawData.accountBalance.money}}元</el-form-item>
            <el-form-item label="待管理员确认支付金额（税前）：">{{drawData.totalWaitConfirmTax/100}}元</el-form-item>
            <el-form-item label="青团宝正在付款中（税前）：">{{drawData.totalPayingTax/100}}元</el-form-item>
            <el-form-item label="成功提现总金额（税前）：">{{drawData.totalSuccessTax/100}}元</el-form-item>
            <el-form-item label="成功提现总金额（税后）：">{{drawData.totalSuccess/100}}元</el-form-item>
          </el-form>
        </div>
        <div class="table">
          <el-table
            v-if="drawData.list.length"
            border
            stripe
            style="width: 100%"
            :data="drawData.list"
          >
            <el-table-column prop="order_no" label="订单号">
              <template slot-scope="scope">
                <span class="lblue point">
                  <nuxt-link
                    target="_blank"
                    :to="{path:'/main/orders_detail?id='+scope.row.order_no}"
                  >{{scope.row.order_no}}</nuxt-link>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="用户ID" width="66">
              <template slot-scope="scope">
                <span class="lblue point" @click="clickDev(scope.row.uid)">{{ scope.row.uid }}</span>
              </template>
            </el-table-column>
            <el-table-column label="真实姓名" width="70">
              <template slot-scope="scope">
                <span
                  class="lblue point"
                  @click="clickDev(scope.row.uid)"
                >{{ scope.row.userInfo.realname }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="origin_amount" label="税前金额" width="70"></el-table-column>
            <el-table-column prop="real_amount" label="提现金额" width="70"></el-table-column>
            <el-table-column prop="true_amount" label="到账金额" width="70"></el-table-column>
            <el-table-column prop="after_amount" label="薪资余额"></el-table-column>
            <el-table-column prop="account" label="到账账户"></el-table-column>
            <el-table-column label="提现时间" width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.taken_at }}</span>
              </template>
            </el-table-column>
            <el-table-column label="到账时间" width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.paid_at }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="extra" label="系统备注"></el-table-column>
            <el-table-column label="内部状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status==1">待确认</span>
                <span v-else-if="scope.row.status==2">支付中</span>
                <span v-else-if="scope.row.status==4">支付中</span>
                <span v-else-if="scope.row.status==8">支付成功</span>
                <span v-else-if="scope.row.status==16">支付失败</span>
                <span v-else>--</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <div v-if="scope.row.order_type_id == 0">
                    <span v-if="scope.row.status==1" @click="confirmPay(scope.row)">
                  <el-button type="primary" size="mini">确认付款</el-button>
                  </span>
                    <span v-else-if="scope.row.status==16" @click="confirmPay(scope.row)">
                    <el-button type="primary" size="mini">失败重试</el-button>
                  </span>
                    <span v-else></span>
                </div>
                <div v-else>
                    <span>领薪宝订单</span>
                </div>

              </template>
            </el-table-column>
            <el-table-column label="外部备注">
              <template slot-scope="scope">
                <span>{{scope.row.orderInfo.public_comment}}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          @current-change="changePaginationDraw"
          :current-page.sync="currentDrawPage"
          :page-size="10"
          layout="total, prev, pager, next"
          :total="totalDrawCount"
        ></el-pagination>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
const tableHeaders = [
  "项目名称",
  "付款类型",
  "用户昵称",
  "税前应付(项目)",
  "平台服务费",
  "所得税费",
  "开发者净收入",
  "本次应付",
  "实际到账",
  "结算时间",
  "订单号"
];
const tableProps = [
  "projectName",
  "payTypeShow",
  "nickname",
  "prePay",
  "servicePay",
  "getPay",
  "realGet",
  "current_gongmall",
  "amount",
  "pay_timeShow",
  "order_no"
];

export default {
  data() {
    return {
      activeTabName: "first",
      // 头部信息
      titleInfo: {},
      // 数据总条目
      totalCount: 0,
      totalDrawCount: 0,
      // 当前页面
      currentPage: 1,
      currentDrawPage: 1,
      totalDrawPage: 1,
      totalPage: 1,
      // 列表头显示内容
      tableHeaders,
      // 列表头字段
      tableProps,
      // 列表数据
      tableData: [],
      drawData: {
        accountBalance: {},
        list: []
      }
    };
  },
  mounted() {
    this.getTableData();
    this.getDrawData();
  },
  filters: {
    toDate(val) {
      return new Date(val * 1000).toLocaleDateString();
    },
    projectLink(i) {
      const type = i.entity_type;
      let link = "javascript:void(0);";
      if (type === "1")
        link =
          this.$store.state.domainConfig.siteUrl +
          `/rooter/outsourceitem/${i.entity_id}>`;
      else if (type === "3")
        link =
          this.$store.state.domainConfig.siteUrl +
          `/rooter/wagedetails?job_id=${i.entity_id}`;
      return link;
    }
  },
  methods: {
    // 重新支付
    async rePay(i) {
      const res = await this.$post("/api/admin/payment/redoSalaryDraw", {
        id: i.id
      });
      if (res) {
        this.getDrawData();
      }
    },
    // 确认支付
    confirmPay(i) {
      this.rePay(i);
    },
    // 页码变动
    changePagination() {
      this.getTableData();
    },
    // 页码变动
    changePaginationDraw() {
      this.getDrawData();
    },
    // 格式化列表数据
    formatTableData(data, rData) {
      console.log("formatTableData++++++++++++++++");
      console.log(data);
      console.log(rData);
      this.titleInfo = {
        totalDraw: rData.totalDraw ? rData.totalDraw / 100 : "--",
        totalWaitDraw: rData.totalWaitDraw ? rData.totalWaitDraw / 100 : "--",
        totalSuccessPay: rData.totalSuccessPay
          ? rData.totalSuccessPay / 100
          : "--"
      };

      return data.map(i => {
        let projectName = "--";
        let prePay = "";
        let servicePay = "";
        let getPay = "";
        let realGet = "";
        let d = new Date();
        let payTimeShow = "--";
        if (i.pay_time > 0) {
          d.setTime(i.pay_time + "000");
          payTimeShow =
            d.getFullYear() +
            "-" +
            (d.getMonth() + 1) +
            "-" +
            d.getDate() +
            " " +
            d.getHours() +
            ":" +
            d.getMinutes();
        }
        // 3 比较特殊,所以这样写
        projectName = i.pro_name;
        prePay = i.origin_price;
        servicePay = i.person_platform_fee;
        getPay = i.total_person_tax_fee;
        realGet = i.developer_fee;
        return {
          ...i,
          projectName,
          payTypeShow: i.pay_type === "1" ? "首付款" : "解冻款",
          prePay,
          servicePay,
          getPay,
          realGet,
          pay_timeShow: payTimeShow
        };
      });
    },
    // 点击开发者
    clickDev(uid) {
      window.open(
        this.$store.state.domainConfig.siteUrl + `/rooter/user/${uid}`
      );
    },
    // 获取列表数据
    async getTableData() {
      this.tableData = [];
      const p = this.currentPage;
      const res = await this.$post("/api/admin/payment/qingtuanbaoOrders", {
        p
      });
      // console.log(res)
      const data = res.data;
      const list = data.list;
      this.tableData = this.formatTableData(list, data);
      this.totalCount = Number(data.total);
      this.totalPage = data.totalPage;
    },
    // 获取列表数据
    async getDrawData() {
      const p = this.currentDrawPage;
      const res = await this.$post("/api/admin/payment/listSalaryDraw", {
        p
      });
      console.log("getDrawData+++++++");
      const data = res.data;
      this.drawData = data;
      console.log(this.drawData);
      this.totalDrawCount = Number(data.total);
      this.totalDrawPage = data.totalPage;
    }
  }
};
</script>

<style scoped>
.table {
  height: calc(100% - 80px);
  line-height: 1.5;
}
.el-form-item {
  margin-bottom: 0;
}
.el-form:last-child {
  margin-bottom: 22px;
}
.el-table td,
.el-table th {
  padding: 4px 0;
}
</style>