小草奶茶铺_H5/member.html · 约 3293 字符
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="member-hero">
4 <div class="mh-name" id="mh-name">奶茶控小果</div>
5 <span class="mh-level" id="mh-level">金卡会员</span>
6 <div class="mh-stats">
7 <div><b id="mh-points">1680</b><span>积分</span></div>
8 <div><b id="mh-balance">66.5</b><span>余额(元)</span></div>
9 <div><b id="mh-coupons">3</b><span>优惠券</span></div>
10 </div>
11</div>
12<div class="level-track">
13 <div style="display:flex;justify-content:space-between;font-size:14px;font-weight:600"><span id="lt-name">金卡会员</span><span style="color:var(--primary)">黑金会员</span></div>
14 <div class="lt-bar"><div class="lt-fill"></div></div>
15 <div class="level-tags"><span>普通</span><span>银卡</span><span>金卡</span><span>黑金</span></div>
16 <div style="font-size:12px;color:#a08c6f;margin-top:8px" id="lt-next">距黑金会员还差 600 积分</div>
17</div>
18<div class="section-title">等级权益</div>
19<div class="benefit-grid" id="benefit-grid"></div>
20<div class="section-title">我的券包</div>
21<div id="coupon-list"></div>
22<div class="section-title">积分商城 <span>100积分抵3元</span></div>
23<div class="benefit-grid" style="grid-template-columns:repeat(4,1fr)">
24 <div class="bg-item"><span class="bgi">🧋</span><span>免费升杯<br><small style="color:#b9a887">300积分</small></span></div>
25 <div class="bg-item"><span class="bgi">🎟️</span><span>5元券<br><small style="color:#b9a887">200积分</small></span></div>
26 <div class="bg-item"><span class="bgi">🍰</span><span>鸡蛋仔<br><small style="color:#b9a887">350积分</small></span></div>
27 <div class="bg-item"><span class="bgi">🎁</span><span>杯套周边<br><small style="color:#b9a887">500积分</small></span></div>
28</div>
29<div style="height:80px"></div>
30<div class="tabbar">
31 <a href="index.html"><span class="icon">🏠</span>首页</a>
32 <a href="menu.html"><span class="icon">🥤</span>点单</a>
33 <a href="orders.html"><span class="icon">📋</span>订单</a>
34 <a class="active" href="member.html"><span class="icon">💳</span>会员</a>
35 <a href="mine.html"><span class="icon">👤</span>我的</a>
36</div>
37<script src="data.js"></script><script src="app.js"></script>
38<script>
39renderMember();
40$('#benefit-grid').innerHTML=LEVELS.map(l=>'<div class="bg-item"><span class="bgi" style="color:'+l.color+'">●</span><span>'+l.name+'</span><small style="color:#b9a887;display:block;font-size:10px">'+l.benefit+'</small></div>').join('');
41$('#coupon-list').innerHTML=store.coupons.slice(0,3).map(c=>`
42 <div class="coupon"><div class="cp-left"><div class="amt"><em>¥</em>${c.amt}</div><div>${c.cond}</div></div>
43 <div class="cp-body"><div class="cp-name">${c.name}</div><div class="cp-desc">${c.desc}</div><div style="font-size:11px;color:#f0b429;margin-top:2px">有效期至 2026-09-30</div></div></div>`).join('');
44</script>
45</body></html>