MSuMshk
7463c595a2
- 订单管理(4页): 订单大厅(看板)、全部订单、退款售后、订单设置 - 评价管理(1页): 评价列表+统计+回复抽屉 - 营销中心(5页): 优惠券、满减活动、限时折扣(含周期循环)、秒杀活动、新客有礼 - 会员中心(5页): 会员管理、储值卡、积分商城、客户画像、消息触达 - 侧边栏菜单重构: 营销中心拆分为营销中心+会员中心两个一级菜单
403 lines
20 KiB
HTML
403 lines
20 KiB
HTML
<!-- 会员管理页 -->
|
||
<style>
|
||
.mm-toolbar { display:flex; align-items:center; gap:12px; margin-bottom:16px; box-shadow:var(--g-shadow-sm); border-radius:10px; padding:12px 16px; background:#fff; flex-wrap:wrap; }
|
||
.mm-toolbar .mm-right { margin-left:auto; display:flex; gap:8px; }
|
||
.mm-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
|
||
.mm-stat-card { background:#fff; border-radius:10px; padding:16px 20px; box-shadow:var(--g-shadow-sm); transition:all var(--g-transition); }
|
||
.mm-stat-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
||
.mm-stat-label { font-size:13px; color:var(--g-text-muted); margin-bottom:6px; }
|
||
.mm-stat-value { font-size:24px; font-weight:700; color:var(--g-text); }
|
||
.mm-stat-value.blue { color:var(--primary); }
|
||
.mm-stat-value.green { color:var(--g-success); }
|
||
.mm-stat-value.orange { color:var(--g-warning); }
|
||
.mm-stat-sub { font-size:11px; color:var(--g-text-muted); margin-top:4px; }
|
||
.mm-table-wrap { background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); overflow:hidden; }
|
||
.mm-member-cell { display:flex; align-items:center; gap:10px; }
|
||
.mm-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:600; flex-shrink:0; }
|
||
|
||
/* 等级体系 Tab */
|
||
.mm-level-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
|
||
.mm-level-card { background:#fff; border-radius:10px; padding:24px 20px; box-shadow:var(--g-shadow-sm); border:1px solid var(--g-border); transition:all var(--g-transition); display:flex; flex-direction:column; align-items:center; text-align:center; }
|
||
.mm-level-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
|
||
.mm-level-icon { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
|
||
.mm-level-name { font-size:16px; font-weight:600; color:var(--g-text); margin-bottom:4px; }
|
||
.mm-level-cond { font-size:12px; color:var(--g-text-muted); margin-bottom:14px; padding:3px 10px; background:var(--g-bg-subtle); border-radius:10px; }
|
||
.mm-level-perks { width:100%; text-align:left; margin-bottom:16px; }
|
||
.mm-level-perk { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--g-text-secondary); padding:5px 0; }
|
||
.mm-level-perk i { color:var(--g-success); flex-shrink:0; }
|
||
|
||
.mm-section-hd { font-size:15px; font-weight:600; color:var(--g-text); padding-left:10px; border-left:3px solid var(--primary); margin-bottom:16px; }
|
||
.mm-day-card { background:#fff; border-radius:10px; padding:20px 24px; box-shadow:var(--g-shadow-sm); border:1px solid var(--g-border); }
|
||
.mm-day-row { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
|
||
.mm-day-row:last-child { margin-bottom:0; }
|
||
.mm-day-label { width:80px; font-size:13px; color:var(--g-text-secondary); flex-shrink:0; }
|
||
|
||
/* 抽屉内 */
|
||
.mm-drawer-header { display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid #f5f5f5; }
|
||
.mm-drawer-avatar { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; font-weight:600; flex-shrink:0; background:var(--primary); }
|
||
.mm-drawer-name { font-size:16px; font-weight:600; color:var(--g-text); }
|
||
.mm-drawer-meta { font-size:12px; color:var(--g-text-muted); margin-top:3px; }
|
||
.mm-overview { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:20px; }
|
||
.mm-ov-item { text-align:center; padding:12px 8px; background:var(--g-bg-subtle); border-radius:8px; }
|
||
.mm-ov-val { font-size:18px; font-weight:700; color:var(--g-text); }
|
||
.mm-ov-label { font-size:11px; color:var(--g-text-muted); margin-top:4px; }
|
||
.mm-mini-table { width:100%; border-collapse:collapse; font-size:12px; margin-top:10px; }
|
||
.mm-mini-table th { text-align:left; padding:8px 10px; background:var(--g-bg-subtle); color:var(--g-text-muted); font-weight:500; font-size:11px; }
|
||
.mm-mini-table td { padding:8px 10px; border-bottom:1px solid #f5f5f5; color:var(--g-text); }
|
||
.mm-tag-list { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
|
||
</style>
|
||
|
||
<div>
|
||
<!-- 分段切换 -->
|
||
<div class="g-seg" style="width:240px;margin-bottom:16px;">
|
||
<div class="g-seg-item active" onclick="switchMmTab(this,'list')">会员列表</div>
|
||
<div class="g-seg-item" onclick="switchMmTab(this,'levels')">等级体系</div>
|
||
</div>
|
||
|
||
<!-- ==================== TAB 1: 会员列表 ==================== -->
|
||
<div id="mmTabList">
|
||
<!-- 工具栏 -->
|
||
<div class="mm-toolbar">
|
||
<select class="g-select" style="width:180px;">
|
||
<option>全部门店</option>
|
||
<option>老三家外卖（朝阳店）</option>
|
||
<option>老三家外卖（海淀店）</option>
|
||
<option>老三家外卖（望京店）</option>
|
||
</select>
|
||
<select class="g-select" style="width:140px;" id="mmLevelFilter">
|
||
<option value="">全部等级</option>
|
||
<option>普通会员</option>
|
||
<option>银卡</option>
|
||
<option>金卡</option>
|
||
<option>钻石</option>
|
||
</select>
|
||
<div style="position:relative;">
|
||
<i data-lucide="search" style="position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--g-text-muted);pointer-events:none;"></i>
|
||
<input class="g-input" style="width:200px;padding-left:32px;" placeholder="搜索姓名/手机号">
|
||
</div>
|
||
<div class="mm-right">
|
||
<button class="g-btn"><i data-lucide="download" style="width:14px;height:14px;"></i>导出</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计卡片 -->
|
||
<div class="mm-stats">
|
||
<div class="mm-stat-card">
|
||
<div class="mm-stat-label">会员总数</div>
|
||
<div class="mm-stat-value blue">1,286</div>
|
||
</div>
|
||
<div class="mm-stat-card">
|
||
<div class="mm-stat-label">本月新增</div>
|
||
<div class="mm-stat-value green">86</div>
|
||
</div>
|
||
<div class="mm-stat-card">
|
||
<div class="mm-stat-label">活跃会员</div>
|
||
<div class="mm-stat-value">658</div>
|
||
<div class="mm-stat-sub">30天内有消费</div>
|
||
</div>
|
||
<div class="mm-stat-card">
|
||
<div class="mm-stat-label">沉睡会员</div>
|
||
<div class="mm-stat-value orange">328</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表格 -->
|
||
<div class="mm-table-wrap">
|
||
<table class="g-table">
|
||
<thead>
|
||
<tr>
|
||
<th>会员</th>
|
||
<th>手机号</th>
|
||
<th>等级</th>
|
||
<th>累计消费</th>
|
||
<th>消费次数</th>
|
||
<th>最近消费</th>
|
||
<th>储值余额</th>
|
||
<th>积分</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td><div class="mm-member-cell"><div class="mm-avatar" style="background:#1890ff;">张</div><span>张**</span></div></td>
|
||
<td>138****6721</td>
|
||
<td><span class="g-tag" style="color:#722ed1;background:#f9f0ff;border:1px solid #d3adf7;">钻石</span></td>
|
||
<td>¥15,280</td>
|
||
<td>186</td>
|
||
<td>2026-02-11</td>
|
||
<td>¥2,350.00</td>
|
||
<td>8,620</td>
|
||
<td><a class="g-action" onclick="openMmDrawer(0)">详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="mm-member-cell"><div class="mm-avatar" style="background:#fa8c16;">李</div><span>李**</span></div></td>
|
||
<td>139****3345</td>
|
||
<td><span class="g-tag g-tag-orange">金卡</span></td>
|
||
<td>¥4,560</td>
|
||
<td>72</td>
|
||
<td>2026-02-10</td>
|
||
<td>¥800.00</td>
|
||
<td>3,240</td>
|
||
<td><a class="g-action" onclick="openMmDrawer(1)">详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="mm-member-cell"><div class="mm-avatar" style="background:#52c41a;">王</div><span>王**</span></div></td>
|
||
<td>136****8890</td>
|
||
<td><span class="g-tag g-tag-blue">银卡</span></td>
|
||
<td>¥1,230</td>
|
||
<td>28</td>
|
||
<td>2026-02-08</td>
|
||
<td>¥200.00</td>
|
||
<td>1,560</td>
|
||
<td><a class="g-action" onclick="openMmDrawer(2)">详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="mm-member-cell"><div class="mm-avatar" style="background:#722ed1;">赵</div><span>赵**</span></div></td>
|
||
<td>158****2210</td>
|
||
<td><span class="g-tag g-tag-gray">普通</span></td>
|
||
<td>¥320</td>
|
||
<td>8</td>
|
||
<td>2026-01-25</td>
|
||
<td>¥0.00</td>
|
||
<td>420</td>
|
||
<td><a class="g-action" onclick="openMmDrawer(3)">详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="mm-member-cell"><div class="mm-avatar" style="background:#eb2f96;">陈</div><span>陈**</span></div></td>
|
||
<td>137****5567</td>
|
||
<td><span class="g-tag g-tag-orange">金卡</span></td>
|
||
<td>¥3,890</td>
|
||
<td>56</td>
|
||
<td>2026-02-09</td>
|
||
<td>¥1,200.00</td>
|
||
<td>2,780</td>
|
||
<td><a class="g-action" onclick="openMmDrawer(4)">详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="mm-member-cell"><div class="mm-avatar" style="background:#13c2c2;">刘</div><span>刘**</span></div></td>
|
||
<td>155****9901</td>
|
||
<td><span class="g-tag g-tag-blue">银卡</span></td>
|
||
<td>¥980</td>
|
||
<td>18</td>
|
||
<td>2026-02-05</td>
|
||
<td>¥150.00</td>
|
||
<td>890</td>
|
||
<td><a class="g-action" onclick="openMmDrawer(5)">详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="mm-member-cell"><div class="mm-avatar" style="background:#f5222d;">孙</div><span>孙**</span></div></td>
|
||
<td>186****4432</td>
|
||
<td><span class="g-tag" style="color:#722ed1;background:#f9f0ff;border:1px solid #d3adf7;">钻石</span></td>
|
||
<td>¥12,600</td>
|
||
<td>142</td>
|
||
<td>2026-02-12</td>
|
||
<td>¥3,800.00</td>
|
||
<td>7,150</td>
|
||
<td><a class="g-action" onclick="openMmDrawer(6)">详情</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td><div class="mm-member-cell"><div class="mm-avatar" style="background:#2f54eb;">周</div><span>周**</span></div></td>
|
||
<td>133****7788</td>
|
||
<td><span class="g-tag g-tag-gray">普通</span></td>
|
||
<td>¥160</td>
|
||
<td>4</td>
|
||
<td>2026-01-18</td>
|
||
<td>¥0.00</td>
|
||
<td>210</td>
|
||
<td><a class="g-action" onclick="openMmDrawer(7)">详情</a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="g-pagination">
|
||
<span style="margin-right:8px;">共 1,286 条</span>
|
||
<button class="g-page-btn" disabled><</button>
|
||
<button class="g-page-btn active">1</button>
|
||
<button class="g-page-btn">2</button>
|
||
<button class="g-page-btn">3</button>
|
||
<button class="g-page-btn">...</button>
|
||
<button class="g-page-btn">129</button>
|
||
<button class="g-page-btn">></button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ==================== TAB 2: 等级体系 ==================== -->
|
||
<div id="mmTabLevels" style="display:none;">
|
||
<div class="mm-section-hd">会员等级</div>
|
||
<div class="mm-level-grid">
|
||
<!-- 普通 -->
|
||
<div class="mm-level-card">
|
||
<div class="mm-level-icon" style="background:#f5f5f5;color:#999;">
|
||
<i data-lucide="user" style="width:28px;height:28px;"></i>
|
||
</div>
|
||
<div class="mm-level-name">普通会员</div>
|
||
<div class="mm-level-cond">注册即享</div>
|
||
<div class="mm-level-perks">
|
||
<div class="mm-level-perk"><i data-lucide="check" style="width:14px;height:14px;"></i>积分累计</div>
|
||
<div class="mm-level-perk"><i data-lucide="check" style="width:14px;height:14px;"></i>会员价商品</div>
|
||
</div>
|
||
<button class="g-btn g-btn-sm" style="width:100%;">编辑</button>
|
||
</div>
|
||
<!-- 银卡 -->
|
||
<div class="mm-level-card">
|
||
<div class="mm-level-icon" style="background:#e6f7ff;color:#1890ff;">
|
||
<i data-lucide="award" style="width:28px;height:28px;"></i>
|
||
</div>
|
||
<div class="mm-level-name" style="color:#1890ff;">银卡会员</div>
|
||
<div class="mm-level-cond">累计消费满 ¥500</div>
|
||
<div class="mm-level-perks">
|
||
<div class="mm-level-perk"><i data-lucide="check" style="width:14px;height:14px;"></i>全场9.8折</div>
|
||
<div class="mm-level-perk"><i data-lucide="check" style="width:14px;height:14px;"></i>生日专属券</div>
|
||
<div class="mm-level-perk"><i data-lucide="check" style="width:14px;height:14px;"></i>积分1.2倍</div>
|
||
</div>
|
||
<button class="g-btn g-btn-sm" style="width:100%;">编辑</button>
|
||
</div>
|
||
<!-- 金卡 -->
|
||
<div class="mm-level-card">
|
||
<div class="mm-level-icon" style="background:#fff7e6;color:#fa8c16;">
|
||
<i data-lucide="trophy" style="width:28px;height:28px;"></i>
|
||
</div>
|
||
<div class="mm-level-name" style="color:#fa8c16;">金卡会员</div>
|
||
<div class="mm-level-cond">累计消费满 ¥2,000</div>
|
||
<div class="mm-level-perks">
|
||
<div class="mm-level-perk"><i data-lucide="check" style="width:14px;height:14px;"></i>全场9.5折</div>
|
||
<div class="mm-level-perk"><i data-lucide="check" style="width:14px;height:14px;"></i>生日双倍积分</div>
|
||
<div class="mm-level-perk"><i data-lucide="check" style="width:14px;height:14px;"></i>每月专属优惠券</div>
|
||
<div class="mm-level-perk"><i data-lucide="check" style="width:14px;height:14px;"></i>积分1.5倍</div>
|
||
</div>
|
||
<button class="g-btn g-btn-sm" style="width:100%;">编辑</button>
|
||
</div>
|
||
<!-- 钻石 -->
|
||
<div class="mm-level-card">
|
||
<div class="mm-level-icon" style="background:#f9f0ff;color:#722ed1;">
|
||
<i data-lucide="gem" style="width:28px;height:28px;"></i>
|
||
</div>
|
||
<div class="mm-level-name" style="color:#722ed1;">钻石会员</div>
|
||
<div class="mm-level-cond">累计消费满 ¥5,000</div>
|
||
<div class="mm-level-perks">
|
||
<div class="mm-level-perk"><i data-lucide="check" style="width:14px;height:14px;"></i>全场9折</div>
|
||
<div class="mm-level-perk"><i data-lucide="check" style="width:14px;height:14px;"></i>生日礼品</div>
|
||
<div class="mm-level-perk"><i data-lucide="check" style="width:14px;height:14px;"></i>专属客服</div>
|
||
<div class="mm-level-perk"><i data-lucide="check" style="width:14px;height:14px;"></i>优先配送</div>
|
||
<div class="mm-level-perk"><i data-lucide="check" style="width:14px;height:14px;"></i>积分2倍</div>
|
||
</div>
|
||
<button class="g-btn g-btn-sm" style="width:100%;">编辑</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 会员日设置 -->
|
||
<div class="mm-section-hd">会员日设置</div>
|
||
<div class="mm-day-card">
|
||
<div class="mm-day-row">
|
||
<div class="mm-day-label">启用会员日</div>
|
||
<div class="g-toggle on" onclick="this.classList.toggle('on')"></div>
|
||
</div>
|
||
<div class="mm-day-row">
|
||
<div class="mm-day-label">会员日</div>
|
||
<select class="g-select" style="width:160px;">
|
||
<option>每周二</option>
|
||
<option>每周一</option>
|
||
<option>每周三</option>
|
||
<option>每周四</option>
|
||
<option>每周五</option>
|
||
<option>每周六</option>
|
||
<option>每周日</option>
|
||
</select>
|
||
</div>
|
||
<div class="mm-day-row">
|
||
<div class="mm-day-label">会员日权益</div>
|
||
<div style="display:flex;align-items:center;gap:8px;">
|
||
<span style="font-size:13px;color:var(--g-text-secondary);">额外</span>
|
||
<input class="g-input" style="width:80px;text-align:center;" placeholder="如：9" value="9">
|
||
<span style="font-size:13px;color:var(--g-text-secondary);">折优惠</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 会员详情抽屉 -->
|
||
<div class="g-drawer-mask" id="mmDrawerMask" onclick="closeMmDrawer()"></div>
|
||
<div class="g-drawer" id="mmDrawer" style="width:560px;">
|
||
<div class="g-drawer-hd">
|
||
<div class="g-drawer-title">会员详情</div>
|
||
<button class="g-drawer-close" onclick="closeMmDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
|
||
</div>
|
||
<div class="g-drawer-bd">
|
||
<!-- 头部信息 -->
|
||
<div class="mm-drawer-header">
|
||
<div class="mm-drawer-avatar" id="mmDrAvatar">张</div>
|
||
<div>
|
||
<div style="display:flex;align-items:center;gap:8px;">
|
||
<span class="mm-drawer-name" id="mmDrName">张**</span>
|
||
<span class="g-tag" id="mmDrLevel" style="color:#722ed1;background:#f9f0ff;border:1px solid #d3adf7;">钻石</span>
|
||
</div>
|
||
<div class="mm-drawer-meta" id="mmDrMeta">138****6721 | 注册于 2024-03-15</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 消费概览 -->
|
||
<div class="mm-section-hd">消费概览</div>
|
||
<div class="mm-overview" id="mmDrOverview">
|
||
<div class="mm-ov-item"><div class="mm-ov-val">¥15,280</div><div class="mm-ov-label">累计消费</div></div>
|
||
<div class="mm-ov-item"><div class="mm-ov-val">186</div><div class="mm-ov-label">消费次数</div></div>
|
||
<div class="mm-ov-item"><div class="mm-ov-val">¥82.2</div><div class="mm-ov-label">平均客单价</div></div>
|
||
<div class="mm-ov-item"><div class="mm-ov-val">¥2,350</div><div class="mm-ov-label">储值余额</div></div>
|
||
<div class="mm-ov-item"><div class="mm-ov-val">8,620</div><div class="mm-ov-label">积分</div></div>
|
||
</div>
|
||
|
||
<!-- 最近订单 -->
|
||
<div class="mm-section-hd">最近订单</div>
|
||
<table class="mm-mini-table">
|
||
<thead><tr><th>日期</th><th>订单号</th><th>金额</th><th>状态</th></tr></thead>
|
||
<tbody id="mmDrOrders">
|
||
<tr><td>2026-02-11</td><td>OD20260211086</td><td>¥68.00</td><td><span class="g-tag g-tag-green">已完成</span></td></tr>
|
||
<tr><td>2026-02-08</td><td>OD20260208052</td><td>¥95.50</td><td><span class="g-tag g-tag-green">已完成</span></td></tr>
|
||
<tr><td>2026-02-05</td><td>OD20260205031</td><td>¥42.00</td><td><span class="g-tag g-tag-green">已完成</span></td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<!-- 会员标签 -->
|
||
<div style="margin-top:20px;">
|
||
<div class="mm-section-hd">会员标签</div>
|
||
<div class="mm-tag-list">
|
||
<span class="g-pill checked" onclick="this.classList.toggle('checked')">高频</span>
|
||
<span class="g-pill checked" onclick="this.classList.toggle('checked')">午餐常客</span>
|
||
<span class="g-pill checked" onclick="this.classList.toggle('checked')">偏好辣味</span>
|
||
<span class="g-pill" onclick="this.classList.toggle('checked')">下午茶</span>
|
||
<span class="g-pill" onclick="this.classList.toggle('checked')">家庭聚餐</span>
|
||
<span class="g-pill" onclick="this.classList.toggle('checked')">外卖为主</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="g-drawer-ft">
|
||
<button class="g-btn" onclick="closeMmDrawer()">关闭</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
/* Tab 切换 */
|
||
function switchMmTab(el, tab) {
|
||
el.parentElement.querySelectorAll('.g-seg-item').forEach(function(s){ s.classList.remove('active'); });
|
||
el.classList.add('active');
|
||
document.getElementById('mmTabList').style.display = tab === 'list' ? '' : 'none';
|
||
document.getElementById('mmTabLevels').style.display = tab === 'levels' ? '' : 'none';
|
||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||
}
|
||
|
||
/* 抽屉 */
|
||
function openMmDrawer(idx) {
|
||
document.getElementById('mmDrawerMask').classList.add('open');
|
||
document.getElementById('mmDrawer').classList.add('open');
|
||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||
}
|
||
function closeMmDrawer() {
|
||
document.getElementById('mmDrawerMask').classList.remove('open');
|
||
document.getElementById('mmDrawer').classList.remove('open');
|
||
}
|
||
|
||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||
</script>
|