小草奶茶铺_H5/menu.html · 约 3589 字符
1<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>点单 · 小草奶茶铺</title><link rel="stylesheet" href="style.css"></head><body>
2<div class="header"><span class="back" onclick="history.back()">‹</span><h1>点单</h1><span class="right">🧋</span></div>
3<div class="search-bar" style="margin:10px 12px"><span class="sb-icon">🔍</span><span class="sb-text">搜索饮品名称…</span></div>
4<div class="menu-wrap">
5 <div class="menu-side" id="menu-side"></div>
6 <div class="menu-main" id="menu-main"></div>
7</div>
8<div class="cart-bar" id="cart-bar" style="display:none" onclick="location.href='cart.html'">
9 <span class="cb-icon">🛒<span class="cb-count" id="cb-count" style="display:none">0</span></span>
10 <span class="cb-total">合计 <b id="cb-total">¥0.00</b></span>
11 <span class="cb-btn">去结算</span>
12</div>
13<div class="mask" onclick="closeSpec()"></div>
14<div class="spec-sheet" id="spec-sheet">
15 <div class="ss-head">
16 <div class="ss-img" id="ss-img">🧋</div>
17 <div style="flex:1">
18 <div style="font-size:16px;font-weight:700" id="ss-name"></div>
19 <div class="ss-price" id="ss-price">¥0</div>
20 <div style="font-size:11px;color:#a08c6f;margin-top:2px" id="ss-note"></div>
21 </div>
22 </div>
23 <div id="spec-body"></div>
24 <div class="spec-qty">
25 <span>数量</span>
26 <span style="display:flex;align-items:center">
27 <span class="sq-btn" onclick="var n=parseInt($('#ss-qty').textContent);if(n>1)$('#ss-qty').textContent=n-1">−</span>
28 <span class="sq-num" id="ss-qty">1</span>
29 <span class="sq-btn" onclick="$('#ss-qty').textContent=parseInt($('#ss-qty').textContent)+1">+</span>
30 </span>
31 </div>
32 <button class="btn btn-primary" style="margin-top:16px" onclick="confirmSpec()">确认加入购物车</button>
33</div>
34<script src="data.js"></script><script src="app.js"></script>
35<script>
36let curCat='all';
37function renderSide(){
38 $('#menu-side').innerHTML=CATS.map(c=>'<a class="'+(c.id===curCat?'active':'')+'" data-cat="'+c.id+'">'+c.name+'</a>').join('');
39 $$('#menu-side a').forEach(a=>a.onclick=()=>{curCat=a.dataset.cat;renderSide();renderMain()});
40}
41function renderMain(){
42 const list=GOODS.filter(g=>curCat==='all'||g.cat===curCat);
43 const byCat={};
44 list.forEach(g=>{const c=CATS.find(x=>x.id===g.cat).name;(byCat[c]=byCat[c]||[]).push(g)});
45 $('#menu-main').innerHTML=Object.keys(byCat).map(cat=>
46 '<h3 style="font-size:14px;color:#6b5744;margin:8px 0">'+cat+'</h3>'+
47 byCat[cat].map(g=>`
48 <div class="menu-item">
49 <div class="mi-img">${g.emoji}</div>
50 <div class="mi-body">
51 <div class="mi-name">${g.name} ${g.tag==='hot'?'<span class="badge badge-hot">热销</span>':''}${g.tag==='new'?'<span class="badge badge-new">新品</span>':''}</div>
52 <div class="mi-desc">${g.desc}</div><div class="mi-spec">${g.sales} · 可定制甜度冰度</div>
53 <div class="mi-foot"><span class="mi-price"><em>¥</em>${g.price}</span><span class="gc-add" onclick="event.stopPropagation();openSpec(${g.id})">+</span></div>
54 </div>
55 </div>`).join('')).join('');
56}
57renderSide();renderMain();
58function refreshBar(){
59 const c=cartCount();const bar=$('#cart-bar');
60 bar.style.display=c?'flex':'none';
61 $('#cb-count').textContent=c;$('#cb-count').style.display=c?'flex':'none';
62 $('#cb-total').textContent=fmt(cartTotal());
63}
64refreshBar();
65</script>
66</body></html>