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

<template>
    <div class="app-container">
        <div class="main">
            <div class="main-right">
                <p class="center">账户余额(元)</p>
                <p class="center number">{{adapayMember.acctBalance}}</p>
                <p class="center">注:
                    <span class="text">账户余额 = 可用余额 + 冻结余额</span>
                </p>
            </div>
            <div class="main-right">
                <p class="center">可用余额(元)</p>
                <p class="center number">{{adapayMember.avlBalance}}</p>
                <!-- <el-button type="primary" style="margin-left: 25%;" v-if="adapayMember.avlBalance > 0" @click="dialogVisible = true">提现申请</el-button> -->
                <!-- <p class="center " v-else>注: -->
                <p class="center">注:
                    <span class="text">该余额大于0时，才可发起取现</span>
                </p>
                
            </div>
            <div class="main-right">
                <p class="center">冻结金额(元)</p>
                <p class="center number">{{adapayMember.frzBalance}}</p>
                <p class="center ">注:
                    <span class="text">当配置了自动结算功能，在每日发起结算时会将可用余额转为冻结金额。该部分金额不允许取现。</span>
                </p>
            </div>
            <div class="main-right">
                <p class="center">昨日日终余额(元)</p>
                <p class="center number">{{adapayMember.lastAvlBalance}}</p>
                <p class="center">注: 
                    <span class="text">一</span>
                </p>
            </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> -->
        <el-dialog title="提现申请" :visible.sync="dialogVisible" width="33%" :before-close="handleClose">
            温馨提示
            <div style="font-size:12px;color:gray">
                <p>1.提现将在3个工作日内审核到账,节假日审核顺延</p>
                <p>2.部分流量方的充电订单存在账期,需要一定周期后才开始执行清分</p>
                <p>3.提现为银行自动付款,根据银行要求会收取手续费,请知悉</p>
                <p>4.订单收入包含了第三方的分成收入金额,已自动扣除万车充分成金额</p>
            </div>
            <p>可提现(元): 
                <span class="number">{{adapayMember.avlBalance}}</span>
            </p>
            <p>实际到账(元):
                <span class="number">0</span>
            </p>
            <p>手续费(元):
                <span class="number">10.00</span>
            </p>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">提交</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    queryAdapayAccountBalance
} from "@/api/adapayMember/adapayMember";
export default {
  props:['merchantId'],
    data() {
        return {
            activeName: "first",
            showOrHideText: "显示更多查询条件",
            buttonBoolean: false,
            //图标，可根据自己的需求匹配
            icon: "el-icon-caret-bottom",
            createTimeRange:'',
            adapayMember:{},
            dialogVisible: false
        };
    },
    methods: {
        handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        },
        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>
.number{
    color:#50bfff;font-size:20px;font-weight: bolder;
}
.center{
    text-align: center;
}
.text{
    font-size: 12px;
    color: red;
}
.main {
    display: flex;
    justify-content: space-between;
    // align-items: baseline;
    .main-right{
        width: 310px;
        margin-right: 20px;
        border: 1px solid #e6ebf5;
        border-radius: 10px;
        padding: 10px;
        transition: all .2s linear;
    }
}
.main-right:hover{
    box-shadow: 0 0 5px 3px #999;
}
.bord {
    position: relative;
    top: 68px;
    height: 60px;
    border-left: 1px solid gray;
}
.card {
    // width: 230px;
    padding: 10px;
}
</style>