feat: 完善用户管理功能，新增用户详情弹窗和审核页面优化

- 新增UserDetailModal组件，支持用户基础信息、发票抬头和操作记录查看 - 完善用户管理API数据结构，添加用户类型字段和模拟数据优化 - 实现用户详情查看功能，支持完整信息展示 - 优化估值审核详情页样式，改进标签页和区块视觉效果 - 修复审核详情页面布局问题，提升用户体验
2025-11-14 18:05:05 +08:00 · 2025-11-14 18:05:05 +08:00 · 09469888b4
commit 09469888b4
parent 850a63b37c
4 changed files with 434 additions and 83 deletions
--- a/web/src/api/index.js
+++ b/web/src/api/index.js
@ -276,6 +276,120 @@ const mockValuationDetails = valuationRecords.map((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 {
  login: (data) => request.post('/base/access_token', data, { noNeedToken: true }),
  getUserInfo: () => request.get('/base/userinfo'),
@ -317,76 +431,8 @@ export default {
  getAuditLogList: (params = {}) => request.get('/auditlog/list', { params }),
  // app users (客户端用户管理) - 使用现有的后端接口
  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) {
@ -415,13 +461,32 @@ export default {
        resolve({
          data: paginatedUsers,
          total: filteredUsers.length,
-          page: page,
-          page_size: pageSize
+          page,
+          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),
  updateAppUser: (data = {}) => request.post('/app-user/update', data),
  deleteAppUser: (params = {}) => request.delete('/app-user/delete', { params }),
--- a/web/src/views/user-management/user-list/UserDetailModal.vue
+++ b/web/src/views/user-management/user-list/UserDetailModal.vue
@ -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>
--- a/web/src/views/user-management/user-list/index.vue
+++ b/web/src/views/user-management/user-list/index.vue
@ -16,6 +16,7 @@ import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
 import CrudModal from '@/components/table/CrudModal.vue'
 import CrudTable from '@/components/table/CrudTable.vue'
 import LimitSettingModal from './LimitSettingModal.vue'
+import UserDetailModal from './UserDetailModal.vue'

 import { formatDate, renderIcon } from '@/utils'
 import { useCRUD } from '@/composables'
@ -32,6 +33,14 @@ const vPermission = resolveDirective('permission')
 const limitModalVisible = ref(false)
 const currentUser = ref(null)

+const detailModalVisible = ref(false)
+const detailLoading = ref(false)
+const userDetail = ref({
+  baseInfo: {},
+  invoiceHeaders: [],
+  operationLogs: [],
+})
+
 const {
  modalVisible,
  modalTitle,
@ -156,9 +165,30 @@ const columns = [
 ]

 // 查看用户详情
-function handleViewDetail(row) {
-  // 这里可以跳转到详情页面或打开详情弹窗
-  $message.info('查看用户详情功能待实现')
+async function handleViewDetail(row) {
+  detailModalVisible.value = true
+  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"
      @save="handleSaveLimitSetting"
    />
+
+    <!-- 用户详情弹窗 -->
+    <UserDetailModal
+      v-model:visible="detailModalVisible"
+      :data="userDetail"
+      :loading="detailLoading"
+    />
  </CommonPage>
 </template>
-
--- a/web/src/views/valuation/audit/components/AuditDetail.vue
+++ b/web/src/views/valuation/audit/components/AuditDetail.vue
@ -236,7 +236,12 @@ const handleCertificateConfirm = (data) => {
      </div>
    </div>

-    <NTabs v-model:value="activeDetailTab">
+    <NTabs
+      v-model:value="activeDetailTab"
+      type="line"
+      size="large"
+      class="audit-tabs"
+    >
      <NTabPane name="audit" tab="审核信息">
        <NSpin :show="loading">
          <div v-for="section in detailSections" :key="section.key" class="detail-section">
@ -387,19 +392,42 @@ const handleCertificateConfirm = (data) => {
  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 {
  display: flex;
  align-items: center;
-  gap: 8px;
+  gap: 12px;
  font-weight: 600;
  margin-bottom: 12px;
+  font-size: 18px;
+  color: #1d2129;
 }

 .section-title .dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #409eff;
+  width: 10px;
+  height: 18px;
+  border-radius: 4px;
+  background: #3b82f6;
 }

 .detail-section :deep(.n-data-table) {