张磊
114 lines
4.2 KiB
Vue
114 lines
4.2 KiB
Vue
<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="loadList" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" :icon="Search" @click="loadList">搜索</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">
|
|
<template #default="{ row }">
|
|
{{ row.username || row.nickname }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="mobile" label="手机号" align="center">
|
|
<template #default="{ row }">{{ row.mobile || '--' }}</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column prop="district" label="地区" align="center" /> -->
|
|
<el-table-column prop="gender_text" label="性别" align="center">
|
|
<template #default="{ row }">{{ row.gender_text || '--' }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="birthday_text" label="年龄" align="center">
|
|
<template #default="{ row }">{{ row.birthday_text || '--' }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="created_at" label="创建时间" align="center">
|
|
<template #default="{ row }">{{ row.created_at || '--' }}</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" label="状态" align="center">
|
|
<template #default="{ row }">
|
|
<el-tag>{{ statusData[row.state] }}</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="detection_number" label="总检测次数" align="center">
|
|
<template #default="{ row }">{{ row.detection_number || '--' }}</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<pagination :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.size"
|
|
@pagination="loadList" />
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from 'vue';
|
|
import { getUserDetectionList } from '@/api/user';
|
|
import { ElMessage } from 'element-plus';
|
|
import { getAreaList } from '@/api/area'
|
|
import { Search, Refresh } from '@element-plus/icons-vue';
|
|
|
|
const statusData: Record<number, string> = {
|
|
1: '检测过一次',
|
|
2: '分析中',
|
|
3: '有问题',
|
|
4: '已退款',
|
|
5: '正常',
|
|
};
|
|
const getaddress = async () => {
|
|
const res = await getAreaList();
|
|
console.log(res, 'res')
|
|
}
|
|
getaddress()
|
|
const loading = ref(false);
|
|
const total = ref(0);
|
|
const userList = ref<any[]>([]);
|
|
const queryFormRef = ref();
|
|
const queryParams = reactive({
|
|
page: 1,
|
|
size: 10,
|
|
keyword: '',
|
|
});
|
|
|
|
function normalizePageData(data: any): { list: any[]; total: number } {
|
|
if (Array.isArray(data)) return { list: data, total: data.length };
|
|
const list = data?.list ?? data?.data ?? [];
|
|
const total = Number(data?.total);
|
|
return { list, total: Number.isFinite(total) ? total : list.length };
|
|
}
|
|
|
|
// 加载列表
|
|
const loadList = () => {
|
|
loading.value = true;
|
|
getUserDetectionList(queryParams)
|
|
.then(({ data }) => {
|
|
const { list, total: t } = normalizePageData(data);
|
|
userList.value = list;
|
|
total.value = t;
|
|
})
|
|
.catch((err: any) => ElMessage.error(err.message || '获取用户列表失败'))
|
|
.finally(() => (loading.value = false));
|
|
};
|
|
|
|
// 重置
|
|
const resetQuery = () => {
|
|
queryFormRef.value?.resetFields();
|
|
queryParams.page = 1;
|
|
loadList();
|
|
};
|
|
|
|
loadList();
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
padding: 20px;
|
|
}
|
|
</style>
|