小草水果店_H5/member.html · 约 4256 字符
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">👑 金卡 · 鲜果达人 · 尊享 9 折免运</div>
14 <div class="vc-name">小草·金卡果友</div>
15 <div class="vc-exp">距离钻石会员还差 182 成长值 · 预存越多权益越多</div>
16 <div class="vc-bar"><i></i></div>
17</div>
18<div class="credit-box">
19 <div class="cb-left"><b>水果卡余额 ¥520</b><span>充 500 送 50 · 全渠道通用</span></div>
20 <div class="cb-btn" data-toast="已跳转充值">去充值</div>
21</div>
22<div class="assets">
23 <div class="asset-item"><b>620</b><span>积分</span></div>
24 <div class="asset-item"><b>3 张</b><span>优惠券</span></div>
25 <div class="asset-item"><b>¥20</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>¥500</b><span>送 50 元券</span></div>
43 <div class="recharge-opt"><b>¥1000</b><span>送 120 元券</span></div>
44 <div class="recharge-opt"><b>¥2000</b><span>送 300 元券</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="邀请好友各得 5 元券"><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:#b09a7e;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>