feat: 评价评论回复区

pages/other_package/productInfo/evaluateDetail.vue

@@ -33,7 +33,7 @@
       </view>
     </view>
 
-    <!-- 评价主内容区域 -->
+    <!-- 评价与评论主内容区域 -->
     <view class="setting-view">
       <view class="evaluation-card">
         <!-- 1. 大图晒单区域（支持左右滑动，兼容H5和小程序） -->
@@ -91,6 +91,44 @@
             >
           </view>
         </view>
+
+        <!-- 【新增】5. 评论列表显示区 -->
+        <view class="comment-section">
+          <view class="comment-count">{{ commentList.length }}条评论</view>
+          
+          <view class="comment-item" v-for="(item, index) in commentList" :key="index">
+            <image class="c-avatar" :src="item.avatar" mode="aspectFill"></image>
+            <view class="c-body">
+              <view class="c-user-line">
+                <text class="c-nickname">{{ item.nickname }}</text>
+              </view>
+              <view class="c-text">{{ item.content }}</view>
+              <view class="c-footer">
+                <text class="c-time">{{ item.time }}</text>
+                <text class="c-reply-btn" @tap="tapReply(item)">回复</text>
+              </view>
+            </view>
+            <!-- 右侧点赞 -->
+            <view class="c-like-box" @tap="toggleCommentLike(index)">
+            </view>
+          </view>
+
+          <!-- 底部到底提示 -->
+          <view class="no-more">— 到底啦 —</view>
+        </view>
+      </view>
+    </view>
+    <view class="bottom-bar">
+      <view class="input-box">
+        <text class="edit-icon">✏️</text>
+        <input 
+          type="text" 
+          v-model="inputComment" 
+          placeholder="热情回复 文明用语" 
+          placeholder-class="input-placeholder"
+          confirm-type="send"
+          @confirm="sendComment"
+        />
       </view>
     </view>
 
@@ -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' });
+    }
   },
 };
 </script>
@@ -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;
+    }
+  }
+}
 </style>