js/main.js · 约 3606 字符
1(function(){
2 var page = location.pathname.split('/').pop() || 'index.html';
3 var key = page.replace('.html','');
4 document.querySelectorAll('.tabbar a').forEach(function(a){
5 if(a.getAttribute('href')===key+'.html') a.classList.add('on');
6 });
7 function toast(msg){
8 var t=document.createElement('div'); t.className='toast'; t.textContent=msg;
9 document.body.appendChild(t);
10 requestAnimationFrame(function(){t.classList.add('show');});
11 setTimeout(function(){t.classList.remove('show'); setTimeout(function(){t.remove();},300);},1800);
12 }
13 var CART_KEY='cart_e12';
14 function getCart(){ try{return JSON.parse(localStorage.getItem(CART_KEY))||[]}catch(e){return[]} }
15 function saveCart(c){ localStorage.setItem(CART_KEY,c); }
16 function total(){ return getCart().reduce(function(s,i){return s+i.price*i.qty;},0); }
17 function count(){ return getCart().reduce(function(s,i){return s+i.qty;},0); }
18 function updateCartBar(){
19 var bar=document.querySelector('.cartbar');
20 if(bar){ bar.querySelector('.cnt').textContent='¥'+total()+' · '+count()+'件'; }
21 }
22 document.querySelectorAll('.add').forEach(function(btn){
23 btn.addEventListener('click',function(){
24 var n=btn.getAttribute('data-name'), p=parseFloat(btn.getAttribute('data-price')), e=btn.getAttribute('data-emoji')||'🍱';
25 var c=getCart(); var f=c.find(function(i){return i.name===n;});
26 if(f){f.qty++;} else {c.push({name:n,price:p,qty:1,emoji:e});}
27 saveCart(c); updateCartBar(); toast('加购成功 🍉');
28 });
29 });
30 var list=document.querySelector('#orderList');
31 if(list){
32 var c=getCart();
33 if(!c.length){ list.innerHTML='<p class="muted">购物车还是空的，去商家逛逛吧～</p>'; }
34 else{
35 c.forEach(function(i){
36 var row=document.createElement('div'); row.className='dish';
37 row.innerHTML='<div class="pic">'+(i.emoji||'🍱')+'</div><div class="info" style="flex:1"><b>'+i.name+'</b><div class="d">单价 ¥'+i.price+'</div></div><div style="display:flex;align-items:center;gap:10px"><button class="step" data-act="dec">−</button><span>'+i.qty+'</span><button class="step" data-act="inc">+</button></div>';
38 list.appendChild(row);
39 });
40 var pay=document.createElement('div'); pay.style.cssText='margin-top:10px'; pay.innerHTML='<div class="card" style="text-align:right"><b>合计：¥'+total()+'</b></div>'; list.appendChild(pay);
41 }
42 updateCartBar();
43 }
44 if(list){
45 list.addEventListener('click',function(e){
46 var b=e.target.closest('.step'); if(!b) return;
47 var name=b.closest('.dish').querySelector('b').textContent;
48 var c=getCart(); var it=c.find(function(i){return i.name===name;});
49 if(!it) return;
50 if(b.dataset.act==='inc') it.qty++; else { it.qty--; if(it.qty<=0) c=c.filter(function(i){return i!==it;}); }
51 saveCart(c); location.reload();
52 });
53 }
54 document.querySelectorAll('.pay-card').forEach(function(pc){
55 pc.addEventListener('click',function(){
56 document.querySelectorAll('.pay-card').forEach(function(x){x.classList.remove('on');});
57 pc.classList.add('on');
58 });
59 });
60 var sub=document.querySelector('#orderForm');
61 if(sub){
62 sub.addEventListener('submit',function(e){
63 e.preventDefault();
64 if(!getCart().length){ toast('请先选择商品'); return; }
65 localStorage.removeItem(CART_KEY);
66 toast('🍉 下单成功，新鲜正在路上');
67 setTimeout(function(){location.href='index.html';},1600);
68 });
69 }
70 updateCartBar();
71})();
72