242 lines
8.3 KiB
Vue
242 lines
8.3 KiB
Vue
<template>
|
|
<div class="page-content">
|
|
<ElCard shadow="never">
|
|
<!-- 搜索栏 -->
|
|
<ElForm :inline="true" :model="searchForm" class="search-form">
|
|
<ElFormItem label="客户账号">
|
|
<ElInput
|
|
v-model="searchForm.accountNo"
|
|
placeholder="请输入客户账号"
|
|
clearable
|
|
style="width: 200px"
|
|
/>
|
|
</ElFormItem>
|
|
<ElFormItem label="客户名称">
|
|
<ElInput
|
|
v-model="searchForm.customerName"
|
|
placeholder="请输入客户名称"
|
|
clearable
|
|
style="width: 200px"
|
|
/>
|
|
</ElFormItem>
|
|
<ElFormItem label="客户类型">
|
|
<ElSelect
|
|
v-model="searchForm.customerType"
|
|
placeholder="请选择"
|
|
clearable
|
|
style="width: 150px"
|
|
>
|
|
<ElOption label="代理商" value="agent" />
|
|
<ElOption label="企业客户" value="enterprise" />
|
|
</ElSelect>
|
|
</ElFormItem>
|
|
<ElFormItem>
|
|
<ElButton type="primary" @click="handleSearch">查询</ElButton>
|
|
<ElButton @click="handleReset">重置</ElButton>
|
|
</ElFormItem>
|
|
</ElForm>
|
|
|
|
<!-- 数据表格 -->
|
|
<ArtTable :data="tableData" index stripe>
|
|
<template #default>
|
|
<ElTableColumn label="客户账号" prop="accountNo" min-width="150" />
|
|
<ElTableColumn label="客户名称" prop="customerName" min-width="150" />
|
|
<ElTableColumn label="客户类型" prop="customerType" width="120">
|
|
<template #default="scope">
|
|
<ElTag :type="scope.row.customerType === 'agent' ? 'success' : 'primary'">
|
|
{{ scope.row.customerType === 'agent' ? '代理商' : '企业客户' }}
|
|
</ElTag>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="佣金总额" prop="totalCommission" width="150">
|
|
<template #default="scope"> ¥{{ scope.row.totalCommission.toFixed(2) }} </template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="可提现金额" prop="availableAmount" width="150">
|
|
<template #default="scope">
|
|
<span style="color: var(--el-color-success)">
|
|
¥{{ scope.row.availableAmount.toFixed(2) }}
|
|
</span>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="待入账金额" prop="pendingAmount" width="150">
|
|
<template #default="scope">
|
|
<span style="color: var(--el-color-warning)">
|
|
¥{{ scope.row.pendingAmount.toFixed(2) }}
|
|
</span>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="已提现金额" prop="withdrawnAmount" width="150">
|
|
<template #default="scope"> ¥{{ scope.row.withdrawnAmount.toFixed(2) }} </template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="提现次数" prop="withdrawCount" width="100" />
|
|
<ElTableColumn label="最后提现时间" prop="lastWithdrawTime" width="180" />
|
|
<ElTableColumn label="操作" width="180" fixed="right">
|
|
<template #default="scope">
|
|
<ElButton link type="primary" @click="handleViewDetail(scope.row)">查看详情</ElButton>
|
|
<ElButton link type="primary" @click="handleViewFlow(scope.row)">流水记录</ElButton>
|
|
</template>
|
|
</ElTableColumn>
|
|
</template>
|
|
</ArtTable>
|
|
|
|
<!-- 分页 -->
|
|
<ElPagination
|
|
v-model:current-page="pagination.page"
|
|
v-model:page-size="pagination.pageSize"
|
|
:total="pagination.total"
|
|
:page-sizes="[10, 20, 50, 100]"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
style="justify-content: flex-end; margin-top: 20px"
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
/>
|
|
</ElCard>
|
|
|
|
<!-- 详情对话框 -->
|
|
<ElDialog v-model="detailDialogVisible" title="客户账号详情" width="800px" align-center>
|
|
<ElDescriptions :column="2" border>
|
|
<ElDescriptionsItem label="客户账号">{{ currentRow?.accountNo }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="客户名称">{{ currentRow?.customerName }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="客户类型">
|
|
<ElTag :type="currentRow?.customerType === 'agent' ? 'success' : 'primary'">
|
|
{{ currentRow?.customerType === 'agent' ? '代理商' : '企业客户' }}
|
|
</ElTag>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="联系电话">{{ currentRow?.phone }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="佣金总额"
|
|
>¥{{ currentRow?.totalCommission.toFixed(2) }}</ElDescriptionsItem
|
|
>
|
|
<ElDescriptionsItem label="可提现金额">
|
|
<span style="color: var(--el-color-success)">
|
|
¥{{ currentRow?.availableAmount.toFixed(2) }}
|
|
</span>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="待入账金额">
|
|
<span style="color: var(--el-color-warning)">
|
|
¥{{ currentRow?.pendingAmount.toFixed(2) }}
|
|
</span>
|
|
</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="已提现金额"
|
|
>¥{{ currentRow?.withdrawnAmount.toFixed(2) }}</ElDescriptionsItem
|
|
>
|
|
<ElDescriptionsItem label="提现次数">{{ currentRow?.withdrawCount }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="最后提现时间">{{
|
|
currentRow?.lastWithdrawTime
|
|
}}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="注册时间">{{ currentRow?.createTime }}</ElDescriptionsItem>
|
|
<ElDescriptionsItem label="备注" :span="2">{{
|
|
currentRow?.remark || '无'
|
|
}}</ElDescriptionsItem>
|
|
</ElDescriptions>
|
|
</ElDialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ElMessage } from 'element-plus'
|
|
|
|
defineOptions({ name: 'CustomerAccount' })
|
|
|
|
const searchForm = reactive({
|
|
accountNo: '',
|
|
customerName: '',
|
|
customerType: ''
|
|
})
|
|
|
|
const pagination = reactive({
|
|
page: 1,
|
|
pageSize: 20,
|
|
total: 100
|
|
})
|
|
|
|
const detailDialogVisible = ref(false)
|
|
const currentRow = ref<any>(null)
|
|
|
|
// 模拟表格数据
|
|
const tableData = ref([
|
|
{
|
|
id: '1',
|
|
accountNo: 'ACC20260001',
|
|
customerName: '深圳市科技有限公司',
|
|
customerType: 'agent',
|
|
phone: '13800138000',
|
|
totalCommission: 158900.5,
|
|
availableAmount: 58900.5,
|
|
pendingAmount: 50000.0,
|
|
withdrawnAmount: 50000.0,
|
|
withdrawCount: 12,
|
|
lastWithdrawTime: '2026-01-08 15:00:00',
|
|
createTime: '2025-06-01 10:00:00',
|
|
remark: '优质代理商'
|
|
},
|
|
{
|
|
id: '2',
|
|
accountNo: 'ACC20260002',
|
|
customerName: '广州智能设备公司',
|
|
customerType: 'enterprise',
|
|
phone: '13900139000',
|
|
totalCommission: 89600.0,
|
|
availableAmount: 35600.0,
|
|
pendingAmount: 24000.0,
|
|
withdrawnAmount: 30000.0,
|
|
withdrawCount: 8,
|
|
lastWithdrawTime: '2026-01-05 10:30:00',
|
|
createTime: '2025-07-15 14:20:00',
|
|
remark: ''
|
|
},
|
|
{
|
|
id: '3',
|
|
accountNo: 'ACC20260003',
|
|
customerName: '北京物联网代理',
|
|
customerType: 'agent',
|
|
phone: '13700137000',
|
|
totalCommission: 256700.0,
|
|
availableAmount: 106700.0,
|
|
pendingAmount: 80000.0,
|
|
withdrawnAmount: 70000.0,
|
|
withdrawCount: 15,
|
|
lastWithdrawTime: '2026-01-09 09:15:00',
|
|
createTime: '2025-05-10 09:00:00',
|
|
remark: '金牌代理商'
|
|
}
|
|
])
|
|
|
|
const handleSearch = () => {
|
|
ElMessage.success('查询成功')
|
|
}
|
|
|
|
const handleReset = () => {
|
|
searchForm.accountNo = ''
|
|
searchForm.customerName = ''
|
|
searchForm.customerType = ''
|
|
ElMessage.info('已重置')
|
|
}
|
|
|
|
const handleViewDetail = (row: any) => {
|
|
currentRow.value = row
|
|
detailDialogVisible.value = true
|
|
}
|
|
|
|
const handleViewFlow = (row: any) => {
|
|
ElMessage.info(`查看 ${row.customerName} 的流水记录`)
|
|
}
|
|
|
|
const handleSizeChange = (size: number) => {
|
|
pagination.pageSize = size
|
|
ElMessage.info(`每页显示 ${size} 条`)
|
|
}
|
|
|
|
const handleCurrentChange = (page: number) => {
|
|
pagination.page = page
|
|
ElMessage.info(`当前第 ${page} 页`)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-content {
|
|
.search-form {
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
</style>
|