feat: 用户信息接口对接

src/api/basic.ts

@@ -34,16 +34,18 @@ export type CurrentDayData = {
   data: Array<dailyData>
 }
 
-interface OHistoricalData {
+interface IHistoricalData {
-  play_account: number
+  user_name: string
   register_account: number
   active_account: number
   channel: string
 }
 
 export type HistoricalData = {
-  success: boolean
+  count: number
-  data: Array<OHistoricalData>
+  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
+  })
+}

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',
+          path: '/basic/queryUser/users/',
-      name: 'UserInfo',
+          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',

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,

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>

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]

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`,
+        path: `/basic/queryUser/users-params/:id`,
-        name: 'UserInfo',
+        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) } })
     }
   }
 

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 } }"
+    <!-- <div class="flex flex-wrap items-center">
-        >User</router-link
-      >
-    </el-button> -->
-    <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>

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 => {
+    getUserData({ date: form })
-      historicalData.value = res.data
+      .then(res => {
+        historicalData.value = res.data.list
+        loading.value = false
+      })
+      .catch(() => {
         loading.value = false
       })
   }

src/views/basic/queryUser/user/BasicInfo.vue

@@ -1,135 +1,116 @@
 <template>
   <div>基础信息-{{ id }}-{{ props.uid }}</div>
   <el-divider />
-  <div>
+  <div class="grid grid-cols-12">
-    <div>
+    <div class="col-span-1 flex flex-col items-center justify-center">
-      <el-avatar
+      <el-avatar :size="60" :src="pageData.base_info['icon']" />
-        class="float-left"
+      <el-button size="small" class="icon-avatar-change">修改</el-button>
-        :size="60"
-        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
-      />
     </div>
-    <el-descriptions class="ml-21">
+
-      <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+    <el-descriptions class="col-span-10">
-      <el-descriptions-item label="钻石">kooriookami</el-descriptions-item>
+      <el-descriptions-item label="用户名">{{
-      <el-descriptions-item label="国家">kooriookami</el-descriptions-item>
+        pageData.base_info['user_name']
-      <el-descriptions-item label="绑定手机">18100000000</el-descriptions-item>
+      }}</el-descriptions-item>
-      <el-descriptions-item label="绑定邮箱">Suzhou</el-descriptions-item>
+      <el-descriptions-item label="钻石">{{
-      <el-descriptions-item label="Remarks">
+        pageData.base_info.diamond
-        <el-tag size="small">School</el-tag>
+      }}</el-descriptions-item>
-      </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>封号</el-button>
-        <el-button>click2</el-button>
+        <el-button>清除登录限制</el-button>
       </el-descriptions-item>
     </el-descriptions>
   </div>
   <el-divider />
-  <el-descriptions>
+
-    <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+  <div class="grid grid-cols-2">
-    <el-descriptions-item label="绑定手机">18100000000</el-descriptions-item>
+    <el-descriptions :column="1">
-    <el-descriptions-item label="绑定邮箱">Suzhou</el-descriptions-item>
+      <el-descriptions-item
-    <el-descriptions-item label="Remarks">
+        v-for="(item, i) in loginInfoMap"
-      <el-tag size="small">School</el-tag>
+        :key="i"
-    </el-descriptions-item>
+        :label="item.label"
-    <el-descriptions-item label="Address"
+        >{{ pageData.base_info[item.prop] }}111</el-descriptions-item
-      >北京的王府井1215</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">
+  <div class="grid grid-cols-2 gap-4">
-    <el-table :data="tableData" border style="width: 47%" table-layout="auto">
+    <pure-table
-      <el-table-column prop="date" label="Date" width="180" />
+      :data="pageData.create_club_list"
-      <el-table-column prop="name" label="Name" width="180" />
+      :columns="created_club_columns"
-      <el-table-column prop="address" label="Address" />
+      border
-    </el-table>
+    />
-    <el-table :data="tableData" border style="width: 47%" table-layout="auto">
+
-      <el-table-column prop="date" label="Date" width="180" />
+    <pure-table
-      <el-table-column prop="name" label="Name" width="180" />
+      :data="pageData.join_club_list"
-      <el-table-column prop="address" label="Address" />
+      :columns="joined_club_columns"
-    </el-table>
+      border
+    />
   </div>
+
   <el-divider />
+
   <div class="grid grid-cols-4">
-    <el-descriptions column="1" title="NLH">
+    <el-descriptions :column="1" title="NLH">
-      <el-descriptions-item label="总玩牌局数"
+      <el-descriptions-item
-        >kooriookami</el-descriptions-item
+        v-for="(item, i) in gameMap"
-      >
+        :key="i"
-      <el-descriptions-item label="总玩牌手数"
+        :label="item.label"
-        >18100000000</el-descriptions-item
+        >{{ pageData.game_info.omaha[item.prop] }}
-      >
-      <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="PLO4">
-      <el-descriptions-item label="总玩牌局数"
+      <el-descriptions-item
-        >kooriookami</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="总玩牌局数"
+      <el-descriptions-item
-        >kooriookami</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="总玩牌局数"
+      <el-descriptions-item
-        >kooriookami</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',
+    label: '俱乐部名称（创建）',
-    name: 'Tom',
+    prop: 'name'
-    address: 'No. 189, Grove St, Los Angeles'
   },
   {
-    date: '2016-05-02',
+    label: '创建时间',
-    name: 'Tom',
+    prop: 'date'
-    address: 'No. 189, Grove St, Los Angeles'
   },
   {
-    date: '2016-05-04',
+    label: '俱乐部分积分',
-    name: 'Tom',
+    prop: 'jifen'
-    address: 'No. 189, Grove St, Los Angeles'
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
   }
 ]
+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>

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%">
+      <pure-table :data="tableData" :columns="tableRecordColumn" border />
-        <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-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',
+    club_integral: '299'
-    address: 'No. 189, Grove St, Los Angeles'
   },
   {
-    date: '2016-05-02',
+    club_name: 'Tom-club',
-    name: 'Tom',
+    date: '2016-05-03',
-    address: 'No. 189, Grove St, Los Angeles'
+    club_integral: '299'
   },
   {
-    date: '2016-05-04',
+    club_name: 'Tom-club',
-    name: 'Tom',
+    date: '2016-05-03',
-    address: 'No. 189, Grove St, Los Angeles'
+    club_integral: '299'
-  },
-  {
-    date: '2016-05-01',
-    name: 'Tom',
-    address: 'No. 189, Grove St, Los Angeles'
   }
 ]
 

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')
 

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>

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/, '')
         }