746 lines
17 KiB
Vue
746 lines
17 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 主帖内容 -->
|
||
<view class="post-container">
|
||
<view class="post-header">
|
||
<image class="avatar" :src="postData.customerPortrait" mode="aspectFill"></image>
|
||
<view class="post-info">
|
||
<text class="username">{{ postData.customerName }}</text>
|
||
<text class="time">{{ formatTime(postData.pushAt) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="post-content">
|
||
<text class="title">{{ postData.title }}</text>
|
||
<text class="content-text">{{ postData.content }}</text>
|
||
<view class="images" v-if="postData.images && postData.images.length">
|
||
<image v-for="(img, index) in postData.images" :key="index" :src="img" class="post-image" :class="{
|
||
'single-img': postData.images.length === 1,
|
||
'double-img': postData.images.length === 2,
|
||
'multi-img': postData.images.length >= 3
|
||
}" mode="aspectFill" @click="previewImage(index)"></image>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="post-footer">
|
||
<view class="post-actions">
|
||
<view class="action-item">
|
||
|
||
<text class="action-text">{{ getTotalComments() }}</text>
|
||
</view>
|
||
</view>
|
||
</view> -->
|
||
</view>
|
||
|
||
<!-- 评论列表 -->
|
||
<view class="comments-container">
|
||
<view class="comments-title">评论 ({{ getTotalComments() }})</view>
|
||
<view class="comments-list">
|
||
<view v-for="(comment, index) in flatComments" :key="comment.id" class="comment-item" :style="{
|
||
'--level': comment.level,
|
||
'--indent': comment.level > 0 ? (comment.level * 60) + 'rpx' : '0'
|
||
}">
|
||
<!-- 层级视觉指示线条 -->
|
||
<view class="comment-level-indicator" v-if="comment.level > 0"></view>
|
||
|
||
<!-- 评论内容区 -->
|
||
<view class="comment-content-wrapper">
|
||
<image class="comment-avatar" :src="comment.pusherPortrait" mode="aspectFill"></image>
|
||
<view class="comment-main">
|
||
<view class="comment-meta">
|
||
<text class="comment-username">{{ comment.pusherName }}</text>
|
||
<text class="comment-time">{{ formatTime(comment.createdAt) }}</text>
|
||
</view>
|
||
<view class="comment-text">{{ comment.content }}</view>
|
||
<view class="comment-actions">
|
||
<text class="reply-btn" @click="handleReply(comment.id)">回复</text>
|
||
<!-- 只在一级评论显示折叠按钮 -->
|
||
<text class="fold-btn" v-if="comment.level === 0 && hasChildren(comment)"
|
||
@click="toggleFold(comment.id)">
|
||
{{ foldedComments.includes(comment.id) ? '展开' : '折叠' }}
|
||
{{ getChildCount(comment) }}条回复
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 新评论输入框 -->
|
||
<view class="comment-input-container">
|
||
<!-- 回复提示条 -->
|
||
<view class="replying-bar" v-if="replyingTo">
|
||
<text class="replying-text">回复 @{{ getReplyUsername(replyingTo) }}</text>
|
||
<text class="cancel-reply" @click="cancelReply">取消</text>
|
||
</view>
|
||
|
||
<view class="input-wrapper">
|
||
<input class="comment-input" v-model="newComment" :placeholder="replyingTo ? '输入回复内容...' : '写下你的评论...'"
|
||
@confirm="submitComment" />
|
||
<button class="send-btn" @click="submitComment" :disabled="!newComment.trim()">
|
||
发送
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
get,
|
||
post
|
||
} from '@/utils/request';
|
||
import {
|
||
formatTime
|
||
} from '@/utils/timeFormat';
|
||
// import uniIcons from '@/components/uni-icons/uni-icons.vue';
|
||
|
||
export default {
|
||
components: {
|
||
// uniIcons
|
||
},
|
||
data() {
|
||
return {
|
||
Id: '',
|
||
flatComments: [],
|
||
newComment: "",
|
||
replyingTo: null,
|
||
postData: {
|
||
histories: []
|
||
},
|
||
loading: false,
|
||
error: '',
|
||
submitting: false,
|
||
foldedComments: [], // 存储被折叠的评论ID
|
||
showLoadMore: false, // 是否显示加载更多
|
||
currentPage: 1,
|
||
pageSize: 10,
|
||
};
|
||
},
|
||
onLoad(options) {
|
||
if (options && options.Id) {
|
||
this.Id = options.Id;
|
||
this.getDetail();
|
||
} else {
|
||
this.error = '缺少内容ID';
|
||
this.loading = false;
|
||
}
|
||
},
|
||
methods: {
|
||
// 图片预览
|
||
previewImage(index) {
|
||
if (!this.postData.images || !this.postData.images.length) return;
|
||
|
||
uni.previewImage({
|
||
current: index,
|
||
urls: this.postData.images
|
||
});
|
||
},
|
||
|
||
// 检查评论是否有子评论
|
||
hasChildren(comment) {
|
||
return comment.children && comment.children.length > 0;
|
||
},
|
||
|
||
// 获取子评论数量
|
||
getChildCount(comment) {
|
||
if (!this.hasChildren(comment)) return 0;
|
||
return comment.children.length;
|
||
},
|
||
|
||
// 切换折叠状态
|
||
toggleFold(commentId) {
|
||
const index = this.foldedComments.indexOf(commentId);
|
||
if (index === -1) {
|
||
this.foldedComments.push(commentId);
|
||
} else {
|
||
this.foldedComments.splice(index, 1);
|
||
}
|
||
this.updateFlatComments();
|
||
},
|
||
|
||
// 更新平铺评论列表（处理折叠逻辑）
|
||
updateFlatComments() {
|
||
const flattenWithFold = (comments, level = 0, parentFolded = false) => {
|
||
return comments.reduce((arr, comment) => {
|
||
// 只有一级评论才检查折叠状态
|
||
const isFolded = level === 0 && this.foldedComments.includes(comment.id);
|
||
const currentFolded = parentFolded || isFolded;
|
||
|
||
if (!parentFolded) {
|
||
arr.push({
|
||
...comment,
|
||
level,
|
||
isFolded
|
||
});
|
||
}
|
||
|
||
// 如果是一级评论且被折叠，则不显示子评论
|
||
if (comment.children && comment.children.length && !(level === 0 && isFolded)) {
|
||
arr.push(...flattenWithFold(comment.children, level + 1, currentFolded));
|
||
}
|
||
|
||
return arr;
|
||
}, []);
|
||
};
|
||
|
||
this.flatComments = flattenWithFold(this.postData.histories || []);
|
||
},
|
||
// 加载更多评论
|
||
loadMoreComments() {
|
||
this.currentPage++;
|
||
// 这里应该调用API获取更多评论，示例中简化处理
|
||
this.getDetail();
|
||
},
|
||
|
||
// 获取帖子详情
|
||
async getDetail() {
|
||
try {
|
||
this.loading = true;
|
||
const res = await get(`/api/v1/apps/home/reciprocities/${this.Id}`, {
|
||
page: this.currentPage,
|
||
pageSize: this.pageSize
|
||
});
|
||
if (!res?.success) throw new Error(res?.message || '获取详情失败');
|
||
|
||
if (this.currentPage === 1) {
|
||
this.postData = res.data;
|
||
} else {
|
||
// 合并评论数据
|
||
this.postData.histories = [...this.postData.histories, ...res.data.histories];
|
||
}
|
||
|
||
this.updateFlatComments();
|
||
this.showLoadMore = (res.data.histories.length >= this.pageSize);
|
||
} catch (err) {
|
||
console.error('获取详情失败:', err);
|
||
this.error = '加载失败，请重试';
|
||
} finally {
|
||
this.loading = false;
|
||
}
|
||
},
|
||
|
||
formatTime(isoTime) {
|
||
if (!isoTime) return '';
|
||
return formatTime(isoTime); // 使用统一的格式化方法
|
||
},
|
||
|
||
// 计算总评论数
|
||
getTotalComments() {
|
||
const count = (comments) => {
|
||
return comments.reduce((total, comment) => {
|
||
return total + 1 + (comment.children ? count(comment.children) : 0);
|
||
}, 0);
|
||
};
|
||
return count(this.postData.histories || []);
|
||
},
|
||
|
||
// 提交评论/回复
|
||
async submitComment() {
|
||
const content = this.newComment.trim();
|
||
if (!content || this.submitting) return;
|
||
|
||
try {
|
||
this.submitting = true;
|
||
const requestData = {
|
||
content: content,
|
||
reciprocityId: this.postData.id,
|
||
rootHistoryId: this.replyingTo || 0
|
||
};
|
||
|
||
const response = await post(
|
||
'/api/v1/app_auth/reciprocities/send',
|
||
requestData
|
||
);
|
||
|
||
if (response.success) {
|
||
this.newComment = '';
|
||
this.replyingTo = null;
|
||
uni.showToast({
|
||
title: '评论成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
});
|
||
setTimeout(() => {
|
||
this.currentPage = 1;
|
||
this.getDetail();
|
||
}, 500);
|
||
} else {
|
||
throw new Error('评论提交失败，请重试');
|
||
}
|
||
} catch (err) {
|
||
console.error('评论失败:', err);
|
||
uni.showToast({
|
||
title: err.message || '评论失败，请重试',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
} finally {
|
||
this.submitting = false;
|
||
}
|
||
},
|
||
|
||
// 处理回复按钮点击
|
||
handleReply(commentId) {
|
||
this.replyingTo = commentId;
|
||
this.$nextTick(() => {
|
||
uni.createSelectorQuery().select('.comment-input')
|
||
.fields({
|
||
focus: true
|
||
}, () => {}).exec();
|
||
});
|
||
},
|
||
|
||
// 取消回复
|
||
cancelReply() {
|
||
this.replyingTo = null;
|
||
this.newComment = '';
|
||
},
|
||
|
||
// 获取被回复人的用户名
|
||
getReplyUsername(commentId) {
|
||
const findUser = (comments) => {
|
||
for (const c of comments) {
|
||
if (c.id === commentId) return c.pusherName;
|
||
if (c.children && c.children.length) {
|
||
const user = findUser(c.children);
|
||
if (user) return user;
|
||
}
|
||
}
|
||
return "";
|
||
};
|
||
return findUser(this.postData.histories);
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
/* 使用SCSS增强样式能力 */
|
||
$primary-color: #4361ee; // 更现代的蓝色
|
||
$primary-light: #e9f0ff; // 浅蓝色背景
|
||
$text-color: #2d3748; // 深灰色文字
|
||
$light-text: #718096; // 浅灰色文字
|
||
$border-color: #e2e8f0; // 更柔和的边框色
|
||
$bg-color: #f7fafc; // 浅灰色背景
|
||
$comment-bg: #ffffff; // 白色评论背景
|
||
$shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05); // 小阴影
|
||
$shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08); // 中等阴影
|
||
$radius-lg: 12px; // 大圆角
|
||
$radius-md: 8px; // 中圆角
|
||
$radius-sm: 4px; // 小圆角
|
||
$transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); // 平滑过渡
|
||
|
||
.content {
|
||
padding: 16px;
|
||
background-color: $bg-color;
|
||
min-height: 100vh;
|
||
padding-bottom: 120px;
|
||
}
|
||
|
||
/* 主帖样式优化 */
|
||
.post-container {
|
||
background-color: white;
|
||
border-radius: $radius-lg;
|
||
padding: 24px;
|
||
margin-bottom: 20px;
|
||
box-shadow: $shadow-sm;
|
||
transition: $transition;
|
||
border: 1px solid $border-color;
|
||
|
||
&:hover {
|
||
box-shadow: $shadow-md;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
&:active {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.post-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.avatar {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
margin-right: 16px;
|
||
border: 2px solid white;
|
||
box-shadow: $shadow-sm;
|
||
background-color: #f5f5f5;
|
||
transition: $transition;
|
||
|
||
&:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
|
||
.post-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.username {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: $text-color;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.time {
|
||
font-size: 13px;
|
||
color: $light-text;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.post-content {
|
||
.title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
color: #1a1a1a;
|
||
margin-bottom: 16px;
|
||
display: block;
|
||
line-height: 1.6;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
|
||
.content-text {
|
||
font-size: 15px;
|
||
color: $text-color;
|
||
line-height: 1.7;
|
||
margin-bottom: 20px;
|
||
display: block;
|
||
word-break: break-word;
|
||
}
|
||
}
|
||
|
||
.images {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12px;
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.post-image {
|
||
border-radius: $radius-md;
|
||
background-color: #f5f5f5;
|
||
object-fit: cover;
|
||
transition: $transition;
|
||
box-shadow: $shadow-sm;
|
||
cursor: zoom-in;
|
||
|
||
&:hover {
|
||
transform: scale(1.02);
|
||
box-shadow: $shadow-md;
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
&.single-img {
|
||
width: 100%;
|
||
height: 300px;
|
||
}
|
||
|
||
&.double-img {
|
||
width: calc(50% - 6px);
|
||
height: 180px;
|
||
}
|
||
|
||
&.multi-img {
|
||
width: calc(33.33% - 8px);
|
||
height: 120px;
|
||
}
|
||
}
|
||
|
||
/* 评论区样式优化 */
|
||
.comments-container {
|
||
background-color: white;
|
||
border-radius: $radius-lg;
|
||
padding: 0 20px;
|
||
margin-bottom: 16px;
|
||
box-shadow: $shadow-sm;
|
||
border: 1px solid $border-color;
|
||
}
|
||
|
||
.comments-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: $text-color;
|
||
padding: 20px 0;
|
||
border-bottom: 1px solid $border-color;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: -1px;
|
||
width: 40px;
|
||
height: 2px;
|
||
background-color: $primary-color;
|
||
}
|
||
}
|
||
|
||
.comments-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.comment-item {
|
||
position: relative;
|
||
padding: 20px 0;
|
||
border-bottom: 1px solid $border-color;
|
||
transition: $transition;
|
||
|
||
&:hover {
|
||
background-color: rgba($primary-light, 0.3);
|
||
}
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.comment-level-indicator {
|
||
position: absolute;
|
||
top: 50px;
|
||
width: 2px;
|
||
background-color: #e5e5e5;
|
||
left: calc(30px + var(--indent) - 20px);
|
||
height: calc(100% - 50px);
|
||
}
|
||
|
||
.comment-content-wrapper {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding-left: var(--indent);
|
||
}
|
||
|
||
.comment-avatar {
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
margin-right: 12px;
|
||
flex-shrink: 0;
|
||
background-color: #f5f5f5;
|
||
border: 1px solid $border-color;
|
||
transition: $transition;
|
||
|
||
&:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
}
|
||
|
||
.comment-main {
|
||
flex: 1;
|
||
}
|
||
|
||
.comment-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.comment-username {
|
||
font-size: 14px;
|
||
color: $text-color;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.comment-time {
|
||
font-size: 12px;
|
||
color: $light-text;
|
||
}
|
||
|
||
.comment-text {
|
||
font-size: 14px;
|
||
color: $text-color;
|
||
line-height: 1.6;
|
||
margin-bottom: 12px;
|
||
padding: 4px 0;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.comment-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
padding: 4px 0;
|
||
}
|
||
|
||
.reply-btn,
|
||
.fold-btn {
|
||
font-size: 13px;
|
||
color: $primary-color;
|
||
padding: 4px 8px;
|
||
border-radius: $radius-sm;
|
||
transition: $transition;
|
||
cursor: pointer;
|
||
|
||
&:hover {
|
||
background-color: rgba($primary-color, 0.1);
|
||
}
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
}
|
||
|
||
.fold-btn {
|
||
color: $light-text;
|
||
}
|
||
|
||
/* 评论输入框样式优化 */
|
||
.comment-input-container {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: white;
|
||
padding: 16px;
|
||
border-top: 1px solid $border-color;
|
||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
|
||
z-index: 100;
|
||
}
|
||
|
||
.replying-bar {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 12px;
|
||
background-color: $primary-light;
|
||
border-radius: $radius-md;
|
||
margin-bottom: 12px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.replying-text {
|
||
color: $primary-color;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.cancel-reply {
|
||
color: $primary-color;
|
||
padding: 4px 8px;
|
||
border-radius: $radius-sm;
|
||
cursor: pointer;
|
||
transition: $transition;
|
||
|
||
&:hover {
|
||
background-color: rgba($primary-color, 0.1);
|
||
}
|
||
}
|
||
|
||
.input-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.comment-input {
|
||
flex: 1;
|
||
height: 48px;
|
||
padding: 0 16px;
|
||
font-size: 14px;
|
||
border: 1px solid $border-color;
|
||
border-radius: 24px;
|
||
background-color: #f5f5f5;
|
||
transition: $transition;
|
||
outline: none;
|
||
|
||
&:focus {
|
||
border-color: $primary-color;
|
||
background-color: #fff;
|
||
box-shadow: 0 0 0 2px rgba($primary-color, 0.1);
|
||
}
|
||
|
||
&::placeholder {
|
||
color: #a0aec0;
|
||
}
|
||
}
|
||
|
||
.send-btn {
|
||
min-width: 80px;
|
||
height: 48px;
|
||
background-color: $primary-color;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 24px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
transition: $transition;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 0 16px;
|
||
|
||
&:hover {
|
||
background-color: darken($primary-color, 5%);
|
||
box-shadow: $shadow-sm;
|
||
}
|
||
|
||
&:active {
|
||
background-color: darken($primary-color, 10%);
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
&:disabled {
|
||
background-color: #edf2f7;
|
||
color: #a0aec0;
|
||
cursor: not-allowed;
|
||
box-shadow: none;
|
||
}
|
||
}
|
||
|
||
/* 加载更多按钮 */
|
||
.load-more {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 16px 0;
|
||
color: $light-text;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: $transition;
|
||
|
||
&:hover {
|
||
color: $primary-color;
|
||
}
|
||
|
||
text {
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
|
||
/* 添加一些动画效果 */
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.comment-item {
|
||
animation: fadeIn 0.3s ease-out forwards;
|
||
}
|
||
|
||
/* 响应式调整 */
|
||
@media (max-width: 480px) {
|
||
.content {
|
||
padding: 12px;
|
||
}
|
||
|
||
.post-container {
|
||
padding: 16px;
|
||
}
|
||
|
||
.comment-input-container {
|
||
padding: 12px;
|
||
}
|
||
}
|
||
</style> |