134 lines
3.3 KiB
Vue
134 lines
3.3 KiB
Vue
|
<template>
|
||
|
|
<el-dialog :title="title" :visible.sync="dialogVisible" width="500px" @close="close">
|
||
|
|
<el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
|
||
|
|
<el-table-column align="left" label="投票用户" min-width="150">
|
||
|
|
<template #default="{ row }">
|
||
|
|
<div class="user-info-cell">
|
||
|
|
<el-image v-if="row.avatar" class="user-avatar" :preview-src-list="[row.avatar]" :src="getThumbUrl(row.avatar)" />
|
||
|
|
<div v-else class="user-avatar-placeholder"><i class="el-icon-user" /></div>
|
||
|
|
<div class="user-details">
|
||
|
|
<div class="user-nickname">{{ row.nickname || '未知用户' }}</div>
|
||
|
|
<div class="user-id">{{ row.id }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
|
||
|
|
<el-pagination
|
||
|
|
background
|
||
|
|
:current-page="queryForm.pageNo"
|
||
|
|
:layout="layout"
|
||
|
|
:page-size="queryForm.pageSize"
|
||
|
|
:total="total"
|
||
|
|
@current-change="handleCurrentChange"
|
||
|
|
@size-change="handleSizeChange"
|
||
|
|
/>
|
||
|
|
</el-dialog>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getParticipantList } from '@/api/rating/pk'
|
||
|
|
import { getThumbUrl } from '@/utils/blessing'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'PkParticipantList',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
title: '投票用户列表',
|
||
|
|
dialogVisible: false,
|
||
|
|
list: [],
|
||
|
|
listLoading: false,
|
||
|
|
layout: 'total, prev, pager, next',
|
||
|
|
total: 0,
|
||
|
|
elementLoadingText: '正在加载...',
|
||
|
|
queryForm: {
|
||
|
|
pageNo: 1,
|
||
|
|
pageSize: 10,
|
||
|
|
pkId: '',
|
||
|
|
chooseItemId: '',
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
getThumbUrl,
|
||
|
|
show(pkId, chooseItemId, titlePrefix) {
|
||
|
|
this.title = `${titlePrefix}的投票用户`
|
||
|
|
this.queryForm.pkId = pkId
|
||
|
|
this.queryForm.chooseItemId = chooseItemId
|
||
|
|
this.queryForm.pageNo = 1
|
||
|
|
this.dialogVisible = true
|
||
|
|
this.fetchData()
|
||
|
|
},
|
||
|
|
close() {
|
||
|
|
this.dialogVisible = false
|
||
|
|
this.list = []
|
||
|
|
},
|
||
|
|
handleSizeChange(val) {
|
||
|
|
this.queryForm.pageSize = val
|
||
|
|
this.fetchData()
|
||
|
|
},
|
||
|
|
handleCurrentChange(val) {
|
||
|
|
this.queryForm.pageNo = val
|
||
|
|
this.fetchData()
|
||
|
|
},
|
||
|
|
async fetchData() {
|
||
|
|
this.listLoading = true
|
||
|
|
try {
|
||
|
|
const { data } = await getParticipantList(this.queryForm)
|
||
|
|
this.list = data.list || []
|
||
|
|
this.total = data.totalCount || 0
|
||
|
|
} catch (error) {
|
||
|
|
console.error(error)
|
||
|
|
} finally {
|
||
|
|
this.listLoading = false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.user-info-cell {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-avatar,
|
||
|
|
.user-avatar-placeholder {
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-right: 10px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-avatar-placeholder {
|
||
|
|
background-color: #f0f2f5;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: #909399;
|
||
|
|
font-size: 18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-details {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-nickname {
|
||
|
|
font-weight: bold;
|
||
|
|
color: #303133;
|
||
|
|
white-space: nowrap;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-id {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #909399;
|
||
|
|
}
|
||
|
|
</style>
|