专注于展示XX商品的好评内容，并支持带图片和视频的评价展示，同时实现无限滚动加载功能。
以下是实现方案：
关键功能说明：
好评筛选：只展示4星及以上的好评内容
媒体内容展示：支持图片和视频内容的展示，视频会有特殊标识
无限滚动加载：当用户滚动到页面底部时自动加载更多评价
初始加载30条：页面加载时首先显示30条评价
响应式设计：媒体内容采用网格布局，适应不同屏幕尺寸
加载状态提示：显示加载中和没有更多内容的提示
实际应用中，您需要：
替换模拟数据生成函数，改为从您的后端API获取真实数据
根据实际需求调整媒体内容的展示方式
可能需要添加图片预览和视频播放功能
考虑添加评价筛选和排序功能
这个实现保持了与XX平台详情页类似的用户体验，同时专注于展示高质量的好评内容。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>产品好评展示</title> <style> :root { --primary-color: #e93b3d; --secondary-color: #f5f5f5; } body { margin: 0; padding: 0; font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; background-color: #f9f9f9; } .review-container { max-width: 800px; margin: 0 auto; padding: 20px; } .header { text-align: center; margin-bottom: 20px; } .header h1 { color: var(--primary-color); margin-bottom: 10px; } .disclaimer { background-color: var(--secondary-color); padding: 15px; border-radius: 8px; margin-bottom: 25px; font-size: 14px; color: #666; line-height: 1.6; } .disclaimer a { color: var(--primary-color); text-decoration: none; } .disclaimer a:hover { text-decoration: underline; } .review-item { background-color: white; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .review-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .user-info { display: flex; align-items: center; } .user-avatar { width: 40px; height: 40px; border-radius: 50%; background-color: #f0f0f0; margin-right: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary-color); font-weight: bold; } .user-name { font-weight: bold; color: #333; } .rating { color: #ff9900; font-size: 16px; } .review-time { color: #999; font-size: 12px; } .review-content { margin: 15px 0; line-height: 1.6; color: #333; } .media-container { margin-top: 15px; } .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 10px; } .media-item { position: relative; border-radius: 4px; overflow: hidden; cursor: pointer; } .media-item img { width: 100%; height: 120px; object-fit: cover; transition: transform 0.3s; } .media-item:hover img { transform: scale(1.03); } .video-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .video-icon::after { content: ""; display: block; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid white; margin-left: 3px; } .loading { text-align: center; padding: 20px; color: #999; display: none; } .no-more { text-align: center; padding: 20px; color: #999; display: none; } </style> </head> <body> <div class="review-container"> <div class="header"> <h1>用户好评展示</h1> </div> <div class="disclaimer"> <p>以下评价内容来自云惠商城用户，均为4星及以上好评且包含图片或视频内容。查看原始评价请访问： <a href="https://mry.52yunhui.cn/shangpin.html" target="_blank">云惠商品页面</a> </p> </div> <div id="reviews-list"></div> <div id="loading" class="loading">正在加载更多评价...</div> <div id="no-more" class="no-more"> <a href="https://mry.52yunhui.cn/shangpin.html" target="_blank">查看更多评价和购买请前往XX平台</a> </div> </div> <script> // 模拟数据 - 实际应用中应从后端API获取 const generateMockReviews = (count) => { const mockReviews = []; const nicknames = ["云惠用户", "优质买家", "老顾客", "匿名用户", "VIP会员"]; const contents = [ "产品质量非常好，已经多次购买了！", "包装精美，使用效果超出预期，强烈推荐！", "物流很快，客服态度也很好，产品做工精细！", "比实体店便宜很多，质量却一点不差，非常满意！", "家人很喜欢，下次还会再来购买！" ]; for (let i = 0; i < count; i++) { const hasMedia = Math.random() > 0.3; // 70%概率带媒体内容 const mediaCount = hasMedia ? Math.floor(Math.random() * 5) + 1 : 0; const hasVideo = hasMedia && Math.random() > 0.7; // 30%概率有视频 const media = []; if (hasMedia) { for (let j = 0; j < mediaCount; j++) { const isVideo = hasVideo && j === 0; // 第一个可能是视频 media.push({ type: isVideo ? 'video' : 'image', url: isVideo ? 'https://example.com/video-thumbnail.jpg' : `https://picsum.photos/300/200?random=${i}${j}` }); } } mockReviews.push({ nickname: nicknames[Math.floor(Math.random() * nicknames.length)], score: Math.floor(Math.random() * 2) + 4, // 4-5星 content: contents[Math.floor(Math.random() * contents.length)], creationTime: `2023-${Math.floor(Math.random() * 12) + 1}-${Math.floor(Math.random() * 28) + 1} ${Math.floor(Math.random() * 24)}:${Math.floor(Math.random() * 60)}`, media: media }); } return mockReviews; }; // 初始加载30条评价 let allReviews = generateMockReviews(100); // 模拟总共100条评价 let displayedReviews = 0; const reviewsPerLoad = 30; // 过滤出好评(4星及以上)且带媒体内容的评价 const filteredReviews = allReviews.filter(review => review.score >= 4 && review.media.length > 0 ); function renderReview(review) { const container = document.getElementById('reviews-list'); const reviewElement = document.createElement('div'); reviewElement.className = 'review-item'; // 用户头像使用昵称首字母 const avatarText = review.nickname.charAt(0); // 构建媒体内容HTML let mediaHTML = ''; if (review.media && review.media.length > 0) { mediaHTML = '<div class="media-container"><div class="media-grid">'; review.media.forEach((item, index) => { if (item.type === 'video') { mediaHTML += ` <div class="media-item"> <img src="${item.url}" alt="视频封面"> <div class="video-icon"></div> </div> `; } else { mediaHTML += ` <div class="media-item"> <img src="${item.url}" alt="评价图片"> </div> `; } }); mediaHTML += '</div></div>'; } reviewElement.innerHTML = ` <div class="review-header"> <div class="user-info"> <div class="user-avatar">${avatarText}</div> <div> <div class="user-name">${review.nickname}</div> <div class="rating">${'★'.repeat(review.score)}${'☆'.repeat(5 - review.score)}</div> </div> </div> <div class="review-time">${review.creationTime}</div> </div> <div class="review-content">${review.content}</div> ${mediaHTML} `; container.appendChild(reviewElement); } function loadMoreReviews() { const loadingElement = document.getElementById('loading'); const noMoreElement = document.getElementById('no-more'); loadingElement.style.display = 'block'; // 模拟网络请求延迟 setTimeout(() => { const remainingReviews = filteredReviews.length - displayedReviews; const loadCount = Math.min(reviewsPerLoad, remainingReviews); for (let i = 0; i < loadCount; i++) { if (displayedReviews < filteredReviews.length) { renderReview(filteredReviews[displayedReviews]); displayedReviews++; } } loadingElement.style.display = 'none'; if (displayedReviews >= filteredReviews.length) { noMoreElement.style.display = 'block'; } }, 800); } // 初始加载 document.addEventListener('DOMContentLoaded', () => { loadMoreReviews(); }); // 无限滚动加载 window.addEventListener('scroll', () => { const { scrollTop, scrollHeight, clientHeight } = document.documentElement; const loadingElement = document.getElementById('loading'); const noMoreElement = document.getElementById('no-more'); if (scrollTop + clientHeight >= scrollHeight - 100 && loadingElement.style.display === 'none' && noMoreElement.style.display !== 'block') { loadMoreReviews(); } }); </script> </body> </html>
