xieyao/web_template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 统一文件上传接口 + 模板图片展示 + 导航页 + 侧边栏调整

Browse Source
This commit is contained in:
admin
2026-07-10 20:43:02 +08:00
parent cbd0430452
commit ce6823e282
25 changed files with 933 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/dist/shop/index.html vendored
View File

@@ -537,7 +537,8 @@ function renderProducts(products, total) {
return `
<div class="product-card" onclick="showProductDetail(${p.id})">
<div class="product-image">
<div class="product-image-gradient" style="background:${getGradient(p.category_id)}">
${p.image ? `<img src="${p.image}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover" onerror="this.style.display='none';this.nextElementSibling.style.display='flex'">` : ''}
<div class="product-image-gradient" style="background:${getGradient(p.category_id)};${p.image ? 'display:none' : 'display:flex'}">
${productIconSVG(p.category_id)}
</div>
<div class="product-tags">${tagHtml}</div>
@@ -658,13 +659,19 @@ async function showProductDetail(id) {
const p = await fetchJSON(`/api/v1/shop/products/${id}`);
let tags = [];
try { tags = JSON.parse(p.tags || '[]'); } catch(e) {}
let imgList = [];
try { imgList = JSON.parse(p.images || '[]'); } catch(e) {}
if (!Array.isArray(imgList)) imgList = [];
if (p.image) imgList = [p.image, ...imgList.filter(img => img !== p.image)];
const discount = p.original_price > p.price ? Math.round((1 - p.price / p.original_price) * 100) : 0;
content.innerHTML = `
<button class="modal-close" onclick="closeModal()">&times;</button>
<div class="modal-body">
<div class="modal-image" style="background:${getGradient(p.category_id)}">
${productIconSVG(p.category_id)}
<div class="modal-image" style="background:${getGradient(p.category_id)};position:relative;overflow:hidden">
${imgList.length > 0 ? `<img id="modalMainImg" src="${imgList[0]}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover" onerror="this.style.display='none';this.nextElementSibling.style.display=''">` : ''}
<div style="${imgList.length > 0 ? 'display:none' : ''}">${productIconSVG(p.category_id)}</div>
${imgList.length > 1 ? `<div style="position:absolute;bottom:8px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:5">${imgList.map((img,idx) => `<img src="${img}" onclick="document.getElementById('modalMainImg').src=this.src" style="width:44px;height:44px;border-radius:6px;object-fit:cover;cursor:pointer;border:2px solid ${idx===0?'#fff':'rgba(255,255,255,0.5)'}" onerror="this.remove()">`).join('')}</div>` : ''}
</div>
<div class="modal-details">
<h2>${p.name}</h2>
@@ -710,7 +717,7 @@ async function addToCart(productId) {
if (existing) {
existing.qty++;
} else {
cart.push({ id: productId, name: product.name, price: product.price, qty: 1, category_id: product.category_id });
cart.push({ id: productId, name: product.name, price: product.price, qty: 1, category_id: product.category_id, image: product.image || '' });
}
updateCartUI();
showToast(`已加入购物车: ${product.name.substring(0, 15)}...`);
@@ -753,7 +760,7 @@ function updateCartUI() {
container.innerHTML = cart.map(item => `
<div class="cart-item">
<div class="cart-item-img" style="background:${getGradient(item.category_id)}">${productIconSVG(item.category_id)}</div>
<div class="cart-item-img" style="background:${getGradient(item.category_id)};position:relative;overflow:hidden">${item.image ? `<img src="${item.image}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover" onerror="this.remove()">` : ''}${productIconSVG(item.category_id)}</div>
<div class="cart-item-info">
<div class="cart-item-name">${item.name}</div>
<div class="cart-item-price">$${item.price.toFixed(2)}</div>