add recharge check
This commit is contained in:
parent
8090c6a28c
commit
ea2361b232
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 }
|
||||
]
|
||||
Loading…
Reference in New Issue