diff --git a/pages/other_package/productInfo/evaluateDetail.vue b/pages/other_package/productInfo/evaluateDetail.vue index 6698ac7..0dd4dd0 100644 --- a/pages/other_package/productInfo/evaluateDetail.vue +++ b/pages/other_package/productInfo/evaluateDetail.vue @@ -33,7 +33,7 @@ - + @@ -91,6 +91,44 @@ > + + + + {{ commentList.length }}条评论 + + + + + + {{ item.nickname }} + + {{ item.content }} + + {{ item.time }} + 回复 + + + + + + + + — 到底啦 — + + + + + + ✏️ + @@ -113,6 +151,29 @@ export default { "https://img.yzcdn.cn/vant/apple-2.jpg" ], currentImageIndex: 0, // 当前图片索引 + + // 【新增】输入框绑定的文本 + inputComment: '', + + // 【新增】模拟评论区数据 + commentList: [ + { + avatar: "https://img.yzcdn.cn/vant/cat.jpeg", + nickname: "不吃葡萄皮888", + level: 4, + content: "哼哼唧唧", + time: "刚刚", + isLiked: false + }, + { + avatar: "https://img.yzcdn.cn/vant/cat.jpeg", + nickname: "不吃葡萄皮888", + level: 4, + content: "😊", + time: "刚刚", + isLiked: false + } + ] }; }, onShow() {}, @@ -128,6 +189,28 @@ export default { delta: 1, }); }, + // 【新增】发送评论 + sendComment() { + if (!this.inputComment.trim()) return; + this.commentList.unshift({ + avatar: "/static/avatar-placeholder.png", // 默认当前用户头像 + nickname: "我就是我", + level: 1, + content: this.inputComment, + time: "刚刚", + isLiked: false + }); + this.inputComment = ''; + uni.showToast({ title: '评论成功', icon: 'none' }); + }, + // 【新增】点赞单条评论 + toggleCommentLike(index) { + this.commentList[index].isLiked = !this.commentList[index].isLiked; + }, + // 【新增】点击回复 + tapReply(item) { + uni.showToast({ title: `回复 @${item.nickname}`, icon: 'none' }); + } }, }; @@ -136,6 +219,7 @@ export default { .content { background-color: #f7f7f9; min-height: 100vh; + position: relative; } .custom-header { @@ -201,6 +285,7 @@ export default { align-items: center; overflow-y: auto; box-sizing: border-box; + padding-bottom: 120rpx; /* 【新增】留出底部固定栏的距离 */ } .evaluation-card { @@ -329,4 +414,124 @@ export default { } } } + +/* ================= 【新增样式】评论显示区 ================= */ +.comment-section { + margin-top: 40rpx; + padding: 0 32rpx; + border-top: 1rpx solid #f2f2f2; + + .comment-count { + font-size: 26rpx; + color: #999999; + padding: 24rpx 0; + } + + .comment-item { + display: flex; + padding: 24rpx 0; + position: relative; + + .c-avatar { + width: 64rpx; + height: 64rpx; + border-radius: 50%; + margin-right: 16rpx; + background-color: #f0f0f0; + } + + .c-body { + flex: 1; + + .c-user-line { + display: flex; + align-items: center; + margin-bottom: 8rpx; + + .c-nickname { + font-size: 26rpx; + color: #888888; + margin-right: 10rpx; + } + } + + .c-text { + font-size: 28rpx; + color: #262626; + line-height: 1.4; + margin-bottom: 12rpx; + } + + .c-footer { + display: flex; + align-items: center; + font-size: 24rpx; + color: #aaaaaa; + + .c-time { + margin-right: 20rpx; + } + .c-reply-btn { + color: #555555; + cursor: pointer; + } + } + } + + .c-like-box { + padding: 10rpx; + } + } + + .no-more { + text-align: center; + font-size: 24rpx; + color: #cccccc; + padding: 40rpx 0 10rpx 0; + } +} + +/* ================= 【新增样式】底部固定评论/操作栏 ================= */ +.bottom-bar { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 110rpx; + background-color: #ffffff; + border-top: 1rpx solid #eeeeee; + display: flex; + align-items: center; + padding: 0 24rpx; + box-sizing: border-box; + z-index: 100; + padding-bottom: env(safe-area-inset-bottom); /* 适配全面屏底部安全区 */ + + .input-box { + flex: 1; + height: 70rpx; + background-color: #f5f6f8; + border-radius: 35rpx; + display: flex; + align-items: center; + padding: 0 24rpx; + margin-right: 24rpx; + + .edit-icon { + font-size: 26rpx; + color: #999999; + margin-right: 12rpx; + } + + input { + flex: 1; + font-size: 26rpx; + color: #262626; + } + + .input-placeholder { + color: #bbbbbb; + } + } +} \ No newline at end of file