feat: 用户信息接口对接

2025-04-25 07:57:18 +08:00 · 2023-04-03 15:19:27 +08:00 · 2023-04-03 15:19:27 +08:00 · 0cbf62ad20
commit 0cbf62ad20
parent 46c6aec0b8
13 changed files with 581 additions and 236 deletions
--- a/src/api/basic.ts
+++ b/src/api/basic.ts
@ -34,16 +34,18 @@ export type CurrentDayData = {
  data: Array<dailyData>
 }

-interface OHistoricalData {
-  play_account: number
+interface IHistoricalData {
+  user_name: string
  register_account: number
  active_account: number
  channel: string
 }

 export type HistoricalData = {
-  success: boolean
-  data: Array<OHistoricalData>
+  count: number
+  data: {
+    list: Array<IHistoricalData>
+  }
 }

 /** 当日用户数据 */
@ -75,3 +77,114 @@ export const getUserData = (data?: object) => {
    data
  })
 }
+
+// export type IGameInfo = {
+//   uid?: string
+//   play: string //总玩牌局数
+//   totalhands: string //总手数
+//   r_in: string //入池率
+//   r_win: string //入池胜率
+//   r_fc: string //翻牌前
+//   r_ds: string //3bet率
+//   r_jin: string //激进度
+//   r_sd: string //摊牌率
+//   r_100hands: string //百手盈利
+//   totalwin: string //总盈利
+// }
+export interface IGameInfo {
+  uid: number
+  cb: string
+  rDs: string
+  rD3b: string
+  rFbt: number
+  rFc: string
+  rRuwin: string
+  rSd: string
+  rSf: string
+  r100hands: number
+  rSdw: string
+  rRuTimes: number
+  '3b': string
+  play: number
+  rCh: string
+  rJin: string
+  totalwin: string
+  rRu: string
+  totalbuyin: number
+  utime: string
+  bmaxlose: number
+  hmaxwin: number
+  rWin: string
+  maxcard: string
+  bmaxwin: number
+  totalhands: number
+  rIn: string
+}
+
+export interface GameInfo {
+  ploFive: IGameInfo
+  ploSix: IGameInfo
+  omaha: IGameInfo
+  texas: IGameInfo
+}
+
+export type IUserInfo = {
+  data: {
+    base_info: {}
+    game_info: GameInfo
+    join_club_list?: any[]
+    create_club_list?: any[]
+  }
+}
+export interface BaseInfo {
+  lastName: string
+  uid: number
+  registerChannel: string
+  user_phone: string
+  street: string
+  postalCode: string
+  enterCount: number
+  gbgCheck: string
+  isHideFlag: number
+  city: string
+  firstName: string
+  houseNumber: string
+  enterTime: number
+  playTime: number
+  user_name: string
+  channel: string
+  scrapAmount: number
+  diamond: number
+  regTime: number
+  birthday: number
+  remarks: string
+  nationality: string
+  usersig: string
+  nickname: string
+  createGroupLimit: number
+  icon: string
+  regIp: string
+  identityCard: string
+  country: string
+  gender: number
+  userCategory: number
+  user_email: string
+}
+
+type Result = {
+  code: number
+  data?: {
+    /** 列表数据 */
+    base_info: BaseInfo
+    create_club_list: Array<any>
+    join_club_list: Array<any>
+    game_info: GameInfo
+  }
+}
+/** 搜索用户 基本信息 */
+export const getUserInfo = (data?: object) => {
+  console.log('_', data)
+  return http.request<Result>('post', baseUrlApi('/cms/user/info'), {
+    data
+  })
+}
--- a/src/router/modules/basicData.ts
+++ b/src/router/modules/basicData.ts
@ -31,17 +31,37 @@ export default {
    {
      path: '/basic/queryUser',
      name: 'QueryUser',
+      redirect: '/basic/queryUser/index',
+      // component: () => import('@/views/basic/queryUser/components/empty.vue'),
+      meta: {
+        // title: $t('menus.searchUser'),
+        title: '搜索用户1'
+      },
+      children: [
+        {
+          path: '/basic/queryUser/index',
+          name: 'QueryUser',
          component: () => import('@/views/basic/queryUser/queryUser.vue'),
          meta: {
-        title: $t('menus.searchUser')
+            // title: $t('menus.searchUser')
+            title: '搜索用户2'
          }
        },
        {
-      path: '/basic/queryUser/users/:id',
-      name: 'UserInfo',
+          path: '/basic/queryUser/users/',
+          name: 'UserInformation',
          component: () => import('@/views/basic/queryUser/user/index.vue'),
          meta: {
-        title: '用户信息',
+            title: '用户信息q',
+            showLink: false
+          }
+        },
+        {
+          path: '/basic/queryUser/users-params/:id',
+          name: 'UserInformation2',
+          component: () => import('@/views/basic/queryUser/user/index2.vue'),
+          meta: {
+            title: '用户信息p',
            showLink: false
          }
        },
@ -53,7 +73,27 @@ export default {
            title: '基础信息',
            showLink: false
          }
+        }
+      ]
    },
+    // {
+    //   path: '/basic/queryUser/users/:id',
+    //   name: 'UserInfo',
+    //   component: () => import('@/views/basic/queryUser/user/index.vue'),
+    //   meta: {
+    //     title: '用户信息',
+    //     showLink: false
+    //   }
+    // },
+    // {
+    //   path: '/basic/queryUser/users/:id/basicInfo',
+    //   name: 'UserBasicInfo',
+    //   component: () => import('@/views/basic/queryUser/user/basicInfo.vue'),
+    //   meta: {
+    //     title: '基础信息',
+    //     showLink: false
+    //   }
+    // },
    {
      path: '/basic/gameData',
      name: 'GameData',
--- a/src/utils/http/index.ts
+++ b/src/utils/http/index.ts
@ -58,7 +58,7 @@ const defaultConfig: AxiosRequestConfig = {
          tz_name: 'Asia%2FShanghai',
          tz_delta: 'GMT%2B8'
        },
-        request: { method: 'sysversion%23getsysversion' },
+        request: { method: 'sysversion%23getsysversion', ...data },
        public: {
          channel: 'POKIO_H5_NORMAL',
          version: 1311,
--- a/src/views/basic/queryUser/components/empty.vue
+++ b/src/views/basic/queryUser/components/empty.vue
@ -0,0 +1,9 @@
+<template>
+  <router-view />
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'Empty' })
+</script>
+
+<style scoped></style>
--- a/src/views/basic/queryUser/indexHook.ts
+++ b/src/views/basic/queryUser/indexHook.ts
@ -72,6 +72,8 @@ export function useUser() {
  function onSearchHistory() {
    console.log('onSearchHistory1', form.dateRange)
    console.log('onSearchHistory2', form.dateRange[0])
+    loading.value = false
+
    getHistoricalData({
      start_date: form.dateRange[0],
      end_date: form.dateRange[1]
--- a/src/views/basic/queryUser/infoHook.ts
+++ b/src/views/basic/queryUser/infoHook.ts
@ -15,7 +15,7 @@ export function useDetail() {
      // 保存信息到标签页
      useMultiTagsStoreHook().handleTags('push', {
        path: `/basic/queryUser/users/`,
-        name: 'UserInfo',
+        name: 'UserInformation',
        query: { id: String(index) },
        meta: {
          title: {
@ -27,11 +27,11 @@ export function useDetail() {
        }
      })
      // 路由跳转
-      router.push({ name: 'TabQueryDetail', query: { id: String(index) } })
+      router.push({ name: 'UserInformation', query: { id: String(index) } })
    } else {
      useMultiTagsStoreHook().handleTags('push', {
-        path: `/basic/queryUser/users/:id`,
-        name: 'UserInfo',
+        path: `/basic/queryUser/users-params/:id`,
+        name: 'UserInformation2',
        params: { id: String(index) },
        meta: {
          title: {
@ -40,7 +40,7 @@ export function useDetail() {
          }
        }
      })
-      router.push({ name: 'UserInfo', params: { id: String(index) } })
+      router.push({ name: 'UserInformation2', params: { id: String(index) } })
    }
  }

--- a/src/views/basic/queryUser/queryUser.vue
+++ b/src/views/basic/queryUser/queryUser.vue
@ -12,6 +12,7 @@ defineOptions({
 })

 const { toDetail, router } = useDetail()
+console.log('router:', router)

 const formRef = ref()
 const { form, historicalData, historicalColumns, loading, onSearchUser } =
@ -25,7 +26,7 @@ const { form, historicalData, historicalColumns, loading, onSearchUser } =
        <span class="font-medium"> 搜索用户 </span>
      </div>
    </template>
-    <div>
+
    <el-form
      ref="formRef"
      :inline="true"
@ -78,14 +79,10 @@ const { form, historicalData, historicalColumns, loading, onSearchUser } =
        </el-button>
      </el-form-item>
    </el-form>
-    </div>
+
    <pure-table :data="historicalData" :columns="historicalColumns" border />
-    <!-- <el-button>
-      <router-link :to="{ name: 'UserInfo', params: { id: 12318 } }"
-        >User</router-link
-      >
-    </el-button> -->
-    <div class="flex flex-wrap items-center">
+
+    <!-- <div class="flex flex-wrap items-center">
      <p>params传参模式：</p>
      <el-button
        class="m-2"
@ -95,6 +92,17 @@ const { form, historicalData, historicalColumns, loading, onSearchUser } =
      >
        打开{{ index }}详情页
      </el-button>
+    </div> -->
+    <div class="flex flex-wrap items-center">
+      <p>query传参模式：</p>
+      <el-button
+        class="m-2"
+        v-for="index in 6"
+        :key="index"
+        @click="toDetail(index, 'query')"
+      >
+        打开{{ index }}详情页
+      </el-button>
    </div>
  </el-card>
 </template>
--- a/src/views/basic/queryUser/queryUserHook.ts
+++ b/src/views/basic/queryUser/queryUserHook.ts
@ -10,7 +10,7 @@ export function useUser() {
    },
    {
      label: '所属俱乐部',
-      prop: 'club_name'
+      prop: 'first_joined_club'
    },
    {
      label: '注册渠道',
@ -18,7 +18,7 @@ export function useUser() {
    },
    {
      label: '绑定手机/邮箱',
-      prop: 'mobile'
+      prop: 'user_email/user_phone'
    },
    {
      label: '注册IP及归属地',
@ -26,11 +26,11 @@ export function useUser() {
    },
    {
      label: '最后登录',
-      prop: 'last_login_date'
+      prop: 'enter_time'
    },
    {
      label: '最后登录IP及归属地',
-      prop: 'last_area'
+      prop: 'login_ip'
    }
  ]

@ -47,8 +47,12 @@ export function useUser() {
  function onSearchUser() {
    console.log(form.dateRange)
    console.log(form.dateRange[0])
-    getUserData({ date: form }).then(res => {
-      historicalData.value = res.data
+    getUserData({ date: form })
+      .then(res => {
+        historicalData.value = res.data.list
+        loading.value = false
+      })
+      .catch(() => {
        loading.value = false
      })
  }
--- a/src/views/basic/queryUser/user/BasicInfo.vue
+++ b/src/views/basic/queryUser/user/BasicInfo.vue
@ -1,135 +1,116 @@
 <template>
  <div>基础信息-{{ id }}-{{ props.uid }}</div>
  <el-divider />
-  <div>
-    <div>
-      <el-avatar
-        class="float-left"
-        :size="60"
-        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-      />
+  <div class="grid grid-cols-12">
+    <div class="col-span-1 flex flex-col items-center justify-center">
+      <el-avatar :size="60" :src="pageData.base_info['icon']" />
+      <el-button size="small" class="icon-avatar-change">修改</el-button>
    </div>
-    <el-descriptions class="ml-21">
-      <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
-      <el-descriptions-item label="钻石">kooriookami</el-descriptions-item>
-      <el-descriptions-item label="国家">kooriookami</el-descriptions-item>
-      <el-descriptions-item label="绑定手机">18100000000</el-descriptions-item>
-      <el-descriptions-item label="绑定邮箱">Suzhou</el-descriptions-item>
-      <el-descriptions-item label="Remarks">
-        <el-tag size="small">School</el-tag>
-      </el-descriptions-item>
+
+    <el-descriptions class="col-span-10">
+      <el-descriptions-item label="用户名">{{
+        pageData.base_info['user_name']
+      }}</el-descriptions-item>
+      <el-descriptions-item label="钻石">{{
+        pageData.base_info.diamond
+      }}</el-descriptions-item>
+      <el-descriptions-item label="国家">{{
+        pageData.base_info.country
+      }}</el-descriptions-item>
+      <el-descriptions-item label="绑定手机">{{
+        pageData.base_info.user_phone
+      }}</el-descriptions-item>
+      <el-descriptions-item label="绑定邮箱">{{
+        pageData.base_info.user_email
+      }}</el-descriptions-item>
      <el-descriptions-item>
-        <el-button>click1</el-button>
-        <el-button>click2</el-button>
+        <el-button>封号</el-button>
+        <el-button>清除登录限制</el-button>
      </el-descriptions-item>
    </el-descriptions>
  </div>
  <el-divider />
-  <el-descriptions>
-    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
-    <el-descriptions-item label="绑定手机">18100000000</el-descriptions-item>
-    <el-descriptions-item label="绑定邮箱">Suzhou</el-descriptions-item>
-    <el-descriptions-item label="Remarks">
-      <el-tag size="small">School</el-tag>
-    </el-descriptions-item>
-    <el-descriptions-item label="Address"
-      >北京的王府井1215</el-descriptions-item
+
+  <div class="grid grid-cols-2">
+    <el-descriptions :column="1">
+      <el-descriptions-item
+        v-for="(item, i) in loginInfoMap"
+        :key="i"
+        :label="item.label"
+        >{{ pageData.base_info[item.prop] }}111</el-descriptions-item
      >
    </el-descriptions>
+
+    <el-descriptions :column="1">
+      <el-descriptions-item
+        v-for="(item, i) in registerInfoMap"
+        :key="i"
+        :label="item.label"
+        >{{ pageData.base_info[item.prop] }}</el-descriptions-item
+      >
+    </el-descriptions>
+  </div>
  <el-divider />
  <el-descriptions title="俱乐部信息" border />
-  <div class="flex justify-between">
-    <el-table :data="tableData" border style="width: 47%" table-layout="auto">
-      <el-table-column prop="date" label="Date" width="180" />
-      <el-table-column prop="name" label="Name" width="180" />
-      <el-table-column prop="address" label="Address" />
-    </el-table>
-    <el-table :data="tableData" border style="width: 47%" table-layout="auto">
-      <el-table-column prop="date" label="Date" width="180" />
-      <el-table-column prop="name" label="Name" width="180" />
-      <el-table-column prop="address" label="Address" />
-    </el-table>
+  <div class="grid grid-cols-2 gap-4">
+    <pure-table
+      :data="pageData.create_club_list"
+      :columns="created_club_columns"
+      border
+    />
+
+    <pure-table
+      :data="pageData.join_club_list"
+      :columns="joined_club_columns"
+      border
+    />
  </div>
+
  <el-divider />
+
  <div class="grid grid-cols-4">
-    <el-descriptions column="1" title="NLH">
-      <el-descriptions-item label="总玩牌局数"
-        >kooriookami</el-descriptions-item
-      >
-      <el-descriptions-item label="总玩牌手数"
-        >18100000000</el-descriptions-item
-      >
-      <el-descriptions-item label="入池率">Suzhou</el-descriptions-item>
-      <el-descriptions-item label="入池胜率">
-        <el-tag size="small">School</el-tag>
+    <el-descriptions :column="1" title="NLH">
+      <el-descriptions-item
+        v-for="(item, i) in gameMap"
+        :key="i"
+        :label="item.label"
+        >{{ pageData.game_info.omaha[item.prop] }}
      </el-descriptions-item>
-      <el-descriptions-item label="翻牌前入池率">1215</el-descriptions-item>
-      <el-descriptions-item label="3bet率">1215</el-descriptions-item>
-      <el-descriptions-item label="激进率">1215</el-descriptions-item>
-      <el-descriptions-item label="摊牌率">1215</el-descriptions-item>
-      <el-descriptions-item label="百手盈利">1215</el-descriptions-item>
-      <el-descriptions-item label="总盈利">1215</el-descriptions-item>
    </el-descriptions>
+
    <el-descriptions :column="1" title="PLO4">
-      <el-descriptions-item label="总玩牌局数"
-        >kooriookami</el-descriptions-item
+      <el-descriptions-item
+        v-for="(item, i) in gameMap"
+        :key="i"
+        :label="item.label"
+        >{{ pageData.game_info.texas[item.prop] }}</el-descriptions-item
      >
-      <el-descriptions-item label="总玩牌手数"
-        >18100000000</el-descriptions-item
-      >
-      <el-descriptions-item label="入池率">Suzhou</el-descriptions-item>
-      <el-descriptions-item label="入池胜率">
-        <el-tag size="small">School</el-tag>
-      </el-descriptions-item>
-      <el-descriptions-item label="翻牌前入池率">1215</el-descriptions-item>
-      <el-descriptions-item label="3bet率">1215</el-descriptions-item>
-      <el-descriptions-item label="激进率">1215</el-descriptions-item>
-      <el-descriptions-item label="摊牌率">1215</el-descriptions-item>
-      <el-descriptions-item label="百手盈利">1215</el-descriptions-item>
-      <el-descriptions-item label="总盈利">1215</el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" title="PLO5">
-      <el-descriptions-item label="总玩牌局数"
-        >kooriookami</el-descriptions-item
+      <el-descriptions-item
+        v-for="(item, i) in gameMap"
+        :key="i"
+        :label="item.label"
+        >{{ pageData.game_info.plo_five[item.prop] }}</el-descriptions-item
      >
-      <el-descriptions-item label="总玩牌手数"
-        >18100000000</el-descriptions-item
-      >
-      <el-descriptions-item label="入池率">Suzhou</el-descriptions-item>
-      <el-descriptions-item label="入池胜率">
-        <el-tag size="small">School</el-tag>
-      </el-descriptions-item>
-      <el-descriptions-item label="翻牌前入池率">1215</el-descriptions-item>
-      <el-descriptions-item label="3bet率">1215</el-descriptions-item>
-      <el-descriptions-item label="激进率">1215</el-descriptions-item>
-      <el-descriptions-item label="摊牌率">1215</el-descriptions-item>
-      <el-descriptions-item label="百手盈利">1215</el-descriptions-item>
-      <el-descriptions-item label="总盈利">1215</el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" title="PLO6">
-      <el-descriptions-item label="总玩牌局数"
-        >kooriookami</el-descriptions-item
+      <el-descriptions-item
+        v-for="(item, i) in gameMap"
+        :key="i"
+        :label="item.label"
+        >{{ pageData.game_info.plo_six[item.prop] }}</el-descriptions-item
      >
-      <el-descriptions-item label="总玩牌手数"
-        >18100000000</el-descriptions-item
-      >
-      <el-descriptions-item label="入池率">Suzhou</el-descriptions-item>
-      <el-descriptions-item label="入池胜率">
-        <el-tag size="small">School</el-tag>
-      </el-descriptions-item>
-      <el-descriptions-item label="翻牌前入池率">1215</el-descriptions-item>
-      <el-descriptions-item label="3bet率">1215</el-descriptions-item>
-      <el-descriptions-item label="激进率">1215</el-descriptions-item>
-      <el-descriptions-item label="摊牌率">1215</el-descriptions-item>
-      <el-descriptions-item label="百手盈利">1215</el-descriptions-item>
-      <el-descriptions-item label="总盈利">1215</el-descriptions-item>
    </el-descriptions>
  </div>
 </template>

 <script setup lang="ts">
+import { ref, onMounted } from 'vue'
 import { useRoute } from 'vue-router'

+import { getUserInfo } from '@/api/basic'
+
 defineOptions({
  // name 作为一种规范最好必须写上并且和路由的name保持一致
  name: 'BasicInfo'
@ -141,28 +122,120 @@ const route = useRoute()
 // const router = useRouter()
 const id = route.query?.id ? route.query?.id : route.params?.id

-const tableData = [
+const pageData = ref({
+  base_info: {},
+  create_club_list: [],
+  game_info: {
+    omaha: {},
+    texas: {},
+    plo_five: {},
+    plo_six: {}
+  },
+  join_club_list: []
+})
+
+// const base_info: any = ref({})
+// const create_club_list: any = ref([])
+// const join_club_list: any = ref([])
+// let game_info: {
+//   omaha: IGameInfo
+// } = reactive({ omaha: {} })
+// const { base_info, create_club_list, game_info, join_club_list } = pageData
+
+// getUserInfo({ uid: 20475 }).then(res => {
+//   console.log('res.data', res.data)
+//   // pageData = res.data
+// })
+
+function onSearch() {
+  console.log('onSearch')
+  // loading.value = true
+  getUserInfo({ uid: 20475 }).then(res => {
+    const { data } = res
+    console.log('data-basic', data)
+    pageData.value = data
+    // pageData.base_info = data.base_info
+    // pageData.create_club_list = data.create_club_list
+    // pageData.join_club_list = data.join_club_list
+    // pageData.game_info = data.game_info
+    // const { base_info, create_club_list, join_club_list, game_info } =
+    //   toRef(pageData)
+    // console.log('game_info', game_info)
+    // console.log('game_info', game_info.omaha)
+    // const { omaha } = game_info
+    // console.log('uid', game_info.omaha.uid)
+    // setTimeout(() => {
+    //   loading.value = false
+    // }, 500)
+  })
+}
+
+const created_club_columns: TableColumnList = [
  {
-    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
+    label: '俱乐部名称（创建）',
+    prop: 'name'
  },
  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
+    label: '创建时间',
+    prop: 'date'
  },
  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
+    label: '俱乐部分积分',
+    prop: 'jifen'
  }
 ]
+const joined_club_columns: TableColumnList = [
+  {
+    label: '俱乐部名称（创建）',
+    prop: 'name'
+  },
+  {
+    label: '创建时间',
+    prop: 'date'
+  },
+  {
+    label: '俱乐部分积分',
+    prop: 'jifen'
+  }
+]
+
+const loginInfoMap = [
+  { label: '登录渠道', prop: 'channel' },
+  { label: '登录版本', prop: 'last_login_version' },
+  { label: '最近登录IP', prop: 'last_login_ip' },
+  { label: '最近登录IP位置', prop: 'last_login_country' },
+  { label: '最近登录时间', prop: 'enter_time' },
+  { label: '最近登录IP设备', prop: 'last_login_device' }
+]
+
+const registerInfoMap = [
+  { label: '注册渠道', prop: 'register_channel' },
+  { label: '注册版本', prop: '' }, // 先空着
+  { label: '注册时间', prop: 'reg_time' },
+  { label: '注册IP', prop: 'reg_ip' },
+  { label: '注册设备', prop: '' } // 先空着
+]
+
+const gameMap = [
+  { label: '总玩牌手数', prop: 'totalhands' },
+  { label: '总玩牌局数', prop: 'play' },
+  { label: '入池率', prop: 'r_in' },
+  { label: '入池胜率', prop: 'r_win' },
+  { label: '翻牌前入池率', prop: 'r_fc' },
+  { label: '3bet率', prop: 'r_ds' },
+  { label: '激进度', prop: 'r_jin' },
+  { label: '摊牌度', prop: 'r_sd' },
+  { label: '百手盈利', prop: 'r_100hands' },
+  { label: '盈利', prop: 'totalwin' }
+]
+
+onMounted(() => {
+  onSearch()
+})
 </script>

-<style scoped></style>
+<style scoped lang="scss">
+.icon-avatar-change {
+  margin-top: -8px;
+}
+</style>
--- a/src/views/basic/queryUser/user/GameRecord.vue
+++ b/src/views/basic/queryUser/user/GameRecord.vue
@ -41,11 +41,7 @@
        </el-form-item>
      </el-form>

-      <el-table :data="tableData" stripe border style="width: 100%">
-        <el-table-column prop="date" label="Date" width="180" />
-        <el-table-column prop="name" label="Name" width="180" />
-        <el-table-column prop="address" label="Address" />
-      </el-table>
+      <pure-table :data="tableData" :columns="tableRecordColumn" border />
    </el-tab-pane>

    <el-tab-pane label="手牌历史" name="second">
@ -101,26 +97,56 @@ const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
 }

+const tableRecordColumn: TableColumnList = [
+  {
+    label: '时间',
+    prop: 'date'
+  },
+  {
+    label: '级别/玩法',
+    prop: 'club_name'
+  },
+  {
+    label: '牌局名称',
+    prop: 'club_integral'
+  },
+  {
+    label: '创建者',
+    prop: 'club_integral'
+  },
+  {
+    label: '牌局ID',
+    prop: 'club_integral'
+  },
+  {
+    label: '战绩',
+    prop: 'club_integral'
+  },
+  {
+    label: '服务费贡献',
+    prop: 'club_integral'
+  },
+  {
+    label: '保险贡献',
+    prop: 'club_integral'
+  }
+]
+
 const tableData = [
  {
+    club_name: 'Tom-club',
    date: '2016-05-03',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
+    club_integral: '299'
  },
  {
-    date: '2016-05-02',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
+    club_name: 'Tom-club',
+    date: '2016-05-03',
+    club_integral: '299'
  },
  {
-    date: '2016-05-04',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
+    club_name: 'Tom-club',
+    date: '2016-05-03',
+    club_integral: '299'
  }
 ]

--- a/src/views/basic/queryUser/user/index.vue
+++ b/src/views/basic/queryUser/user/index.vue
@ -31,7 +31,8 @@ defineOptions({

 const { initToDetail, id } = useDetail()

-initToDetail('params')
+// initToDetail('params')
+initToDetail('query')

 const activeName = ref('basicInfo')

--- a/src/views/basic/queryUser/user/index2.vue
+++ b/src/views/basic/queryUser/user/index2.vue
@ -0,0 +1,69 @@
+<template>
+  <el-card>
+    <!-- params 传参的形式，面包屑导航有点问题，先不管，暂时使用 query 形式传参 -->
+    <div>用户信息 列表页面</div>
+    <div>{{ id }} - 详情页内容在此（params传参）</div>
+    <el-tabs v-model="activeName" type="border-card">
+      <el-tab-pane
+        v-for="(_, tab) in tabsMap"
+        :key="tabsMap[tab].name"
+        :name="tabsMap[tab].name"
+        :label="tabsMap[tab].label"
+      />
+      <!-- <component :is="tabsMap[activeName].component" :uid="id" /> -->
+    </el-tabs>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { useDetail } from '../infoHook'
+import basicInfo from './basicInfo.vue'
+import gameRecord from './gameRecord.vue'
+import diamondRecord from './diamondRecord.vue'
+import loginRecord from './loginRecord.vue'
+import chatRecord from './chatRecord.vue'
+
+defineOptions({
+  // name 作为一种规范最好必须写上并且和路由的name保持一致
+  name: 'UserInformation'
+})
+
+const { initToDetail, id } = useDetail()
+
+initToDetail('params')
+// initToDetail('query')
+
+const activeName = ref('basicInfo')
+
+const tabsMap = {
+  basicInfo: {
+    name: 'basicInfo',
+    label: '用户信息',
+    component: basicInfo
+  },
+  gameRecord: {
+    name: 'gameRecord',
+    label: '游戏记录',
+    component: gameRecord
+  },
+  diamondRecord: {
+    name: 'diamondRecord',
+    label: '钻石记录',
+    component: diamondRecord
+  },
+  loginRecord: {
+    name: 'loginRecord',
+    label: '登录记录',
+    component: loginRecord
+  },
+  chatRecord: {
+    name: 'chatRecord',
+    label: '聊天记录',
+    component: chatRecord
+  }
+}
+</script>
+
+<style scoped></style>
--- a/vite.config.ts
+++ b/vite.config.ts
@ -46,7 +46,7 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
      proxy: {
        '^/dev-api/.*': {
          // 这里填写后端地址
-          target: 'http://192.168.100.87:8000',
+          target: 'http://192.168.100.71:8000',
          changeOrigin: true,
          rewrite: path => path.replace(/^\/dev-api/, '')
        }