wuyongqi/beautifier-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'用户列表接口联调'

Browse Source
This commit is contained in:
张磊
2026-04-02 18:13:01 +08:00
parent 8f9b2c62ef
commit eaab4b6d4a
2 changed files with 212 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/user/index.ts
+27
View File
@@ -0,0 +1,27 @@
import request from '@/utils/request';
import { AxiosPromise } from 'axios';
//获取用户列表
export function getUserList(data): AxiosPromise<any> {
return request({
url: '/admin/v1/user/list',
method: 'post',
data
});
}
//获取用户档案接口
export function getUserarchive(data): AxiosPromise<any> {
return request({
url: '/admin/v1/user/archive',
method: 'post',
data
});
}
//获取用户档案详情接口
export function getUserarchiveDetail(data): AxiosPromise<any> {
return request({
url: '/admin/v1/user/detail',
method: 'post',
data
});
}
src/views/user/index.vue
+185
View File
@@ -0,0 +1,185 @@
<template>
<div class="app-container">
<el-card class="box-card">
<el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键词" prop="keyword">
<el-input v-model="queryParams.keyword" placeholder="用户名/昵称" clearable style="width: 200px"
@keyup.enter="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleQuery">
搜索
</el-button>
<el-button :icon="Refresh" @click="resetQuery">
重置
</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="userList" border stripe style="width: 100%">
<el-table-column prop="username" label="用户名" align="center" />
<el-table-column prop="nickname" label="昵称" align="center" />
<!--头像可点击查看大图-->
<el-table-column prop="avatar" label="头像" align="center" width="80">
<template #default="{ row }">
<el-image v-if="row.avatar" :src="row.avatar" :preview-src-list="[row.avatar]"
preview-teleported fit="cover" class="avatar-thumb" hide-on-click-modal />
<span v-else>--</span>
</template>
</el-table-column>
<el-table-column prop="district_text" label="地区" align="center" />
<el-table-column prop="gender_text" label="性别" align="center" />
<el-table-column prop="mobile" label="手机号" align="center" />
<el-table-column prop="birthday" label="生日" align="center" />
<el-table-column prop="age" label="年龄" align="center" />
<el-table-column prop="status" label="状态" align="center">
<template #default="{ row }">
<el-tag>
{{ statusData[row.status] }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="detection_number" label="总检测次数" align="center" />
<el-table-column prop="created_at" label="创建时间" align="center" />
<el-table-column label="操作" align="center" width="150">
<template #default="{ row }">
<el-button text @click="openArchiveDialog(row)">用户档案</el-button>
</template>
</el-table-column>
</el-table>
<pagination v-if="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.size"
@pagination="handleQuery" />
</el-card>
<!-- 用户档案弹窗 -->
<el-dialog v-model="archiveDialogVisible" title="用户档案" width="640px">
<el-table v-loading="archiveLoading" :data="archiveList" border stripe style="width: 100%">
<el-table-column label="图片" align="center" width="120">
<template #default="{ row }">
<el-image v-if="row.cover" :src="row.cover" :preview-src-list="[row.cover]" preview-teleported
fit="cover" class="archive-cover" hide-on-click-modal />
<span v-else>--</span>
</template>
</el-table-column>
<el-table-column prop="create_time" label="时间" align="center" min-width="160" />
</el-table>
<pagination v-if="archiveTotal > 0" :total="archiveTotal" v-model:page="archiveParams.page"
v-model:limit="archiveParams.size" @pagination="loadArchive" />
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { getUserList, getUserarchive } from '@/api/user';
import { ElMessage } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';
const statusData = {
1: '未注册',
2: '未进行人脸识别',
3: '未完善信息',
4: '正常'
}
const loading = ref(false);
const total = ref(0);
const userList = ref<any[]>([]);
const queryFormRef = ref();
// 档案弹窗相关
const archiveDialogVisible = ref(false);
const archiveLoading = ref(false);
const archiveTotal = ref(0);
const archiveList = ref<any[]>([]);
const currentUserId = ref<number | null>(null);
const archiveParams = reactive({
page: 1,
size: 10
});
// 打开档案弹窗
function openArchiveDialog(row: any) {
currentUserId.value = row.id;
archiveDialogVisible.value = true;
archiveParams.page = 1;
archiveParams.size = 10;
loadArchive();
}
// 加载档案列表
function loadArchive() {
if (!currentUserId.value) return;
archiveLoading.value = true;
getUserarchive({ user_id: currentUserId.value, ...archiveParams })
.then(({ data }: any) => {
const list = Array.isArray(data) ? data : data?.data ?? data?.list ?? [];
archiveList.value = list;
archiveTotal.value =
typeof data?.total === 'number' ? data.total : Array.isArray(data) ? data.length : list.length;
})
.catch((err: any) => {
ElMessage.error(err.message || '获取用户档案失败');
})
.finally(() => {
archiveLoading.value = false;
});
}
const queryParams = reactive({
page: 1,
size: 10,
keyword: ''
});
function handleQuery() {
loading.value = true;
getUserList(queryParams)
.then(({ data }: any) => {
userList.value = data;
})
.catch((err: any) => {
ElMessage.error(err.message || '获取用户列表失败');
})
.finally(() => {
loading.value = false;
});
}
function resetQuery() {
queryFormRef.value?.resetFields();
queryParams.page = 1;
handleQuery();
}
function handleSizeChange(size: number) {
queryParams.size = size;
queryParams.page = 1;
handleQuery();
}
function handleCurrentChange(page: number) {
queryParams.page = page;
handleQuery();
}
onMounted(() => {
handleQuery();
});
</script>
<style lang="scss" scoped>
.app-container {
padding: 20px;
}
.avatar-thumb {
cursor: pointer;
}
.archive-cover {
width: 80px;
height: 80px;
border-radius: 4px;
cursor: pointer;
}
</style>