💻 代码预览 · 小草二手电动车交易网

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('.car-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 cmt = e.target.closest('.cmt-tabs a');
26  if (cmt) {
27    var wrap = cmt.parentElement;
28    [...wrap.children].forEach(function (x) { x.classList.remove('active'); });
29    cmt.classList.add('active');
30    var type = cmt.textContent;
31    var posts = document.querySelectorAll('.post-card');
32    posts.forEach(function (p) {
33      var isShare = p.querySelector('.pc-type').textContent === '晒车';
34      var isCost = p.querySelector('.pc-type').textContent === '用车';
35      if (type === '全部') { p.style.display = 'block'; }
36      else if (type === '晒车用车') { p.style.display = (isShare || isCost) ? 'block' : 'none'; }
37      else if (type === '问答') { p.style.display = (p.querySelector('.pc-type').textContent === '问答') ? 'block' : 'none'; }
38    });
39  }
40  var calcSeg = e.target.closest('.calc-row .seg span');
41  if (calcSeg) {
42    var seg = calcSeg.parentElement;
43    [...seg.children].forEach(function (x) { x.classList.remove('on'); });
44    calcSeg.classList.add('on');
45  }
46});
47function toast(msg) {
48  var d = document.createElement('div');
49  d.style.cssText = 'position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:rgba(12,74,110,.92);color:#fff;padding:10px 20px;border-radius:20px;font-size:13px;z-index:999';
50  d.textContent = msg;
51  document.body.appendChild(d);
52  setTimeout(function () { d.remove(); }, 1800);
53}
54function calcFinance() {
55  var total = parseFloat(document.getElementById('carPrice').value) || 0;
56  var downPct = parseFloat(document.querySelector('.calc-row .seg span.on').getAttribute('data-pct')) || 30;
57  var months = parseInt(document.getElementById('months').value) || 36;
58  var rate = 0.049 / 12;
59  var down = total * downPct / 100;
60  var loan = total - down;
61  var monthly = (loan * rate * Math.pow(1 + rate, months)) / (Math.pow(1 + rate, months) - 1);
62  var totalPay = monthly * months;
63  document.getElementById('calcOut').innerHTML =
64    '<div class="co-row"><span>裸车价</span><b>¥' + total.toFixed(2) + ' 万</b></div>' +
65    '<div class="co-row"><span>首付（' + downPct + '%）</span><b>¥' + down.toFixed(2) + ' 万</b></div>' +
66    '<div class="co-row"><span>贷款金额</span><b>¥' + loan.toFixed(2) + ' 万</b></div>' +
67    '<div class="co-row"><span>月供（' + months + '期）</span><b>¥' + monthly.toFixed(2) + ' 万</b></div>' +
68    '<div class="co-row"><span>总利息</span><b>¥' + (totalPay - loan).toFixed(2) + ' 万</b></div>';
69}
70function estimate() {
71  var brand = document.getElementById('estBrand').value;
72  var year = parseInt(document.getElementById('estYear').value) || 2024;
73  var base = { "特斯拉": 22, "比亚迪": 20, "小米": 21, "理想": 30, "蔚来": 32, "埃安": 13, "极氪": 29, "雅迪": 0.35 }[brand] || 15;
74  var age = 2026 - year;
75  var price = base * Math.pow(0.86, age) * (0.9 + Math.random() * 0.15);
76  document.getElementById('estOut').innerHTML = '预估回收价 <b>¥' + price.toFixed(2) + ' 万</b><br/><span style="font-size:11px;color:#64748b">实际以免费上门检测结果为准</span>';
77}
78