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

<template>
  <div class="app-container">
    <div class="header-cont ">
      <div class="header-txt">运营汇总</div>
      <el-button type="primary" @click="goAccount">开户信息</el-button>
    </div>
    <div class="header" v-loading="loading">
      <template v-if="operationStatus == null">
        <div class="foot1">
          <div style="margin: 12px 0">未查询到结算账户</div>
        </div>
      </template>
      <template v-else>
        <template v-if="showAccountList">
          <div class="foot1" v-for="(item, index) in settleAccountList" :key="index">
            <el-descriptions :column="1">
              <el-descriptions-item label="运营商" class="remarks">
                <span class="color">
                  {{ merchant }}
                </span>
              </el-descriptions-item>
              <el-descriptions-item label="商家性质">
                <span class="color">{{
                  merchantNature === "1" ? "对公" : "对私"
                }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="开户行名称">
                <span class="color">{{ cityBankCode(item.bankCode) }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="收款卡号">
                <span class="color">{{ item.cardId }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="预留手机">
                <span class="color">{{ item.telNo }}</span>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </template>
        <div class="foot1" v-else>
          <el-descriptions :column="1">
            <el-descriptions-item label="运营商">
              <span class="color">
                {{ merchant }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="商家性质">
              <span class="color">{{
                merchantNature === "1" ? "对公" : "对私"
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="开户状态">
              <span class="color">{{ adapayCorpMember.auditDesc }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="开户行名称">
              <span class="color">{{
                cityBankCode(adapayCorpMember.bankCode)
              }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="收款卡号">
              <span class="color">{{ adapayCorpMember.cardNo }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="预留手机">
              <span class="color">{{ adapayCorpMember.legalMp }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </template>
      <div class="foot2">
        <el-descriptions :column="1">
          <el-descriptions-item label="总度数(度)">
            <span class="color">
              {{ merchantOrderReport.useElectricity }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="充电时长(分钟)">
            <span class="color">{{ merchantOrderReport.chargeTime }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="电费金额(元)">
            <span class="color">{{
              merchantOrderReport.electricityAmount
            }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="交易金额(元)">
            <span class="color">{{ merchantOrderReport.tradeAmount }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="虚拟金额(元)">
            <span class="color">{{ merchantOrderReport.virtualAmount }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="foot3">
        <el-descriptions :column="1">
          <el-descriptions-item label="充电次数(次)">
            <span class="color">{{ merchantOrderReport.chargeNum }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="总结算金额(元)">
            <span class="color">{{ merchantOrderReport.totalAmount }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="服务费金额(元)">
            <span class="color">{{ merchantOrderReport.serviceAmount }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="交易手续费(元)">
            <span class="color">{{ merchantOrderReport.tradeFee }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="白名单支付(次)">
            <span class="color">{{
              merchantOrderReport.whitelistPaymentsNum === null
              ? "一"
              : merchantOrderReport.whitelistPaymentsNum
            }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <template v-if="operationStatus == null">
        <div class="foot4">未查询到运营商结算账户，提现功能现已关闭</div>
      </template>
      <template v-else>
        <div class="margin-right foot4">
          <div class="color60">可提现(元)</div>
          <div class="margin-20 color">{{ adapayMember.avlBalance }}</div>
          <el-button type="primary" v-if="adapayMember.avlBalance > withdrawalFee"
            @click="dialogVisible = true">提现申请</el-button>
          <div v-else>
            <span class="text">该余额大于{{ withdrawalFee }}元时，才可发起取现</span>
          </div>
        </div>
        <div class="margin-right foot4">
          <el-button type="primary" style="margin-bottom: 20px;" @click="already">已提现</el-button>
          <div>
            <span class="text">已成功提现到绑定银行卡的金额</span>
          </div>
        </div>
        <!-- <div class="margin-right foot4" style="width: 20%">
          <div class="color60">冻结金额(元)</div>
          <div class="margin-20 color">{{ adapayMember.frzBalance }}</div>
          <div>
            <span class="text">当配置了自动结算功能，在每日发起结算时会将可用余额转为冻结金额。该部分金额不允许取现。</span>
          </div>
        </div> -->
      </template>
    </div>
    <hr />
    <div class="center">
      <div class="header-txt">运营分析</div>
      <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>
    </div>
    <hr />
    <el-table :data="reportList">
      <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="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>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="reportTotal > 0" :total="reportTotal" :page.sync="reportQueryParams.pageNum"
      :limit.sync="reportQueryParams.pageSize" @pagination="getList" />
    <!-- 提现申请弹窗 -->
    <el-dialog title="提现申请" :visible.sync="dialogVisible" width="33%">
      温馨提示
      <div style="font-size: 12px; color: gray">
        <p>1.提现将在3个工作日内审核到账,节假日审核顺延</p>
        <p>2.部分流量方的充电订单存在账期,需要一定周期后才开始执行清分</p>
        <p>3.提现为银行自动付款,根据银行要求会收取手续费,请知悉</p>
      </div>
      <p>
        可提现（元）：
        <span class="number color">{{ adapayMember.avlBalance }}</span>
      </p>
      <p>
        手续费（元）：
        <span class="number color">{{ withdrawalFee.toFixed(2) }}</span>
      </p>
      <p>
        实际到账（元）：
        <span class="number color">
          {{ adapayMember.avlBalance - withdrawalFee }}
        </span>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </span>
    </el-dialog>
    <!-- 提现记录 -->
    <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">
          <template slot-scope="scope">
            <span>{{
              scope.row.clearingStatus === "0" ? "未清分" : "已清分"
            }}</span>
          </template>
        </el-table-column>
        <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>
  </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>
.color60 {
  color: #606266;
}

.center {
  display: flex;
  align-content: center;
  margin-top: 30px;
}

.margin-20 {
  margin: 20px 0;
  font-size: 20px;
}

.font-13 {
  font-size: 13px;
}

.header {
  display: flex;
  align-items: center;
}

.header-cont {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-txt {
  font-size: 24px;
}

.text {
  font-size: 12px;
  color: red;
}

.foot1 {
  width: 20%;
  margin-top: 10px;

  ::v-deep .el-descriptions-item__label {
    width: 80px;
    margin-right: 0;
  }
}

.foot2 {
  margin-left: 10px;
  margin-right: 10px;
  width: 450px;

  ::v-deep .el-descriptions-item__label {
    width: 105px;
    margin-right: 0;
  }
}

.foot3 {
  width: 400px;
  margin-right: 10px;

  ::v-deep .el-descriptions-item__label {
    width: 108px;
    margin-right: 0;
  }
}

.foot4 {
  display: inline-block;
}

.margin-right {
  width: 500px;
  // margin-right: 50px;
  text-align: center;
}

.color {
  color: #000;
  font-weight: bolder;
}
</style>