首页/ mobileweb/ 小草二手闲置/ 代码预览

💻 代码预览 · 小草二手闲置

mw_shop · 上传者 小草网络
← 返回详情
小草二手闲置_H5/list.html · 约 2281 字符
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="filter-row" id="cat-row">
4  ${CATS.map(c=>'<span class="filter-chip'+(c.id==='all'?' sel':'')+'" data-id="'+c.id+'">'+c.emoji+' '+c.name+'</span>').join('')}
5</div>
6<div class="filter-row" style="margin-top:8px">
7  <span class="filter-chip sel">综合</span><span class="filter-chip">最新发布</span><span class="filter-chip">价格↓</span><span class="filter-chip">距离近</span><span class="filter-chip">仅看同城</span>
8</div>
9<div id="goods-list"></div>
10<div style="height:80px"></div>
11<div class="tabbar">
12  <a href="index.html"><span class="icon">🏠</span>首页</a>
13  <a class="active" href="list.html"><span class="icon">🧭</span>逛逛</a>
14  <a href="sell.html"><span class="icon">➕</span>发布</a>
15  <a href="orders.html"><span class="icon">📋</span>订单</a>
16  <a href="mine.html"><span class="icon">👤</span>我的</a>
17</div>
18<script src="data.js"></script><script src="app.js"></script>
19<script>
20let curCat='all';
21function render(){
22  const list=curCat==='all'?GOODS:GOODS.filter(g=>g.cat===curCat);
23  $('#goods-list').innerHTML=list.map(g=>`
24    <div class="goods-card" style="margin-bottom:10px" onclick="location.href='detail.html?id=${g.id}'">
25      <div class="gc-img">${g.emoji}${g.hot?'<span class="badge badge-hot gc-tag">同城</span>':''}</div>
26      <div class="gc-body"><div class="gc-name">${g.name}</div><div class="gc-desc">${g.cond} · 距你${g.dist} · 原价 ${fmt(g.origin)}</div>
27      <div class="gc-foot"><span class="gc-price"><em>¥</em>${g.price}</span><span class="gc-meta">${g.tags.join(' / ')}</span></div></div>
28    </div>`).join('')||'<div class="empty">该分类暂无闲置</div>';
29}
30$$('#cat-row span').forEach(c=>c.onclick=()=>{curCat=c.dataset.id;$$('#cat-row span').forEach(x=>x.classList.remove('sel'));c.classList.add('sel');render()});
31render();
32</script>
33</body></html>