member.html · 约 2668 字符
1<!DOCTYPE html><html lang="zh-CN"><head>
2<meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
3<title>会员中心 - 小草咖啡轻食</title><link rel="stylesheet" href="style.css">
4</head><body>
5<div class="header"><span class="back" onclick="history.back()">‹</span><h1>会员中心</h1><span class="right">📖</span></div>
6<div class="member-hero">
7 <div class="mh-level" id="mh-level"></div>
8 <div class="mh-desc" id="mh-desc"></div>
9 <div class="mh-points">
10 <div><div style="font-size:12px;opacity:.8">积分</div><b id="mh-points"></b></div>
11 <div><div style="font-size:12px;opacity:.8">优惠券</div><b id="mh-coupons"></b></div>
12 </div>
13</div>
14<div class="balance-card">
15 <div class="bc-half"><div class="bc-num" id="bc-balance"></div><div class="bc-label">账户余额（元）</div></div>
16 <div class="bc-half"><div class="bc-num" id="bc-total"></div><div class="bc-label">累计消费（元）</div></div>
17</div>
18<div class="section-title">💰 充值有礼</div>
19<div class="recharge-row" id="recharge-row"></div>
20<div style="padding:12px"><button class="btn btn-primary" onclick="recharge()">立即充值</button></div>
21<div class="section-title">🏅 会员等级</div>
22<div class="level-grid" id="level-grid"></div>
23<div class="section-title">🎁 积分兑换</div>
24<div class="card">
25 <div style="display:flex;align-items:center;gap:12px;padding:6px 0">
26 <span style="font-size:26px">☕</span>
27 <div style="flex:1"><div style="font-size:14px;font-weight:600">免费升杯券</div><div style="font-size:11px;color:#9b8a76;margin-top:2px">任意饮品升大杯</div></div>
28 <button class="gc-add" style="width:auto;padding:6px 14px;border-radius:18px;background:var(--primary);color:#fff;border:none;font-size:12px;cursor:pointer" onclick="alert('✅ 已兑换（500积分）')">500积分</button>
29 </div>
30 <div style="display:flex;align-items:center;gap:12px;padding:6px 0;border-top:1px solid #f0e8dd">
31 <span style="font-size:26px">🥐</span>
32 <div style="flex:1"><div style="font-size:14px;font-weight:600">可颂兑换券</div><div style="font-size:11px;color:#9b8a76;margin-top:2px">任意可颂一个</div></div>
33 <button class="gc-add" style="width:auto;padding:6px 14px;border-radius:18px;background:var(--primary);color:#fff;border:none;font-size:12px;cursor:pointer" onclick="alert('✅ 已兑换（800积分）')">800积分</button>
34 </div>
35</div>
36<div style="height:20px"></div>
37<script src="data.js"></script>
38<script src="app.js"></script>
39<script>renderMember();</script>
40</body></html>