小草卤肉店/app.js · 约 4007 字符
1// 小草卤肉店 · 交互逻辑
2document.addEventListener('click', function (e) {
3 var t = e.target.closest('[data-toast]');
4 if (t) { toast(t.getAttribute('data-toast')); }
5 var ft = e.target.closest('.filter-tab');
6 if (ft) {
7 var wrap = ft.parentElement;
8 [...wrap.children].forEach(function (x) { x.classList.remove('sel'); });
9 ft.classList.add('sel');
10 renderMeats();
11 }
12 var tt = e.target.closest('.taste-tab');
13 if (tt) {
14 var wrap = tt.parentElement;
15 [...wrap.children].forEach(function (x) { x.classList.remove('sel'); });
16 tt.classList.add('sel');
17 renderMeats();
18 }
19 var so = e.target.closest('.sort-bar span');
20 if (so) {
21 var w = so.parentElement;
22 [...w.children].forEach(function (x) { x.classList.remove('on'); });
23 so.classList.add('on');
24 renderMeats();
25 }
26 var sp = e.target.closest('.spec-opt');
27 if (sp) {
28 var grp = sp.parentElement;
29 [...grp.children].forEach(function (x) { x.classList.remove('sel'); });
30 sp.classList.add('sel');
31 }
32 var sn = e.target.closest('.sr-num i');
33 if (sn) {
34 var b = sn.parentElement.querySelector('b');
35 var v = parseInt(b.textContent) || 1;
36 v = sn.textContent === '+' ? v + 1 : Math.max(1, v - 1);
37 b.textContent = v;
38 }
39 var ck = e.target.closest('.ci-check');
40 if (ck) { ck.parentElement.classList.toggle('checked'); }
41 var opt = e.target.closest('.cb-val .opt');
42 if (opt) {
43 var grp = opt.parentElement;
44 [...grp.children].forEach(function (x) { x.classList.remove('sel'); });
45 opt.classList.add('sel');
46 }
47 var cp = e.target.closest('.cc-btn');
48 if (cp) { cp.textContent = '已领取'; cp.style.opacity = '.6'; toast('优惠券已到账'); }
49});
50document.addEventListener('DOMContentLoaded', function () {
51 if (document.getElementById('meatList')) {
52 renderMeats();
53 var mc = document.getElementById('meatCount');
54 if (mc) mc.textContent = '共 ' + window.DATA.meats.length + ' 款';
55 }
56});
57function renderMeats() {
58 var catTab = document.querySelector('.filter-tab.sel');
59 var tasteTab = document.querySelector('.taste-tab.sel');
60 var sortTab = document.querySelector('.sort-bar span.on');
61 var cat = catTab ? catTab.textContent : '全部';
62 var taste = tasteTab ? tasteTab.textContent : '全部';
63 var sort = sortTab ? sortTab.textContent : '综合排序';
64 var list = window.DATA.meats.filter(function (m) {
65 if (cat !== '全部' && m.cat !== cat) return false;
66 if (taste !== '全部' && m.taste !== taste) return false;
67 return true;
68 });
69 if (sort === '销量优先') list.sort(function (a, b) { return b.sales - a.sales; });
70 else if (sort === '价格从低到高') list.sort(function (a, b) { return a.price - b.price; });
71 var box = document.getElementById('meatList');
72 if (!box) return;
73 var h = '';
74 list.forEach(function (m) {
75 h += '<div class="meat-card"><div class="mc-img">' + m.img + '</div><div class="mc-body">'
76 + '<div class="mc-name">' + m.name + (m.hot ? ' <span class="badge badge-hot">热</span>' : '') + (m.new ? ' <span class="badge badge-new">新</span>' : '') + '</div>'
77 + '<div class="mc-desc">' + m.desc + '</div>'
78 + '<div class="mc-meta">' + m.tags.join(' · ') + ' · 月售 ' + m.sales.toLocaleString() + '</div>'
79 + '<div class="mc-foot"><div class="mc-price">¥' + m.price + '<small> /原' + m.old + '</small></div>'
80 + '<div class="mc-btn">加入购物车</div></div></div></div>';
81 });
82 box.innerHTML = h || '<div class="empty"><span class="e-icon">🍽️</span>该分类暂无商品</div>';
83}
84function toast(msg) {
85 var d = document.createElement('div');
86 d.style.cssText = 'position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:rgba(124,45,18,.92);color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;z-index:999';
87 d.textContent = msg;
88 document.body.appendChild(d);
89 setTimeout(function () { d.remove(); }, 1800);
90}
91