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 @@
>
+
+
+
+
+
+
+
+ ✏️
+
@@ -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