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

<template>
  <div class="wp">
    <div class="header">
      <div class="text-gray" v-if="showAccountList" v-for="(item, index) in settleAccountList" :key="index"  >
        <h3>运营商信息</h3>
        <div>
          <p>运营商：</p>
          <span>{{ merchant }}</span>
        </div>
        <div>
          <p>商家性质：</p>
          <span>{{ merchantNature === "1" ? "对公" : "对私" }}</span>
        </div>
        <div>
          <p>开户行名称：</p>
          <span>{{ cityBankCode(item.bankCode) }}</span>
        </div>
        <div>
          <p>收款卡号：</p>
          <span>{{ item.cardId }}</span>
        </div>
        <div>
          <p>预留手机号：</p>
          <span>{{ item.telNo }}</span>
        </div>
      </div>
      <div class="text-gray" v-else>
        <h3>运营商信息</h3>
        <div>
          <p>运营商：</p>
          <span>{{ merchant }}</span>
        </div>
        <div>
          <p>商家性质：</p>
          <span>{{ merchantNature === "1" ? "对公" : "对私" }}</span>
        </div>
        <div>
          <p>开户行名称：</p>
          <span>{{ cityBankCode(adapayCorpMember.bankCode) }}</span>
        </div>
        <div>
          <p>收款卡号：</p>
          <span>{{ adapayCorpMember.cardNo }}</span>
        </div>
        <div>
          <p>预留手机号：</p>
          <span>{{ adapayCorpMember.legalMp }}</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>¥ {{ merchantOrderReport.electricityAmount ? merchantOrderReport.electricityAmount.toFixed(2) : '0.00'}}</span>
        </div>
        <div>
          <p>交易金额：</p>
          <span>¥ {{ merchantOrderReport.tradeAmount? merchantOrderReport.tradeAmount.toFixed(2) : '0.00'}}</span>
        </div>
        <div>
          <p>虚拟金额：</p>
          <span>¥ {{merchantOrderReport.virtualAmount? merchantOrderReport.virtualAmount.toFixed(2): '0.00' }}</span>
        </div>
        <div>
          <p>服务费金额：</p>
          <span>¥ {{ merchantOrderReport.serviceAmount?merchantOrderReport.serviceAmount.toFixed(2) : '0.00'}}</span>
        </div>
        <div>
          <p>交易手续费：</p>
          <span>¥ {{merchantOrderReport.tradeFee? merchantOrderReport.tradeFee.toFixed(2): '0.00' }}</span>
        </div>
      </div>
      <div class="text-gray">
        <h3>提现信息</h3>
        <div>
          <p>总结算金额：</p>
          <span>¥ {{ merchantOrderReport.totalAmount?merchantOrderReport.totalAmount.toFixed(2): '0.00' }}</span>
        </div>
        <div>
          <p>可提现金额：</p>
          <span style="color: #2563eb">¥ {{ adapayMember.avlBalance?adapayMember.avlBalance.toFixed(2) : '0.00'}}</span>
        </div>
        <div>
          <p>总提现金额：</p>
          <span style="color: #16a34a">
            ¥ {{ adapayMember.totalWithdraw?adapayMember.totalWithdraw.toFixed(2) : '0.00'}}
          </span>
        </div>
        <p class="concentrate">已成功提现到绑定银行卡的金额</p>
      </div>
    </div>
    <div class="inquire">
      <el-form  :model="queryParams" ref="queryForm" size="small" inline  label-width="68px" >
        <el-form-item label="日期" prop="tradeDate">
          <el-date-picker v-model="createTimeRange" style="width: 240px" value-format="yyyy-MM-dd" :default-time="['00:00:00', '23:59:59']" type="daterange" range-separator="至" start-placeholder="开始日期"  end-placeholder="结束日期" :clearable="false" ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item>
          <el-button style="height: 40px" type="success" icon="el-icon-s-claim" @click="already">提现记录</el-button  >
        </el-form-item>
      </el-form>
    </div>
    <div class="container">
      <!-- <el-table :data="reportList"> -->
      <el-table :data="temporary">
        <el-table-column label="日期" align="center" prop="tradeDate" />
        <el-table-column label="账单状态" align="center" prop="billStatus">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.bill_status" :value="scope.row.billStatus" />
          </template>
        </el-table-column>
        <el-table-column label="应收金额（元）" align="center" prop="receivableAmount" />
        <el-table-column label="可提现金额（元）" align="center" prop="withdrawAbleAmount" />
        <el-table-column label="交易手续费（元）" align="center" prop="feeAmount"/>
        <el-table-column label="分润金额（元）" align="center" prop="aaa" />
        <el-table-column label="实际到账金额（元）" align="center" prop="bbb" />
        <el-table-column label="提现订单号" align="center" prop="withdrawCode" />
        <el-table-column label="提现申请时间" align="center" prop="applicationTime" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <span class="link-type" @click="goTradeDate(scope)">订单流水</span>
            <span class="link-type" style="margin-left: 10px" @click="getProfitSharing(scope)">分润流水</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="reportTotal > 0" :total="reportTotal" :page.sync="reportQueryParams.pageNum" :limit.sync="reportQueryParams.pageSize"
        @pagination="getList" />
    </div>
    <!-- 提现记录 -->
    <el-dialog title="提现记录" :visible.sync="recordDialog">
      <el-table :data="payoutInformation" style="width: 100%">
        <el-table-column label="申请时间" align="center" property="applicationTime" />
        <el-table-column label="提现编号" align="center" property="withdrawCode" />
        <el-table-column label="状态" align="center" property="statusDesc" />
        <el-table-column label="金额" align="center" property="cashAmt" />
      </el-table>
      <pagination v-show="getTotal > 0" :total="getTotal" :page.sync="getWithdrawnParameters.pageNum" :limit.sync="getWithdrawnParameters.pageSize"  @pagination="getHistory"/>
    </el-dialog>
    <!-- 订单流水 -->
    <el-dialog title="订单流水" :visible.sync="dialogTableVisible" :before-close="orderClose" >
      <el-table :data="orderList" v-loading="orderLoading">
        <el-table-column property="orderCode" label="订单编号" align="center" />
        <el-table-column property="settleAmount" label="结算金额(元)" align="center" />
        <el-table-column property="clearingStatus" label="清分状态" align="center" />
        <el-table-column property="clearingBillCode" label="清分账单编号" align="center"/>
        <el-table-column property="withdrawStatus" label="提现状态" align="center" />
        <el-table-column property="withdrawCode" label="提现编号" align="center" />
      </el-table>
      <pagination v-show="orderTotal > 0" :total="orderTotal" :page.sync="getOrderParams.pageNum" :limit.sync="getOrderParams.pageSize" @pagination="getOrderList"/>
    </el-dialog>
    <!-- 分润流水 -->
    <el-dialog  title="分润流水" :visible.sync="profitSharing" :before-close="turnOffProfitSharing" >
      <el-form :model="queryParams" ref="queryForm" size="small" inline label-width="68px">
        <el-form-item label="分润类型" prop="tradeDate">
          <el-select v-model="queryParams.orderStatus" placeholder="请选择分润类型" clearable style="width: 180px"  >
            <el-option  v-for="item1 in sharingType" :key="item1.value" :label="item1.label" :value="item1.value"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="">重置</el-button>
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click=" ">导出</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="orderList">
        <el-table-column property="orderCode" label="订单编号" align="center" />
        <el-table-column property="settleAmount" label="结算金额(元)" align="center" />
        <el-table-column property="" label="分润类型" align="center" />
        <el-table-column property="" label="电费分润比例" align="center" />
        <el-table-column property="" label="电费分润金额(元)" align="center" />
        <el-table-column property="" label="服务费分润比例" align="center" />
        <el-table-column property="" label="服务费分润金额(元)" align="center" />
      </el-table>
      <pagination v-show="orderTotal > 0" :total="orderTotal" :page.sync="getOrderParams.pageNum" :limit.sync="getOrderParams.pageSize" @pagination="getOrderList" />
    </el-dialog>
  </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,
      profitSharing: false,
      temporary: [
        {
          tradeDate: "2025-02-18",
          billStatus: "提现申请中",
          receivableAmount: "313.92",
          withdrawAbleAmount: "1371.99",
          feeAmount: "1.83",
          aaa: "1059.92",
          bbb: "1059.92",
          withdrawCode: "0021110738083352290123776",
          applicationTime: "2025-02-19 08:31:00",
        },
      ],
      sharingType: [
        { label: "直接分润", value: "1" },
        { label: "间接分润", value: "2" },
      ],
    };
  },
  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;
      });
    },
    // 分润流水弹框
    getProfitSharing(scope) {
      console.log("点击分润流水", scope);
      this.profitSharing = true;
    },
    // 关闭分润流水弹框
    turnOffProfitSharing() {
      this.profitSharing = false;
      this.orderList = [];
			this.queryParams = {};
    },
  },
  created() {
    this.defaultDate();
    this.getAdapayBalance();
    this.selectAdapayMember();
  },
};
</script>

<style lang="scss" scoped>
.wp {
  background: #f3f3f3;
  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;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.15);
    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: 16px;
      }
    }

    .concentrate {
      color: #666;
      font-size: 15px;
    }
  }
}

.inquire {
  padding: 20px 20px 0 20px;
  background: #fff;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.container {
  padding: 20px;
  background: #fff;
  margin-top: 20px;
}
</style>