r105/detail.html · 约 2404 字符
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="navbar"><a class="back" href="index.html">‹</a><span class="ttl" id="ttl">商品详情</span></div>1213 <div class="hero">14 <div class="pic" id="d-pic">🥤</div>15 <div>16 <div class="nm" id="d-nm">商品名称</div>17 <div class="ds" id="d-ds">商品描述</div>18 </div>19 </div>2021 <div class="sect">22 <div class="lab">选择规格</div>23 <div class="spec" id="spec"></div>24 <div class="lab" style="margin-top:14px">购买数量</div>25 <div class="stepper">26 <button onclick="step(-1)">−</button>27 <span class="n" id="qty">1</span>28 <button onclick="step(1)">+</button>29 </div>30 </div>3132 <div class="detail-acts">33 <button class="btn btn-green btn-lg" onclick="addCart()">加入购物车</button>34 <button class="btn btn-orange btn-lg" onclick="buyNow()">立即购买</button>35 </div>36</div>3738<script src="data.js"></script>39<script src="cart.js"></script>40<script>41var pid = xcParam('id') || 'p01';42var p = xcGetProduct(pid) || XC_PRODUCTS[0];43var specKey = 'small';44var qty = 1;4546function render(){47 document.getElementById('d-pic').textContent = p.emoji;48 document.getElementById('d-pic').style.background = p.color;49 document.getElementById('d-nm').textContent = p.name;50 document.getElementById('d-ds').textContent = p.desc;51 document.getElementById('ttl').textContent = p.name;52 var h = '';53 [['small',p.small],['medium',p.medium]].forEach(function(o){54 var k=o[0], s=o[1];55 h += '<div class="opt'+(k===specKey?' on':'')+'" onclick="pick(\''+k+'\')">'+56 '<div class="t">'+s.label+'</div><div class="p">'+xcFmt(xcPriceOf(p,k))+'</div>'+57 '<div class="u">'+s.unit+'</div></div>';58 });59 document.getElementById('spec').innerHTML = h;60 document.getElementById('qty').textContent = qty;61}62function pick(k){ specKey = k; render(); }63function step(d){ qty = Math.max(1, qty + d); document.getElementById('qty').textContent = qty; }64function addCart(){ xcAddToCart(p.id, specKey, qty); }65function buyNow(){66 xcAddToCart(p.id, specKey, qty);67 location.href = 'cart.html';68}69render();70</script>71</body>72</html>73