758 lines
25 KiB
JavaScript
758 lines
25 KiB
JavaScript
// 商品详情页功能 - 使用真实API
|
||
|
||
let currentProduct = null;
|
||
let selectedSku = null;
|
||
let currentCommentPage = 1;
|
||
let currentCommentFilter = 'all'; // all, good, medium, bad, image
|
||
|
||
// 页面初始化
|
||
$(document).ready(function() {
|
||
const productId = getProductIdFromUrl();
|
||
if (productId) {
|
||
loadProductDetail(productId);
|
||
loadCommentsCount(productId);
|
||
loadComments(productId);
|
||
} else {
|
||
Toast.error('商品不存在');
|
||
setTimeout(() => {
|
||
window.location.href = 'index.html';
|
||
}, 2000);
|
||
}
|
||
|
||
bindEvents();
|
||
loadCartCount();
|
||
});
|
||
|
||
// 从URL获取商品ID
|
||
function getProductIdFromUrl() {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
return urlParams.get('id');
|
||
}
|
||
|
||
// 加载商品详情
|
||
function loadProductDetail(productId) {
|
||
console.log('加载商品详情:', productId);
|
||
|
||
API.get(`/frontend/products/${productId}/detail`)
|
||
.then(data => {
|
||
console.log('商品详情数据:', data);
|
||
currentProduct = data;
|
||
renderProductDetail(data);
|
||
loadRelatedProducts();
|
||
})
|
||
.catch(error => {
|
||
console.error('加载商品详情失败:', error);
|
||
Toast.error(error.message || '加载商品详情失败');
|
||
setTimeout(() => {
|
||
window.location.href = 'index.html';
|
||
}, 2000);
|
||
});
|
||
}
|
||
|
||
// 渲染商品详情
|
||
function renderProductDetail(product) {
|
||
const lang = i18n.currentLang;
|
||
|
||
// 设置商品名称
|
||
const productName = product.title || product.name || '未知商品';
|
||
$('#productName').text(productName);
|
||
$('#breadcrumbProduct').text(productName);
|
||
document.title = `${productName} - vizee为之甄选`;
|
||
|
||
// 设置价格
|
||
const minPrice = PriceUtils.fenToYuan(product.minSalePrice || product.price || 0);
|
||
const maxPrice = PriceUtils.fenToYuan(product.maxSalePrice || product.price || 0);
|
||
const originPrice = PriceUtils.fenToYuan(product.maxLinePrice || product.originPrice || 0);
|
||
|
||
if (minPrice === maxPrice) {
|
||
$('#currentPrice').text(`¥${minPrice.toFixed(2)}`);
|
||
} else {
|
||
$('#currentPrice').text(`¥${minPrice.toFixed(2)} - ¥${maxPrice.toFixed(2)}`);
|
||
}
|
||
|
||
if (originPrice > maxPrice) {
|
||
$('#originalPrice').text(`¥${originPrice.toFixed(2)}`).show();
|
||
const discount = Math.round((1 - maxPrice / originPrice) * 100);
|
||
$('#priceSave').text(`${i18n.t('save') || '省'} ${discount}%`).show();
|
||
} else {
|
||
$('#originalPrice').hide();
|
||
$('#priceSave').hide();
|
||
}
|
||
|
||
// 设置库存状态
|
||
const spuStock = product.spuStockQuantity ?? product.stock ?? 0;
|
||
const isInStock = spuStock > 0;
|
||
|
||
if (isInStock) {
|
||
$('#stockStatus').text('有货').addClass('in-stock').removeClass('out-of-stock');
|
||
} else {
|
||
$('#stockStatus').text('缺货').addClass('out-of-stock').removeClass('in-stock');
|
||
}
|
||
|
||
// 保存库存状态到currentProduct
|
||
currentProduct.isStock = isInStock;
|
||
|
||
// 设置图片
|
||
loadProductImages(product.images || [product.primaryImage]);
|
||
|
||
// 设置描述
|
||
const description = product.descriptionText || product.details || '';
|
||
$('#productDescription').text(description);
|
||
|
||
// 渲染详情图片
|
||
if (product.desc && Array.isArray(product.desc) && product.desc.length > 0) {
|
||
const detailImagesHtml = product.desc.map(img =>
|
||
`<img src="${img}" alt="商品详情" loading="lazy">`
|
||
).join('');
|
||
$('#productDetailImages').html(detailImagesHtml);
|
||
}
|
||
|
||
// 渲染规格选择器
|
||
if (product.specList && product.specList.length > 0) {
|
||
renderSpecSelector(product.specList, product.skuList);
|
||
} else {
|
||
$('#specSelector').hide();
|
||
}
|
||
|
||
// 显示已售数量
|
||
if (product.soldNum) {
|
||
$('#soldCount').text(`已售 ${product.soldNum}`).show();
|
||
}
|
||
}
|
||
|
||
// 加载商品图片
|
||
function loadProductImages(images) {
|
||
// 显示加载动画
|
||
showImageLoading();
|
||
|
||
if (!images || images.length === 0) {
|
||
// 如果没有图片，隐藏加载动画并显示默认图片
|
||
hideImageLoading();
|
||
images = ['https://picsum.photos/800/800?random=default'];
|
||
}
|
||
|
||
// 主图
|
||
const mainImg = new Image();
|
||
mainImg.onload = function() {
|
||
$('#mainImage').attr('src', images[0]);
|
||
hideImageLoading();
|
||
};
|
||
mainImg.onerror = function() {
|
||
// 加载失败，使用占位图
|
||
$('#mainImage').attr('src', 'https://picsum.photos/800/800?random=error');
|
||
hideImageLoading();
|
||
};
|
||
mainImg.src = images[0];
|
||
|
||
// 缩略图
|
||
const thumbnailsHtml = images.map((img, index) =>
|
||
`<div class="thumbnail ${index === 0 ? 'active' : ''}" data-index="${index}">
|
||
<img src="${img}" alt="商品图片 ${index + 1}" loading="lazy">
|
||
</div>`
|
||
).join('');
|
||
|
||
$('#thumbnails').html(thumbnailsHtml);
|
||
}
|
||
|
||
// 显示图片加载动画
|
||
function showImageLoading() {
|
||
const loadingHtml = `
|
||
<div class="image-loading" id="imageLoading">
|
||
<div class="loading-spinner"></div>
|
||
<div class="loading-text">加载中...</div>
|
||
</div>
|
||
`;
|
||
|
||
if ($('#imageLoading').length === 0) {
|
||
$('.main-image').append(loadingHtml);
|
||
}
|
||
$('#mainImage').css('opacity', '0');
|
||
}
|
||
|
||
// 隐藏图片加载动画
|
||
function hideImageLoading() {
|
||
$('#imageLoading').fadeOut(300, function() {
|
||
$(this).remove();
|
||
});
|
||
$('#mainImage').css('opacity', '1');
|
||
}
|
||
|
||
// 渲染规格选择器
|
||
function renderSpecSelector(specList, skuList) {
|
||
let specHtml = '';
|
||
|
||
specList.forEach((spec, specIndex) => {
|
||
// 优先使用title，其次specName，最后name
|
||
const specName = spec.title || spec.specName || spec.name || `规格${specIndex + 1}`;
|
||
const specValues = spec.specValueList || [];
|
||
|
||
specHtml += `
|
||
<div class="spec-group">
|
||
<label class="spec-label">${specName}</label>
|
||
<div class="spec-options" data-spec-index="${specIndex}">
|
||
${specValues.map((value, valueIndex) => {
|
||
const valueName = value.specValue || value.name || value;
|
||
return `
|
||
<button class="spec-option"
|
||
data-spec-index="${specIndex}"
|
||
data-value-index="${valueIndex}"
|
||
data-spec-value="${valueName}">
|
||
${valueName}
|
||
</button>
|
||
`;
|
||
}).join('')}
|
||
</div>
|
||
</div>
|
||
`;
|
||
});
|
||
|
||
$('#specSelector').html(specHtml).show();
|
||
}
|
||
|
||
// 加载相关商品
|
||
function loadRelatedProducts() {
|
||
API.get('/products', { page: 1, page_size: 4 })
|
||
.then(data => {
|
||
const products = data.list || [];
|
||
renderRelatedProducts(products.slice(0, 4));
|
||
})
|
||
.catch(error => {
|
||
console.error('加载相关商品失败:', error);
|
||
});
|
||
}
|
||
|
||
// 渲染相关商品
|
||
function renderRelatedProducts(products) {
|
||
const lang = i18n.currentLang;
|
||
|
||
const productsHtml = products.map(product => {
|
||
const productName = product.name || '未知商品';
|
||
const productImage = product.main_image || 'https://picsum.photos/400/400?random=default';
|
||
const price = PriceUtils.fenToYuan(product.price || 0);
|
||
const originalPrice = product.orig_price ? PriceUtils.fenToYuan(product.orig_price) : null;
|
||
|
||
return `
|
||
<div class="product-card">
|
||
<a href="product-detail.html?id=${product.id}">
|
||
<div class="product-image">
|
||
<img src="${productImage}" alt="${productName}" loading="lazy">
|
||
</div>
|
||
<div class="product-info">
|
||
<h3 class="product-title">${productName}</h3>
|
||
<div class="product-price">
|
||
<span class="price-current">¥${price.toFixed(2)}</span>
|
||
${originalPrice ? `<span class="price-original">¥${originalPrice.toFixed(2)}</span>` : ''}
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
|
||
$('#relatedProducts').html(productsHtml);
|
||
}
|
||
|
||
// 绑定事件
|
||
function bindEvents() {
|
||
// 缩略图点击
|
||
$(document).on('click', '.thumbnail', function() {
|
||
const index = $(this).data('index');
|
||
const imgSrc = $(this).find('img').attr('src');
|
||
$('#mainImage').attr('src', imgSrc);
|
||
$('.thumbnail').removeClass('active');
|
||
$(this).addClass('active');
|
||
});
|
||
|
||
// 数量增减
|
||
$('.qty-btn.minus').on('click', function() {
|
||
const $input = $('#quantityInput');
|
||
let qty = parseInt($input.val()) || 1;
|
||
if (qty > 1) {
|
||
$input.val(qty - 1);
|
||
}
|
||
});
|
||
|
||
$('.qty-btn.plus').on('click', function() {
|
||
const $input = $('#quantityInput');
|
||
let qty = parseInt($input.val()) || 1;
|
||
const max = parseInt($input.attr('max')) || 99;
|
||
if (qty < max) {
|
||
$input.val(qty + 1);
|
||
}
|
||
});
|
||
|
||
$('#quantityInput').on('change', function() {
|
||
let qty = parseInt($(this).val()) || 1;
|
||
const max = parseInt($(this).attr('max')) || 99;
|
||
if (qty < 1) qty = 1;
|
||
if (qty > max) qty = max;
|
||
$(this).val(qty);
|
||
});
|
||
|
||
// 规格选择
|
||
$(document).on('click', '.spec-option', function() {
|
||
const $option = $(this);
|
||
const specIndex = $option.data('spec-index');
|
||
|
||
// 取消同组其他选项
|
||
$(`.spec-option[data-spec-index="${specIndex}"]`).removeClass('selected');
|
||
// 选中当前选项
|
||
$option.addClass('selected');
|
||
|
||
// 更新选中的SKU
|
||
updateSelectedSku();
|
||
});
|
||
|
||
// 评论标签切换
|
||
$(document).on('click', '.comment-tab', function() {
|
||
const $tab = $(this);
|
||
const filter = $tab.data('filter');
|
||
|
||
$('.comment-tab').removeClass('active');
|
||
$tab.addClass('active');
|
||
|
||
currentCommentFilter = filter;
|
||
currentCommentPage = 1;
|
||
|
||
const productId = getProductIdFromUrl();
|
||
loadComments(productId, 1, filter);
|
||
});
|
||
|
||
// 评论分页
|
||
$(document).on('click', '#commentPagination .page-btn', function() {
|
||
const page = parseInt($(this).data('page'));
|
||
const productId = getProductIdFromUrl();
|
||
|
||
currentCommentPage = page;
|
||
loadComments(productId, page, currentCommentFilter);
|
||
|
||
// 滚动到评论区域
|
||
$('html, body').animate({
|
||
scrollTop: $('#reviews').offset().top - 100
|
||
}, 300);
|
||
});
|
||
|
||
// Tab切换
|
||
$(document).on('click', '.tab-header', function() {
|
||
const $tab = $(this);
|
||
const tabId = $tab.data('tab');
|
||
|
||
$('.tab-header').removeClass('active');
|
||
$tab.addClass('active');
|
||
|
||
$('.tab-content').removeClass('active');
|
||
$(`#${tabId}`).addClass('active');
|
||
});
|
||
|
||
// 立即购买
|
||
$('#buyNowBtn').on('click', function() {
|
||
if (!currentProduct || !currentProduct.isStock) {
|
||
Toast.error('商品缺货');
|
||
return;
|
||
}
|
||
|
||
// 如果有规格，检查是否已选择
|
||
if (currentProduct.specList && currentProduct.specList.length > 0) {
|
||
const selectedCount = $('.spec-option.selected').length;
|
||
if (selectedCount < currentProduct.specList.length) {
|
||
// 找到未选择的规格组
|
||
const unselectedSpecs = [];
|
||
currentProduct.specList.forEach((spec, index) => {
|
||
const hasSelected = $(`.spec-option.selected[data-spec-index="${index}"]`).length > 0;
|
||
if (!hasSelected) {
|
||
const specName = spec.title || spec.specName || spec.name || `规格${index + 1}`;
|
||
unselectedSpecs.push(specName);
|
||
// 高亮未选择的规格组
|
||
$(`.spec-options[data-spec-index="${index}"]`).addClass('spec-required');
|
||
setTimeout(() => {
|
||
$(`.spec-options[data-spec-index="${index}"]`).removeClass('spec-required');
|
||
}, 2000);
|
||
}
|
||
});
|
||
Toast.error(`请选择${unselectedSpecs.join('、')}`);
|
||
return;
|
||
}
|
||
}
|
||
|
||
const quantity = parseInt($('#quantityInput').val()) || 1;
|
||
|
||
// 先加入购物车，然后跳转结算
|
||
addToCart(quantity, true);
|
||
});
|
||
|
||
// 加入购物车
|
||
$('#addToCartBtn').on('click', function() {
|
||
if (!currentProduct || !currentProduct.isStock) {
|
||
Toast.error('商品缺货');
|
||
return;
|
||
}
|
||
|
||
// 如果有规格，检查是否已选择
|
||
if (currentProduct.specList && currentProduct.specList.length > 0) {
|
||
const selectedCount = $('.spec-option.selected').length;
|
||
if (selectedCount < currentProduct.specList.length) {
|
||
// 找到未选择的规格组
|
||
const unselectedSpecs = [];
|
||
currentProduct.specList.forEach((spec, index) => {
|
||
const hasSelected = $(`.spec-option.selected[data-spec-index="${index}"]`).length > 0;
|
||
if (!hasSelected) {
|
||
const specName = spec.title || spec.specName || spec.name || `规格${index + 1}`;
|
||
unselectedSpecs.push(specName);
|
||
// 高亮未选择的规格组
|
||
$(`.spec-options[data-spec-index="${index}"]`).addClass('spec-required');
|
||
setTimeout(() => {
|
||
$(`.spec-options[data-spec-index="${index}"]`).removeClass('spec-required');
|
||
}, 2000);
|
||
}
|
||
});
|
||
Toast.error(`请选择${unselectedSpecs.join('、')}`);
|
||
return;
|
||
}
|
||
}
|
||
|
||
const quantity = parseInt($('#quantityInput').val()) || 1;
|
||
addToCart(quantity, false);
|
||
});
|
||
}
|
||
|
||
// 更新选中的SKU
|
||
function updateSelectedSku() {
|
||
if (!currentProduct || !currentProduct.skuList || currentProduct.skuList.length === 0) {
|
||
return;
|
||
}
|
||
|
||
// 获取所有选中的规格值
|
||
const selectedSpecs = [];
|
||
$('.spec-option.selected').each(function() {
|
||
selectedSpecs.push($(this).data('spec-value'));
|
||
});
|
||
|
||
// 查找匹配的SKU
|
||
const sku = currentProduct.skuList.find(s => {
|
||
if (!s.specInfo || s.specInfo.length !== selectedSpecs.length) {
|
||
return false;
|
||
}
|
||
return s.specInfo.every(spec => selectedSpecs.includes(spec.specValue));
|
||
});
|
||
|
||
if (sku) {
|
||
selectedSku = sku;
|
||
// 更新价格显示
|
||
const price = PriceUtils.fenToYuan(sku.priceInfo && sku.priceInfo[0] ? sku.priceInfo[0].price : 0);
|
||
$('#currentPrice').text(`¥${price.toFixed(2)}`);
|
||
|
||
// 更新库存
|
||
const stock = sku.stockQuantity || 0;
|
||
if (stock > 0) {
|
||
$('#stockStatus').text('有货').addClass('in-stock').removeClass('out-of-stock');
|
||
$('#quantity').attr('max', stock);
|
||
} else {
|
||
$('#stockStatus').text('缺货').addClass('out-of-stock').removeClass('in-stock');
|
||
}
|
||
}
|
||
}
|
||
|
||
// 加入购物车
|
||
function addToCart(quantity, buyNow = false) {
|
||
// 如果是立即购买，直接跳转到结算页，不需要加入购物车
|
||
if (buyNow) {
|
||
const productId = currentProduct.spuId || currentProduct.id;
|
||
const skuId = selectedSku ? (selectedSku.skuId || selectedSku.id) : '';
|
||
|
||
// 构建 URL 参数
|
||
const params = new URLSearchParams({
|
||
type: 'buynow',
|
||
product_id: productId,
|
||
quantity: quantity
|
||
});
|
||
|
||
if (skuId) {
|
||
params.append('sku_id', skuId);
|
||
}
|
||
|
||
// 直接跳转到结算页
|
||
window.location.href = `checkout.html?${params.toString()}`;
|
||
return;
|
||
}
|
||
|
||
// 普通加入购物车流程
|
||
const data = {
|
||
product_id: parseInt(currentProduct.spuId || currentProduct.id),
|
||
quantity: quantity
|
||
};
|
||
|
||
// 如果选择了SKU
|
||
if (selectedSku) {
|
||
data.sku_id = parseInt(selectedSku.skuId || selectedSku.id);
|
||
}
|
||
|
||
console.log('加入购物车:', data);
|
||
|
||
API.post('/cart', data)
|
||
.then(() => {
|
||
Toast.success('已添加到购物车');
|
||
loadCartCount();
|
||
|
||
// 打开购物车抽屉
|
||
setTimeout(() => {
|
||
if (typeof window.openCartDrawer === 'function') {
|
||
window.openCartDrawer();
|
||
}
|
||
}, 300);
|
||
})
|
||
.catch(error => {
|
||
console.error('添加到购物车失败:', error);
|
||
Toast.error(error.message || '添加失败');
|
||
});
|
||
}
|
||
|
||
// 加载购物车数量
|
||
function loadCartCount() {
|
||
// 检查是否登录，未登录时不请求
|
||
const user = localStorage.getItem('currentUser');
|
||
if (!user) {
|
||
$('.cart-count').text(0);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const userData = JSON.parse(user);
|
||
if (!userData.token) {
|
||
$('.cart-count').text(0);
|
||
return;
|
||
}
|
||
} catch (e) {
|
||
$('.cart-count').text(0);
|
||
return;
|
||
}
|
||
|
||
API.get('/cart')
|
||
.then(data => {
|
||
const totalQuantity = data.total_quantity || 0;
|
||
$('.cart-count').text(totalQuantity);
|
||
})
|
||
.catch(error => {
|
||
console.error('加载购物车数量失败:', error);
|
||
$('.cart-count').text(0);
|
||
});
|
||
}
|
||
|
||
// 加载评论统计
|
||
function loadCommentsCount(productId) {
|
||
API.get(`/comments/products/${productId}/stats`)
|
||
.then(data => {
|
||
const totalCount = data.total_count || 0;
|
||
const avgRating = data.average_rating || 0;
|
||
const goodCount = (data.rating_4_count || 0) + (data.rating_5_count || 0);
|
||
const mediumCount = data.rating_3_count || 0;
|
||
const badCount = (data.rating_1_count || 0) + (data.rating_2_count || 0);
|
||
const imageCount = data.has_images_count || 0;
|
||
|
||
// 更新评论数量显示
|
||
$('#reviewCount').text(`${totalCount} reviews`);
|
||
|
||
// 更新星级显示
|
||
renderStars(avgRating);
|
||
|
||
// 更新评论标签
|
||
updateCommentTabs(totalCount, goodCount, mediumCount, badCount, imageCount);
|
||
})
|
||
.catch(error => {
|
||
console.error('加载评论统计失败:', error);
|
||
});
|
||
}
|
||
|
||
// 渲染星级
|
||
function renderStars(rating) {
|
||
const fullStars = Math.floor(rating);
|
||
const hasHalfStar = rating % 1 >= 0.5;
|
||
let starsHtml = '';
|
||
|
||
for (let i = 0; i < 5; i++) {
|
||
if (i < fullStars) {
|
||
starsHtml += '★';
|
||
} else if (i === fullStars && hasHalfStar) {
|
||
starsHtml += '☆';
|
||
} else {
|
||
starsHtml += '☆';
|
||
}
|
||
}
|
||
|
||
$('#productStars').html(starsHtml);
|
||
}
|
||
|
||
// 更新评论标签
|
||
function updateCommentTabs(total, good, medium, bad, image) {
|
||
const tabsHtml = `
|
||
<div class="comment-tabs">
|
||
<button class="comment-tab active" data-filter="all">全部 (${total})</button>
|
||
<button class="comment-tab" data-filter="good">好评 (${good})</button>
|
||
<button class="comment-tab" data-filter="medium">中评 (${medium})</button>
|
||
<button class="comment-tab" data-filter="bad">差评 (${bad})</button>
|
||
<button class="comment-tab" data-filter="image">有图 (${image})</button>
|
||
</div>
|
||
`;
|
||
|
||
$('#reviewsList').before(tabsHtml);
|
||
}
|
||
|
||
// 加载评论列表
|
||
function loadComments(productId, page = 1, filter = 'all') {
|
||
const params = {
|
||
page: page,
|
||
page_size: 10
|
||
};
|
||
|
||
// 根据筛选条件添加参数
|
||
if (filter === 'good') {
|
||
params.rating = 4; // 4-5星
|
||
} else if (filter === 'medium') {
|
||
params.rating = 3; // 3星
|
||
} else if (filter === 'bad') {
|
||
params.rating = 2; // 1-2星
|
||
} else if (filter === 'image') {
|
||
params.has_images = true;
|
||
}
|
||
|
||
API.get(`/comments/products/${productId}`, params)
|
||
.then(data => {
|
||
const comments = data.list || [];
|
||
renderComments(comments);
|
||
|
||
// 更新分页
|
||
renderCommentPagination(data.page, data.total, data.page_size);
|
||
})
|
||
.catch(error => {
|
||
console.error('加载评论失败:', error);
|
||
$('#reviewsList').html('<div class="empty-reviews">暂无评论</div>');
|
||
});
|
||
}
|
||
|
||
// 渲染评论列表
|
||
function renderComments(comments) {
|
||
if (comments.length === 0) {
|
||
$('#reviewsList').html('<div class="empty-reviews">暂无评论</div>');
|
||
return;
|
||
}
|
||
|
||
const commentsHtml = comments.map(comment => {
|
||
const userName = comment.user_name || '匿名用户';
|
||
const userAvatar = comment.user_avatar || 'https://picsum.photos/40/40?random=' + comment.id;
|
||
const rating = comment.rating || 5;
|
||
const content = comment.content || '';
|
||
const images = comment.images || [];
|
||
const createdAt = formatDate(comment.created_at);
|
||
const productSpec = comment.product_spec || '';
|
||
const replyContent = comment.reply_content || '';
|
||
|
||
// 星级
|
||
let starsHtml = '';
|
||
for (let i = 0; i < 5; i++) {
|
||
starsHtml += i < rating ? '★' : '☆';
|
||
}
|
||
|
||
// 图片
|
||
let imagesHtml = '';
|
||
if (images.length > 0) {
|
||
imagesHtml = `
|
||
<div class="comment-images">
|
||
${images.map(img => `
|
||
<img src="${img}" alt="评论图片" class="comment-image" onclick="previewImage('${img}')">
|
||
`).join('')}
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
// 商家回复
|
||
let replyHtml = '';
|
||
if (replyContent) {
|
||
replyHtml = `
|
||
<div class="merchant-reply">
|
||
<div class="reply-label">商家回复：</div>
|
||
<div class="reply-content">${replyContent}</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
return `
|
||
<div class="review-item">
|
||
<div class="review-header">
|
||
<div class="review-author-info">
|
||
<img src="${userAvatar}" alt="${userName}" class="review-avatar">
|
||
<div>
|
||
<div class="review-author-name">${userName}</div>
|
||
${productSpec ? `<div class="review-spec">${productSpec}</div>` : ''}
|
||
</div>
|
||
</div>
|
||
<div class="review-meta">
|
||
<div class="review-rating">${starsHtml}</div>
|
||
<div class="review-date">${createdAt}</div>
|
||
</div>
|
||
</div>
|
||
<div class="review-content">
|
||
<p class="review-text">${content}</p>
|
||
${imagesHtml}
|
||
</div>
|
||
${replyHtml}
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
|
||
$('#reviewsList').html(commentsHtml);
|
||
}
|
||
|
||
// 渲染评论分页
|
||
function renderCommentPagination(currentPage, total, pageSize) {
|
||
const totalPages = Math.ceil(total / pageSize);
|
||
|
||
if (totalPages <= 1) {
|
||
$('#commentPagination').hide();
|
||
return;
|
||
}
|
||
|
||
let paginationHtml = `<div class="pagination">`;
|
||
|
||
// 上一页
|
||
if (currentPage > 1) {
|
||
paginationHtml += `<button class="page-btn" data-page="${currentPage - 1}">上一页</button>`;
|
||
}
|
||
|
||
// 页码
|
||
for (let i = 1; i <= Math.min(totalPages, 5); i++) {
|
||
const active = i === currentPage ? 'active' : '';
|
||
paginationHtml += `<button class="page-btn ${active}" data-page="${i}">${i}</button>`;
|
||
}
|
||
|
||
// 下一页
|
||
if (currentPage < totalPages) {
|
||
paginationHtml += `<button class="page-btn" data-page="${currentPage + 1}">下一页</button>`;
|
||
}
|
||
|
||
paginationHtml += `</div>`;
|
||
|
||
$('#commentPagination').html(paginationHtml).show();
|
||
}
|
||
|
||
// 格式化日期
|
||
function formatDate(dateStr) {
|
||
if (!dateStr) return '';
|
||
|
||
const date = new Date(dateStr);
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
|
||
return `${year}-${month}-${day}`;
|
||
}
|
||
|
||
// 图片预览
|
||
function previewImage(imgUrl) {
|
||
// 创建预览模态框
|
||
const modal = `
|
||
<div class="image-preview-modal" onclick="this.remove()">
|
||
<img src="${imgUrl}" alt="预览图片">
|
||
</div>
|
||
`;
|
||
$('body').append(modal);
|
||
}
|