价格矩阵(等级×域名×年限) 控件 可视化代码生成平台 · 价格控件控件
<div style="background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;border-radius:16px;padding:34px 32px;margin-bottom:24px;">
<div style="margin:0 0 6px;font-size:28px;font-weight:700;">价格矩阵(等级×域名×年限) 控件</div>
<div style="margin:0;opacity:.9;">可视化代码生成平台 · 价格控件控件（26/27）</div>
</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:16px 0;box-shadow:0 1px 3px rgba(0,0,0,.04);">
<b>用途：</b>三维价格表：会员等级(TAB) × 域名后缀(行) × 年限(1~10年)，批量维护首年/续费价，自动算各年价。<br>
<b>存储：</b><code style="background:#0f172a;color:#e2e8f0;padding:2px 7px;border-radius:5px;font-size:13px;">text（存 JSON：{TAB:{行:{first,renew,years:{...}}}}）。</code><br>
<b>列表/搜索：</b>不进搜索；详情/价格页展示。<br>
<b>适用：</b>域名、云产品等"按等级+品类+年限"定价的重矩阵场景。
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">控件解析（外观 · 行为交互 · 样式 · 数据）</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;width:96px;">维度</th><th style="border:1px solid #e5e7eb;padding:8px 12px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>外观</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">按 TAB 分列、行分后缀、列是 1~10 年；单元格填首年/续费，自动算出各年价；支持增删来源表。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>行为交互</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">填首年/续费→按"首年+续费×(n-1)"算出各年价，可手改任意年；拖拽调顺序。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>样式</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">矩阵边框、单元格宽度随属性；来源在 dict 配（tab: 会员组 / row: 后缀表）。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:8px 12px;"><b>数据</b></td><td style="border:1px solid #e5e7eb;padding:8px 12px;">整矩阵以 JSON 存 text；dict 配 TAB 来源与行来源（tab:表,id,列 / row:表,id,列）。</td></tr>
</table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">属性面板（右侧）功能详解</div>
<div style="background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:18px 22px;margin:14px 0;">
<div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">① 基础设置</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">字段名</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">业务表列名（text）。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">标签</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">如"域名价格矩阵"。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">② 数据来源（dict）</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">TAB 来源</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">会员组表，如 tab:member_group,id,level。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">行来源</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">后缀/品类表，可多张合并，如 row:domain,id,name。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">③ 计算</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">各年价</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">首年 + 续费×(n-1)，可逐格手改。</td></tr><tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">年限</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">1~10 年。</td></tr>
</table><div style="font-weight:700;color:#0f172a;margin:14px 0 8px;">④ 高级</div>
<table style="width:100%;border-collapse:collapse;font-size:14px;">
<tr><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">字段</th><th style="border:1px solid #e5e7eb;padding:7px 10px;background:#f1f5f9;">说明</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:7px 10px;">启用 / 停用</td><td style="border:1px solid #e5e7eb;padding:7px 10px;">停用仅隐藏。</td></tr>
</table>
</div>
<div style="margin:32px 0 12px;font-size:21px;font-weight:700;border-left:5px solid #2563eb;padding-left:12px;">演示</div>
<div style="background:#f8fafc;border:1px dashed #cbd5e1;border-radius:10px;padding:14px 16px;margin:12px 0;">
<span style="font-size:13px;color:#6b7280;display:block;margin-bottom:6px;">价格矩阵（会员等级 × 域名 × 年限）</span>
<table style="border-collapse:collapse;font-size:12px;">
<tr style="background:#f1f5f9;"><th style="border:1px solid #e5e7eb;padding:5px;">会员\后缀</th><th style="border:1px solid #e5e7eb;padding:5px;">.com 首年</th><th style="border:1px solid #e5e7eb;padding:5px;">.com 续费</th></tr>
<tr><td style="border:1px solid #e5e7eb;padding:5px;">普通</td><td style="border:1px solid #e5e7eb;padding:5px;">55</td><td style="border:1px solid #e5e7eb;padding:5px;">75</td></tr>
<tr><td style="border:1px solid #e5e7eb;padding:5px;">金牌</td><td style="border:1px solid #e5e7eb;padding:5px;">49</td><td style="border:1px solid #e5e7eb;padding:5px;">69</td></tr>
</table>
</div>
<div style="background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;border-radius:10px;padding:12px 16px;font-size:14px;margin:12px 0;">技巧：矩阵是"等级×后缀×年限"的完整定价；若只需会员组一维，用"会员价格(简单款)"。来源在 dict 配两张表，成员组折扣可来自 discount 列。</div>
<div style="margin-top:36px;color:#6b7280;font-size:13px;text-align:center;">价格矩阵(等级×域名×年限) 控件文档 · 随工具迭代更新</div>
页:
[1]