玩家列表

apps/web-antd/src/api/player/player_list.ts

@@ -1,19 +1,33 @@
 import {requestClient} from "#/api/request";
 
-interface ApiResultData {
+interface ApiResultListData {
     data: Object;
     status: number;
     total: number;
     list: Array;
 }
 
+interface ApiResultInfoData {
+    data: Object;
+    status: number;
+}
+
 /**
  * 获取玩家列表
  */
 export async function getPlayerList(data:any) {
     const params = new URLSearchParams(data); // 创建一个新的URLSearchParams对象
     const queryString = params.toString(); // 转换为查询字符串
-    return requestClient.get<ApiResultData>('/player/list?' + queryString, {
+    return requestClient.get<ApiResultListData>('/player/list?' + queryString, {
+        // withCredentials: true,
+    });
+}
+
+/**
+ * 获取玩家列表
+ */
+export async function getPlayerInfo(user_id:string | number) {
+    return requestClient.get<ApiResultInfoData>('/player/detail?player_id=' + user_id, {
         // withCredentials: true,
     });
 }

apps/web-antd/src/views/playerdata/playerlist/index.vue

@@ -2,8 +2,8 @@
 import {Card,Button,Form,FormItem,Input,Space,Select,SelectOption,InputGroup, RangePicker, Row, Col, Tag} from 'ant-design-vue';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
-import { reactive, toRaw } from 'vue';
-import dayjs, { Dayjs } from 'dayjs';
+import { reactive, toRaw, ref } from 'vue';
+import dayjs from 'dayjs';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {getPlayerList} from "#/api/player/player_list";
 
@@ -12,13 +12,8 @@ import {getPlayerList} from "#/api/player/player_list";
 let filterData = {
 	page: 1,
 	limit: 10,
-	player_id:"",
-	nickname:"",
-	uname:"",
-	login_ip:"",
-	reg_ip:"",
-	login_time_start: "",//dayjs().format('YYYY-MM-DD'),
-	login_time_end: "",//dayjs().format('YYYY-MM-DD')
+	// login_time_start: "",//dayjs().format('YYYY-MM-DD'),
+	// login_time_end: "",//dayjs().format('YYYY-MM-DD')
 }
 const disabledDate = (current) => {
 	// Can not select days before today and today
@@ -62,14 +57,7 @@ const gridOptions = {
 					page: page.currentPage,
 					limit: page.pageSize,
 				});
-				let data = {};
-				for(let k in form) {
-					const value = form[k];
-					if(value) {
-						data[k] = value;
-					}
-				}
-				const list = await getPlayerList(data);
+				const list = await getPlayerList(form);
 				return {
 					total: list.total,
 					items: list.list
@@ -77,6 +65,9 @@ const gridOptions = {
 			},
 		},
 	},
+	rowConfig: {
+		isHover: true,
+	},
 	toolbarConfig: {
 		custom: true,
 		export: true,
@@ -93,14 +84,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 const useForm = Form.useForm;
 
-// 搜索筛选
-// interface FormData {
-// 	search_type: string;
-// 	serach_text: string;
-// 	ip_type: string;
-// 	ip_text: string;
-// 	range_time: Array<string>;
-// }
 const formData = reactive({
 	search_type: 'uname',
 	search_text: '',
@@ -115,13 +98,10 @@ const onSearchFinish = () => {
 		formData['range_time'] = [];
 	}
 	const tempForm = toRaw(formData);
-	filterData['page'] = 1;
-	for (let k in filterData) {
-		if (['player_id', 'nickname', 'uname', 'login_ip',  'reg_ip'].includes(k)) {
-			filterData[k] = "";
-		}
+	filterData = {
+		page: 1,
+		limit: 20,
 	}
-
 	if(tempForm['ip_type'] == 'login_ip' || tempForm['ip_type'] == 'reg_ip'){
 		filterData[tempForm['ip_type']] = tempForm['ip_text'];
 	}
@@ -131,21 +111,16 @@ const onSearchFinish = () => {
 	}else {
 		filterData['player_id'] = tempForm['search_text'];
 	}
-
 	filterData['login_time_start'] = tempForm.range_time[0] || "";
 	filterData['login_time_end'] = tempForm.range_time[1] || "";
 	gridApi.reload();
 };
 
 const onResetSearch = () => {
-	filterData['page'] = 1;
-	for (let k in filterData) {
-		if (['player_id', 'nickname', 'uname', 'login_ip',  'reg_ip'].includes(k)) {
-			filterData[k] = "";
-		}
+	filterData = {
+		page: 1,
+		limit: 20,
 	}
-	filterData['login_time_start'] = "";
-	filterData['login_time_end'] = "";
 	resetFields();
 	gridApi.reload();
 }
@@ -154,11 +129,13 @@ import ExtraModal from './player_info.vue';
 const [Modal, modalApi] = useVbenModal({
 	// 连接抽离的组件
 	connectedComponent: ExtraModal,
+	class:'w-[65%]',
+	footer: false,
 });
-
 const playerInfo = (row) => {
-	console.log(row);
-	modalApi.open();
+	modalApi.setData({
+		uname: row.uname
+	}).open();
 }
 
 </script>
@@ -166,7 +143,6 @@ const playerInfo = (row) => {
 <template>
 	<Page>
 		<Card class="mb-5">
-
 			<Form
 				:model="formData"
 				name="formRef"
@@ -223,6 +199,8 @@ const playerInfo = (row) => {
 			</Form>
 		</Card>
 		<Card>
+			{{playerInfoId}}
+
 			<div class="vp-raw w-full">
 				<Grid>
 					<template #uname="{ row }">
@@ -247,9 +225,7 @@ const playerInfo = (row) => {
 				</Grid>
 			</div>
 		</Card>
-
-		<Modal userid="11" />
-
+		<Modal />
 	</Page>
 </template>
 

apps/web-antd/src/views/playerdata/playerlist/player_info.vue

@@ -1,16 +1,61 @@
-<script lang="ts" setup>
-import { useVbenModal } from '@vben/common-ui';
+<script setup>
+import {ref} from 'vue';
+import {useVbenModal} from '@vben/common-ui';
+import {getPlayerInfo} from "#/api/player/player_list.js";
+import {Descriptions, DescriptionsItem, Spin} from 'ant-design-vue';
 
-const [Modal] = useVbenModal({
+const uname = ref();
+const data = ref();
+const [Modal, modalApi] = useVbenModal({
 	draggable: true,
+	async onOpenChange(isOpen) {
+		if (isOpen) {
+			uname.value = modalApi.getData().uname;
+			data.value = await getPlayerInfo(uname.value);
+		}
+	},
 });
 
-defineProps(['userid'])
+const dataKeys = ref([
+	{'label': '平台昵称', 'key': 'nickname'},
+	{'label': '平台ID', 'key': 'uname'},
+	{'label': '所属商户', 'key': ''},
+	{'label': '商户ID', 'key': 'merchant_id'},
+	{'label': '当前余额', 'key': 'balance'},
+	{'label': '创建时间', 'key': 'create_time'},
+	{'label': '最后登录时间', 'key': 'login_time'},
+	{'label': '当天押注', 'key': ''},
+	{'label': '历史押注', 'key': ''},
+	{'label': '今日RTP', 'key': ''},
+	{'label': '历史RTP', 'key': ''},
+	{'label': '三日登录次数', 'key': ''},
+	{'label': '今日输赢', 'key': ''},
+	{'label': '历史输赢', 'key': ''},
+	{'label': '今日局数', 'key': ''},
+	{'label': '历史局数', 'key': ''},
+	{'label': '历史胜率', 'key': ''},
+	{'label': '今日流水倍数', 'key': ''},
+	{'label': '三日流水倍数', 'key': ''},
+	{'label': '留存天数', 'key': ''},
+	{'label': '注册IP地址', 'key': 'reg_ip'},
+	{'label': '登录设备码', 'key': ''},
+	{'label': '登录IP地址', 'key': 'login_ip'},
+]);
+
 
 </script>
 
 <template>
-	<Modal title="拖拽示例"> modal content {{userid}} </Modal>
+	<div>
+		<Modal v-if="data && data.user_id" :title="'用户详情【'+data.user_id+'】'">
+			<Descriptions bordered :contentStyle="{'width':'20%'}" :labelStyle="{'width':'13%'}">
+				<DescriptionsItem v-for="item in dataKeys" :label="item.label">
+					{{data[item.key] || ""}}
+				</DescriptionsItem>
+			</Descriptions>
+		</Modal>
+		<Spin v-else size="large" />
+	</div>
 </template>
 
 <style scoped>