feat:用户信息界面以及话单管理界面

src/views/user-center/user/index.vue

@@ -0,0 +1,222 @@
+<script setup lang="tsx">
+import { Tag } from 'ant-design-vue';
+import { useTable } from '@/hooks/common/table';
+import { SimpleScrollbar } from '~/packages/materials/src';
+import UserSearch from './modules/user-search.vue';
+import { computed, shallowRef } from 'vue';
+import { useElementSize } from '@vueuse/core';
+import { doGetUserList } from '@/service/api/user';
+import type { UserInfo, SearchModel } from '@/views/user-center/user/type';
+
+// 修改API函数实现
+const doGetUserInfo: AntDesign.TableApiFn<UserInfo, SearchModel> = async (params: SearchModel) => {
+  try {
+    console.log('Search params received in API function:', params);
+
+    // 直接使用传入的 params
+    const apiParams = {
+      userName: params.username,
+      email: params.email,
+      pageNum: params.pageNum,
+      pageSize: params.pageSize
+    };
+
+    console.log('Sending to API:', apiParams);
+
+    const { data, error } = await doGetUserList(apiParams);
+    console.log('Response:', data, error);
+
+    if (error) {
+      return {
+        data: {
+          rows: [],
+          total: 0
+        },
+        error: null
+      };
+    }
+
+    return {
+      data: {
+        rows: data.rows.map(user => ({
+          userId: user.userId,
+          username: user.userName,
+          fullname: user.nickName,
+          sex: user.sex === '1' ? 'M' : 'F',
+          birthdate: user.createTime?.split(' ')[0] || '-',
+          age: 0,
+          email: user.email,
+          phonenumber: user.phonenumber,
+          isKYC: user.status === '0'
+        })),
+        total: data.total
+      },
+      error: null
+    };
+  } catch (err) {
+    return {
+      data: {
+        rows: [],
+        total: 0
+      },
+      error: null
+    };
+  }
+};
+
+const wrapperEl = shallowRef<HTMLElement | null>(null);
+const { height: wrapperElHeight } = useElementSize(wrapperEl);
+
+const scrollConfig = computed(() => {
+  return {
+    y: wrapperElHeight.value - 72,
+    x: 1000
+  };
+});
+
+const { columns, columnChecks, data, loading, getData, mobilePagination, searchParams, updateSearchParams, resetSearchParams } = useTable<AntDesign.TableApiFn<UserInfo, SearchModel>>({
+  apiFn: doGetUserInfo,
+  immediate: true,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+    username: undefined,
+    email: undefined
+  } as SearchModel,
+  rowKey: 'userId',
+  columns: (): AntDesign.TableColumn<AntDesign.TableDataWithIndex<UserInfo>>[] => [
+    {
+      key: 'username',
+      dataIndex: 'username',
+      title: '用户名',
+      align: 'center'
+    },
+    {
+      key: 'fullname',
+      dataIndex: 'fullname',
+      title: '姓名',
+      align: 'center'
+    },
+    {
+      key: 'sex',
+      dataIndex: 'sex',
+      title: '性别',
+      align: 'center',
+      width: 80,
+      customRender: ({ record }: { record: UserInfo }) => {
+        const sexMap = {
+          'M': '男',
+          'F': '女'
+        };
+        return sexMap[record.sex] || '-';
+      }
+    },
+    {
+      key: 'birthdate',
+      dataIndex: 'birthdate',
+      title: '出生日期',
+      align: 'center'
+    },
+    {
+      key: 'age',
+      dataIndex: 'age',
+      title: '年龄',
+      align: 'center',
+      width: 80
+    },
+    {
+      key: 'email',
+      dataIndex: 'email',
+      title: '邮箱',
+      align: 'center'
+    },
+    {
+      key: 'phonenumber',
+      dataIndex: 'phonenumber',
+      title: '手机号',
+      align: 'center'
+    },
+    {
+      key: 'isKYC',
+      dataIndex: 'isKYC',
+      title: 'KYC验证',
+      align: 'center',
+      customRender: ({ record }: { record: UserInfo }) => {
+        const KYC_STATUS = {
+          verified: '已验证',
+          unverified: '未验证'
+        } as const;
+        return (
+          <Tag color={record.isKYC ? 'success' : 'warning'}>
+            {record.isKYC ? KYC_STATUS.verified : KYC_STATUS.unverified}
+          </Tag>
+        );
+      }
+    }
+  ]
+});
+
+// 处理搜索
+const handleSearch = () => {
+  // 使用 updateSearchParams 更新搜索参数
+  updateSearchParams({
+    ...searchParams,
+    pageNum: 1 // 搜索时重置页码
+  });
+  getData();
+};
+
+// 处理重置
+const handleReset = () => {
+  const defaultParams: SearchModel = {
+    pageNum: 1,
+    pageSize: 10,
+    username: undefined,
+    email: undefined
+  };
+  // 使用 updateSearchParams 更新参数
+  updateSearchParams(defaultParams);
+  resetSearchParams();
+};
+</script>
+
+<template>
+  <SimpleScrollbar>
+    <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+      <UserSearch
+        v-model:model="searchParams"
+        @reset="handleReset"
+        @search="handleSearch"
+      />
+      <ACard
+        title="个人信息"
+        :bordered="false"
+        :body-style="{ flex: 1, overflow: 'hidden' }"
+        class="flex-col-stretch sm:flex-1-hidden card-wrapper"
+      >
+        <template #extra>
+          <TableHeaderOperation
+            v-model:columns="columnChecks"
+            :loading="loading"
+            :show-delete="false"
+            :show-add="false"
+            @refresh="getData"
+          />
+        </template>
+        <ATable
+          ref="wrapperEl"
+          :columns="columns"
+          :data-source="data"
+          :loading="loading"
+          row-key="userId"
+          size="small"
+          :pagination="mobilePagination"
+          :scroll="scrollConfig"
+          class="h-full"
+        />
+      </ACard>
+    </div>
+  </SimpleScrollbar>
+</template>
+
+<style scoped></style>