add recharge check

This commit is contained in:
mazh 2026-04-25 19:18:00 +08:00
parent 8090c6a28c
commit ea2361b232
2 changed files with 364 additions and 4 deletions

View File

@ -1,7 +1,327 @@
<script setup lang="ts"></script>
<template>
<h1>存款审核</h1>
<div class="rechange-check">
<RechangeSearch :search-form="searchForm" :search-options="searchOptions" @search="handleSearch" @reset="handleReset">
<template #button>
<el-button type="danger" plain @click="handleReject">驳回</el-button>
<el-button type="success" @click="handleApprove">通过</el-button>
<el-button type="primary" plain @click="handleExport">导出</el-button>
</template>
</RechangeSearch>
<div class="table-wrapper">
<el-table v-loading="loading" :data="tableData" border height="100%" row-key="id"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="序号" width="70" align="center">
<template #default="scope">
{{ (currentPage - 1) * pageSize + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label"
:width="column.width" :align="column.align || 'center'" show-overflow-tooltip />
</el-table>
</div>
<RechangePagination v-model="currentPage" v-model:pageSizeValue="pageSize" :total="total"
@pagination-change="handlePaginationChange" />
</div>
</template>
<style scoped lang="scss"></style>
<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { computed, onMounted, ref } from 'vue'
import RechangeSearch from '@/components/common/Search.vue'
import RechangePagination from '@/components/common/Pagination.vue'
import { rechangeCheckSearch, rechangeCheckTableColumns } from './options'
interface TableRow {
id: number
account: string
agentName: string
serialNo: string
walletAddress: string
walletType: string
holderName: string
bankName: string
bankCode: string
bankAddress: string
depositAmount: string
depositCurrency: string
arrivalAmount: string
arrivalCurrency: string
exchangeRate: string
type: string
userType: number
}
const mockTableData: TableRow[] = [
{
id: 1,
account: 'U100001',
agentName: '一级代理A',
serialNo: 'RC202604250001',
walletAddress: 'TRX8x2f...7Kp9',
walletType: 'TRC20',
holderName: '张三',
bankName: '中国银行',
bankCode: 'BKCHCNBJ',
bankAddress: '上海市浦东新区世纪大道100号',
depositAmount: '1000.00',
depositCurrency: 'USDT',
arrivalAmount: '1000.00',
arrivalCurrency: 'USDT',
exchangeRate: '1.00',
type: '钱包存款',
userType: 1,
},
{
id: 2,
account: 'U100002',
agentName: '一级代理B',
serialNo: 'RC202604250002',
walletAddress: '0x5fa1...ac20',
walletType: 'ERC20',
holderName: '李四',
bankName: '工商银行',
bankCode: 'ICBKCNBJ',
bankAddress: '北京市朝阳区建国路88号',
depositAmount: '5000.00',
depositCurrency: 'USD',
arrivalAmount: '5000.00',
arrivalCurrency: 'USD',
exchangeRate: '1.00',
type: '银行转账',
userType: 1,
},
{
id: 3,
account: 'A200001',
agentName: '总代运营中心',
serialNo: 'RC202604250003',
walletAddress: 'bc1q7m...91fa',
walletType: 'BTC',
holderName: '王五',
bankName: '建设银行',
bankCode: 'PCBCCNBJ',
bankAddress: '深圳市南山区科技园中一路1号',
depositAmount: '20000.00',
depositCurrency: 'CNY',
arrivalAmount: '2750.00',
arrivalCurrency: 'USD',
exchangeRate: '7.27',
type: '线下汇款',
userType: 2,
},
{
id: 4,
account: 'U100003',
agentName: '一级代理C',
serialNo: 'RC202604250004',
walletAddress: 'TRX9m4k...6Ts1',
walletType: 'TRC20',
holderName: '赵六',
bankName: '农业银行',
bankCode: 'ABOCCNBJ',
bankAddress: '广州市天河区珠江新城华夏路18号',
depositAmount: '3000.00',
depositCurrency: 'USDT',
arrivalAmount: '3000.00',
arrivalCurrency: 'USDT',
exchangeRate: '1.00',
type: '钱包存款',
userType: 1,
},
{
id: 5,
account: 'A200002',
agentName: '华东代理中心',
serialNo: 'RC202604250005',
walletAddress: '0x9bd7...b3f2',
walletType: 'ERC20',
holderName: '孙七',
bankName: '招商银行',
bankCode: 'CMBCCNBS',
bankAddress: '杭州市西湖区文三路90号',
depositAmount: '8000.00',
depositCurrency: 'USD',
arrivalAmount: '8000.00',
arrivalCurrency: 'USD',
exchangeRate: '1.00',
type: '银行转账',
userType: 2,
},
{
id: 6,
account: 'U100004',
agentName: '一级代理D',
serialNo: 'RC202604250006',
walletAddress: 'TRX6a1d...3Lm8',
walletType: 'TRC20',
holderName: '周八',
bankName: '交通银行',
bankCode: 'COMMCNSH',
bankAddress: '成都市高新区天府大道北段966号',
depositAmount: '1200.00',
depositCurrency: 'USDT',
arrivalAmount: '1200.00',
arrivalCurrency: 'USDT',
exchangeRate: '1.00',
type: '钱包存款',
userType: 1,
},
{
id: 7,
account: 'U100005',
agentName: '一级代理E',
serialNo: 'RC202604250007',
walletAddress: 'bc1qx8...0de4',
walletType: 'BTC',
holderName: '吴九',
bankName: '浦发银行',
bankCode: 'SPDBCNBS',
bankAddress: '苏州市工业园区星湖街328号',
depositAmount: '15000.00',
depositCurrency: 'CNY',
arrivalAmount: '2063.27',
arrivalCurrency: 'USD',
exchangeRate: '7.27',
type: '线下汇款',
userType: 1,
},
{
id: 8,
account: 'A200003',
agentName: '华南代理中心',
serialNo: 'RC202604250008',
walletAddress: '0x8e2f...d1a0',
walletType: 'ERC20',
holderName: '郑十',
bankName: '民生银行',
bankCode: 'MSBCCNBJ',
bankAddress: '厦门市思明区湖滨南路258号',
depositAmount: '6000.00',
depositCurrency: 'USD',
arrivalAmount: '6000.00',
arrivalCurrency: 'USD',
exchangeRate: '1.00',
type: '银行转账',
userType: 2,
},
]
const searchOptions = ref(rechangeCheckSearch)
const searchForm = ref({
account: '',
userType: 1,
})
const tableColumns = computed(() => rechangeCheckTableColumns)
const tableData = ref<TableRow[]>([])
const selectedRows = ref<TableRow[]>([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const applyFilters = () => {
const keyword = searchForm.value.account.trim().toLowerCase()
const filtered = mockTableData.filter((item) => {
const matchAccount = !keyword || item.account.toLowerCase().includes(keyword)
const matchUserType = !searchForm.value.userType || item.userType === searchForm.value.userType
return matchAccount && matchUserType
})
total.value = filtered.length
const start = (currentPage.value - 1) * pageSize.value
const end = start + pageSize.value
tableData.value = filtered.slice(start, end)
}
const getList = () => {
loading.value = true
selectedRows.value = []
window.setTimeout(() => {
applyFilters()
loading.value = false
}, 120)
}
onMounted(() => {
getList()
})
const handleSearch = () => {
currentPage.value = 1
getList()
}
const handleReset = () => {
searchForm.value = {
account: '',
userType: 1,
}
currentPage.value = 1
getList()
}
const handleSelectionChange = (rows: TableRow[]) => {
selectedRows.value = rows
}
const handleApprove = () => {
if (!selectedRows.value.length) {
ElMessage.warning('请先选择要通过的记录')
return
}
ElMessage.success('页面已完成,接口后续接入')
}
const handleReject = () => {
if (!selectedRows.value.length) {
ElMessage.warning('请先选择要驳回的记录')
return
}
ElMessage.success('页面已完成,接口后续接入')
}
const handleExport = () => {
ElMessage.success('页面已完成,接口后续接入')
}
const handlePaginationChange = (page: { currentPage: number; pageSize: number }) => {
currentPage.value = page.currentPage
pageSize.value = page.pageSize
applyFilters()
}
</script>
<style scoped lang="scss">
.rechange-check {
height: 100%;
padding-bottom: 70px;
box-sizing: border-box;
:deep(.search-container .el-form) {
flex-wrap: wrap;
align-items: center;
}
:deep(.search-container .el-form-item) {
flex: 0 0 auto;
}
:deep(.search-container .el-input),
:deep(.search-container .el-select) {
width: 100%;
}
.table-wrapper {
height: calc(100vh - 210px);
background: #fff;
border-radius: 6px;
overflow: hidden;
}
}
</style>

View File

@ -0,0 +1,40 @@
export const rechangeCheckSearch = [
{
prop: 'account',
label: '存款账户',
type: 'input' as const,
placeholder: '请输入存款账户',
width: '220px'
},
{
prop: 'userType',
label: '客户类型',
type: 'select' as const,
placeholder: '请选择客户类型',
width: '180px',
options: [
{ label: '客户', value: 1 },
{ label: '代理', value: 2 }
]
}
]
export const rechangeCheckTableColumns = [
{ prop: 'account', label: '账户', align: 'center' as const, width: 140 },
{ prop: 'agentName', label: '所属代理', align: 'center' as const, width: 140 },
{ prop: 'serialNo', label: '流水编号', align: 'center' as const, width: 180 },
{ prop: 'walletAddress', label: '钱包地址', align: 'center' as const, width: 220 },
{ prop: 'walletType', label: '钱包类型', align: 'center' as const, width: 120 },
{ prop: 'holderName', label: '账户持有人姓名', align: 'center' as const, width: 160 },
{ prop: 'bankName', label: '银行名称', align: 'center' as const, width: 160 },
{ prop: 'bankCode', label: '银行识别代码', align: 'center' as const, width: 160 },
{ prop: 'bankAddress', label: '银行地址', align: 'center' as const, width: 200 },
{ prop: 'depositAmount', label: '存款金额', align: 'center' as const, width: 120 },
{ prop: 'depositCurrency', label: '存款币种', align: 'center' as const, width: 120 },
{ prop: 'arrivalAmount', label: '到账金额', align: 'center' as const, width: 120 },
{ prop: 'arrivalCurrency', label: '到账币种', align: 'center' as const, width: 120 },
{ prop: 'exchangeRate', label: '汇率', align: 'center' as const, width: 100 },
{ prop: 'type', label: '类型', align: 'center' as const, width: 100 }
]