zzc/api-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rating

Browse Source
This commit is contained in:
zzc
2026-06-01 15:39:58 +08:00
parent 4f81850583
commit 77ca847b38
2 changed files with 147 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/views/rating/topicItem/index.vue
View File

@@ -31,19 +31,18 @@
/>
<el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
<el-table-column align="center" label="头像" width="100">
<el-table-column align="left" label="评价项" min-width="200">
<template #default="{ row }">
<el-image
v-if="row.avatarUrl"
:preview-src-list="[row.avatarUrl]"
:src="getThumbUrl(row.avatarUrl)"
style="width: 50px; height: 50px; border-radius: 50%"
/>
<span v-else>-</span>
<div class="item-info-cell">
<el-image v-if="row.avatarUrl" class="item-avatar" :preview-src-list="[row.avatarUrl]" :src="getThumbUrl(row.avatarUrl)" />
<div v-else class="item-avatar-placeholder"><i class="el-icon-picture-outline" /></div>
<div class="item-details">
<div class="item-name">{{ row.name }}</div>
<div v-if="row.description" class="item-desc" :title="row.description">{{ row.description }}</div>
</div>
</div>
</template>
</el-table-column>
<el-table-column align="center" label="评价项名称" min-width="150" prop="name" show-overflow-tooltip />
<el-table-column align="center" label="描述" min-width="200" prop="description" show-overflow-tooltip />
<el-table-column align="center" label="状态" width="100">
<template #default="{ row }">
@@ -55,18 +54,65 @@
</template>
</el-table-column>
<el-table-column align="left" label="分数统计">
<template #default="{ row }">
<div class="stat-cell">
<div class="stat-row">
<span class="stat-label">排名分：</span>
<span class="stat-value highlight">{{ row.rankScore }}</span>
</div>
<div class="stat-row">
<span class="stat-label">平均分数：</span>
<span class="stat-value highlight">{{ row.scoreAvg }}</span>
</div>
<div class="stat-row">
<span class="stat-label">累计总分：</span>
<span class="stat-value">{{ row.scoreTotal }}</span>
</div>
<div class="stat-row">
<span class="stat-label">热门分：</span>
<span class="stat-value">{{ row.hotScore }}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column align="left" label="互动数据" min-width="150">
<template #default="{ row }">
<div class="stat-cell">
<div class="stat-row">
<span class="stat-label">
<i class="el-icon-view" />
浏览数：
</span>
<span class="stat-value">{{ row.viewCount }}</span>
</div>
<div class="stat-row">
<span class="stat-label">
<i class="el-icon-chat-dot-round" />
评论数：
</span>
<span class="stat-value">{{ row.commentCount }}</span>
</div>
<!-- <div class="stat-row">
<span class="stat-label">
<i class="el-icon-star-off" />
打分次数：
</span>
<span class="stat-value">{{ row.ratingCount }}</span>
</div> -->
<div class="stat-row">
<span class="stat-label">
<i class="el-icon-user" />
评价人数：
</span>
<span class="stat-value">{{ row.scoreCount }}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column align="center" label="排序" prop="sortOrder" width="80" />
<el-table-column align="center" label="分数" prop="score" width="80" />
<el-table-column align="center" label="总分数" prop="scoreTotal" width="100" />
<el-table-column align="center" label="评价人数" prop="scoreCount" width="100" />
<el-table-column align="center" label="平均分" prop="scoreAvg" width="100" />
<el-table-column align="center" label="浏览数" prop="viewCount" width="80" />
<el-table-column align="center" label="评论数" prop="commentCount" width="80" />
<el-table-column align="center" label="打分人数" prop="ratingCount" width="100" />
<el-table-column align="center" label="排名分" prop="rankScore" width="100" />
<el-table-column align="center" label="热门分" prop="hotScore" width="100" />
<el-table-column align="center" label="创建时间" prop="createdAt" width="160">
<template #default="{ row }">
@@ -178,4 +224,76 @@
.rating-topic-item-container {
padding: 20px;
}
.item-info-cell {
display: flex;
align-items: center;
}
.item-avatar,
.item-avatar-placeholder {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 12px;
flex-shrink: 0;
}
.item-avatar-placeholder {
background-color: #f0f2f5;
display: flex;
align-items: center;
justify-content: center;
color: #909399;
font-size: 20px;
}
.item-details {
display: flex;
flex-direction: column;
overflow: hidden;
}
.item-name {
font-weight: bold;
color: #303133;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item-desc {
font-size: 12px;
color: #909399;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stat-cell {
display: flex;
flex-direction: column;
gap: 4px;
}
.stat-row {
display: flex;
align-items: center;
font-size: 13px;
}
.stat-label {
color: #909399;
width: 90px;
}
.stat-value {
color: #606266;
}
.stat-value.highlight {
color: #409eff;
font-weight: bold;
}
</style>