r105/index.html · 约 2748 字符
1<!doctype html>2<html lang="zh-CN">3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">6<title>小草快批下单 · 选购</title>7<link rel="stylesheet" href="style.css">8</head>9<body>10<div class="app">11 <div class="topbar">12 <div class="brand"><span class="logo">🌿</span> 小草快批</div>13 <div class="search">🔍 <input placeholder="搜索商品 / 品牌（演示）"></div>14 </div>1516 <div class="shop">17 <div class="catbar" id="catbar"></div>18 <div class="plist" id="plist"></div>19 </div>2021 <div class="cartbar" onclick="location.href='cart.html'">22 <div class="ic">🧺<span class="badge" id="cartbadge" style="display:none">0</span></div>23 <div class="total">合计 <span id="ctotal">¥0.00</span> <small id="ccount">0 件</small></div>24 <button class="btn btn-green btn-lg" style="padding:9px 22px">去购物车</button>25 </div>26</div>2728<script src="data.js"></script>29<script src="cart.js"></script>30<script>31var curCat = XC_CATS[0].id;32function renderCats(){33 var h = '';34 XC_CATS.forEach(function(c){35 h += '<div class="ci'+(c.id===curCat?' on':'')+'" onclick="pickCat(\''+c.id+'\')">'+c.name+'</div>';36 });37 document.getElementById('catbar').innerHTML = h;38}39function pickCat(id){ curCat = id; renderCats(); renderList(); }40function renderList(){41 var list = xcByCat(curCat);42 var h = '';43 list.forEach(function(p){44 h += '<div class="pcard">'+45 '<div class="pic" style="background:'+p.color+'">'+p.emoji+'</div>'+46 '<div class="info">'+47 '<div class="nm">'+p.name+'</div>'+48 '<div class="ds">'+p.desc+'</div>'+49 '<div class="pr"><b>'+xcFmt(xcPriceOf(p,'small'))+'</b><span class="u">'+p.small.label+'/'+p.small.unit+'</span>'+50 '<b>'+xcFmt(xcPriceOf(p,'medium'))+'</b><span class="u">'+p.medium.label+'/'+p.medium.unit+'</span></div>'+51 '<div class="acts">'+52 '<button class="btn btn-ghost" onclick="xcAddToCart(\''+p.id+'\',\'small\',1)">+'+p.small.label+'</button>'+53 '<button class="btn btn-ghost" onclick="xcAddToCart(\''+p.id+'\',\'medium\',1)">+'+p.medium.label+'</button>'+54 '<a class="btn btn-detail" href="detail.html?id='+p.id+'">详情</a>'+55 '</div>'+56 '</div>'+57 '</div>';58 });59 document.getElementById('plist').innerHTML = h;60}61function refreshBar(){62 var n = xcCartCount(), t = xcCartTotal();63 var b = document.getElementById('cartbadge');64 b.textContent = n; b.style.display = n>0?'inline-block':'none';65 document.getElementById('ctotal').textContent = xcFmt(t);66 document.getElementById('ccount').textContent = n + ' 件';67}68renderCats(); renderList(); refreshBar();69</script>70</body>71</html>72