699 lines
38 KiB
HTML
699 lines
38 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:flex; flex-direction:column; gap:12px; margin-bottom:24px; }
|
||
.mm-level-card { background:#fff; border-radius:10px; padding:18px 20px; box-shadow:var(--g-shadow-sm); border:1px solid var(--g-border); transition:all var(--g-transition); display:flex; align-items:center; gap:16px; }
|
||
.mm-level-card:hover { box-shadow:var(--g-shadow-md); }
|
||
.mm-level-icon { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
|
||
.mm-level-name { font-size:15px; font-weight:600; color:var(--g-text); }
|
||
.mm-level-cond { font-size:12px; color:var(--g-text-muted); margin-top:2px; }
|
||
.mm-level-perks { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
|
||
.mm-level-perk { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--g-text-secondary); padding:2px 8px; background:#f8f9fb; border-radius:4px; }
|
||
.mm-level-perk i { color:var(--g-success); flex-shrink:0; }
|
||
.mm-level-info { flex:1; min-width:0; }
|
||
.mm-level-actions { display:flex; gap:8px; flex-shrink:0; }
|
||
.mm-level-order { font-size:20px; font-weight:700; color:var(--g-text-muted); width:28px; text-align:center; flex-shrink:0; }
|
||
.mm-add-level-btn { width:100%; height:44px; border:1px dashed #d9d9d9; border-radius:10px; background:#fff; color:var(--g-text-muted); font-size:13px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:var(--g-transition); }
|
||
.mm-add-level-btn:hover { border-color:var(--primary); color:var(--primary); }
|
||
|
||
.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; }
|
||
.mm-tag-add { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:16px; border:1px dashed #d9d9d9; font-size:12px; cursor:pointer; color:var(--g-text-muted); transition:var(--g-transition); background:none; }
|
||
.mm-tag-add:hover { border-color:var(--primary); color:var(--primary); }
|
||
.mm-tag-input { width:80px; height:26px; padding:0 8px; border:1px solid var(--primary); border-radius:16px; font-size:12px; outline:none; }
|
||
.mm-tag-remove { margin-left:2px; cursor:pointer; color:var(--g-text-muted); display:inline-flex; align-items:center; transition:var(--g-transition); }
|
||
.mm-tag-remove:hover { color:var(--g-danger); }
|
||
|
||
/* 等级编辑抽屉 */
|
||
.mm-perk-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
|
||
.mm-perk-row input { flex:1; }
|
||
.mm-perk-remove { background:none; border:none; color:var(--g-text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; transition:var(--g-transition); }
|
||
.mm-perk-remove:hover { color:var(--g-danger); background:#fef2f2; }
|
||
.mm-add-perk { color:var(--primary); font-size:12px; cursor:pointer; background:none; border:none; padding:0; display:flex; align-items:center; gap:4px; transition:var(--g-transition); }
|
||
.mm-add-perk:hover { text-decoration:underline; }
|
||
.mm-upgrade-section { background:#f8f9fb; border-radius:8px; padding:14px; margin-bottom:12px; }
|
||
.mm-upgrade-row { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--g-text-secondary); }
|
||
.mm-perk-card { background:#f8f9fb; border-radius:8px; padding:12px 14px; margin-bottom:10px; border:1px solid #f0f0f0; }
|
||
.mm-perk-card-hd { display:flex; align-items:center; gap:10px; }
|
||
.mm-perk-card-hd .mm-perk-label { flex:1; font-size:13px; font-weight:500; color:var(--g-text); }
|
||
.mm-perk-card-bd { margin-top:10px; padding-top:10px; border-top:1px solid #eee; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--g-text-secondary); }
|
||
.mm-perk-card-bd.hidden { display:none; }
|
||
.mm-coupon-mini { display:flex; align-items:center; gap:6px; padding:4px 10px; background:#fff; border:1px solid #e5e7eb; border-radius:6px; font-size:12px; }
|
||
.mm-coupon-mini-remove { cursor:pointer; color:var(--g-text-muted); display:inline-flex; align-items:center; transition:var(--g-transition); }
|
||
.mm-coupon-mini-remove:hover { color:var(--g-danger); }
|
||
.mm-add-coupon-link { color:var(--primary); font-size:12px; cursor:pointer; background:none; border:none; padding:0; display:inline-flex; align-items:center; gap:3px; }
|
||
.mm-add-coupon-link:hover { text-decoration:underline; }
|
||
</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" id="mmLevelList">
|
||
<!-- Lv1 普通 -->
|
||
<div class="mm-level-card">
|
||
<div class="mm-level-order">1</div>
|
||
<div class="mm-level-icon" style="background:#f5f5f5;color:#999;">
|
||
<i data-lucide="user" style="width:24px;height:24px;"></i>
|
||
</div>
|
||
<div class="mm-level-info">
|
||
<div class="mm-level-name">普通会员</div>
|
||
<div class="mm-level-cond">注册即享</div>
|
||
<div class="mm-level-perks">
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>积分累计</span>
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>会员价商品</span>
|
||
</div>
|
||
</div>
|
||
<div class="mm-level-actions">
|
||
<button class="g-btn g-btn-sm" onclick="openMmLevelDrawer('普通会员')">编辑</button>
|
||
</div>
|
||
</div>
|
||
<!-- Lv2 银卡 -->
|
||
<div class="mm-level-card">
|
||
<div class="mm-level-order">2</div>
|
||
<div class="mm-level-icon" style="background:#e6f7ff;color:#1890ff;">
|
||
<i data-lucide="award" style="width:24px;height:24px;"></i>
|
||
</div>
|
||
<div class="mm-level-info">
|
||
<div class="mm-level-name" style="color:#1890ff;">银卡会员</div>
|
||
<div class="mm-level-cond">累计消费满 ¥500</div>
|
||
<div class="mm-level-perks">
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>全场9.8折</span>
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>生日赠券</span>
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>积分1.2倍</span>
|
||
</div>
|
||
</div>
|
||
<div class="mm-level-actions">
|
||
<button class="g-btn g-btn-sm" onclick="openMmLevelDrawer('银卡会员')">编辑</button>
|
||
<button class="g-btn g-btn-sm" style="color:var(--g-danger);border-color:var(--g-danger);" onclick="this.closest('.mm-level-card').remove()"><i data-lucide="trash-2" style="width:13px;height:13px;"></i></button>
|
||
</div>
|
||
</div>
|
||
<!-- Lv3 金卡 -->
|
||
<div class="mm-level-card">
|
||
<div class="mm-level-order">3</div>
|
||
<div class="mm-level-icon" style="background:#fff7e6;color:#fa8c16;">
|
||
<i data-lucide="trophy" style="width:24px;height:24px;"></i>
|
||
</div>
|
||
<div class="mm-level-info">
|
||
<div class="mm-level-name" style="color:#fa8c16;">金卡会员</div>
|
||
<div class="mm-level-cond">累计消费满 ¥2,000</div>
|
||
<div class="mm-level-perks">
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>全场9.5折</span>
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>生日双倍积分</span>
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>每月赠券</span>
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>积分1.5倍</span>
|
||
</div>
|
||
</div>
|
||
<div class="mm-level-actions">
|
||
<button class="g-btn g-btn-sm" onclick="openMmLevelDrawer('金卡会员')">编辑</button>
|
||
<button class="g-btn g-btn-sm" style="color:var(--g-danger);border-color:var(--g-danger);" onclick="this.closest('.mm-level-card').remove()"><i data-lucide="trash-2" style="width:13px;height:13px;"></i></button>
|
||
</div>
|
||
</div>
|
||
<!-- Lv4 钻石 -->
|
||
<div class="mm-level-card">
|
||
<div class="mm-level-order">4</div>
|
||
<div class="mm-level-icon" style="background:#f9f0ff;color:#722ed1;">
|
||
<i data-lucide="gem" style="width:24px;height:24px;"></i>
|
||
</div>
|
||
<div class="mm-level-info">
|
||
<div class="mm-level-name" style="color:#722ed1;">钻石会员</div>
|
||
<div class="mm-level-cond">累计消费满 ¥5,000</div>
|
||
<div class="mm-level-perks">
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>全场9折</span>
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>生日赠券+双倍积分</span>
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>每月赠券</span>
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>免配送费</span>
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>优先配送</span>
|
||
<span class="mm-level-perk"><i data-lucide="check" style="width:12px;height:12px;"></i>积分2倍</span>
|
||
</div>
|
||
</div>
|
||
<div class="mm-level-actions">
|
||
<button class="g-btn g-btn-sm" onclick="openMmLevelDrawer('钻石会员')">编辑</button>
|
||
<button class="g-btn g-btn-sm" style="color:var(--g-danger);border-color:var(--g-danger);" onclick="this.closest('.mm-level-card').remove()"><i data-lucide="trash-2" style="width:13px;height:13px;"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="mm-add-level-btn" onclick="openMmLevelDrawer()"><i data-lucide="plus" style="width:14px;height:14px;"></i>添加等级</button>
|
||
|
||
<!-- 会员日设置 -->
|
||
<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 style="font-size:10px;color:var(--g-text-muted);margin-top:2px;">实充 ¥2,000 | 赠金 ¥350</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><th style="width:50px;">操作</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><td><a class="g-action" style="font-size:12px;">详情</a></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><td><a class="g-action" style="font-size:12px;">详情</a></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><td><a class="g-action" style="font-size:12px;">详情</a></td></tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<!-- 会员标签 -->
|
||
<div style="margin-top:20px;">
|
||
<div class="mm-section-hd">会员标签</div>
|
||
<div class="mm-tag-list" id="mmTagList">
|
||
<span class="g-pill checked" onclick="this.classList.toggle('checked')">高频<span class="mm-tag-remove" onclick="event.stopPropagation();this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></span>
|
||
<span class="g-pill checked" onclick="this.classList.toggle('checked')">午餐常客<span class="mm-tag-remove" onclick="event.stopPropagation();this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></span>
|
||
<span class="g-pill checked" onclick="this.classList.toggle('checked')">偏好辣味<span class="mm-tag-remove" onclick="event.stopPropagation();this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></span>
|
||
<span class="g-pill" onclick="this.classList.toggle('checked')">下午茶<span class="mm-tag-remove" onclick="event.stopPropagation();this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></span>
|
||
<span class="g-pill" onclick="this.classList.toggle('checked')">家庭聚餐<span class="mm-tag-remove" onclick="event.stopPropagation();this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></span>
|
||
<span class="g-pill" onclick="this.classList.toggle('checked')">外卖为主<span class="mm-tag-remove" onclick="event.stopPropagation();this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></span>
|
||
<button class="mm-tag-add" id="mmTagAddBtn" onclick="showMmTagInput()"><i data-lucide="plus" style="width:12px;height:12px;"></i>自定义标签</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="g-drawer-ft">
|
||
<button class="g-btn" onclick="closeMmDrawer()">关闭</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 等级编辑抽屉 -->
|
||
<div class="g-drawer-mask" id="mmLevelMask" onclick="closeMmLevelDrawer()"></div>
|
||
<div class="g-drawer" id="mmLevelDrawer" style="width:520px;">
|
||
<div class="g-drawer-hd">
|
||
<div class="g-drawer-title" id="mmLevelTitle">编辑等级</div>
|
||
<button class="g-drawer-close" onclick="closeMmLevelDrawer()"><i data-lucide="x" style="width:18px;height:18px;"></i></button>
|
||
</div>
|
||
<div class="g-drawer-bd">
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">等级名称</label>
|
||
<input class="g-input" id="mmLevelName" placeholder="如：金卡会员">
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">等级图标</label>
|
||
<div style="display:flex;gap:8px;">
|
||
<span class="g-pill checked" onclick="selectMmIcon(this)"><i data-lucide="user" style="width:14px;height:14px;"></i>默认</span>
|
||
<span class="g-pill" onclick="selectMmIcon(this)"><i data-lucide="award" style="width:14px;height:14px;"></i>奖章</span>
|
||
<span class="g-pill" onclick="selectMmIcon(this)"><i data-lucide="trophy" style="width:14px;height:14px;"></i>奖杯</span>
|
||
<span class="g-pill" onclick="selectMmIcon(this)"><i data-lucide="gem" style="width:14px;height:14px;"></i>钻石</span>
|
||
<span class="g-pill" onclick="selectMmIcon(this)"><i data-lucide="crown" style="width:14px;height:14px;"></i>皇冠</span>
|
||
<span class="g-pill" onclick="selectMmIcon(this)"><i data-lucide="star" style="width:14px;height:14px;"></i>星星</span>
|
||
</div>
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">等级颜色</label>
|
||
<div style="display:flex;gap:8px;">
|
||
<span style="width:28px;height:28px;border-radius:50%;background:#999;cursor:pointer;border:2px solid transparent;" onclick="selectMmColor(this)"></span>
|
||
<span style="width:28px;height:28px;border-radius:50%;background:#1890ff;cursor:pointer;border:2px solid var(--primary);" onclick="selectMmColor(this)"></span>
|
||
<span style="width:28px;height:28px;border-radius:50%;background:#fa8c16;cursor:pointer;border:2px solid transparent;" onclick="selectMmColor(this)"></span>
|
||
<span style="width:28px;height:28px;border-radius:50%;background:#722ed1;cursor:pointer;border:2px solid transparent;" onclick="selectMmColor(this)"></span>
|
||
<span style="width:28px;height:28px;border-radius:50%;background:#eb2f96;cursor:pointer;border:2px solid transparent;" onclick="selectMmColor(this)"></span>
|
||
<span style="width:28px;height:28px;border-radius:50%;background:#f5222d;cursor:pointer;border:2px solid transparent;" onclick="selectMmColor(this)"></span>
|
||
</div>
|
||
</div>
|
||
<div class="g-form-group">
|
||
<label class="g-form-label required">升级规则</label>
|
||
<div class="mm-upgrade-section">
|
||
<div style="display:flex;gap:8px;margin-bottom:12px;">
|
||
<span class="g-pill checked" onclick="selectMmUpgradeType(this,'amount')">按累计消费金额</span>
|
||
<span class="g-pill" onclick="selectMmUpgradeType(this,'count')">按消费次数</span>
|
||
<span class="g-pill" onclick="selectMmUpgradeType(this,'both')">同时满足</span>
|
||
</div>
|
||
<div id="mmUpgradeAmount">
|
||
<div class="mm-upgrade-row">
|
||
<span>累计消费满</span>
|
||
<input class="g-input" type="number" style="width:120px;" placeholder="如：2000" value="2000">
|
||
<span>元</span>
|
||
</div>
|
||
</div>
|
||
<div id="mmUpgradeCount" style="display:none;">
|
||
<div class="mm-upgrade-row">
|
||
<span>消费满</span>
|
||
<input class="g-input" type="number" style="width:120px;" placeholder="如：50" value="50">
|
||
<span>次</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="g-hint">达到条件自动升级；连续90天未达标自动降一级</div>
|
||
</div>
|
||
|
||
<div class="g-form-group">
|
||
<label class="g-form-label">等级权益</label>
|
||
|
||
<!-- 折扣权益 -->
|
||
<div class="mm-perk-card">
|
||
<div class="mm-perk-card-hd">
|
||
<span class="mm-perk-label">折扣权益</span>
|
||
<div class="g-toggle on" onclick="toggleMmPerk(this)"></div>
|
||
</div>
|
||
<div class="mm-perk-card-bd">
|
||
<span>全场</span>
|
||
<input class="g-input" type="number" style="width:70px;text-align:center;" placeholder="9.5" value="9.5" step="0.1">
|
||
<span>折</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 积分倍率 -->
|
||
<div class="mm-perk-card">
|
||
<div class="mm-perk-card-hd">
|
||
<span class="mm-perk-label">积分倍率</span>
|
||
<div class="g-toggle on" onclick="toggleMmPerk(this)"></div>
|
||
</div>
|
||
<div class="mm-perk-card-bd">
|
||
<span>消费积分</span>
|
||
<input class="g-input" type="number" style="width:70px;text-align:center;" placeholder="1.5" value="1.5" step="0.1">
|
||
<span>倍</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 生日特权 -->
|
||
<div class="mm-perk-card">
|
||
<div class="mm-perk-card-hd">
|
||
<span class="mm-perk-label">生日特权</span>
|
||
<div class="g-toggle on" onclick="toggleMmPerk(this)"></div>
|
||
</div>
|
||
<div class="mm-perk-card-bd">
|
||
<div style="display:flex;flex-direction:column;gap:8px;width:100%;">
|
||
<label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">
|
||
<input type="checkbox" checked> 生日双倍积分
|
||
</label>
|
||
<label style="display:flex;align-items:center;gap:6px;font-size:12px;cursor:pointer;">
|
||
<input type="checkbox" checked> 生日赠券
|
||
</label>
|
||
<div style="display:flex;align-items:center;gap:6px;margin-left:20px;">
|
||
<div class="mm-coupon-mini">满30减5 <span class="mm-coupon-mini-remove" onclick="this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></div>
|
||
<button class="mm-add-coupon-link" onclick="openProductPicker({title:'选择优惠券',onConfirm:function(){}})"><i data-lucide="plus" style="width:11px;height:11px;"></i>选券</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 每月赠券 -->
|
||
<div class="mm-perk-card">
|
||
<div class="mm-perk-card-hd">
|
||
<span class="mm-perk-label">每月赠券</span>
|
||
<div class="g-toggle" onclick="toggleMmPerk(this)"></div>
|
||
</div>
|
||
<div class="mm-perk-card-bd hidden">
|
||
<div style="display:flex;flex-direction:column;gap:8px;width:100%;">
|
||
<div style="display:flex;align-items:center;gap:6px;font-size:12px;">
|
||
<span>每月</span>
|
||
<input class="g-input" type="number" style="width:50px;text-align:center;" placeholder="1" value="1">
|
||
<span>日自动发放以下优惠券：</span>
|
||
</div>
|
||
<div style="display:flex;align-items:center;gap:6px;">
|
||
<div class="mm-coupon-mini">满50减8 <span class="mm-coupon-mini-remove" onclick="this.parentElement.remove()"><i data-lucide="x" style="width:10px;height:10px;"></i></span></div>
|
||
<button class="mm-add-coupon-link" onclick="openProductPicker({title:'选择优惠券',onConfirm:function(){}})"><i data-lucide="plus" style="width:11px;height:11px;"></i>选券</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 免配送费 -->
|
||
<div class="mm-perk-card">
|
||
<div class="mm-perk-card-hd">
|
||
<span class="mm-perk-label">免配送费</span>
|
||
<div class="g-toggle" onclick="toggleMmPerk(this)"></div>
|
||
</div>
|
||
<div class="mm-perk-card-bd hidden">
|
||
<span>每月免配送费</span>
|
||
<input class="g-input" type="number" style="width:60px;text-align:center;" placeholder="5" value="5">
|
||
<span>次</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 优先配送 -->
|
||
<div class="mm-perk-card">
|
||
<div class="mm-perk-card-hd">
|
||
<span class="mm-perk-label">优先配送</span>
|
||
<div class="g-toggle" onclick="toggleMmPerk(this)"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 专属客服 -->
|
||
<div class="mm-perk-card">
|
||
<div class="mm-perk-card-hd">
|
||
<span class="mm-perk-label">专属客服</span>
|
||
<div class="g-toggle" onclick="toggleMmPerk(this)"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="g-drawer-ft">
|
||
<button class="g-btn" onclick="closeMmLevelDrawer()">取消</button>
|
||
<button class="g-btn g-btn-primary" onclick="closeMmLevelDrawer()">保存</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');
|
||
}
|
||
|
||
/* 等级编辑抽屉 */
|
||
function openMmLevelDrawer(name) {
|
||
document.getElementById('mmLevelMask').classList.add('open');
|
||
document.getElementById('mmLevelDrawer').classList.add('open');
|
||
document.getElementById('mmLevelTitle').textContent = '编辑等级 - ' + name;
|
||
document.getElementById('mmLevelName').value = name;
|
||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||
}
|
||
function closeMmLevelDrawer() {
|
||
document.getElementById('mmLevelMask').classList.remove('open');
|
||
document.getElementById('mmLevelDrawer').classList.remove('open');
|
||
}
|
||
function selectMmUpgradeType(el, type) {
|
||
el.parentElement.querySelectorAll('.g-pill').forEach(function(p){ p.classList.remove('checked'); });
|
||
el.classList.add('checked');
|
||
document.getElementById('mmUpgradeAmount').style.display = (type === 'amount' || type === 'both') ? '' : 'none';
|
||
document.getElementById('mmUpgradeCount').style.display = (type === 'count' || type === 'both') ? '' : 'none';
|
||
}
|
||
function toggleMmPerk(toggleEl) {
|
||
toggleEl.classList.toggle('on');
|
||
var card = toggleEl.closest('.mm-perk-card');
|
||
var bd = card.querySelector('.mm-perk-card-bd');
|
||
if (bd) {
|
||
bd.classList.toggle('hidden', !toggleEl.classList.contains('on'));
|
||
}
|
||
}
|
||
function selectMmIcon(el) {
|
||
el.parentElement.querySelectorAll('.g-pill').forEach(function(p){ p.classList.remove('checked'); });
|
||
el.classList.add('checked');
|
||
}
|
||
function selectMmColor(el) {
|
||
el.parentElement.querySelectorAll('span').forEach(function(s){ s.style.borderColor = 'transparent'; });
|
||
el.style.borderColor = el.style.background;
|
||
}
|
||
function addMmPerk() {
|
||
var row = document.createElement('div');
|
||
row.className = 'mm-perk-row';
|
||
row.innerHTML = '<input class="g-input" placeholder="请输入权益描述"><button class="mm-perk-remove" onclick="this.parentElement.remove()"><i data-lucide="trash-2" style="width:14px;height:14px;"></i></button>';
|
||
document.getElementById('mmPerkList').appendChild(row);
|
||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||
}
|
||
|
||
/* 自定义标签 */
|
||
function showMmTagInput() {
|
||
var btn = document.getElementById('mmTagAddBtn');
|
||
var input = document.createElement('input');
|
||
input.className = 'mm-tag-input';
|
||
input.placeholder = '输入标签名';
|
||
input.onkeydown = function(e) {
|
||
if (e.key === 'Enter' && this.value.trim()) {
|
||
var tag = document.createElement('span');
|
||
tag.className = 'g-pill checked';
|
||
tag.onclick = function(){ this.classList.toggle('checked'); };
|
||
tag.textContent = this.value.trim();
|
||
var rm = document.createElement('span');
|
||
rm.className = 'mm-tag-remove';
|
||
rm.innerHTML = '<i data-lucide="x" style="width:10px;height:10px;"></i>';
|
||
rm.onclick = function(e){ e.stopPropagation(); this.parentElement.remove(); };
|
||
tag.appendChild(rm);
|
||
btn.parentElement.insertBefore(tag, btn);
|
||
this.remove();
|
||
btn.style.display = '';
|
||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||
}
|
||
if (e.key === 'Escape') { this.remove(); btn.style.display = ''; }
|
||
};
|
||
input.onblur = function() { this.remove(); btn.style.display = ''; };
|
||
btn.style.display = 'none';
|
||
btn.parentElement.insertBefore(input, btn);
|
||
input.focus();
|
||
}
|
||
|
||
if (typeof lucide !== 'undefined') lucide.createIcons();
|
||
</script>
|