jsowell-charger-web/jsowell-ui/src/views/financial/financeDetail.vue

<template>
  <div class="wp">
    <div class="header">
      <div class="text-gray">
        <h3>运营商信息</h3>
        <div>
          <p>运营商：</p>
          <span>举视新能源</span>
        </div>
        <div>
          <p>商家性质：</p>
          <span>对私</span>
        </div>
        <div>
          <p>开户行名称：</p>
          <span>中国银行</span>
        </div>
        <div>
          <p>收款卡号：</p>
          <span>6217850800********2</span>
        </div>
        <div>
          <p>预留手机号：</p>
          <span>1522137****</span>
        </div>
      </div>
      <div class="text-gray">
        <h3>分润数据</h3>
        <div>
          <p>参与分润金额：</p>
          <span style="color: #2563eb">¥ 153,426.82</span>
        </div>
        <div>
          <p>分出总金额：</p>
          <span style="color: #16a34a">¥ 98,142.35</span>
        </div>
        <div>
          <p>分润订单数：</p>
          <span>286笔</span>
        </div>
      </div>
      <div class="text-gray">
        <h3>金额信息</h3>
        <div>
          <p>电费金额：</p>
          <span>¥ 0</span>
        </div>
        <div>
          <p>交易金额：</p>
          <span>¥ 0</span>
        </div>
        <div>
          <p>虚拟金额：</p>
          <span>¥ 0</span>
        </div>
        <div>
          <p>服务费金额：</p>
          <span>¥ 0</span>
        </div>
        <div>
          <p>交易手续费：</p>
          <span>¥ 0</span>
        </div>
      </div>
      <div class="text-gray">
        <h3>提现信息</h3>
        <div>
          <p>总结算金额：</p>
          <span>¥ 71</span>
        </div>
        <div>
          <p>可提现金额：</p>
          <span style="color: #2563eb">¥ 719.93</span>
        </div>
        <div>
          <p>总提现金额：</p>
          <span style="color: #16a34a">¥ 43,142.35</span>
        </div>
        <p class="concentrate">已成功提现到绑定银行卡的金额</p>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getMerchantOrderReport,
  withdraw,
  selectAdapayMember,
  queryAdapayAccountBalance,
  WithdrawalHistory,
} from "@/api/adapayMember/adapayMember";
import { getOrderReportDetail } from "@/api/order/order";
import { getDay } from "@/utils/common";
import text from "@/assets/json/bank_code.json";

export default {
  dicts: ["bill_status"],
  data() {
    return {
      orderLoading: true,
      loading: true,
      operationStatus: null,
      adapayMember: {},
      // 开启
      recordDialog: false,
      tableData: [],
      merchant: this.$route.query.merchantName,
      orderTotal: 0,
      getOrderParams: {
        pageNum: 1,
        pageSize: 10,
        merchantId: null,
        tradeDate: null,
      },
      orderList: [],
      dialogTableVisible: false,
      dialogVisible: false,
      withdrawalFee: 5,
      reportTotal: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      merchantId: this.$route.query.merchantId,
      createTimeRange: [],
      reportList: [],
      reportQueryParams: {
        pageNum: 1,
        pageSize: 10,
        merchantId: this.$route.query.merchantId,
        startTime: "",
        endTime: "",
      },
      bankName: "",
      merchantOrderReport: {},
      adapayCorpMember: {},
      settleAccountList: [],
      merchantNature: "",
      showAdapayCorp: "",
      showAccountList: false,
      //已提现参数
      getWithdrawnParameters: {
        merchantId: this.$route.query.merchantId,
        pageNum: 1,
        pageSize: 10,
      },
      payoutInformation: [],
      getTotal: 0,
    };
  },
  methods: {
    // 银行编码
    cityBankCode(code) {
      if (code == null) {
        return "";
      }
      const bankList = text.bankList;
      let arr = bankList.find((item) => item.bankCode === code);
      if (arr.bankName != null) {
        this.bankName = arr.bankName;
      }
      return this.bankName;
    },
    selectAdapayMember() {
      console.log("this.merchantId", this.merchantId);
      // this.loading = true;
      let param = {
        merchantId: this.merchantId,
      };
      selectAdapayMember(param).then((response) => {
        console.log("查询结算账户", response);
        this.operationStatus = response.data;
        this.loading = false;
        // console.log("this.operationStatus", this.operationStatus.bankAcctType);
        // 商家性质：
        if (response.data != null) {
          // 对公返回的结果 商家性质：
          this.merchantNature = this.operationStatus.bankAcctType;
          console.log("对公信息", this.adapayCorpMember);
          if (response.data.settleAccountList != null) {
            // 个人账户
            this.adapayCorpMember = response.data.adapayMember;
            this.settleAccountList = response.data.settleAccountList;
            this.showAccountList = true;
          }
          this.showAdapayCorp = response.data.adapayCorpMember;
          if (response.data.adapayCorpMember != null)
            return (this.adapayCorpMember = response.data.adapayCorpMember);
        }
        this.loading = false;
      });
    },
    getAdapayBalance() {
      let param = {
        merchantId: this.merchantId,
      };
      queryAdapayAccountBalance(param).then((response) => {
        console.log("查询 可提现金额 queryAdapayAccountBalance", response);
        this.adapayMember = response.data;
      });
    },
    // 订单流水请求
    getOrderList() {
      this.orderLoading = true;
      console.log("this.getOrderParams", this.getOrderParams);
      getOrderReportDetail(this.getOrderParams).then((res) => {
        console.log("获取订单列表res", res);
        this.orderList = res.rows;
        this.orderTotal = res.total;
        this.orderLoading = false;
      });
    },
    // 弹层关闭之前执行的事情
    orderClose() {
      this.dialogTableVisible = false;
      this.getOrderParams.pageNum = 1;
      this.orderList = [];
      this.orderTotal = 0;
    },
    // 订单流水按钮
    goTradeDate(scope) {
      // console.log("点击日期出现弹层", scope);
      if (scope.row.tradeDate === null)
        return this.$message.info("此条数据暂不显示订单流水");
      // console.log("点击日期出现弹层", scope.row.tradeDate);
      this.dialogTableVisible = true;
      this.getOrderParams.merchantId = scope.row.merchantId;
      this.getOrderParams.tradeDate = scope.row.tradeDate;
      this.getOrderList();
    },
    getList() {
      console.log("queryParams", this.queryParams);
      getMerchantOrderReport(this.reportQueryParams).then((response) => {
        console.log("getMerchantOrderReport", response);
        if (response.data) {
          this.merchantOrderReport = response.data.merchantOrderReport;
          if (response.data.pageResponse === null) return (this.reportList = []);
          this.reportList = response.data.pageResponse.list;
          this.reportTotal = response.data.pageResponse.total;
        } else {
          this.reportList = [];
          this.merchantOrderReport = null;
        }
      });
    },
    handleClose() {
      this.$confirm("确认提交？")
        .then((_) => {
          let params = {
            merchantId: this.merchantId,
            cashAmt: this.adapayMember.avlBalance,
          };
          console.log("点击提交按钮之前执行 params", params);
          withdraw(params).then((response) => {
            console.log("res 提现金额", response);
            if (response.code !== 200) return this.$modal.msgError(response.msg);
            this.$modal.msgSuccess("操作成功");
            // 重新查询当前 显示的可提现金额
            this.getAdapayBalance();
          });
          this.dialogVisible = false;
        })
        .catch((_) => {});
    },
    // 点击提交按钮
    submit() {
      this.handleClose();
    },
    withdrawalClick() {
      // this.$router.push({
      //   name: "withdrawalRecords",
      // });
    },
    goAccount() {
      this.$router.push({
        name: "accountUserInfo",
        params: {
          id: this.merchantId,
        },
      });
    },
    // 点击搜索按钮
    handleQuery() {
      let arr = this.createTimeRange[0];
      let str = this.createTimeRange[1];
      console.log("点击搜索时展示的日期数据", arr, str);
      this.reportQueryParams.startTime = arr;
      this.reportQueryParams.endTime = str;
      this.reportQueryParams.pageNum = 1;
      this.reportTotal = 0;
      this.getList();
    },
    defaultDate() {
      //字符串拼接，开始时间，结束时间
      let beg = getDay(-30); //当月第一天
      let end = getDay(0); //当天
      this.createTimeRange = [beg, end];
      // console.log("this.createTimeRange", this.createTimeRange);
      // return this.createTimeRange;
      this.reportQueryParams.startTime = beg;
      this.reportQueryParams.endTime = end;
      this.getList();
    },
    already() {
      this.recordDialog = true;
      this.getHistory();
    },
    //提现记录
    getHistory() {
      console.log("etWithdrawnParameters", this.getWithdrawnParameters);
      WithdrawalHistory(this.getWithdrawnParameters).then((response) => {
        console.log("提现记录", response);
        this.payoutInformation = response.data.list;
        this.getTotal = response.data.total;
      });
    },
  },
  created() {
    this.defaultDate();
    this.getAdapayBalance();
    this.selectAdapayMember();
  },
};
</script>

<style lang="scss" scoped>
.wp {
  background: #f9fafb;
  padding: 20px;
  min-height: 100vh;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 240px;
  h3 {
    margin: 0px;
    margin-bottom: 10px;
  }
  .text-gray {
    width: 24.5%;
    height: 100%;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    div {
      height: 35px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p {
        color: #666;
        font-size: 15px;
      }
      span {
        display: block;
        color: #333;
        font-size: 17px;
      }
    }
    .concentrate {
      color: #666;
      font-size: 15px;
    }
  }
}
</style>