驰旭鲜卤_H5/member.html · 约 4240 字符
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
11<header class="header"><span class="back"></span><h1>会员中心</h1><span class="right">⚙️</span></header>
12<div class="vip-card">
13 <div class="vc-level">👑 金卡会员 · 尊享 8.5 折免运</div>
14 <div class="vc-name">驰旭·金卡卤味控</div>
15 <div class="vc-exp">距离钻石会员还差 38 成长值 · 授信额度 ¥2000</div>
16 <div class="vc-bar"><i></i></div>
17</div>
18<div class="credit-box">
19 <div class="cb-left"><b>可用授信 ¥2000</b><span>本月已用 ¥920 · 30 日还款</span></div>
20 <div class="cb-btn" data-toast="账期对账单已生成">查看对账</div>
21</div>
22<div class="assets">
23 <div class="asset-item"><b>960</b><span>积分</span></div>
24 <div class="asset-item"><b>¥320</b><span>储值余额</span></div>
25 <div class="asset-item"><b>3 张</b><span>优惠券</span></div>
26</div>
27<div class="sign-btn">📅 每日签到 +10 积分</div>
28<div class="section-title">💳 会员等级与权益</div>
29<div class="recharge-box">
30 <div class="rb-title">一客一价 · 等级越高价越低</div>
31 <div id="creditList"></div>
32</div>
33<div class="section-title">🔁 卤味订阅计划</div>
34<div class="plan-box">
35 <div class="pb-title">到点自动生成订单，周末追剧卤味不断供</div>
36 <div id="planList"></div>
37</div>
38<div class="section-title">🎁 储值多充多赠</div>
39<div class="recharge-box">
40 <div class="rb-title">预存多充多赠 · 全渠道通用</div>
41 <div class="recharge-opts">
42 <div class="recharge-opt sel"><b>¥100</b><span>送 15 元券</span></div>
43 <div class="recharge-opt"><b>¥300</b><span>送 50 元券</span></div>
44 <div class="recharge-opt"><b>¥500</b><span>送 100 元券</span></div>
45 </div>
46 <div class="btn btn-gold" style="margin-top:14px" data-toast="充值成功，券已到账">立即预存</div>
47</div>
48<div class="section-title">🚀 活动与邀请</div>
49<div class="vip-grid">
50 <div class="vip-item" data-toast="已发起邻里拼单"><div class="vi-emoji">👥</div><div class="vi-name">邻里拼单</div><div class="vi-desc">合并订单降冷链费</div></div>
51 <div class="vip-item" data-toast="社区集采价已开启"><div class="vi-emoji">🏘️</div><div class="vi-name">社区集采</div><div class="vi-desc">集采享专属批发价</div></div>
52 <div class="vip-item" data-toast="邀请好友得 10 元"><div class="vi-emoji">🤝</div><div class="vi-name">邀请返利</div><div class="vi-desc">好友下单返 5%</div></div>
53 <div class="vip-item" data-toast="节日卤味礼盒预订"><div class="vi-emoji">🎁</div><div class="vi-name">节日礼盒</div><div class="vi-desc">中秋/年货预订</div></div>
54</div>
55
56
57<nav class="tabbar"><a class="" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="category.html"><span class="icon">🍗</span>选购</a><a class="" href="cart.html"><span class="icon">🛒</span>购物车</a><a class=" active" href="member.html"><span class="icon">👑</span>会员</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
58<script src="data.js"></script>
59<script>
60 var cl = document.getElementById('creditList');
61 var h = '';
62 window.DATA.creditLevels.forEach(function (c) {
63 h += '<div class="tier-row"><span class="tr-label">' + c.level + '</span><span class="tr-price" style="flex:1;text-align:right">' + c.discount + ' · 授信 ' + c.credit + '<br/><span style="font-size:10px;color:#a78d80;font-weight:400">' + c.note + '</span></span></div>';
64 });
65 cl.innerHTML = h;
66 var pl = document.getElementById('planList');
67 var h2 = '';
68 window.DATA.regularPlans.forEach(function (p) {
69 h2 += '<div class="plan-item' + (p.on ? '' : ' off') + '"><div class="pi-day">' + p.day + '</div><div class="pi-detail">' + p.detail + '</div><div class="pi-switch"><i></i></div></div>';
70 });
71 pl.innerHTML = h2;
72</script>
73<script src="app.js"></script>
74</body>
75</html>