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

<template>
  <div class="app-container">
    <div class="header">
      <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="运营商">
                <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" style="width: 20%">
          <div class="color60">冻结金额(元)</div>
          <div class="margin-20 color">{{ adapayMember.frzBalance }}</div>
          <div>
            注:
            <span class="text"
              >当配置了自动结算功能，在每日发起结算时会将可用余额转为冻结金额。该部分金额不允许取现。</span
            >
          </div>
        </div>
        <!-- <div class="foot4"> -->

        <!-- <div class="margin-right">
            <div class="color60">昨日日终余额(元)</div>
            <div class="margin-20 color">{{ adapayMember.lastAvlBalance }}</div>
          </div> -->
        <!-- <div class="margin-right">
            <div>提现申请中</div>
            <div class="margin-10">
              {{ adapayMember.withdrawalApplication }}(元)
            </div>
            <el-button type="primary" @click="recordDialog = true"
            >提现记录</el-button
          >
          </div>
          <div class="margin-right">
            <div>已提现</div>
            <div class="margin-10">{{ adapayMember.withdrawn }}(元)</div>
            <div style="font-size: 13px">已成功提现到绑定银行卡的金额汇总</div>
          </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="stationName">
        <template slot-scope="scope">
          <router-link
            :to="
              '/station/detail/index/' +
              scope.row.stationId +
              '/' +
              scope.row.stationName
            "
            class="link-type"
          >
            <span>{{ scope.row.stationName }}</span>
          </router-link>
        </template>
      </el-table-column> -->

      <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="clearingTime" /> -->
      <!-- <el-table-column
        label="应清分金额"
        align="center"
        prop="shouldClearingAmount"
      />
      <el-table-column
        label="实际清分金额"
        align="center"
        prop="actualClearingAmount"
      />
      <el-table-column
        label="清分账单编号"
        align="center"
        prop="clearingBillCode"
      /> -->
      <el-table-column label="提现订单号" align="center" prop=" withdrawCode" />
      <el-table-column
        label="提现申请时间"
        align="center"
        prop="withdrawalTime"
      />
      <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">
          <!-- <span>11</span> -->
          {{ 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="tableData" style="width: 100%">
        <el-table-column label="日期" />
        <el-table-column label="账单状态" />
        <el-table-column label="应收金额(元)" />
        <el-table-column label="充值手续费(元)" />
        <el-table-column label="可提现金额(元)" />
        <el-table-column label="提现订单号(元)" />
        <el-table-column label="提现申请时间(元)" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <router-link
              :to="{
                path: '/financial/merchant/merchantVirtual',
                query: {
                  merchantId: scope.row.id,
                  merchantName: scope.row.merchantName,
                },
              }"
              class="link-type"
            >
              <span>订单流水</span>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      title="订单流水"
      :visible.sync="dialogTableVisible"
      :before-close="orderClose"
    >
      <el-table :data="orderList" v-loading="orderLoading">
        <el-table-column property="orderCode" label="订单编号" />
        <el-table-column property="settleAmount" label="结算金额(元)" />
        <el-table-column property="clearingStatus" label="清分状态">
          <template slot-scope="scope">
            <span>{{
              scope.row.clearingStatus === "0" ? "未清分" : "已清分"
            }}</span>
          </template>
        </el-table-column>
        <el-table-column property="clearingBillCode" label="清分账单编号" />
        <el-table-column property="withdrawStatus" label="提现状态" />
        <el-table-column property="withdrawCode" label="提现编号" />
      </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,
} 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,
    };
  },
  methods: {
    // 银行编码
    cityBankCode(code) {
      if (code == null) {
        return "";
      }
      // if (code === undefined) return;
      const bankList = text.bankList;
      let arr = bankList.find((item) => item.bankCode === code);
      // console.log("银行编码对应的银行名称 arr", arr);
      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;
        // console.log("this.orderTotal", this.orderTotal);
      });
    },
    // 弹层关闭之前执行的事情
    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("查询报表", reportList, merchantOrderReport);
        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();
    },
  },
  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;
  justify-content: space-between;
  align-items: center;
}
.header-txt {
  font-size: 24px;
}
.text {
  font-size: 12px;
  color: red;
}
.foot1 {
  width: 25%;
  margin-top: 10px;
  // .el-descriptions__body .el-descriptions__table {
  //   width: 0 !important;
  // }
}
.foot2 {
  margin-left: 10px;
  margin-right: 10px;
  width: 200px;
}
.foot3 {
  width: 200px;
  margin-right: 10px;
}
.foot4 {
  display: inline-block;
  // flex: 1;
  // display: flex;
  // justify-content: space-between;
  // margin-left: 50px;
}
.margin-right {
  width: 180px;
  margin-right: 10px;
  text-align: center;
}
.color {
  color: #000;
  font-weight: bolder;
}
</style>