fade
/
rongshu


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度与奖励配置 - CUPD</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/@phosphor-icons/web"></script>
    <style>
        body { background-color: #f0f2f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
        .input-focus-ring:focus { outline: none; border-color: #1677ff; box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2); }
        .no-scrollbar::-webkit-scrollbar { display: none; }
        .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        .fade-in { animation: fadeIn 0.3s ease-in-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
    </style>
</head>
<body class="text-gray-800 h-screen flex flex-col overflow-hidden">

    <!-- 顶部步骤条模拟 -->
    <header class="bg-white shadow-sm shrink-0 z-10 border-b border-gray-200">
        <div class="max-w-4xl mx-auto py-4">
            <div class="flex items-center justify-between text-sm w-full bg-gray-50 rounded-lg p-2 border border-gray-100">
                <div class="flex-1 text-center py-2 text-gray-400">基本信息</div>
                <div class="text-gray-300"><i class="ph ph-caret-right"></i></div>
                <div class="flex-1 text-center py-2 text-gray-400">活动规则</div>
                <div class="text-gray-300"><i class="ph ph-caret-right"></i></div>
                <div class="flex-1 text-center py-2 font-medium text-blue-600 bg-white shadow-sm rounded">达标进度 (进度与奖励)</div>
                <div class="text-gray-300"><i class="ph ph-caret-right"></i></div>
                <div class="flex-1 text-center py-2 text-gray-400">预览</div>
            </div>
        </div>
    </header>

    <!-- 主内容滚动区 -->
    <main class="flex-1 overflow-y-auto p-6 relative no-scrollbar">
        <div class="max-w-5xl mx-auto space-y-6 pb-24">
            
            <!-- 全局模板切换 -->
            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100 flex flex-wrap items-center gap-8">
                <div class="flex items-center gap-4">
                    <label class="font-medium text-gray-800"><span class="text-red-500 mr-1">*</span>活动模板</label>
                    <select id="templateSelector" class="w-64 px-4 py-2 border border-gray-300 rounded-md text-sm input-focus-ring bg-white font-medium" onchange="switchTemplate()">
                        <option value="" selected>请选择</option>
                        <option value="NTB">NTB (新客达标)</option>
                        <option value="MGM">MGM (推荐有礼)</option>
                        <option value="LAYER">层层礼</option>
                    </select>
                </div>

                <!-- 层层礼：动态显示的层级数量 -->
                <div id="layerCountContainer" class="hidden flex items-center gap-4 border-l border-gray-200 pl-8">
                    <label class="font-medium text-gray-800"><span class="text-red-500 mr-1">*</span>层级数量</label>
                    <input type="number" value="2" min="1" max="10" class="w-32 px-4 py-2 border border-gray-300 rounded-md text-sm input-focus-ring bg-white">
                </div>
            </div>

            <!-- ========================================== -->
            <!-- 模板内容渲染区 -->
            <!-- ========================================== -->
            <div id="templateContainer">
                <!-- 模板内容会注入到这里 -->
            </div>

        </div>
    </main>

    <!-- 底部悬浮操作栏 -->
    <div class="fixed bottom-0 right-0 left-0 bg-white border-t border-gray-200 p-4 px-8 flex justify-center gap-3 z-20 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
        <button class="px-6 py-2 border border-gray-300 text-gray-700 bg-white rounded shadow-sm hover:bg-gray-50 font-medium text-sm transition-colors w-32">
            上一步
        </button>
        <button onclick="alert('保存成功，进入预览阶段！')" class="px-6 py-2 bg-[#1677ff] text-white rounded shadow-sm hover:bg-blue-600 font-medium text-sm transition-colors w-40 flex items-center justify-center gap-1.5">
            保存，下一步 <i class="ph-bold ph-arrow-right"></i>
        </button>
    </div>

    <!-- ========================================== -->
    <!-- 以下为隐藏的 HTML 模板片段，用于 JS 动态渲染 -->
    <!-- ========================================== -->

    <!-- 【组件】空状态 -->
    <template id="tpl_empty">
        <div class="bg-white p-16 rounded-lg shadow-sm border border-gray-100 flex flex-col items-center justify-center text-gray-400 fade-in">
            <i class="ph-light ph-folder-dashed text-6xl mb-4 text-gray-300"></i>
            <p class="text-base font-medium text-gray-600">当前未配置达标进度与奖励</p>
            <p class="text-sm mt-1 text-gray-400">若本活动无需配置，可直接点击“保存，下一步”跳过</p>
        </div>
    </template>

    <!-- 【组件】通用：奖励配置模块 (积分/权益 切换) -->
    <template id="tpl_reward_config">
        <!-- 移除了最外层容器边框，只提供内部排版，避免双层嵌套标题 -->
        <div class="reward-wrapper">
            <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 header-area">
                <h3 class="text-base font-semibold text-gray-800">达标奖励配置</h3>
            </div>
            <div class="p-6">
                <!-- 奖励类型选择 -->
                <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center mb-6">
                    <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right"><span class="text-red-500 mr-1">*</span>达标发放</label>
                    <div class="md:col-span-10">
                        <select class="w-64 px-3 py-1.5 border border-blue-400 rounded text-sm bg-white focus:ring-2 focus:ring-blue-100 outline-none" onchange="toggleRewardType(this)">
                            <option value="points" selected>积分</option>
                            <option value="rights">权益</option>
                        </select>
                    </div>
                </div>

                <!-- 积分配置区 (使用 Grid 防止折行混乱) -->
                <div class="reward-points-area grid grid-cols-1 md:grid-cols-12 gap-6 items-center bg-gray-50 p-4 rounded border border-gray-100">
                    <div class="md:col-span-6 flex items-center gap-3">
                        <label class="text-sm font-medium text-gray-700 w-24 text-right shrink-0"><span class="text-red-500 mr-1">*</span>选择积分科目</label>
                        <select class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white min-w-[200px]">
                            <option>P001-开户迎新积分</option>
                            <option>P002-资产达标积分</option>
                        </select>
                    </div>
                    <div class="md:col-span-6 flex items-center gap-3">
                        <label class="text-sm font-medium text-gray-700 w-24 text-right shrink-0"><span class="text-red-500 mr-1">*</span>积分赠送数量</label>
                        <div class="flex-1 flex items-center gap-2">
                            <input type="text" value="3200000" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm">
                            <span class="text-sm text-gray-500 shrink-0">积分</span>
                        </div>
                    </div>
                </div>

                <!-- 权益配置区 (默认隐藏) -->
                <div class="reward-rights-area hidden space-y-4 bg-gray-50 p-4 rounded border border-gray-100">
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center">
                        <div class="md:col-span-6 flex items-center gap-3">
                            <label class="text-sm font-medium text-gray-700 w-24 text-right shrink-0"><span class="text-red-500 mr-1">*</span>选择权益</label>
                            <select class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white min-w-[200px]">
                                <option>权益ID-权益名称</option>
                            </select>
                        </div>
                        <div class="md:col-span-6 flex items-center gap-3">
                            <label class="text-sm font-medium text-gray-700 w-24 text-right shrink-0"><span class="text-red-500 mr-1">*</span>权益有效期</label>
                            <div class="flex-1 flex items-center gap-2">
                                <input type="text" placeholder="请选择开始时间" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm">
                                <span class="text-gray-400">-</span>
                                <input type="text" placeholder="请选择结束时间" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm">
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-center pt-2">
                        <div class="md:col-span-6 flex items-center gap-3">
                            <label class="text-sm font-medium text-gray-700 w-24 text-right shrink-0"><span class="text-red-500 mr-1">*</span>权益赠送次数</label>
                            <div class="flex-1 flex items-center gap-2">
                                <select class="w-32 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white shrink-0">
                                    <option>整个周期</option>
                                </select>
                                <input type="text" value="1" class="w-16 px-3 py-1.5 border border-gray-300 rounded text-sm text-center">
                                <span class="text-sm text-gray-500 shrink-0">次</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- 模板 1: NTB (新客) -->
    <template id="tpl_ntb">
        <div class="space-y-6 fade-in">
            <!-- 达标进度提示话术 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                    <h3 class="text-base font-semibold text-gray-800">达标进度提示话术配置</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
                        <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right">未达标提示</label>
                        <div class="md:col-span-10">
                            <input type="text" value="您已报名本活动，请继续保持账户状态" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm max-w-xl">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
                        <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right">已达标提示</label>
                        <div class="md:col-span-10">
                            <input type="text" value="您已达标活动规则，可点击下方按钮领取权益" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm max-w-xl">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
                        <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right">达标进度提示</label>
                        <div class="md:col-span-10">
                            <input type="text" placeholder="配置?弹窗提示内容" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm max-w-xl">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 达标规则标签配置 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                    <h3 class="text-base font-semibold text-gray-800">达标规则标签配置</h3>
                </div>
                <div class="p-6">
                    <div class="mb-4">
                        <button type="button" class="px-4 py-1.5 bg-gray-300 text-gray-600 rounded text-sm shadow-sm flex items-center gap-1 cursor-not-allowed">
                            <i class="ph ph-plus"></i> 添加时间标签
                        </button>
                    </div>

                    <div class="p-4 bg-gray-50 rounded border border-gray-200 relative mb-6">
                        <button class="absolute top-4 right-4 text-red-500 hover:text-red-700"><i class="ph-bold ph-trash text-lg"></i></button>
                        <div class="flex items-center gap-2">
                            <span class="text-red-500">*</span><span class="font-medium text-gray-700 text-sm">规则标签</span>
                            <div class="flex items-center gap-3 flex-1 ml-4">
                                <select class="w-32 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                    <option>开户时间</option>
                                </select>
                                <select class="w-24 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                    <option>介于</option>
                                </select>
                                <div class="flex items-center gap-2">
                                    <input type="text" value="20260701" class="w-32 px-3 py-1.5 border border-gray-300 rounded text-sm text-center">
                                    <span class="text-gray-400">-</span>
                                    <input type="text" value="20260930" class="w-32 px-3 py-1.5 border border-gray-300 rounded text-sm text-center">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-4 border-t border-gray-100 pt-6">
                        <button type="button" class="px-4 py-1.5 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 shadow-sm flex items-center gap-1">
                            <i class="ph ph-plus"></i> 添加进度标签
                        </button>
                    </div>

                    <div class="p-4 bg-gray-50 rounded border border-gray-200 relative">
                        <button class="absolute top-4 right-4 text-red-500 hover:text-red-700"><i class="ph-bold ph-trash text-lg"></i></button>
                        <div class="flex items-center gap-2 mb-4">
                            <span class="text-red-500">*</span><span class="font-medium text-gray-700 text-sm">规则标签1</span>
                            <div class="flex items-center gap-3 flex-1 ml-3">
                                <select class="w-48 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                    <option>TRB值（含家庭账户）</option>
                                </select>
                                <select class="w-32 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                    <option>大于等于</option>
                                </select>
                                <input type="text" value="500000" class="w-32 px-3 py-1.5 border border-gray-300 rounded text-sm">
                            </div>
                        </div>

                        <div class="space-y-3 pl-20">
                            <div class="flex items-center gap-3">
                                <span class="text-red-500">*</span><label class="text-sm text-gray-600 w-32 shrink-0">开户当月是否必须达标</label>
                                <select class="w-24 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                    <option>是</option>
                                </select>
                            </div>
                            <div class="flex items-center gap-6 mt-2 flex-wrap">
                                <div class="flex items-center gap-2">
                                    <span class="text-red-500">*</span><label class="text-sm text-gray-600">是否连续达标</label>
                                    <select class="w-24 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                        <option>是</option>
                                    </select>
                                </div>
                                <div class="flex items-center gap-2">
                                    <span class="text-sm text-gray-600">连续</span>
                                    <input type="text" value="3" class="w-16 px-2 py-1.5 border border-gray-300 rounded text-sm text-center">
                                    <span class="text-sm text-gray-600">个月</span>
                                </div>
                                <div class="flex items-center gap-2 border-l border-gray-300 pl-4">
                                    <span class="text-red-500">*</span><label class="text-sm text-gray-600">是否允许断开</label>
                                    <select class="w-24 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                        <option>是</option>
                                    </select>
                                </div>
                            </div>
                            <div class="flex items-center gap-3 pt-2">
                                <span class="text-red-500">*</span><label class="text-sm text-gray-600 w-24 shrink-0">标签描述</label>
                                <input type="text" value="资产" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="text-red-500">*</span><label class="text-sm text-gray-600 w-24 shrink-0">标签未达标提示</label>
                                <input type="text" value="未满50万" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="text-red-500">*</span><label class="text-sm text-gray-600 w-24 shrink-0">标签已达标提示</label>
                                <input type="text" value="已满50万" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="text-transparent">*</span><label class="text-sm text-gray-600 w-24 shrink-0">标签进度提示</label>
                                <input type="text" placeholder="配置?弹窗提示内容" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 注入达标奖励配置 -->
            <div id="ntbRewardContainer" class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                <!-- 奖励配置模块将注入于此 -->
            </div>
        </div>
    </template>

    <!-- 模板 2: MGM -->
    <template id="tpl_mgm">
        <div class="space-y-6 fade-in">
            <!-- 注入达标奖励配置的容器 (MGM 将直接包含奖励模块，无外层边框重复) -->
            <div id="mgmRewardContainer" class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                <!-- 奖励配置模块将注入于此 -->
            </div>

            <!-- 达标规则标签配置 -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex items-center gap-4">
                    <h3 class="text-base font-semibold text-gray-800">达标规则标签配置</h3>
                    <div class="flex items-center gap-2 text-sm ml-8">
                        <span class="text-red-500">*</span><span class="text-gray-700">已达标展示标签</span>
                        <select class="px-3 py-1 border border-gray-300 rounded bg-white w-40">
                            <option>客户MSC Group</option>
                        </select>
                    </div>
                </div>
                <div class="p-6">
                    <div class="mb-4 border-b border-gray-100 pb-4">
                        <button type="button" class="px-4 py-1.5 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 shadow-sm flex items-center gap-1">
                            <i class="ph ph-plus"></i> 添加进度标签
                        </button>
                    </div>

                    <!-- 规则标签 1 -->
                    <div class="p-4 bg-gray-50 rounded border border-gray-200 relative mb-4">
                        <button class="absolute top-4 right-4 text-red-500 hover:text-red-700"><i class="ph-bold ph-trash text-lg"></i></button>
                        <div class="flex items-center gap-2 mb-4">
                            <span class="text-red-500">*</span><span class="font-medium text-gray-700 text-sm w-20 shrink-0">规则标签1</span>
                            <div class="flex-1 grid grid-cols-1 md:grid-cols-12 gap-4">
                                <select class="col-span-1 md:col-span-3 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                    <option>开户时间</option>
                                </select>
                                <select class="col-span-1 md:col-span-2 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                    <option>介于</option>
                                </select>
                                <div class="col-span-1 md:col-span-7 flex items-center gap-2">
                                    <input type="text" value="20260701" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm text-center">
                                    <span class="text-gray-400">-</span>
                                    <input type="text" value="20260930" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm text-center">
                                </div>
                            </div>
                        </div>
                        <div class="space-y-3 pl-[5.5rem]">
                            <div class="flex items-center gap-3">
                                <span class="text-red-500">*</span><label class="text-sm text-gray-600 w-24 shrink-0">已达标提示话术</label>
                                <input type="text" value="已开户" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="text-red-500">*</span><label class="text-sm text-gray-600 w-24 shrink-0">待达标提示话术</label>
                                <input type="text" value="未开户" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="text-red-500">*</span><label class="text-sm text-gray-600 w-24 shrink-0">不达标原因</label>
                                <input type="text" value="未在指定时间内开户" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                            </div>
                        </div>
                    </div>

                    <!-- 规则标签 2 -->
                    <div class="p-4 bg-gray-50 rounded border border-gray-200 relative">
                        <button class="absolute top-4 right-4 text-red-500 hover:text-red-700"><i class="ph-bold ph-trash text-lg"></i></button>
                        <div class="flex items-center gap-2 mb-4">
                            <span class="text-red-500">*</span><span class="font-medium text-gray-700 text-sm w-20 shrink-0">规则标签2</span>
                            <div class="flex-1 grid grid-cols-1 md:grid-cols-12 gap-4">
                                <select class="col-span-1 md:col-span-4 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                    <option>TRB值（含家庭账户）</option>
                                </select>
                                <select class="col-span-1 md:col-span-3 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                    <option>大于等于</option>
                                </select>
                                <input type="text" value="500000" class="col-span-1 md:col-span-5 px-3 py-1.5 border border-gray-300 rounded text-sm">
                            </div>
                        </div>
                        <div class="flex items-center gap-4 mb-4 pl-[5.5rem] flex-wrap">
                            <div class="flex items-center gap-2">
                                <span class="text-red-500">*</span><span class="text-sm text-gray-600">是否连续达标</span>
                                <select class="px-3 py-1.5 border border-gray-300 rounded text-sm bg-white w-24">
                                    <option>否</option>
                                </select>
                            </div>
                            <div class="flex items-center gap-2 border-l border-gray-300 pl-4">
                                <span class="text-red-500">*</span><span class="text-sm text-gray-600">开户后</span>
                                <input type="text" value="3" class="w-16 px-2 py-1.5 border border-gray-300 rounded text-sm text-center">
                                <span class="text-sm text-gray-600">个月内，达标任意</span>
                                <input type="text" value="1" class="w-16 px-2 py-1.5 border border-gray-300 rounded text-sm text-center">
                                <span class="text-sm text-gray-600">个月</span>
                            </div>
                        </div>
                        <div class="space-y-3 pl-[5.5rem]">
                            <div class="flex items-center gap-3">
                                <span class="text-red-500">*</span><label class="text-sm text-gray-600 w-24 shrink-0">已达标提示话术</label>
                                <input type="text" value="已升级为卓越理财客户" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="text-red-500">*</span><label class="text-sm text-gray-600 w-24 shrink-0">待达标提示话术</label>
                                <input type="text" value="未升级为卓越理财客户" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                            </div>
                            <div class="flex items-center gap-3">
                                <span class="text-red-500">*</span><label class="text-sm text-gray-600 w-24 shrink-0">不达标原因</label>
                                <input type="text" value="未在活动期间升级为卓越理财客户" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 被推荐进度配置 (MGM专属) -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50">
                    <h3 class="text-base font-semibold text-gray-800">被推荐进度配置</h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
                        <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right"><span class="text-red-500 mr-1">*</span>规则标签1描述</label>
                        <div class="md:col-span-10">
                            <input type="text" value="开户时间" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm max-w-xl">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
                        <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right"><span class="text-red-500 mr-1">*</span>规则标签2描述</label>
                        <div class="md:col-span-10">
                            <input type="text" value="基础资产达标 | 月内日均/家庭月日均人均余额≥50万" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm max-w-xl">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
                        <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right"><span class="text-red-500 mr-1">*</span>是否有进阶奖励</label>
                        <div class="md:col-span-10">
                            <select class="w-32 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                <option>是</option>
                            </select>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center bg-gray-50 p-4 rounded border border-gray-200">
                        <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right"><span class="text-red-500 mr-1">*</span>进阶奖励规则标签</label>
                        <div class="md:col-span-10 flex flex-wrap items-center gap-3">
                            <select class="px-3 py-1.5 border border-gray-300 rounded text-sm bg-white w-48">
                                <option>TRB值（含家庭账户）</option>
                            </select>
                            <select class="px-3 py-1.5 border border-gray-300 rounded text-sm bg-white w-32">
                                <option>大于等于</option>
                            </select>
                            <input type="text" value="6000000" class="px-3 py-1.5 border border-gray-300 rounded text-sm w-40">
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center">
                        <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right"><span class="text-red-500 mr-1">*</span>进阶奖励规则标签描述</label>
                        <div class="md:col-span-10">
                            <input type="text" value="是否完成尊尚升级" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm max-w-xl">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <!-- 模板 3: 层层礼 -->
    <template id="tpl_layer">
        <div class="space-y-6 fade-in">
            <!-- 达标层级配置主体 (使用 Tabs) -->
            <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                <div class="px-6 py-4 border-b border-gray-100 bg-gray-50/50 flex justify-between items-center">
                    <h3 class="text-base font-semibold text-gray-800">达标层级配置</h3>
                </div>
                
                <!-- Tabs 导航 -->
                <div class="flex border-b border-gray-200 px-6">
                    <button class="layer-tab px-6 py-3 font-medium text-sm text-blue-600 border-b-2 border-blue-600 bg-blue-50/30" onclick="switchLayerTab(this)">层级1</button>
                    <button class="layer-tab px-6 py-3 font-medium text-sm text-gray-500 hover:text-gray-700" onclick="switchLayerTab(this)">层级2</button>
                </div>

                <div class="p-6">
                    <!-- 层级基础信息 -->
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center mb-6">
                        <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right">可参与人群</label>
                        <div class="md:col-span-10">
                            <select class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-xl">
                                <option>人群编号-人群名称</option>
                            </select>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center mb-8">
                        <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right">层级标题</label>
                        <div class="md:col-span-10">
                            <input type="text" value="卓越层级礼. 层级1（月日均≥50万）" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm max-w-xl">
                        </div>
                    </div>

                    <div class="mb-4">
                        <button type="button" class="px-4 py-1.5 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 shadow-sm flex items-center gap-1">
                            <i class="ph ph-plus"></i> 添加活动
                        </button>
                    </div>

                    <!-- 活动1 卡片 -->
                    <div class="bg-gray-50 rounded-lg border border-gray-200 p-6 mb-8 relative">
                        <h4 class="text-base font-semibold text-gray-800 mb-6">活动 1</h4>
                        
                        <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center mb-4">
                            <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right">活动标题</label>
                            <div class="md:col-span-10">
                                <input type="text" value="活动一：资产达标" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm max-w-xl bg-white">
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center mb-6">
                            <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right">活动描述</label>
                            <div class="md:col-span-10">
                                <input type="text" value="完成以下任务获取320, 000汇友荟积分" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm max-w-xl bg-white">
                            </div>
                        </div>

                        <div class="mb-4 border-t border-gray-200 pt-4">
                            <button type="button" class="px-4 py-1.5 bg-blue-500 text-white rounded text-sm hover:bg-blue-600 shadow-sm flex items-center gap-1">
                                <i class="ph ph-plus"></i> 添加进度标签
                            </button>
                        </div>

                        <!-- 活动1 - 规则标签1 -->
                        <div class="bg-white p-4 rounded border border-gray-200 mb-6 relative">
                            <button class="absolute top-4 right-4 text-red-500 hover:text-red-700"><i class="ph-bold ph-trash text-lg"></i></button>
                            <div class="flex items-center gap-2 mb-4">
                                <span class="text-red-500">*</span><span class="font-medium text-gray-700 text-sm">规则标签1</span>
                                <div class="flex items-center gap-3 flex-1 ml-3">
                                    <select class="w-48 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                        <option>TRB值（含家庭账户）</option>
                                    </select>
                                    <select class="w-32 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                        <option>大于等于</option>
                                    </select>
                                    <input type="text" value="500000" class="w-32 px-3 py-1.5 border border-gray-300 rounded text-sm">
                                </div>
                            </div>
                            <div class="space-y-3 pl-20">
                                <div class="flex items-center gap-3">
                                    <span class="text-red-500">*</span><label class="text-sm text-gray-600 w-32 shrink-0">开户当月是否必须达标</label>
                                    <select class="w-24 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                        <option>否</option>
                                    </select>
                                </div>
                                <div class="flex items-center gap-6 mt-2 flex-wrap">
                                    <div class="flex items-center gap-2">
                                        <span class="text-red-500">*</span><label class="text-sm text-gray-600">是否连续达标</label>
                                        <select class="w-24 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                            <option>是</option>
                                        </select>
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm text-gray-600">连续</span>
                                        <input type="text" value="3" class="w-16 px-2 py-1.5 border border-gray-300 rounded text-sm text-center">
                                        <span class="text-sm text-gray-600">个月</span>
                                    </div>
                                    <div class="flex items-center gap-2 border-l border-gray-300 pl-4">
                                        <span class="text-red-500">*</span><label class="text-sm text-gray-600">是否允许断开</label>
                                        <select class="w-24 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                            <option>是</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="flex items-center gap-3 pt-2">
                                    <span class="text-transparent">*</span><label class="text-sm text-gray-600 w-24 shrink-0">规则标题</label>
                                    <input type="text" value="连续3个月资产达标" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                                </div>
                                <div class="flex items-center gap-3">
                                    <span class="text-transparent">*</span><label class="text-sm text-gray-600 w-24 shrink-0">规则描述</label>
                                    <input type="text" placeholder="配置?弹窗提示内容" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                                </div>
                                <div class="flex items-center gap-3">
                                    <span class="text-transparent">*</span><label class="text-sm text-gray-600 w-24 shrink-0">标签进度提示</label>
                                    <input type="text" placeholder="配置?弹窗提示内容" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                                </div>
                            </div>
                        </div>

                        <!-- 注入：活动 1 的奖励配置 -->
                        <div id="layerActivity1Reward" class="bg-white rounded border border-gray-200">
                            <!-- JS注入区 -->
                        </div>
                    </div>

                    <!-- 活动2 卡片 -->
                    <div class="bg-gray-50 rounded-lg border border-gray-200 p-6 relative">
                        <div class="flex items-center gap-3 mb-6">
                            <h4 class="text-base font-semibold text-gray-800">活动 2</h4>
                            <span class="text-xs text-red-500">*注意：活动2达标前提为活动1</span>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center mb-4">
                            <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right">活动标题</label>
                            <div class="md:col-span-10">
                                <input type="text" value="活动二：信用卡加码礼赠500元微信立减金" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm max-w-xl bg-white">
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-12 gap-4 items-center mb-6">
                            <label class="md:col-span-2 text-sm font-medium text-gray-700 text-right">活动描述</label>
                            <div class="md:col-span-10">
                                <input type="text" value="完成以下任务赠500元微信立减金" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm max-w-xl bg-white">
                            </div>
                        </div>

                        <div class="mb-4 border-t border-gray-200 pt-4">
                            <button type="button" class="px-4 py-1.5 bg-blue-500 text-white rounded text-sm hover:bg-blue-600 shadow-sm flex items-center gap-1">
                                <i class="ph ph-plus"></i> 添加进度标签
                            </button>
                        </div>

                        <!-- 活动2 - 规则标签1 -->
                        <div class="bg-red-50 p-4 rounded border border-red-100 mb-6 relative">
                            <button class="absolute top-4 right-4 text-red-500 hover:text-red-700"><i class="ph-bold ph-trash text-lg"></i></button>
                            <div class="flex items-center gap-2 mb-4">
                                <span class="text-red-500">*</span><span class="font-medium text-gray-700 text-sm">规则标签1</span>
                                <div class="flex items-center gap-3 flex-1 ml-3">
                                    <select class="w-48 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                        <option>境外消费</option>
                                    </select>
                                </div>
                            </div>
                            <div class="space-y-3 pl-20">
                                <div class="flex items-center gap-3 flex-wrap">
                                    <div class="flex items-center gap-2">
                                        <span class="text-red-500">*</span><label class="text-sm text-gray-600">消费时间</label>
                                        <select class="w-32 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                            <option>小于等于</option>
                                        </select>
                                        <input type="text" value="20261231" class="w-32 px-3 py-1.5 border border-gray-300 rounded text-sm">
                                    </div>
                                </div>
                                <div class="flex items-center gap-3 flex-wrap mt-2">
                                    <div class="flex items-center gap-2">
                                        <span class="text-red-500">*</span><label class="text-sm text-gray-600">消费维度</label>
                                        <select class="w-32 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white">
                                            <option>笔数</option>
                                        </select>
                                        <select class="w-32 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white ml-2">
                                            <option>大于等于</option>
                                        </select>
                                        <input type="text" value="1" class="w-24 px-3 py-1.5 border border-gray-300 rounded text-sm">
                                    </div>
                                </div>
                                <div class="flex items-center gap-3 pt-2">
                                    <span class="text-transparent">*</span><label class="text-sm text-gray-600 w-24 shrink-0">规则标题</label>
                                    <input type="text" value="需完成境外任意美元有效消费" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                                </div>
                                <div class="flex items-center gap-3">
                                    <span class="text-transparent">*</span><label class="text-sm text-gray-600 w-24 shrink-0">规则描述</label>
                                    <input type="text" placeholder="配置?弹窗提示内容" class="flex-1 px-3 py-1.5 border border-gray-300 rounded text-sm bg-white max-w-lg">
                                </div>
                            </div>
                        </div>

                        <!-- 注入：活动 2 的奖励配置 -->
                        <div id="layerActivity2Reward" class="bg-white rounded border border-gray-200">
                            <!-- JS注入区 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script>
        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            switchTemplate(); 
        });

        // 切换模板主逻辑
        function switchTemplate() {
            const selector = document.getElementById('templateSelector');
            const container = document.getElementById('templateContainer');
            const layerCountContainer = document.getElementById('layerCountContainer');
            const value = selector.value;
            
            // 处理层级数量输入框显示
            if (value === 'LAYER') {
                layerCountContainer.classList.remove('hidden');
            } else {
                layerCountContainer.classList.add('hidden');
            }

            // 清空并重新注入主内容
            container.innerHTML = '';
            
            let tplId = 'tpl_empty';
            if (value === 'NTB') tplId = 'tpl_ntb';
            else if (value === 'MGM') tplId = 'tpl_mgm';
            else if (value === 'LAYER') tplId = 'tpl_layer';

            // 抓取并注入 HTML
            const templateElement = document.getElementById(tplId);
            if(templateElement) {
                container.innerHTML = templateElement.innerHTML;
            }

            // 二次注入奖励模块复用组件
            if (value !== '') {
                injectRewardModules(value);
            }
        }

        // 动态注入通用的奖励模块 (积分/权益)
        function injectRewardModules(templateType) {
            const rewardTemplateHtml = document.getElementById('tpl_reward_config').innerHTML;

            if (templateType === 'NTB') {
                const ntbC = document.getElementById('ntbRewardContainer');
                if(ntbC) ntbC.innerHTML = rewardTemplateHtml;
            } else if (templateType === 'MGM') {
                const mgmC = document.getElementById('mgmRewardContainer');
                if(mgmC) {
                    mgmC.innerHTML = rewardTemplateHtml;
                    // MGM 如果设计图不要“达标奖励配置”这个小标题，可以隐藏 header-area (目前保留)
                }
            } else if (templateType === 'LAYER') {
                const act1 = document.getElementById('layerActivity1Reward');
                const act2 = document.getElementById('layerActivity2Reward');
                if(act1) act1.innerHTML = rewardTemplateHtml;
                if(act2) {
                    act2.innerHTML = rewardTemplateHtml;
                    // 层层礼中，第二个奖励设计图为“权益”，我们通过 JS 自动触发切换
                    const act2Select = act2.querySelector('select');
                    if(act2Select) {
                        act2Select.value = 'rights';
                        toggleRewardType(act2Select);
                    }
                }
            }
        }

        // 切换奖励类型 (积分 or 权益)
        function toggleRewardType(selectElement) {
            // 使用 closest 寻找当前属于哪个奖励区块，避免影响同页面的其他区块
            const wrapper = selectElement.closest('.reward-wrapper');
            if (!wrapper) return;

            const pointsArea = wrapper.querySelector('.reward-points-area');
            const rightsArea = wrapper.querySelector('.reward-rights-area');

            if (selectElement.value === 'points') {
                if(pointsArea) pointsArea.classList.remove('hidden');
                if(rightsArea) rightsArea.classList.add('hidden');
            } else {
                if(pointsArea) pointsArea.classList.add('hidden');
                if(rightsArea) rightsArea.classList.remove('hidden');
            }
        }

        // 层层礼：简单的 Tabs 切换交互
        function switchLayerTab(clickedTab) {
            const tabs = document.querySelectorAll('.layer-tab');
            tabs.forEach(tab => {
                tab.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600', 'bg-blue-50/30');
                tab.classList.add('text-gray-500');
            });
            clickedTab.classList.remove('text-gray-500');
            clickedTab.classList.add('text-blue-600', 'border-b-2', 'border-blue-600', 'bg-blue-50/30');
        }
    </script>
</body>
</html>