|
|
|
|
@ -1,55 +1,129 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-main>
|
|
|
|
|
<!-- 表格 -->
|
|
|
|
|
<el-table :height="tableHeight" :data="tableList" border stripe>
|
|
|
|
|
<el-table-column label="名称" prop="goodsName"></el-table-column>
|
|
|
|
|
<el-table-column label="商品图片" prop="goodsImage">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-image
|
|
|
|
|
:src="scope.row.goodsImage.split(',')[0]"
|
|
|
|
|
style="height: 60px; width: 60px; border-radius: 50%"
|
|
|
|
|
></el-image>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="昵称" prop="nickName"></el-table-column>
|
|
|
|
|
<el-table-column label="头像" prop="avatarUrl">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-image
|
|
|
|
|
:src="imgUrl+scope.row.avatarUrl"
|
|
|
|
|
style="height: 60px; width: 60px; border-radius: 50%"
|
|
|
|
|
></el-image>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="时间" prop="createTime"></el-table-column>
|
|
|
|
|
<el-table-column label="操作" width="220" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-button :icon="Delete" @click="deleteBtn(scope.row.commentId)" type="danger" size="default">删除</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<!-- 分页 -->
|
|
|
|
|
<el-pagination
|
|
|
|
|
@size-change="sizeChange"
|
|
|
|
|
@current-change="currentChange"
|
|
|
|
|
:current-page.sync="listParm.currentPage"
|
|
|
|
|
:page-sizes="[10,20, 40, 80, 100]"
|
|
|
|
|
:page-size="listParm.pageSize"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
:total="listParm.total" background>
|
|
|
|
|
</el-pagination>
|
|
|
|
|
|
|
|
|
|
</el-main>
|
|
|
|
|
</template>
|
|
|
|
|
<el-main>
|
|
|
|
|
<!-- 表格 -->
|
|
|
|
|
<el-table :height="tableHeight" :data="tableList" border stripe>
|
|
|
|
|
<el-table-column label="名称" prop="goodsName"></el-table-column>
|
|
|
|
|
<el-table-column label="商品图片" prop="goodsImage">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-image :src="getGoodsImage(scope.row.goodsImage)"
|
|
|
|
|
style="height: 60px; width: 60px; border-radius: 8px"
|
|
|
|
|
:preview-src-list="[getGoodsImage(scope.row.goodsImage)]"
|
|
|
|
|
fit="cover"
|
|
|
|
|
hide-on-click-modal
|
|
|
|
|
@error="handleImageError">
|
|
|
|
|
<template #error>
|
|
|
|
|
<div class="image-error">
|
|
|
|
|
<el-icon><Picture /></el-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-image>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="昵称" prop="nickName"></el-table-column>
|
|
|
|
|
<el-table-column label="头像" prop="avatarUrl">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-image :src="getAvatarUrl(scope.row.avatarUrl)"
|
|
|
|
|
style="height: 60px; width: 60px; border-radius: 50%"
|
|
|
|
|
:preview-src-list="[getAvatarUrl(scope.row.avatarUrl)]"
|
|
|
|
|
fit="cover"
|
|
|
|
|
hide-on-click-modal
|
|
|
|
|
@error="handleImageError">
|
|
|
|
|
<template #error>
|
|
|
|
|
<div class="image-error">
|
|
|
|
|
<el-icon><User /></el-icon>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</el-image>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="评论内容" prop="commentText" width="300">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-tooltip :content="scope.row.commentText" placement="top">
|
|
|
|
|
<div class="comment-text">{{ scope.row.commentText }}</div>
|
|
|
|
|
</el-tooltip>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column label="时间" prop="createTime" width="160"></el-table-column>
|
|
|
|
|
<el-table-column label="操作" width="120" align="center">
|
|
|
|
|
<template #default="scope">
|
|
|
|
|
<el-button :icon="Delete" @click="deleteBtn(scope.row.commentId)" type="danger" size="default">删除</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<!-- 分页 -->
|
|
|
|
|
<el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="listParm.currentPage"
|
|
|
|
|
:page-sizes="[10, 20, 40, 80, 100]" :page-size="listParm.pageSize"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper" :total="listParm.total" background>
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</el-main>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
|
import { Delete, Picture, User } from "@element-plus/icons-vue";
|
|
|
|
|
import useCommentTable from "../../compositions/comment/useCommentTable";
|
|
|
|
|
|
|
|
|
|
// 图片基础URL
|
|
|
|
|
const imgUrl = ref('http://localhost:8089/')
|
|
|
|
|
// 表格业务
|
|
|
|
|
const { listParm, deleteBtn, tableList, sizeChange, currentChange, tableHeight } = useCommentTable();
|
|
|
|
|
|
|
|
|
|
// 获取头像URL
|
|
|
|
|
const getAvatarUrl = (url: string) => {
|
|
|
|
|
if (!url) return '';
|
|
|
|
|
// 微信头像URL已经是完整URL，直接返回
|
|
|
|
|
if (url.indexOf('http') === 0 || url.indexOf('https') === 0) return url;
|
|
|
|
|
// 其他情况添加基础路径
|
|
|
|
|
return imgUrl.value + url;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 获取商品图片URL
|
|
|
|
|
const getGoodsImage = (images: string) => {
|
|
|
|
|
if (!images) return '';
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import {ref} from 'vue'
|
|
|
|
|
import { Delete } from "@element-plus/icons-vue";
|
|
|
|
|
import useCommentTable from "../../compositions/comment/useCommentTable";
|
|
|
|
|
const imgUrl = ref('http://localhost:8089/')
|
|
|
|
|
//表格业务
|
|
|
|
|
const { listParm, deleteBtn, tableList,sizeChange ,currentChange,tableHeight} = useCommentTable();
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
try {
|
|
|
|
|
const imageArray = images.split(',');
|
|
|
|
|
if (imageArray.length > 0) {
|
|
|
|
|
let firstImage = imageArray[0].trim();
|
|
|
|
|
if (firstImage.indexOf('http') === 0 || firstImage.indexOf('https') === 0) {
|
|
|
|
|
return firstImage;
|
|
|
|
|
} else {
|
|
|
|
|
return imgUrl.value + firstImage;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
} catch (e) {
|
|
|
|
|
console.error('解析商品图片失败:', e);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<style scoped></style>
|
|
|
|
|
|
|
|
|
|
return '';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 图片加载错误处理
|
|
|
|
|
const handleImageError = (e: any) => {
|
|
|
|
|
console.log('图片加载失败', e);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 组件挂载时设置默认图片
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
// 可以在这里初始化一些数据
|
|
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.image-error {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
height: 100%;
|
|
|
|
|
background: #f5f7fa;
|
|
|
|
|
color: #909399;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.comment-text {
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
max-width: 300px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
