jsowell-charger-web/jsowell-ui/src/views/pile/merchant/components/walletSummary.vue

<template>
    <div class="app-container">
        <div style="display: flex; background-color: #ebebf0; padding: 10px">
            <div style="width: 25%">
                <h2>钱包汇总</h2>
                <p>运营商：举视新能源</p>
                <p>商家性质：企业</p>
<!--                <p>开户状态：进件成功</p>-->
                <p>开户行名称：中国农业银行股份有限公司</p>
                <p>收款卡号：46456412</p>
                <p>预留手机号：452584</p>
            </div>
            <div class="main" style="flex: 1; align-items: baseline">
                <div class="bord"></div>
                <div class="card">
                    <p>账户余额</p>
                    <p>{{adapayMember.acctBalance}} （元）</p>
                    <p style="text-align: justify">
                        账户余额 = 可用余额 + 冻结余额
                    </p>
                </div>
                <div class="bord"></div>
                <div class="card">
                    <p>可用余额</p>
                    <p>{{adapayMember.avlBalance}} （元）</p>
                    <p>该余额大于0时，才可发起取现</p>
                </div>
                <div class="bord"></div>
                <div class="card">
                    冻结余额
                    <p>{{adapayMember.frzBalance}} （元）</p>
                    <p>当配置了自动结算功能，在每日发起结算时会将可用余额转为冻结金额。该部分金额不允许取现。</p>
                </div>
                <div class="bord"></div>
                <div class="card">
                    <p>昨日日终余额</p>
                    <p>{{adapayMember.lastAvlBalance}} （元）</p>
                    <!-- <button>昨</button> -->
                </div>
                <div class="bord"></div>
                <!-- <div class="card">
                    <p>已提现</p>
                    <p>165（元）</p>
                    <p>以成功提现到绑定银行卡的金额汇总</p>
                </div> -->
            </div>
        </div>
        <el-tabs
            v-model="activeName"
            type="card"
            @tab-click="handleClick"
            style="margin-top: 10px"
        >
            <el-tab-pane label="清分记录" name="first">
                <el-form
                    ref="queryForm"
                    :inline="true"
                    label-width="220px"
                >
                    <el-form-item label="清分时间">
                        <el-date-picker
                            v-model="createTimeRange"
                            style="width: 240px"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :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 label="提现申请时间" prop="orderCode">
                        <el-date-picker
                            v-model="createTimeRange"
                            style="width: 240px"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :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 label="清分单号">
                      <el-input></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary">搜索</el-button>
                      <el-button>重置</el-button>
                    </el-form-item>
                    <div v-if="buttonBoolean">
                       <el-form-item label="电站ID"></el-form-item>
                       <el-form-item label="充电场站"></el-form-item>
                       <el-form-item label="订单单号"></el-form-item>
                       <el-form-item label="订单状态"></el-form-item>
                       <el-form-item label="流水状态"></el-form-item>
                       <el-form-item label="流水类型"></el-form-item>
                       <el-form-item label="清分单号"></el-form-item>


                        <el-form-item label="订单来源"></el-form-item>
                        <el-form-item label="清分周期类型"></el-form-item>
                        <el-form-item label="清分状态"></el-form-item>
                        <el-form-item label="提现单号"></el-form-item>
                    </div>
                    <el-button
                        @click="showOrHide()"
                        style="border-color: white;
                            background-color: white;
                            font-size: x-small;
                            color: #50bfff;
                            padding: 1px 2px;
                            margin-left: 40%;
                            margin-top: 0px;
                            margin-bottom: 15px;"
                        :icon="icon"
                        >{{ showOrHideText }}
                    </el-button>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="订单流水" name="second">订单流水</el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>queryAdapayAccountBalance
import {
    queryAdapayAccountBalance
} from "@/api/adapayMember/adapayMember";
export default {
  props:['merchantId'],
    data() {
        return {
            activeName: "first",
            showOrHideText: "显示更多查询条件",
            buttonBoolean: false,
            //图标，可根据自己的需求匹配
            icon: "el-icon-caret-bottom",
            createTimeRange:'',
            adapayMember:{}
        };
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        showOrHide() {
            if (this.buttonBoolean) {
                this.icon = "el-icon-caret-bottom";
                this.showOrHideText = "显示更多查询条件";
                this.buttonBoolean = !this.buttonBoolean;
            } else {
                this.icon = "el-icon-caret-top";
                this.showOrHideText = "收起";
                this.buttonBoolean = !this.buttonBoolean;
            }
        },
          getList() {
            console.log("this.merchantId", this.merchantId);
            let param = {
                merchantId: this.merchantId,
            };
            queryAdapayAccountBalance(param).then((response) => {
                console.log("查询 queryAdapayAccountBalance", response);
                 this.adapayMember = response.data;
             
            });
        },

    },
    created () {
      this.getList()
    }
};
</script>
<style lang="scss" scoped>
.main {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.bord {
    position: relative;
    top: 68px;
    height: 60px;
    border-left: 1px solid gray;
}
.card {
    width: 190px;
}
</style>