103 lines
1.7 KiB
Vue
103 lines
1.7 KiB
Vue
<template>
|
|
<CommonPage show-footer :title="$route.title">
|
|
<n-data-table
|
|
:loading="loading"
|
|
:columns="columns"
|
|
:data="data"
|
|
:pagination="pagination"
|
|
:bordered="false"
|
|
remote
|
|
/>
|
|
</CommonPage>
|
|
</template>
|
|
|
|
<script setup>
|
|
import api from './api'
|
|
|
|
const loading = ref(false)
|
|
|
|
const columns = ref([
|
|
{
|
|
title: 'ID',
|
|
align: 'center',
|
|
key: 'ID',
|
|
},
|
|
{
|
|
title: '头像',
|
|
align: 'center',
|
|
slot: 'avatar',
|
|
render(row) {
|
|
return h('img', {
|
|
src: row.avatar,
|
|
style: {
|
|
width: '30px',
|
|
height: '30px',
|
|
borderRadius: '50%',
|
|
},
|
|
})
|
|
},
|
|
},
|
|
{
|
|
title: '电话',
|
|
align: 'center',
|
|
key: 'phone',
|
|
},
|
|
{
|
|
title: '用户积分',
|
|
align: 'center',
|
|
key: 'integral',
|
|
},
|
|
{
|
|
title: '用户豆子',
|
|
align: 'center',
|
|
key: 'pulse',
|
|
},
|
|
{
|
|
title: '操作',
|
|
align: 'center',
|
|
slot: 'action',
|
|
render(row) {
|
|
console.log(row)
|
|
},
|
|
},
|
|
])
|
|
|
|
const data = ref([])
|
|
|
|
const pagination = ref({
|
|
page: 1,
|
|
pageSize: 10,
|
|
itemCount: 0,
|
|
onChange: (page) => {
|
|
pagination.value.page = page
|
|
getList()
|
|
},
|
|
onUpdatePageSize: (pageSize) => {
|
|
pagination.value.pageSize = pageSize
|
|
pagination.value.page = 1
|
|
getList()
|
|
},
|
|
})
|
|
|
|
onMounted(() => {
|
|
getList()
|
|
})
|
|
|
|
const getList = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await api.getUser({
|
|
pageNum: pagination.value.page,
|
|
pageSize: pagination.value.pageSize,
|
|
})
|
|
data.value = res.data.data
|
|
pagination.value.itemCount = res.data.total
|
|
} catch (error) {
|
|
$message.error(error.msg)
|
|
}
|
|
loading.value = false
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped></style>
|