feat: 完善用户管理功能,新增用户详情弹窗和审核页面优化
- 新增UserDetailModal组件,支持用户基础信息、发票抬头和操作记录查看 - 完善用户管理API数据结构,添加用户类型字段和模拟数据优化 - 实现用户详情查看功能,支持完整信息展示 - 优化估值审核详情页样式,改进标签页和区块视觉效果 - 修复审核详情页面布局问题,提升用户体验
This commit is contained in:
parent
850a63b37c
commit
09469888b4
@ -276,6 +276,120 @@ const mockValuationDetails = valuationRecords.map((record) => ({
|
|||||||
...record,
|
...record,
|
||||||
}))
|
}))
|
||||||
|
|
||||||
|
const mockAppUsers = [
|
||||||
|
{
|
||||||
|
id: 11111111,
|
||||||
|
phone: '15021982682',
|
||||||
|
wechat: 'f1498480844',
|
||||||
|
created_at: '2024-01-15T10:30:00Z',
|
||||||
|
notes: '测试用户1',
|
||||||
|
remaining_count: 1,
|
||||||
|
user_type: '体验用户',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11111112,
|
||||||
|
phone: '13800138002',
|
||||||
|
wechat: 'wx_limming2024',
|
||||||
|
created_at: '2024-02-20T14:20:00Z',
|
||||||
|
notes: '付费用户',
|
||||||
|
remaining_count: 5,
|
||||||
|
user_type: '付费用户',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11111113,
|
||||||
|
phone: '13800138003',
|
||||||
|
wechat: null,
|
||||||
|
created_at: '2024-03-10T08:45:00Z',
|
||||||
|
notes: null,
|
||||||
|
remaining_count: 0,
|
||||||
|
user_type: '体验用户',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11111114,
|
||||||
|
phone: '13800138004',
|
||||||
|
wechat: 'chenjun_vip',
|
||||||
|
created_at: '2024-04-05T11:30:00Z',
|
||||||
|
notes: 'VIP用户',
|
||||||
|
remaining_count: 10,
|
||||||
|
user_type: 'VIP',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11111115,
|
||||||
|
phone: '13800138005',
|
||||||
|
wechat: 'liuxia888',
|
||||||
|
created_at: '2024-05-12T16:15:00Z',
|
||||||
|
notes: '体验用户',
|
||||||
|
remaining_count: 3,
|
||||||
|
user_type: '体验用户',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11111116,
|
||||||
|
phone: '13800138006',
|
||||||
|
wechat: null,
|
||||||
|
created_at: '2024-06-18T09:00:00Z',
|
||||||
|
notes: '新注册用户',
|
||||||
|
remaining_count: 2,
|
||||||
|
user_type: '体验用户',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11111117,
|
||||||
|
phone: '13800138007',
|
||||||
|
wechat: 'zhaolei2024',
|
||||||
|
created_at: '2024-07-22T12:45:00Z',
|
||||||
|
notes: null,
|
||||||
|
remaining_count: 0,
|
||||||
|
user_type: '体验用户',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11111118,
|
||||||
|
phone: '13800138008',
|
||||||
|
wechat: 'sunmei_user',
|
||||||
|
created_at: '2024-08-30T15:20:00Z',
|
||||||
|
notes: '活跃用户',
|
||||||
|
remaining_count: 7,
|
||||||
|
user_type: 'VIP',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const defaultInvoiceHeaders = [
|
||||||
|
{
|
||||||
|
company_name: '成都文创科技有限公司',
|
||||||
|
tax_number: '91510100MA7XYZ1234',
|
||||||
|
register_address: '四川省成都市高新区天府三街666号',
|
||||||
|
register_phone: '028-66666666',
|
||||||
|
bank_name: '招商银行成都分行',
|
||||||
|
bank_account: '6225 6666 8888 0000',
|
||||||
|
email: 'finance@scwenchuang.com',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
company_name: '天府文化发展有限公司',
|
||||||
|
tax_number: '91510100678912345K',
|
||||||
|
register_address: '四川省成都市武侯区科华北路88号',
|
||||||
|
register_phone: '028-12345678',
|
||||||
|
bank_name: '中国工商银行成都分行',
|
||||||
|
bank_account: '6212 8888 0000 9999',
|
||||||
|
email: 'invoice@tfculture.com',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const defaultOperationLogs = [
|
||||||
|
{
|
||||||
|
time: '2025-10-31 18:30:30',
|
||||||
|
operator: 'admin',
|
||||||
|
records: ['剩余估值次数:0 -> 1', '类型:付费估值', '备注:新用户'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '2025-10-31 18:30:30',
|
||||||
|
operator: 'admin',
|
||||||
|
records: ['剩余估值次数:2 -> 1', '类型:付费估值', '备注:退款'],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
time: '2025-10-31 18:30:30',
|
||||||
|
operator: 'admin',
|
||||||
|
records: ['用户备注:111111111111 -> 22222222222222222222'],
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
login: (data) => request.post('/base/access_token', data, { noNeedToken: true }),
|
login: (data) => request.post('/base/access_token', data, { noNeedToken: true }),
|
||||||
getUserInfo: () => request.get('/base/userinfo'),
|
getUserInfo: () => request.get('/base/userinfo'),
|
||||||
@ -317,76 +431,8 @@ export default {
|
|||||||
getAuditLogList: (params = {}) => request.get('/auditlog/list', { params }),
|
getAuditLogList: (params = {}) => request.get('/auditlog/list', { params }),
|
||||||
// app users (客户端用户管理) - 使用现有的后端接口
|
// app users (客户端用户管理) - 使用现有的后端接口
|
||||||
getAppUserList: (params = {}) => {
|
getAppUserList: (params = {}) => {
|
||||||
// Mock 数据
|
|
||||||
const mockUsers = [
|
|
||||||
{
|
|
||||||
id: 11111111,
|
|
||||||
phone: '15021982682',
|
|
||||||
wechat: 'f1498480844',
|
|
||||||
created_at: '2024-01-15T10:30:00Z',
|
|
||||||
notes: '测试用户1',
|
|
||||||
remaining_count: 1
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 11111112,
|
|
||||||
phone: '13800138002',
|
|
||||||
wechat: 'wx_limming2024',
|
|
||||||
created_at: '2024-02-20T14:20:00Z',
|
|
||||||
notes: '付费用户',
|
|
||||||
remaining_count: 5
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 11111113,
|
|
||||||
phone: '13800138003',
|
|
||||||
wechat: null,
|
|
||||||
created_at: '2024-03-10T08:45:00Z',
|
|
||||||
notes: null,
|
|
||||||
remaining_count: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 11111114,
|
|
||||||
phone: '13800138004',
|
|
||||||
wechat: 'chenjun_vip',
|
|
||||||
created_at: '2024-04-05T11:30:00Z',
|
|
||||||
notes: 'VIP用户',
|
|
||||||
remaining_count: 10
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 11111115,
|
|
||||||
phone: '13800138005',
|
|
||||||
wechat: 'liuxia888',
|
|
||||||
created_at: '2024-05-12T16:15:00Z',
|
|
||||||
notes: '体验用户',
|
|
||||||
remaining_count: 3
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 11111116,
|
|
||||||
phone: '13800138006',
|
|
||||||
wechat: null,
|
|
||||||
created_at: '2024-06-18T09:00:00Z',
|
|
||||||
notes: '新注册用户',
|
|
||||||
remaining_count: 2
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 11111117,
|
|
||||||
phone: '13800138007',
|
|
||||||
wechat: 'zhaolei2024',
|
|
||||||
created_at: '2024-07-22T12:45:00Z',
|
|
||||||
notes: null,
|
|
||||||
remaining_count: 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 11111118,
|
|
||||||
phone: '13800138008',
|
|
||||||
wechat: 'sunmei_user',
|
|
||||||
created_at: '2024-08-30T15:20:00Z',
|
|
||||||
notes: '活跃用户',
|
|
||||||
remaining_count: 7
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
// 模拟分页和搜索
|
// 模拟分页和搜索
|
||||||
let filteredUsers = [...mockUsers]
|
let filteredUsers = [...mockAppUsers]
|
||||||
|
|
||||||
// 手机号搜索
|
// 手机号搜索
|
||||||
if (params.phone) {
|
if (params.phone) {
|
||||||
@ -415,13 +461,32 @@ export default {
|
|||||||
resolve({
|
resolve({
|
||||||
data: paginatedUsers,
|
data: paginatedUsers,
|
||||||
total: filteredUsers.length,
|
total: filteredUsers.length,
|
||||||
page: page,
|
page,
|
||||||
page_size: pageSize
|
page_size: pageSize,
|
||||||
})
|
})
|
||||||
}, 300) // 模拟网络延迟
|
}, 300)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
getAppUserById: (params = {}) => request.get('/app-user/detail', { params }),
|
getAppUserById: (params = {}) =>
|
||||||
|
new Promise((resolve) => {
|
||||||
|
const id = Number(params.id)
|
||||||
|
const user = mockAppUsers.find((item) => item.id === id) || {}
|
||||||
|
setTimeout(() => {
|
||||||
|
resolve({
|
||||||
|
baseInfo: {
|
||||||
|
id: user.id,
|
||||||
|
phone: user.phone,
|
||||||
|
wechat: user.wechat,
|
||||||
|
register_time: user.created_at,
|
||||||
|
notes: user.notes,
|
||||||
|
remaining_count: user.remaining_count,
|
||||||
|
user_type: user.user_type || '体验用户',
|
||||||
|
},
|
||||||
|
invoiceHeaders: defaultInvoiceHeaders,
|
||||||
|
operationLogs: defaultOperationLogs,
|
||||||
|
})
|
||||||
|
}, 300)
|
||||||
|
}),
|
||||||
createAppUser: (data = {}) => request.post('/app-user/register', data),
|
createAppUser: (data = {}) => request.post('/app-user/register', data),
|
||||||
updateAppUser: (data = {}) => request.post('/app-user/update', data),
|
updateAppUser: (data = {}) => request.post('/app-user/update', data),
|
||||||
deleteAppUser: (params = {}) => request.delete('/app-user/delete', { params }),
|
deleteAppUser: (params = {}) => request.delete('/app-user/delete', { params }),
|
||||||
|
|||||||
222
web/src/views/user-management/user-list/UserDetailModal.vue
Normal file
222
web/src/views/user-management/user-list/UserDetailModal.vue
Normal file
@ -0,0 +1,222 @@
|
|||||||
|
<script setup>
|
||||||
|
import { computed, ref, watch, h } from 'vue'
|
||||||
|
import { NModal, NButton, NTabs, NTabPane, NDataTable, NSpin } from 'naive-ui'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
visible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:visible'])
|
||||||
|
|
||||||
|
const activeTab = ref('basic')
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.visible,
|
||||||
|
(show) => {
|
||||||
|
if (!show) {
|
||||||
|
activeTab.value = 'basic'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const baseInfo = computed(() => props.data?.baseInfo || {})
|
||||||
|
const invoiceHeaders = computed(() => props.data?.invoiceHeaders || [])
|
||||||
|
const operationLogs = computed(() => props.data?.operationLogs || [])
|
||||||
|
|
||||||
|
const invoiceColumns = [
|
||||||
|
{ title: '公司名称', key: 'company_name', ellipsis: { tooltip: true } },
|
||||||
|
{ title: '公司税号', key: 'tax_number', ellipsis: { tooltip: true } },
|
||||||
|
{ title: '注册地址', key: 'register_address', ellipsis: { tooltip: true } },
|
||||||
|
{ title: '注册电话', key: 'register_phone' },
|
||||||
|
{ title: '开户银行', key: 'bank_name' },
|
||||||
|
{ title: '银行账号', key: 'bank_account', ellipsis: { tooltip: true } },
|
||||||
|
{ title: '邮箱', key: 'email', ellipsis: { tooltip: true } },
|
||||||
|
]
|
||||||
|
|
||||||
|
const logColumns = [
|
||||||
|
{ title: '操作时间', key: 'time', width: 160 },
|
||||||
|
{ title: '操作人', key: 'operator', width: 100 },
|
||||||
|
{
|
||||||
|
title: '操作记录',
|
||||||
|
key: 'records',
|
||||||
|
render: (row) =>
|
||||||
|
h(
|
||||||
|
'div',
|
||||||
|
{ class: 'log-record' },
|
||||||
|
row.records?.map((item, idx) => h('div', { key: idx }, item))
|
||||||
|
),
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
function handleClose() {
|
||||||
|
emit('update:visible', false)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<NModal
|
||||||
|
:show="visible"
|
||||||
|
preset="card"
|
||||||
|
title="用户信息"
|
||||||
|
style="width: 780px"
|
||||||
|
:bordered="false"
|
||||||
|
size="huge"
|
||||||
|
:mask-closable="false"
|
||||||
|
@update:show="$emit('update:visible', $event)"
|
||||||
|
>
|
||||||
|
<NSpin :show="loading">
|
||||||
|
<div class="user-detail-modal">
|
||||||
|
<NTabs v-model:value="activeTab" type="card" size="large" class="detail-tabs">
|
||||||
|
<NTabPane name="basic" tab="基础信息">
|
||||||
|
<div class="basic-info">
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="label">ID:</span>
|
||||||
|
<span class="value">{{ baseInfo.id || '-' }}</span>
|
||||||
|
<span class="label">手机号:</span>
|
||||||
|
<span class="value">{{ baseInfo.phone || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="label">微信号:</span>
|
||||||
|
<span class="value">{{ baseInfo.wechat || '-' }}</span>
|
||||||
|
<span class="label">注册时间:</span>
|
||||||
|
<span class="value">{{ baseInfo.register_time || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row">
|
||||||
|
<span class="label">剩余次数:</span>
|
||||||
|
<span class="value">{{ baseInfo.remaining_count ?? '-' }}</span>
|
||||||
|
<span class="label">用户类型:</span>
|
||||||
|
<span class="value">{{ baseInfo.user_type || '-' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="info-row notes">
|
||||||
|
<span class="label">备注:</span>
|
||||||
|
<div class="notes-content">{{ baseInfo.notes || '暂无备注' }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</NTabPane>
|
||||||
|
<NTabPane name="invoice" tab="发票抬头">
|
||||||
|
<NDataTable
|
||||||
|
class="section-table"
|
||||||
|
:columns="invoiceColumns"
|
||||||
|
:data="invoiceHeaders"
|
||||||
|
:pagination="false"
|
||||||
|
:bordered="false"
|
||||||
|
:single-line="false"
|
||||||
|
>
|
||||||
|
<template #empty>
|
||||||
|
<div class="empty">暂无发票抬头信息</div>
|
||||||
|
</template>
|
||||||
|
</NDataTable>
|
||||||
|
</NTabPane>
|
||||||
|
<NTabPane name="logs" tab="操作记录">
|
||||||
|
<NDataTable
|
||||||
|
class="section-table"
|
||||||
|
:columns="logColumns"
|
||||||
|
:data="operationLogs"
|
||||||
|
:pagination="false"
|
||||||
|
:bordered="false"
|
||||||
|
:single-line="false"
|
||||||
|
>
|
||||||
|
<template #empty>
|
||||||
|
<div class="empty">暂无操作记录</div>
|
||||||
|
</template>
|
||||||
|
</NDataTable>
|
||||||
|
</NTabPane>
|
||||||
|
</NTabs>
|
||||||
|
|
||||||
|
<div class="action-buttons">
|
||||||
|
<NButton @click="handleClose">取消</NButton>
|
||||||
|
<NButton type="primary" @click="handleClose">确定</NButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</NSpin>
|
||||||
|
</NModal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.user-detail-modal {
|
||||||
|
padding: 12px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-tabs :deep(.n-tabs-nav-scroll-content) {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.basic-info {
|
||||||
|
padding: 12px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1f2329;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-row.notes {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
min-width: 80px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
flex: 1;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notes-content {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 60px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #ebedf0;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-table :deep(.n-data-table-th) {
|
||||||
|
background: #f6f7fb;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-table :deep(.n-data-table-th),
|
||||||
|
.section-table :deep(.n-data-table-td) {
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 12px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-table .empty {
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
padding: 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.log-record div + div {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 16px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -16,6 +16,7 @@ import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
|
|||||||
import CrudModal from '@/components/table/CrudModal.vue'
|
import CrudModal from '@/components/table/CrudModal.vue'
|
||||||
import CrudTable from '@/components/table/CrudTable.vue'
|
import CrudTable from '@/components/table/CrudTable.vue'
|
||||||
import LimitSettingModal from './LimitSettingModal.vue'
|
import LimitSettingModal from './LimitSettingModal.vue'
|
||||||
|
import UserDetailModal from './UserDetailModal.vue'
|
||||||
|
|
||||||
import { formatDate, renderIcon } from '@/utils'
|
import { formatDate, renderIcon } from '@/utils'
|
||||||
import { useCRUD } from '@/composables'
|
import { useCRUD } from '@/composables'
|
||||||
@ -32,6 +33,14 @@ const vPermission = resolveDirective('permission')
|
|||||||
const limitModalVisible = ref(false)
|
const limitModalVisible = ref(false)
|
||||||
const currentUser = ref(null)
|
const currentUser = ref(null)
|
||||||
|
|
||||||
|
const detailModalVisible = ref(false)
|
||||||
|
const detailLoading = ref(false)
|
||||||
|
const userDetail = ref({
|
||||||
|
baseInfo: {},
|
||||||
|
invoiceHeaders: [],
|
||||||
|
operationLogs: [],
|
||||||
|
})
|
||||||
|
|
||||||
const {
|
const {
|
||||||
modalVisible,
|
modalVisible,
|
||||||
modalTitle,
|
modalTitle,
|
||||||
@ -156,9 +165,30 @@ const columns = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
// 查看用户详情
|
// 查看用户详情
|
||||||
function handleViewDetail(row) {
|
async function handleViewDetail(row) {
|
||||||
// 这里可以跳转到详情页面或打开详情弹窗
|
detailModalVisible.value = true
|
||||||
$message.info('查看用户详情功能待实现')
|
detailLoading.value = true
|
||||||
|
try {
|
||||||
|
const detail = await api.getAppUserById({ id: row.id })
|
||||||
|
const baseInfoFromServer = detail?.baseInfo || {}
|
||||||
|
userDetail.value = {
|
||||||
|
baseInfo: {
|
||||||
|
...baseInfoFromServer,
|
||||||
|
id: row.id,
|
||||||
|
phone: row.phone,
|
||||||
|
wechat: row.wechat,
|
||||||
|
register_time: row.created_at ? formatDate(row.created_at) : '-',
|
||||||
|
notes: row.notes,
|
||||||
|
remaining_count: row.remaining_count,
|
||||||
|
},
|
||||||
|
invoiceHeaders: detail?.invoiceHeaders || [],
|
||||||
|
operationLogs: detail?.operationLogs || [],
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
$message.error('获取用户详情失败')
|
||||||
|
} finally {
|
||||||
|
detailLoading.value = false
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 次数设置
|
// 次数设置
|
||||||
@ -271,6 +301,12 @@ const validateForm = {
|
|||||||
:user-data="currentUser"
|
:user-data="currentUser"
|
||||||
@save="handleSaveLimitSetting"
|
@save="handleSaveLimitSetting"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<!-- 用户详情弹窗 -->
|
||||||
|
<UserDetailModal
|
||||||
|
v-model:visible="detailModalVisible"
|
||||||
|
:data="userDetail"
|
||||||
|
:loading="detailLoading"
|
||||||
|
/>
|
||||||
</CommonPage>
|
</CommonPage>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -236,7 +236,12 @@ const handleCertificateConfirm = (data) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<NTabs v-model:value="activeDetailTab">
|
<NTabs
|
||||||
|
v-model:value="activeDetailTab"
|
||||||
|
type="line"
|
||||||
|
size="large"
|
||||||
|
class="audit-tabs"
|
||||||
|
>
|
||||||
<NTabPane name="audit" tab="审核信息">
|
<NTabPane name="audit" tab="审核信息">
|
||||||
<NSpin :show="loading">
|
<NSpin :show="loading">
|
||||||
<div v-for="section in detailSections" :key="section.key" class="detail-section">
|
<div v-for="section in detailSections" :key="section.key" class="detail-section">
|
||||||
@ -387,19 +392,42 @@ const handleCertificateConfirm = (data) => {
|
|||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.audit-tabs :deep(.n-tabs-nav) {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audit-tabs :deep(.n-tabs-tab) {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1d2129;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audit-tabs :deep(.n-tabs-tab.n-tabs-tab--active) {
|
||||||
|
color: #ff6f3b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.audit-tabs :deep(.n-tabs-nav__line) {
|
||||||
|
background-color: #ff6f3b;
|
||||||
|
height: 3px;
|
||||||
|
border-radius: 999px;
|
||||||
|
}
|
||||||
|
|
||||||
.section-title {
|
.section-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 12px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #1d2129;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-title .dot {
|
.section-title .dot {
|
||||||
width: 8px;
|
width: 10px;
|
||||||
height: 8px;
|
height: 18px;
|
||||||
border-radius: 50%;
|
border-radius: 4px;
|
||||||
background: #409eff;
|
background: #3b82f6;
|
||||||
}
|
}
|
||||||
|
|
||||||
.detail-section :deep(.n-data-table) {
|
.detail-section :deep(.n-data-table) {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user