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);
|
|||
|
|
}
|