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>2121 （元）</p>
                    <p style="text-align: justify">
                        包括未到清分时间以及尚未执行清分的订单数据
                    </p>
                </div>
                <div class="bord"></div>
                <div class="card">
                    <p>清分在途</p>
                    <p>2121 （元）</p>
                    <p>包括未到清分时间以及尚未执行清分的订单数据</p>
                </div>
                <div class="bord"></div>
                <div class="card">
                    可提现
                    <p>1203 （元）</p>
                    <button>提现申请</button>
                </div>
                <div class="bord"></div>
                <div class="card">
                    <p>提现申请中</p>
                    <p>1203 （元）</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>
export default {
    data() {
        return {
            activeName: "first",
            showOrHideText: "显示更多查询条件",
            buttonBoolean: false,
            //图标，可根据自己的需求匹配
            icon: "el-icon-caret-bottom",
            createTimeRange:''
        };
    },
    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;
            }
        },
    },
};
</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>