xiaocao-mall/app.js · 约 8692 字符
1// 小草优选商城 · 交互逻辑
2let currentId = parseInt(location.search.match(/id=(\d+)/)?.[1] || '1');
3let cart = JSON.parse(localStorage.getItem('xc_cart') || '{}');
4let qty = 1;
5
6function saveCart(){ localStorage.setItem('xc_cart', JSON.stringify(cart)); }
7function cartCount(){ return Object.values(cart).reduce((s,v)=>s+v,0); }
8function cartTotal(){
9 let t=0;
10 for(const id in cart) t += (GOODS.find(g=>g.id==id)?.price||0) * cart[id];
11 return t;
12}
13function goodsCard(g){
14 return `<div class="goods-card" onclick="location.href='detail.html?id=${g.id}'">
15 <div class="gc-img" style="background:${g.color}">
16 <span class="gc-tag badge ${g.sale?'badge-sale':g.new?'badge-new':'badge-hot'}">${g.sale?'🔥特惠':g.new?'🆕新品':'⭐热销'}</span>
17 ${g.emoji}
18 </div>
19 <div class="gc-body">
20 <div class="gc-name">${g.name}</div>
21 <div class="gc-bottom">
22 <span class="gc-price">¥${g.price}<small> <s>¥${g.origPrice}</s></small></span>
23 <button class="gc-add" onclick="event.stopPropagation();addToCart(${g.id})">+</button>
24 </div>
25 </div>
26 </div>`;
27}
28
29// 首页
30function renderIndex(){
31 document.getElementById('hot-goods').innerHTML=GOODS.filter(g=>g.hot).slice(0,4).map(goodsCard).join('');
32 document.getElementById('new-goods').innerHTML=GOODS.filter(g=>g.new).slice(0,4).map(goodsCard).join('');
33 document.getElementById('coupon-list').innerHTML=COUPONS.map(c=>`
34 <div class="card" style="display:flex;gap:12px;align-items:center;margin:8px 12px;padding:12px">
35 <div style="font-size:28px">🎟️</div>
36 <div style="flex:1"><div style="font-weight:600;font-size:14px">${c.name} <b style="color:var(--primary)">¥${c.amount}</b></div><div style="font-size:12px;color:#999;margin-top:2px">${c.desc}</div></div>
37 <button class="gc-add" onclick="alert('🎟️ 已领取${c.name}！')">领</button>
38 </div>`).join('');
39}
40function addToCart(id){
41 cart[id]=(cart[id]||0)+1; saveCart();
42 alert('✅ 已加入购物车');
43}
44
45// 分类
46let catFilter='全部';
47function renderCategory(){
48 let list=GOODS;
49 if(catFilter!=='全部') list=list.filter(g=>g.cat===catFilter);
50 document.getElementById('goods-grid').innerHTML=list.map(goodsCard).join('');
51}
52function setCat(el,c){ catFilter=c;
53 document.querySelectorAll('.filter-bar a').forEach(a=>{a.style.color='#666';a.style.borderBottom='none';a.style.fontWeight='400'});
54 el.style.color='var(--primary)';el.style.borderBottom='2px solid var(--primary)';el.style.fontWeight='600';
55 renderCategory();
56}
57
58// 详情
59function renderDetail(){
60 const g=GOODS.find(x=>x.id===currentId);
61 if(!g) return;
62 currentId=g.id;
63 document.getElementById('cart-num').textContent=cartCount();
64 document.getElementById('detail-body').innerHTML=`
65 <div class="detail-img"><span class="di-tag badge ${g.sale?'badge-sale':g.new?'badge-new':'badge-hot'}">${g.sale?'🔥特惠':g.new?'🆕新品':'⭐热销'}</span>${g.emoji}</div>
66 <div class="detail-price">
67 <div class="dp-price">¥${g.price}<small> <s>¥${g.origPrice}</s></small></div>
68 <div class="dp-name">${g.name}</div>
69 <div class="dp-desc">${g.desc}</div>
70 <div class="dp-sales">已售 ${g.sales} 件 · ${g.tags.map(t=>'#'+t).join(' ')}</div>
71 </div>
72 <div class="section-title">🛒 规格选择</div>
73 <div class="card" style="padding-top:4px">
74 <div style="font-size:13px;color:#999;margin-top:6px">颜色</div>
75 <div class="spec-row"><div class="spec active" onclick="selectSpec(this)">默认色</div><div class="spec" onclick="selectSpec(this)">黑色</div><div class="spec" onclick="selectSpec(this)">白色</div></div>
76 <div style="font-size:13px;color:#999">数量</div>
77 <div class="num-row">
78 <span class="nr-label">购买数量</span>
79 <div class="nr-qty"><button onclick="changeQty(-1)">−</button><span id="qty-num">1</span><button onclick="changeQty(1)">+</button></div>
80 </div>
81 </div>
82 <div class="section-title">📦 商品详情</div>
83 <div class="card" style="font-size:13px;color:#666;line-height:2">${g.desc}。支持7天无理由退换货，全国包邮，正品保障。</div>`;
84}
85function selectSpec(el){ document.querySelectorAll('.spec-row .spec').forEach(s=>s.classList.remove('active')); el.classList.add('active'); }
86function changeQty(d){ qty=Math.max(1,qty+d); document.getElementById('qty-num').textContent=qty; }
87function addToCartDetail(){ cart[currentId]=(cart[currentId]||0)+qty; saveCart(); document.getElementById('cart-num').textContent=cartCount(); alert('✅ 已加入购物车'); }
88function buyNow(){ alert('🛒 立即购买\n\n¥'+(GOODS.find(g=>g.id===currentId)?.price||0)*qty+'\n支付方式：微信支付（演示页）'); }
89
90// 购物车
91function renderCart(){
92 const el=document.getElementById('cart-list');
93 if(!el) return;
94 const ids=Object.keys(cart);
95 if(!ids.length){
96 el.innerHTML='<div class="empty"><div class="eicon">🛒</div><div>购物车空空如也，去<a href="index.html" style="color:var(--primary)">逛逛</a>吧~</div></div>';
97 } else {
98 el.innerHTML='<div style="background:#fff;border-radius:12px;margin:0 12px;overflow:hidden">'+ids.map(id=>{
99 const g=GOODS.find(x=>x.id==id); if(!g) return '';
100 return `<div class="cart-item">
101 <div class="ci-img" style="background:${g.color}">${g.emoji}</div>
102 <div class="ci-info"><div class="ci-name">${g.name}</div><div class="ci-price">¥${g.price}</div></div>
103 <div class="qty"><button onclick="changeCartQty(${id},-1)">−</button><span>${cart[id]}</span><button onclick="changeCartQty(${id},1)">+</button></div>
104 </div>`;
105 }).join('')+'</div>';
106 }
107 document.getElementById('total-price').textContent='¥'+cartTotal();
108 document.getElementById('coupon-list').innerHTML=COUPONS.map(c=>`
109 <div class="card" style="display:flex;gap:12px;align-items:center;margin:8px 12px;padding:12px">
110 <div style="font-size:28px">🎟️</div>
111 <div style="flex:1"><div style="font-weight:600;font-size:14px">${c.name} <b style="color:var(--primary)">¥${c.amount}</b></div><div style="font-size:12px;color:#999;margin-top:2px">${c.desc}</div></div>
112 <span class="badge badge-sale">可用</span>
113 </div>`).join('');
114}
115function changeCartQty(id,d){ cart[id]=(cart[id]||0)+d; if(cart[id]<=0) delete cart[id]; saveCart(); renderCart(); }
116function checkout(){
117 if(!cartCount()){ alert('购物车为空'); return; }
118 alert('✅ 下单成功！\n\n订单金额：¥'+cartTotal()+'\n预计48小时内发货，请保持电话畅通');
119 cart={}; saveCart(); renderCart();
120}
121
122// 订单
123let orderFilter='';
124function renderOrders(){
125 const el=document.getElementById('order-list');
126 if(!el) return;
127 let orders=ORDERS;
128 if(orderFilter) orders=orders.filter(o=>o.status===orderFilter);
129 if(!orders.length){ el.innerHTML='<div class="empty"><div class="eicon">📦</div><div>暂无订单</div></div>'; return; }
130 const colorMap={shipping:'var(--blue)',done:'var(--green)',comment:'var(--accent)'};
131 el.innerHTML=orders.map(o=>`
132 <div class="order-item">
133 <div class="oi-top"><span style="font-size:13px;color:#999">${o.id}</span><span class="oi-status" style="color:${colorMap[o.state]}">${o.status}</span></div>
134 <div class="oi-goods">
135 <div class="oi-img">${o.emoji}</div>
136 <span class="oi-name">${o.name}</span>
137 </div>
138 <div class="oi-bottom">
139 <span class="oi-total">¥${o.price}</span>
140 ${o.state==='shipping'?'<button class="oi-btn more" onclick="alert('🚚 物流信息\n\n顺丰速运 SF1234567890\n正在派送中...')">查看物流</button>':o.state==='comment'?'<button class="oi-btn pay" onclick="alert('⭐ 评价商品')">去评价</button>':'<button class="oi-btn more" onclick="alert('🛒 再次购买')">再次购买</button>'}
141 </div>
142 </div>`).join('');
143}
144function filterOrder(el,f){ orderFilter=f;
145 document.querySelectorAll('.status-bar a').forEach(a=>{a.style.color='#666';a.style.borderBottom='none';a.style.fontWeight='400'});
146 el.style.color='var(--primary)';el.style.borderBottom='2px solid var(--primary)';el.style.fontWeight='600';
147 renderOrders();
148}
149
150// 我的
151function renderMine(){
152 document.getElementById('p-name').textContent=USER.name;
153 document.getElementById('p-level').textContent=USER.level;
154 document.getElementById('p-points').textContent=USER.points;
155 document.getElementById('p-orders').textContent=USER.orders;
156 document.getElementById('p-coupons').textContent=USER.coupons;
157}
158