merchant_feedov_web/src/views/financialManagement/appPuy/index.vue

<!-- 客户充值界面 -->
<template>
    <div class="customer-top-up">
        <!-- 搜索条件区 -->
        <div class="search-section">
            <Search @query="initData" @reset="reset" :SearchForm="ClientSearchForm"></Search>
        </div>
        <!-- 数据表格 -->
        <a-table row-key="id" :columns="UserAdiroColumns" :data="tableData" :pagination="pagination"
            @page-change="evChangePage" @page-size-change="onPageSizeChange" :filter-icon-align-left="true">
            <template #name="{ record }">
                <div class="boldTxt">{{ record.name }}</div>
            </template>
            <template #status="{ record }">
                <div>{{ handleStatusTxt(record.status) }}</div>
            </template>
            <template #puyStatus="{ record }">
                <a-tag :color="record.payStatus == 'SUCCESS' ? '#00b42a' : ''">{{ record.puyStatus }}</a-tag>
            </template>
            <template #image="{ record }">
                <a-image width="60" height="60" :src="record.certificateImg" :preview-props="{
                    actionsLayout: ['rotateRight', 'zoomIn', 'zoomOut'],
                }" style="cursor: pointer;">
                </a-image>
            </template>
        </a-table>

    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { getAdiroePuyList } from "@/api/path/finance.js";
import { columns, handleStatusTxt, statusOptions, UserAdiroColumns, AdminSearchForm, ClientSearchForm } from '../config'
import Search from '@/components/Search/index.vue'
import { Getdictionary, tableFunction, filterDict } from '@/mixins/index.js'
const pagination = ref({
    showTotal: true,
    showJumper: true,
    showPageSize: true,
    total: 0,
    current: 1,
    pageSize: 10,
});

const onPageSizeChange = (pageSize) => {
    pagination.value.pageSize = pageSize;
    pagination.value.current = 1;
    initData();
};


const processData = async (data) => {
    let puyType = await Getdictionary('puyType')
    return (data.records || []).map(res => {
        res.puyStatus = filterDict(puyType,res.payStatus)
        return res
    })
}

const { tableData, evChangePage, initData, reset } = tableFunction(pagination.value, getAdiroePuyList, processData)


onMounted(() => {
    initData();
});

</script>
<style scoped lang="less">
.customer-top-up {
    padding: 20px !important;

    .search-section {
        margin-bottom: 20px;
    }

    .audit-btn {
        margin-bottom: 10px;
    }
}

.text-box {
    width: 100%;
    margin-left: 10px;

    .text {
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 400;
        line-height: 19px;
        color: rgba(153, 153, 153, 1);
        text-align: left;
    }
}
</style>