💻 代码预览 · 小草洗鞋店

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    var kw = ft.textContent;
11    var cards = document.querySelectorAll('.svc-card');
12    if (kw === '全部') { cards.forEach(function (c) { c.style.display = 'flex'; }); }
13    else {
14      cards.forEach(function (c) {
15        c.style.display = c.textContent.indexOf(kw) >= 0 ? 'flex' : 'none';
16      });
17    }
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  }
25  var sp = e.target.closest('.spec-opt');
26  if (sp) {
27    var grp = sp.parentElement;
28    [...grp.children].forEach(function (x) { x.classList.remove('sel'); });
29    sp.classList.add('sel');
30  }
31  var sn = e.target.closest('.sr-num i');
32  if (sn) {
33    var b = sn.parentElement.querySelector('b');
34    var v = parseInt(b.textContent) || 1;
35    v = sn.textContent === '+' ? v + 1 : Math.max(1, v - 1);
36    b.textContent = v;
37  }
38  var ck = e.target.closest('.ci-check');
39  if (ck) { ck.parentElement.classList.toggle('checked'); }
40  var opt = e.target.closest('.cb-val .opt');
41  if (opt) {
42    var grp = opt.parentElement;
43    [...grp.children].forEach(function (x) { x.classList.remove('sel'); });
44    opt.classList.add('sel');
45  }
46  var cp = e.target.closest('.cc-btn');
47  if (cp) { cp.textContent = '已领取'; cp.style.opacity = '.6'; toast('优惠券已到账'); }
48  var rg = e.target.closest('.rg-btn');
49  if (rg) { toast('储值成功，券包已到账'); }
50  var cpm = e.target.closest('.cp-btn');
51  if (cpm) { toast('次卡开通成功，可使用'); }
52});
53function toast(msg) {
54  var d = document.createElement('div');
55  d.style.cssText = 'position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:rgba(12,74,85,.9);color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;z-index:999';
56  d.textContent = msg;
57  document.body.appendChild(d);
58  setTimeout(function () { d.remove(); }, 1800);
59}
60