|
|
@@ -0,0 +1,1114 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>后台管理 - 汇丰权益配置</title>
|
|
|
+ <script src="https://cdn.tailwindcss.com"></script>
|
|
|
+ <script src="https://unpkg.com/@phosphor-icons/web"></script>
|
|
|
+ <style>
|
|
|
+ ::-webkit-scrollbar { width: 8px; height: 8px; }
|
|
|
+ ::-webkit-scrollbar-track { background: #f1f1f1; }
|
|
|
+ ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }
|
|
|
+ ::-webkit-scrollbar-thumb:hover { background: #aaa; }
|
|
|
+ .menu-item { transition: all 0.2s; }
|
|
|
+ .menu-item:hover { color: #fff; }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body class="bg-gray-100 h-screen flex overflow-hidden font-sans text-gray-800">
|
|
|
+
|
|
|
+ <!-- 左侧菜单栏 -->
|
|
|
+ <aside class="w-[240px] bg-[#364252] text-gray-300 flex flex-col h-full flex-shrink-0 shadow-xl z-20">
|
|
|
+ <div class="py-6 text-2xl font-bold text-white flex justify-center items-center gap-3 bg-[#2b3644] border-b border-[#2b3644]">
|
|
|
+ <i class="ph ph-desktop"></i>
|
|
|
+ 管理后台
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex-1 overflow-y-auto py-4 text-[15px]">
|
|
|
+ <div>
|
|
|
+ <div class="px-5 py-3 flex justify-between items-center cursor-pointer text-gray-200 hover:text-white transition">
|
|
|
+ <div class="flex items-center gap-3"><i class="ph ph-gear text-lg"></i><span>定制功能</span></div>
|
|
|
+ <i class="ph ph-caret-up text-sm text-gray-400"></i>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex flex-col">
|
|
|
+ <div class="px-5 py-3 pl-11 flex justify-between items-center cursor-pointer text-gray-200 hover:text-white transition">
|
|
|
+ <span>汇丰银行</span>
|
|
|
+ <i class="ph ph-caret-up text-sm text-gray-400"></i>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex flex-col">
|
|
|
+ <div class="px-5 py-3 pl-16 text-gray-200 hover:text-white transition cursor-default">页面管理</div>
|
|
|
+ <div class="flex flex-col text-sm">
|
|
|
+ <a href="#" onclick="switchMenu('home')" id="menu-home" class="py-2.5 pl-[72px] pr-5 text-blue-400 bg-[#2b3644] font-medium block transition">
|
|
|
+ 权益介绍页
|
|
|
+ </a>
|
|
|
+ <a href="#" onclick="switchMenu('zone')" id="menu-zone" class="py-2.5 pl-[72px] pr-5 text-gray-400 hover:text-white block transition">
|
|
|
+ 权益首页
|
|
|
+ </a>
|
|
|
+ <a href="#" onclick="switchMenu('assembly')" id="menu-assembly" class="py-2.5 pl-[72px] pr-5 text-gray-400 hover:text-white block transition">
|
|
|
+ 组装页
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="px-5 py-3 pl-16 flex justify-between items-center cursor-pointer text-gray-200 hover:text-white transition mt-2">
|
|
|
+ <span>权益管理</span>
|
|
|
+ <i class="ph ph-caret-up text-sm text-gray-400"></i>
|
|
|
+ </div>
|
|
|
+ <div class="flex flex-col text-[14px]">
|
|
|
+ <a href="#" class="py-2.5 pl-[72px] pr-5 text-gray-400 hover:text-white transition block">借记卡权益</a>
|
|
|
+ <a href="#" class="py-2.5 pl-[72px] pr-5 text-gray-400 hover:text-white transition block">信用卡权益</a>
|
|
|
+ <a href="#" class="py-2.5 pl-[72px] pr-5 text-gray-400 hover:text-white transition block">人群管理</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </aside>
|
|
|
+
|
|
|
+ <!-- 右侧主内容区 -->
|
|
|
+ <main class="flex-1 flex flex-col h-full bg-[#f4f6f8] relative">
|
|
|
+
|
|
|
+ <!-- 1. 极简面包屑 -->
|
|
|
+ <div class="bg-white h-10 border-b border-gray-100 flex items-center px-6 flex-shrink-0 text-[13px] text-gray-500">
|
|
|
+ <span>页面管理</span>
|
|
|
+ <i class="ph ph-caret-right mx-1.5 text-xs"></i>
|
|
|
+ <span class="text-gray-900" id="breadcrumb-title">权益介绍页配置</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 2. 独立操作工具栏 (悬浮吸顶) -->
|
|
|
+ <div class="bg-white px-6 py-3 border-b border-gray-200 shadow-sm flex items-center justify-between flex-shrink-0 z-20 relative">
|
|
|
+ <div class="flex items-center gap-4">
|
|
|
+ <h1 class="text-[20px] font-bold text-gray-900 tracking-wide" id="toolbar-title">权益介绍页配置</h1>
|
|
|
+ <!-- 全局状态指示器 -->
|
|
|
+ <div id="global-status-indicator" class="hidden items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border">
|
|
|
+ <!-- 动态内容渲染 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="header-actions" class="flex items-center gap-3">
|
|
|
+ <button onclick="showLinkModal()" class="bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 px-4 py-2 rounded-md text-sm font-medium transition shadow-sm flex items-center gap-1.5">
|
|
|
+ <i class="ph ph-link text-lg"></i> 获取链接
|
|
|
+ </button>
|
|
|
+ <div class="w-px h-5 bg-gray-300 mx-1"></div>
|
|
|
+ <button onclick="handleSaveAction('draft')" class="bg-white border border-blue-600 text-blue-600 hover:bg-blue-50 px-4 py-2 rounded-md text-sm font-medium transition shadow-sm flex items-center gap-1.5">
|
|
|
+ <i class="ph ph-floppy-disk text-lg"></i> 保存草稿
|
|
|
+ </button>
|
|
|
+ <button onclick="handleSaveAction('publish')" class="bg-blue-600 border border-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition shadow-sm flex items-center gap-1.5">
|
|
|
+ <i class="ph ph-paper-plane-tilt text-lg"></i> 发布上线
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div id="tier-tabs-container" class="bg-white px-6 pt-4 border-b border-gray-200 flex-shrink-0">
|
|
|
+ <div class="flex gap-6" id="tier-tabs">
|
|
|
+ <button onclick="switchTier('premier')" id="tab-premier" class="pb-3 px-2 border-b-2 border-blue-600 text-blue-600 font-medium transition">卓越理财</button>
|
|
|
+ <button onclick="switchTier('elite')" id="tab-elite" class="pb-3 px-2 border-b-2 border-transparent text-gray-500 hover:text-gray-800 transition">卓越理财·尊尚</button>
|
|
|
+ <button onclick="switchTier('global')" id="tab-global" class="pb-3 px-2 border-b-2 border-transparent text-gray-500 hover:text-gray-800 transition">环球私人银行</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex-1 overflow-y-auto p-6" id="form-container"></div>
|
|
|
+ </main>
|
|
|
+
|
|
|
+ <!-- 通用弹窗通知 -->
|
|
|
+ <div id="toast" class="fixed top-20 right-10 bg-gray-900 text-white px-6 py-3 rounded shadow-lg transform transition-all duration-300 translate-x-full opacity-0 z-[100] flex items-center gap-2">
|
|
|
+ <i class="ph ph-check-circle text-green-400 text-xl" id="toast-icon"></i>
|
|
|
+ <span id="toast-text">配置已保存</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 获取链接弹窗 -->
|
|
|
+ <div id="link-modal-backdrop" class="fixed inset-0 bg-black/50 z-[80] hidden transition-opacity" onclick="closeLinkModal()"></div>
|
|
|
+ <div id="link-modal" class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl shadow-2xl z-[90] w-[700px] hidden flex-col overflow-hidden">
|
|
|
+ <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
|
|
|
+ <h3 class="text-lg font-bold text-gray-800 flex items-center gap-2"><i class="ph ph-link text-blue-600"></i> 获取页面链接</h3>
|
|
|
+ <button onclick="closeLinkModal()" class="text-gray-400 hover:text-gray-600"><i class="ph ph-x text-xl"></i></button>
|
|
|
+ </div>
|
|
|
+ <div class="p-6" id="link-modal-content">
|
|
|
+ <!-- 链接内容动态渲染 -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 富文本插入超链接弹窗 -->
|
|
|
+ <div id="rt-link-modal-backdrop" class="fixed inset-0 bg-black/50 z-[110] hidden transition-opacity" onclick="closeRtLinkModal()"></div>
|
|
|
+ <div id="rt-link-modal" class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl shadow-2xl z-[120] w-[450px] hidden flex-col overflow-hidden">
|
|
|
+ <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
|
|
|
+ <h3 class="text-base font-bold text-gray-800 flex items-center gap-2"><i class="ph ph-link text-blue-600"></i> 插入超链接</h3>
|
|
|
+ <button onclick="closeRtLinkModal()" class="text-gray-400 hover:text-gray-600"><i class="ph ph-x text-xl"></i></button>
|
|
|
+ </div>
|
|
|
+ <div class="p-6 space-y-4">
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium text-gray-700 mb-1">链接地址 (URL) <span class="text-red-500">*</span></label>
|
|
|
+ <input type="text" id="rt-link-url" class="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:border-blue-500 outline-none" placeholder="https://">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium text-gray-700 mb-1">展示文字</label>
|
|
|
+ <input type="text" id="rt-link-text" class="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:border-blue-500 outline-none" placeholder="例如：点击查看详情">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="px-6 py-4 bg-gray-50 border-t border-gray-100 flex justify-end gap-3">
|
|
|
+ <button onclick="closeRtLinkModal()" class="px-4 py-2 border border-gray-300 text-gray-700 rounded text-sm hover:bg-gray-100 transition">取消</button>
|
|
|
+ <button onclick="confirmRtLink()" class="px-4 py-2 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 transition font-medium">确认插入</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ // ==========================================
|
|
|
+ // 核心数据模型与状态
|
|
|
+ // ==========================================
|
|
|
+ let currentMenu = 'home';
|
|
|
+ let currentTier = 'premier';
|
|
|
+ let currentLinkAssemblyId = null;
|
|
|
+
|
|
|
+ let pageStatus = {
|
|
|
+ home: 'published',
|
|
|
+ zone: 'published'
|
|
|
+ };
|
|
|
+
|
|
|
+ const availableTags = Array.from({length: 8}, (_, i) => ({ id: `t${i+1}`, name: `人群标签${i+1}` }));
|
|
|
+
|
|
|
+ // 1. 权益介绍页数据
|
|
|
+ const homeData = {
|
|
|
+ premier: createEmptyTierData('卓越理财'),
|
|
|
+ elite: createEmptyTierData('卓越理财·尊尚'),
|
|
|
+ global: createEmptyTierData('环球私人银行')
|
|
|
+ };
|
|
|
+
|
|
|
+ function createEmptyTierData(defaultTitle) {
|
|
|
+ return {
|
|
|
+ tabName: defaultTitle,
|
|
|
+ buttons: { unlocked: '进入权益专区', locked: '待解锁' },
|
|
|
+ header: { imageUrl: 'https://images.unsplash.com/photo-1518893494013-481c1d8ed3fd?w=800', mainTitle: defaultTitle, subTitle: '为您和您的家人提供尊崇专属礼遇和权益' },
|
|
|
+ privileges: [
|
|
|
+ { imageUrl: '', title: '国际教育', desc: '享专属国际化学校优惠及背景提升项目' },
|
|
|
+ { imageUrl: '', title: '酒店礼遇', desc: '高端酒店及商场会籍匹配' }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ // 2. 权益首页数据 (原权益专区)
|
|
|
+ const zoneData = {
|
|
|
+ adCarousel: [{
|
|
|
+ imageUrl: 'https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=800',
|
|
|
+ linkH5: '', linkApp: '', wechatAppId: '', wechatPath: '', title: '汇丰卓越理财新户达标礼', subtitle: '报名参加汇丰活动，体验更多精彩礼遇', tags: ['t1', 't2']
|
|
|
+ }],
|
|
|
+ exchangeConfig: {
|
|
|
+ items: [
|
|
|
+ { imageUrl: 'https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=200', title: '航空里程', link: '/flight' },
|
|
|
+ { imageUrl: 'https://images.unsplash.com/photo-1518893494013-481c1d8ed3fd?w=200', title: '贵宾厅', link: '/lounge' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ ruleModal: { title: '积分规则', content: '<p>本积分使用规则为汇丰银行（中国）有限公司...</p>' }
|
|
|
+ };
|
|
|
+
|
|
|
+ // 3. 组装页数据
|
|
|
+ let assemblyViewState = 'list';
|
|
|
+ let editAssemblyIndex = null;
|
|
|
+ let tempAssemblyData = null;
|
|
|
+
|
|
|
+ function generateBlockId() { return 'b_' + Math.random().toString(36).substr(2, 9); }
|
|
|
+
|
|
|
+ function createEmptyAssembly(name) {
|
|
|
+ const now = new Date().toLocaleString('zh-CN', { hour12: false });
|
|
|
+ return {
|
|
|
+ id: 'A' + Math.floor(Math.random() * 10000),
|
|
|
+ name: name || '', status: 'draft', createTime: now, updateTime: now,
|
|
|
+ blocks: [
|
|
|
+ { type: 'image', id: generateBlockId(), data: { imageUrl: '' } },
|
|
|
+ { type: 'privilege', id: generateBlockId(), data: { title: '权益标题', items: [ { id: '1', title: '权益名称', desc: '权益简介' } ] } },
|
|
|
+ { type: 'richtext', id: generateBlockId(), data: { content: '<p>组装页富文本区块内容...</p>' } },
|
|
|
+ { type: 'buttonGroup', id: generateBlockId(), data: { buttons: [ { text: '点击配置', link: '', style: 'primary', actionType: 'link' } ] } }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ const assemblyList = [
|
|
|
+ {
|
|
|
+ id: 'A7538', name: '双十一迎新专属活动页', status: 'published', createTime: '2025-10-01 10:00:00', updateTime: '2025-10-15 14:30:00',
|
|
|
+ blocks: [
|
|
|
+ { type: 'image', id: generateBlockId(), data: { imageUrl: 'https://images.unsplash.com/photo-1557683316-973673baf926?w=800' } },
|
|
|
+ { type: 'privilege', id: generateBlockId(), data: { title: '专属权益', items: [{ id: '1', title: '机场贵宾厅服务', desc: '全年免费使用6次指定机场贵宾厅' }, { id: '2', title: '境内礼宾车', desc: '免费2次接送' }] } },
|
|
|
+ { type: 'richtext', id: generateBlockId(), data: { content: '<p>欢迎参与双十一专属福利活动...</p>' } },
|
|
|
+ { type: 'buttonGroup', id: generateBlockId(), data: { buttons: [ { text: '立即参与', link: '/join', style: 'primary', actionType: 'link' } ] } }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 'A2091', name: '私行高净值沙龙引导页', status: 'draft', createTime: '2025-11-20 09:15:00', updateTime: '2025-11-20 09:15:00',
|
|
|
+ blocks: [
|
|
|
+ { type: 'image', id: generateBlockId(), data: { imageUrl: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800' } },
|
|
|
+ { type: 'privilege', id: generateBlockId(), data: { title: '尊享体验', items: [{ id: '1', title: '高尔夫权益', desc: 'VIP高尔夫俱乐部免会籍预约' }] } }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ let openTagDropdownIndex = null;
|
|
|
+
|
|
|
+ function getCurrentAssemblyData() { return tempAssemblyData; }
|
|
|
+
|
|
|
+ // ==========================================
|
|
|
+ // 渲染与切换
|
|
|
+ // ==========================================
|
|
|
+
|
|
|
+ function switchMenu(menuId) {
|
|
|
+ currentMenu = menuId;
|
|
|
+ const activeClass = 'py-2.5 pl-[72px] pr-5 text-blue-400 bg-[#2b3644] font-medium block transition';
|
|
|
+ const inactiveClass = 'py-2.5 pl-[72px] pr-5 text-gray-400 hover:text-white block transition';
|
|
|
+
|
|
|
+ document.getElementById('menu-home').className = (menuId === 'home') ? activeClass : inactiveClass;
|
|
|
+ document.getElementById('menu-zone').className = (menuId === 'zone') ? activeClass : inactiveClass;
|
|
|
+ document.getElementById('menu-assembly').className = (menuId === 'assembly') ? activeClass : inactiveClass;
|
|
|
+
|
|
|
+ const titles = { 'home': '权益介绍页配置', 'zone': '权益首页配置', 'assembly': '组装页管理' };
|
|
|
+ document.getElementById('breadcrumb-title').innerText = titles[menuId];
|
|
|
+ document.getElementById('toolbar-title').innerText = titles[menuId];
|
|
|
+ document.getElementById('tier-tabs-container').style.display = (menuId === 'home') ? 'block' : 'none';
|
|
|
+
|
|
|
+ if (menuId === 'home') {
|
|
|
+ document.getElementById('tab-premier').innerText = homeData.premier.tabName || '卓越理财';
|
|
|
+ document.getElementById('tab-elite').innerText = homeData.elite.tabName || '卓越理财·尊尚';
|
|
|
+ document.getElementById('tab-global').innerText = homeData.global.tabName || '环球私人银行';
|
|
|
+ }
|
|
|
+
|
|
|
+ if (menuId === 'assembly') assemblyViewState = 'list';
|
|
|
+ openTagDropdownIndex = null;
|
|
|
+
|
|
|
+ renderLayout();
|
|
|
+ updateStatusIndicator();
|
|
|
+ }
|
|
|
+
|
|
|
+ function switchTier(tier) {
|
|
|
+ currentTier = tier;
|
|
|
+ const tabs = ['premier', 'elite', 'global'];
|
|
|
+ tabs.forEach(t => {
|
|
|
+ const el = document.getElementById(`tab-${t}`);
|
|
|
+ el.className = (t === tier) ? "pb-3 px-2 border-b-2 border-blue-600 text-blue-600 font-medium transition" : "pb-3 px-2 border-b-2 border-transparent text-gray-500 hover:text-gray-800 transition";
|
|
|
+ });
|
|
|
+ renderLayout();
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderLayout() {
|
|
|
+ const actions = document.getElementById('header-actions');
|
|
|
+ actions.style.display = (currentMenu === 'assembly' && assemblyViewState === 'list') ? 'none' : 'flex';
|
|
|
+
|
|
|
+ if (currentMenu === 'home') renderHomeConfig();
|
|
|
+ else if (currentMenu === 'zone') renderZoneConfig();
|
|
|
+ else renderAssemblyController();
|
|
|
+
|
|
|
+ updateStatusIndicator();
|
|
|
+ }
|
|
|
+
|
|
|
+ function markAsModified() {
|
|
|
+ if (currentMenu === 'home') pageStatus.home = 'modified';
|
|
|
+ if (currentMenu === 'zone') pageStatus.zone = 'modified';
|
|
|
+ if (currentMenu === 'assembly' && assemblyViewState === 'edit' && tempAssemblyData) {
|
|
|
+ tempAssemblyData._isModified = true;
|
|
|
+ }
|
|
|
+ updateStatusIndicator();
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateStatusIndicator() {
|
|
|
+ const indicator = document.getElementById('global-status-indicator');
|
|
|
+
|
|
|
+ if (currentMenu === 'assembly' && assemblyViewState === 'list') {
|
|
|
+ indicator.classList.add('hidden');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ indicator.classList.remove('hidden', 'bg-green-50', 'text-green-700', 'border-green-200', 'bg-yellow-50', 'text-yellow-700', 'border-yellow-200', 'bg-gray-100', 'text-gray-600', 'border-gray-200');
|
|
|
+
|
|
|
+ let currentStatus = '';
|
|
|
+
|
|
|
+ if (currentMenu === 'home') currentStatus = pageStatus.home;
|
|
|
+ else if (currentMenu === 'zone') currentStatus = pageStatus.zone;
|
|
|
+ else if (currentMenu === 'assembly' && assemblyViewState === 'edit') {
|
|
|
+ if (tempAssemblyData._isModified) {
|
|
|
+ currentStatus = 'modified';
|
|
|
+ } else {
|
|
|
+ currentStatus = tempAssemblyData.status;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (currentStatus === 'published') {
|
|
|
+ indicator.classList.add('bg-green-50', 'text-green-700', 'border-green-200');
|
|
|
+ indicator.innerHTML = `<span class="w-1.5 h-1.5 rounded-full bg-green-500"></span> 正式线上环境`;
|
|
|
+ } else if (currentStatus === 'modified') {
|
|
|
+ indicator.classList.add('bg-yellow-50', 'text-yellow-700', 'border-yellow-200');
|
|
|
+ indicator.innerHTML = `<span class="w-1.5 h-1.5 rounded-full bg-yellow-500"></span> 有未发布的修改`;
|
|
|
+ } else {
|
|
|
+ indicator.classList.add('bg-gray-100', 'text-gray-600', 'border-gray-200');
|
|
|
+ indicator.innerHTML = `<span class="w-1.5 h-1.5 rounded-full bg-gray-400"></span> 草稿 (未发布)`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleSaveAction(type) {
|
|
|
+ const pageName = (currentMenu === 'home') ? '权益介绍页' : (currentMenu === 'zone' ? '权益首页' : '组装页');
|
|
|
+
|
|
|
+ if (currentMenu === 'home' || currentMenu === 'zone') {
|
|
|
+ if (currentMenu === 'home') pageStatus.home = (type === 'publish') ? 'published' : 'draft';
|
|
|
+ if (currentMenu === 'zone') pageStatus.zone = (type === 'publish') ? 'published' : 'draft';
|
|
|
+ }
|
|
|
+
|
|
|
+ if (currentMenu === 'assembly' && assemblyViewState === 'edit') {
|
|
|
+ // 校验：如果按钮模块的点击动作是“跳转链接”，则链接不能为空
|
|
|
+ let hasError = false;
|
|
|
+ tempAssemblyData.blocks.forEach(block => {
|
|
|
+ if (block.type === 'buttonGroup') {
|
|
|
+ block.data.buttons.forEach(btn => {
|
|
|
+ if (btn.actionType === 'link' && !btn.link.trim()) {
|
|
|
+ hasError = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ if (hasError) {
|
|
|
+ showToast('保存失败：按钮模块中存在未填写的跳转链接！', 'error');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!tempAssemblyData.name.trim()) tempAssemblyData.name = '未命名组装页';
|
|
|
+ tempAssemblyData.status = (type === 'publish') ? 'published' : 'draft';
|
|
|
+ tempAssemblyData.updateTime = new Date().toLocaleString('zh-CN', { hour12: false });
|
|
|
+ delete tempAssemblyData._isModified;
|
|
|
+
|
|
|
+ if (editAssemblyIndex === null) {
|
|
|
+ assemblyList.unshift(tempAssemblyData);
|
|
|
+ if (type === 'draft') editAssemblyIndex = 0;
|
|
|
+ } else {
|
|
|
+ assemblyList[editAssemblyIndex] = tempAssemblyData;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (type === 'publish') {
|
|
|
+ editAssemblyIndex = null;
|
|
|
+ tempAssemblyData = null;
|
|
|
+ assemblyViewState = 'list';
|
|
|
+ }
|
|
|
+
|
|
|
+ renderLayout();
|
|
|
+ }
|
|
|
+
|
|
|
+ showToast(type === 'publish' ? `已发布${pageName}配置！` : `已保存${pageName}配置草稿！`);
|
|
|
+ updateStatusIndicator();
|
|
|
+ }
|
|
|
+
|
|
|
+ // ==========================================
|
|
|
+ // 1. 权益介绍页渲染
|
|
|
+ // ==========================================
|
|
|
+ function renderHomeConfig() {
|
|
|
+ const data = homeData[currentTier];
|
|
|
+
|
|
|
+ // 兼容历史数据，确保字段存在
|
|
|
+ if (!data.tabName) data.tabName = currentTier === 'premier' ? '卓越理财' : (currentTier === 'elite' ? '卓越理财·尊尚' : '环球私人银行');
|
|
|
+ if (!data.buttons) data.buttons = { unlocked: '进入权益专区', locked: '待解锁' };
|
|
|
+
|
|
|
+ document.getElementById('form-container').innerHTML = `
|
|
|
+ <div class="max-w-4xl mx-auto space-y-8 pb-10">
|
|
|
+
|
|
|
+ <section class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
|
|
+ <div class="bg-gray-50 px-5 py-3 border-b border-gray-200 font-medium flex items-center gap-2"><i class="ph ph-folders text-gray-500 text-lg"></i> Tab名称配置</div>
|
|
|
+ <div class="p-6">
|
|
|
+ <label class="block text-sm font-medium text-gray-700 mb-1">Tab名称</label>
|
|
|
+ <input type="text" value="${data.tabName}" oninput="homeData[currentTier].tabName=this.value; document.getElementById('tab-' + currentTier).innerText = this.value; markAsModified();" class="w-1/2 px-3 py-2 border rounded text-sm" placeholder="例如：卓越理财">
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
|
|
+ <div class="bg-gray-50 px-5 py-3 border-b border-gray-200 font-medium flex items-center gap-2"><i class="ph ph-image text-gray-500 text-lg"></i> 头部配置</div>
|
|
|
+ <div class="p-6 space-y-5">
|
|
|
+ <div><label class="block text-sm font-medium mb-2">头图配图</label>
|
|
|
+ <div class="flex items-center gap-4">
|
|
|
+ <label class="w-[360px] h-[160px] bg-[#eef6fc] rounded border border-gray-300 relative group overflow-hidden cursor-pointer flex items-center justify-center shrink-0 shadow-sm">
|
|
|
+ ${data.header.imageUrl ? `<img src="${data.header.imageUrl}" class="w-full h-full object-cover">` : `<div class="text-gray-400 flex flex-col items-center"><i class="ph ph-image text-3xl"></i><span class="text-xs mt-1">未上传图片</span></div>`}
|
|
|
+ <div class="absolute inset-0 bg-black/50 hidden group-hover:flex flex-col items-center justify-center text-white"><i class="ph ph-upload-simple text-3xl mb-2"></i><span class="text-sm">点击上传本地图片</span></div>
|
|
|
+ <input type="file" class="hidden" accept="image/*" onchange="uploadImageCallback(event, (url) => {homeData[currentTier].header.imageUrl=url; markAsModified(); renderLayout();})">
|
|
|
+ </label>
|
|
|
+ <div class="text-xs text-gray-500 bg-gray-50 p-2 rounded border border-gray-100">建议图片尺寸：<br><span class="font-bold text-gray-700">686 * 296 px</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="space-y-4 pt-2">
|
|
|
+ <div><label class="block text-sm font-medium mb-1">主标题（粗体）</label><input type="text" value="${data.header.mainTitle}" oninput="homeData[currentTier].header.mainTitle=this.value; markAsModified();" class="w-full px-3 py-2 border rounded text-sm"></div>
|
|
|
+ <div><label class="block text-sm font-medium mb-1">副标题（小字）</label><input type="text" value="${data.header.subTitle}" oninput="homeData[currentTier].header.subTitle=this.value; markAsModified();" class="w-full px-3 py-2 border rounded text-sm"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
|
|
+ <div class="bg-gray-50 px-5 py-3 border-b border-gray-200 font-medium flex items-center gap-2"><i class="ph ph-hand-tap text-gray-500 text-lg"></i> 按钮配置</div>
|
|
|
+ <div class="p-6">
|
|
|
+ <div class="grid grid-cols-2 gap-5">
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium text-gray-700 mb-1">已解锁按钮文案</label>
|
|
|
+ <input type="text" value="${data.buttons.unlocked}" oninput="homeData[currentTier].buttons.unlocked=this.value; markAsModified();" class="w-full px-3 py-2 border rounded text-sm" placeholder="例如：进入权益专区">
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium text-gray-700 mb-1">待解锁按钮文案</label>
|
|
|
+ <input type="text" value="${data.buttons.locked}" oninput="homeData[currentTier].buttons.locked=this.value; markAsModified();" class="w-full px-3 py-2 border rounded text-sm" placeholder="例如：待解锁">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <section class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
|
|
+ <div class="bg-gray-50 px-5 py-3 border-b border-gray-200 font-medium flex justify-between items-center">
|
|
|
+ <div class="flex items-center gap-2"><i class="ph ph-list-bullets text-gray-500 text-lg"></i> 权益列表配置</div>
|
|
|
+ <button onclick="homeData[currentTier].privileges.push({ imageUrl: '', title: '新权益', desc: '描述...' }); markAsModified(); renderLayout();" class="text-blue-600 text-sm flex items-center gap-1 hover:text-blue-800"><i class="ph ph-plus-circle text-lg"></i> 添加权益</button>
|
|
|
+ </div>
|
|
|
+ <div class="p-6 space-y-4">
|
|
|
+ ${data.privileges.map((item, index) => renderHomePrivilegeItem(item, index)).join('') || `<div class="text-center text-gray-400 py-6 border border-dashed rounded">暂无权益项</div>`}
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderHomePrivilegeItem(item, index) {
|
|
|
+ return `
|
|
|
+ <div class="flex gap-4 items-start p-5 pt-8 border border-gray-200 rounded-lg bg-white relative shadow-sm mt-2">
|
|
|
+ <div class="absolute left-0 top-0 bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-tl-lg rounded-br-lg shadow-sm">NO. ${index + 1}</div>
|
|
|
+ <div class="absolute right-4 top-4 flex items-center gap-2 z-20">
|
|
|
+ ${renderSortPopover('homePrivilege', index, homeData[currentTier].privileges.length)}
|
|
|
+ <button onclick="homeData[currentTier].privileges.splice(${index}, 1); markAsModified(); renderLayout();" class="text-red-500 hover:text-red-700 bg-red-50 hover:bg-red-100 p-1.5 rounded transition shadow-sm"><i class="ph ph-trash text-lg"></i></button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex flex-col items-center gap-1 shrink-0 mt-1">
|
|
|
+ <div class="w-14 h-14 bg-[#eef6fc] rounded border border-gray-300 relative group overflow-hidden flex items-center justify-center cursor-pointer shadow-inner">
|
|
|
+ ${item.imageUrl ? `<img src="${item.imageUrl}" class="w-full h-full object-cover">` : `<div class="text-gray-400 flex flex-col items-center"><i class="ph ph-image text-xl mb-0.5"></i><span class="text-[10px]">未上传</span></div>`}
|
|
|
+ <label class="absolute inset-0 bg-black/50 hidden group-hover:flex flex-col items-center justify-center text-white cursor-pointer"><i class="ph ph-upload-simple text-lg"></i><input type="file" class="hidden" accept="image/*" onchange="uploadImageCallback(event, (url) => {homeData[currentTier].privileges[${index}].imageUrl = url; markAsModified(); renderLayout();})"></label>
|
|
|
+ </div>
|
|
|
+ <div class="text-[10px] text-gray-400 text-center leading-tight">非必填<br>无图展示圆点</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex-1 grid grid-cols-1 md:grid-cols-3 gap-4 pr-24 mt-1">
|
|
|
+ <div class="col-span-1">
|
|
|
+ <label class="block text-xs text-gray-500 mb-1">标题</label>
|
|
|
+ <input type="text" value="${item.title}" oninput="homeData[currentTier].privileges[${index}].title=this.value; markAsModified();" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm">
|
|
|
+ </div>
|
|
|
+ <div class="col-span-2">
|
|
|
+ <label class="block text-xs text-gray-500 mb-1">权益文字描述</label>
|
|
|
+ <input type="text" value="${item.desc}" oninput="homeData[currentTier].privileges[${index}].desc=this.value; markAsModified();" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ // ==========================================
|
|
|
+ // 2. 权益首页渲染 (Zone)
|
|
|
+ // ==========================================
|
|
|
+ function renderZoneConfig() {
|
|
|
+ const container = document.getElementById('form-container');
|
|
|
+ container.innerHTML = `
|
|
|
+ <div class="max-w-4xl mx-auto space-y-8 pb-10">
|
|
|
+ <section class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-visible mt-2">
|
|
|
+ <div class="bg-gray-50 px-5 py-3 border-b font-medium flex justify-between items-center rounded-t-xl">
|
|
|
+ <div class="flex items-center gap-2"><i class="ph ph-slideshow text-gray-500 text-lg"></i> 活动广告轮播图</div>
|
|
|
+ <button onclick="zoneData.adCarousel.push({imageUrl:'',linkH5:'',linkApp:'',wechatAppId:'',wechatPath:'',title:'新广告',subtitle:'',tags:[]}); markAsModified(); renderLayout();" class="text-blue-600 text-sm flex items-center gap-1"><i class="ph ph-plus-circle text-lg"></i> 添加轮播</button>
|
|
|
+ </div>
|
|
|
+ <div class="p-6 space-y-6">${zoneData.adCarousel.map((item, index) => renderZoneCarouselItem(item, index)).join('') || `<div class="text-center text-gray-400 py-6 border border-dashed rounded">暂无广告轮播图</div>`}</div>
|
|
|
+ </section>
|
|
|
+ <section class="bg-white rounded-xl shadow-sm border border-gray-200">
|
|
|
+ <div class="bg-gray-50 px-5 py-3 border-b font-medium flex justify-between items-center rounded-t-xl"><div class="flex items-center gap-2"><i class="ph ph-squares-four text-gray-500 text-lg"></i> 常用兑换配置</div><button onclick="zoneData.exchangeConfig.items.push({imageUrl:'',title:'新兑换项',link:''}); markAsModified(); renderLayout();" class="text-blue-600 text-sm flex items-center gap-1 hover:text-blue-800"><i class="ph ph-plus-circle text-lg"></i> 添加兑换项</button></div>
|
|
|
+ <div class="p-6">
|
|
|
+ <div class="space-y-4">${zoneData.exchangeConfig.items.map((item, index) => renderZoneExchangeItem(item, index)).join('') || `<div class="text-center text-gray-400 py-6 border border-dashed rounded">暂无常用兑换项</div>`}</div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <section class="bg-white rounded-xl shadow-sm border border-gray-200">
|
|
|
+ <div class="bg-gray-50 px-5 py-3 border-b font-medium flex items-center rounded-t-xl"><i class="ph ph-article text-gray-500 text-lg mr-2"></i> 积分规则弹窗配置</div>
|
|
|
+ <div class="p-6 space-y-4">
|
|
|
+ <div><label class="block text-sm font-medium mb-1">弹窗顶部名称</label><input type="text" value="${zoneData.ruleModal.title}" oninput="zoneData.ruleModal.title=this.value; markAsModified();" class="w-1/2 px-3 py-2 border rounded text-sm"></div>
|
|
|
+ <div>
|
|
|
+ <label class="block text-sm font-medium mb-1">规则内容 (富文本编辑器)</label>
|
|
|
+ <div class="border rounded shadow-sm flex flex-col">
|
|
|
+ ${getRichTextToolbar('zone')}
|
|
|
+ <textarea id="rt-zone" oninput="zoneData.ruleModal.content=this.value; markAsModified();" class="w-full px-4 py-3 text-sm h-48 focus:outline-none resize-y">${zoneData.ruleModal.content}</textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderZoneCarouselItem(item, index) {
|
|
|
+ return `
|
|
|
+ <div class="border rounded-xl p-5 pt-8 bg-white relative shadow-sm overflow-visible">
|
|
|
+ <div class="absolute left-0 top-0 bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-tl-xl rounded-br-lg shadow-sm">NO. ${index + 1}</div>
|
|
|
+ <div class="absolute right-5 top-5 flex items-center gap-2">
|
|
|
+ ${renderSortPopover('zoneCarousel', index, zoneData.adCarousel.length)}
|
|
|
+ <button onclick="zoneData.adCarousel.splice(${index},1); markAsModified(); renderLayout();" class="text-red-500 bg-red-50 p-1.5 rounded shadow-sm"><i class="ph ph-trash"></i></button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex flex-col gap-4 mt-3">
|
|
|
+ <div class="flex items-center gap-4">
|
|
|
+ <div class="w-64 h-36 bg-[#eef6fc] rounded-md relative group overflow-hidden border flex items-center justify-center shrink-0">
|
|
|
+ ${item.imageUrl ? `<img src="${item.imageUrl}" class="w-full h-full object-cover">` : `<div class="text-gray-400 flex flex-col items-center"><i class="ph ph-image text-3xl mb-1"></i><span class="text-xs">未上传</span></div>`}
|
|
|
+ <label class="absolute inset-0 bg-black/50 hidden group-hover:flex flex-col items-center justify-center text-white cursor-pointer"><i class="ph ph-upload-simple text-3xl mb-1"></i><span class="text-sm">点击上传</span><input type="file" class="hidden" accept="image/*" onchange="uploadImageCallback(event, (url) => {zoneData.adCarousel[${index}].imageUrl=url; markAsModified(); renderLayout();})"></label>
|
|
|
+ </div>
|
|
|
+ <div class="text-xs text-gray-500 bg-gray-50 p-2 rounded border border-gray-100">建议图片尺寸：<br><span class="font-bold text-gray-700">686 * 296 px</span></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="space-y-3">
|
|
|
+ <div><label class="block text-xs text-gray-600 mb-1">主标题</label><input type="text" value="${item.title}" oninput="zoneData.adCarousel[${index}].title=this.value; markAsModified();" class="w-full px-3 py-1.5 border rounded text-sm"></div>
|
|
|
+ <div><label class="block text-xs text-gray-600 mb-1">副标题</label><input type="text" value="${item.subtitle}" oninput="zoneData.adCarousel[${index}].subtitle=this.value; markAsModified();" class="w-full px-3 py-1.5 border rounded text-sm"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tag-dropdown-container relative">
|
|
|
+ <label class="block text-xs text-gray-600 mb-1">可见人群标签 (多选)</label>
|
|
|
+ <div class="min-h-[38px] p-1.5 border border-blue-300 bg-blue-50 rounded flex flex-wrap gap-1.5 cursor-pointer" onclick="toggleTagDropdown(event, ${index})">
|
|
|
+ ${(item.tags || []).map(tid => `<div class="bg-blue-600 text-white text-[12px] px-2 py-0.5 rounded flex items-center gap-1">${availableTags.find(t=>t.id===tid)?.name || ''}<i class="ph ph-x" onclick="event.stopPropagation(); zoneData.adCarousel[${index}].tags = zoneData.adCarousel[${index}].tags.filter(id=>id!=='${tid}'); markAsModified(); renderLayout();"></i></div>`).join('')}
|
|
|
+ <div class="text-gray-400 text-sm">${(!item.tags || item.tags.length === 0) ? '点击选择...' : ''}</div>
|
|
|
+ </div>
|
|
|
+ <div id="tag-dropdown-${index}" class="${openTagDropdownIndex === index ? 'block' : 'hidden'} absolute top-full left-0 w-full mt-1 bg-white border rounded shadow-lg z-50 overflow-hidden">
|
|
|
+ <div class="p-2 bg-gray-50 border-b"><input type="text" placeholder="搜索..." class="w-full px-2 py-1 text-sm border rounded outline-none" onkeyup="filterTags(event, ${index})" onclick="event.stopPropagation()"></div>
|
|
|
+ <div class="max-h-48 overflow-y-auto p-1" id="tag-list-${index}">${availableTags.map(tag => `<label class="flex items-center gap-2 px-3 py-2 hover:bg-blue-50 cursor-pointer text-sm"><input type="checkbox" ${(item.tags||[]).includes(tag.id)?'checked':''} onclick="event.stopPropagation(); const ts = zoneData.adCarousel[${index}].tags || []; if(this.checked) ts.push('${tag.id}'); else zoneData.adCarousel[${index}].tags=ts.filter(id=>id!=='${tag.id}'); zoneData.adCarousel[${index}].tags = ts; markAsModified(); renderLayout();"><span>${tag.name}</span></label>`).join('')}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bg-gray-50 p-3 rounded-lg border border-gray-200 space-y-3 mt-2">
|
|
|
+ <div class="text-xs font-bold text-gray-700 border-b border-gray-200 pb-2"><i class="ph ph-link"></i> 跳转链接配置</div>
|
|
|
+ <div><label class="block text-xs text-gray-600 mb-1">H5 跳转链接</label><input type="text" value="${item.linkH5 || ''}" oninput="zoneData.adCarousel[${index}].linkH5=this.value; markAsModified();" class="w-full px-3 py-1.5 border rounded text-sm"></div>
|
|
|
+ <div><label class="block text-xs text-gray-600 mb-1">APP 跳转链接</label><input type="text" value="${item.linkApp || ''}" oninput="zoneData.adCarousel[${index}].linkApp=this.value; markAsModified();" class="w-full px-3 py-1.5 border rounded text-sm"></div>
|
|
|
+ <div class="grid grid-cols-2 gap-3">
|
|
|
+ <div><label class="block text-xs text-gray-600 mb-1">微信小程序 AppID</label><input type="text" value="${item.wechatAppId || ''}" oninput="zoneData.adCarousel[${index}].wechatAppId=this.value; markAsModified();" class="w-full px-3 py-1.5 border rounded text-sm" placeholder="例如：wx1234567890abcdef"></div>
|
|
|
+ <div><label class="block text-xs text-gray-600 mb-1">微信小程序 页面路径</label><input type="text" value="${item.wechatPath || ''}" oninput="zoneData.adCarousel[${index}].wechatPath=this.value; markAsModified();" class="w-full px-3 py-1.5 border rounded text-sm" placeholder="例如：pages/index/index"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderZoneExchangeItem(item, index) {
|
|
|
+ return `<div class="flex gap-4 items-center p-4 pt-6 border rounded-lg bg-white relative shadow-sm mt-3"><div class="absolute left-0 top-0 bg-blue-600 text-white text-xs font-bold px-3 py-1 rounded-tl-lg rounded-br-lg">NO. ${index + 1}</div><div class="absolute right-4 top-4 flex items-center gap-2">${renderSortPopover('zoneExchange', index, zoneData.exchangeConfig.items.length)}<button onclick="zoneData.exchangeConfig.items.splice(${index},1); markAsModified(); renderLayout();" class="text-red-500 bg-red-50 p-1.5 rounded"><i class="ph ph-trash"></i></button></div><div class="w-20 h-20 bg-[#eef6fc] rounded border relative group flex items-center justify-center shrink-0 overflow-hidden shadow-inner">${item.imageUrl ? `<img src="${item.imageUrl}" class="w-full h-full object-cover">` : `<div class="text-gray-400 flex flex-col items-center"><i class="ph ph-image text-xl mb-0.5"></i><span class="text-[10px]">未上传</span></div>`}<label class="absolute inset-0 bg-black/50 hidden group-hover:flex flex-col items-center justify-center text-white cursor-pointer"><i class="ph ph-upload-simple text-xl"></i><input type="file" class="hidden" accept="image/*" onchange="uploadImageCallback(event, (url)=>{zoneData.exchangeConfig.items[${index}].imageUrl=url; markAsModified(); renderLayout();})"></label></div><div class="flex-1 grid grid-cols-2 gap-4 mt-1 pr-16"><div><label class="block text-xs text-gray-600 mb-1">展示文字</label><input type="text" value="${item.title}" oninput="zoneData.exchangeConfig.items[${index}].title=this.value; markAsModified();" class="w-full px-3 py-2 border rounded text-sm"></div><div><label class="block text-xs text-gray-600 mb-1">跳转链接 (URL)</label><input type="text" value="${item.link}" oninput="zoneData.exchangeConfig.items[${index}].link=this.value; markAsModified();" class="w-full px-3 py-2 border rounded text-sm"></div></div></div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // ==========================================
|
|
|
+ // 3. 组装页渲染逻辑
|
|
|
+ // ==========================================
|
|
|
+ function renderAssemblyController() {
|
|
|
+ if (assemblyViewState === 'list') renderAssemblyList();
|
|
|
+ else renderAssemblyEdit();
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderAssemblyList() {
|
|
|
+ const container = document.getElementById('form-container');
|
|
|
+ let tableRows = assemblyList.map((item, index) => `
|
|
|
+ <tr class="border-b hover:bg-gray-50 transition">
|
|
|
+ <td class="px-5 py-3 text-sm border-r flex gap-3 whitespace-nowrap"><button onclick="editAssembly(${index})" class="text-blue-600 font-medium">编辑</button><button onclick="showLinkModal(null, ${index})" class="text-indigo-600 font-medium">链接</button><button onclick="deleteAssembly(${index})" class="text-red-500 font-medium">删除</button></td>
|
|
|
+ <td class="border px-5 py-3 text-sm text-gray-600 text-center">${item.id}</td>
|
|
|
+ <td class="border px-5 py-3 text-sm font-medium text-gray-900">${item.name || '未命名'}</td>
|
|
|
+ <td class="border px-5 py-3 text-center"><span class="px-2 py-1 text-xs rounded font-medium ${item.status === 'published' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'}">${item.status === 'published' ? '已上架' : '草稿'}</span></td>
|
|
|
+ <td class="border px-5 py-3 text-sm text-gray-500 text-center whitespace-nowrap">${item.createTime}</td>
|
|
|
+ <td class="border px-5 py-3 text-sm text-gray-500 text-center whitespace-nowrap">${item.updateTime}</td>
|
|
|
+ </tr>`).join('');
|
|
|
+
|
|
|
+ container.innerHTML = `
|
|
|
+ <div class="w-full space-y-6">
|
|
|
+ <div class="bg-white p-5 rounded shadow-sm border mb-4 mt-2">
|
|
|
+ <div class="grid grid-cols-2 gap-6 mb-5 w-2/3"><div class="flex items-center gap-3"><label class="text-sm font-medium w-16 text-right">页面ID</label><input type="text" class="flex-1 px-3 py-1.5 border rounded text-sm focus:outline-none focus:border-blue-500"></div><div class="flex items-center gap-3"><label class="text-sm font-medium w-16 text-right">页面名称</label><input type="text" class="flex-1 px-3 py-1.5 border rounded text-sm focus:outline-none focus:border-blue-500"></div></div>
|
|
|
+ <div class="flex justify-between items-center border-t pt-4 mt-2"><button onclick="handleCreateNewAssembly()" class="bg-blue-600 text-white px-4 py-1.5 rounded text-sm flex items-center gap-1.5 font-medium hover:bg-blue-700"><i class="ph ph-plus text-lg"></i> 新建组装页</button><div class="flex gap-3"><button class="bg-indigo-500 text-white px-5 py-1.5 rounded text-sm font-medium hover:bg-indigo-600">查询</button><button class="bg-white border text-gray-700 px-5 py-1.5 rounded text-sm hover:bg-gray-50">重置</button></div></div>
|
|
|
+ </div>
|
|
|
+ <div class="bg-white rounded shadow-sm border overflow-hidden"><table class="w-full border-collapse"><thead><tr class="bg-gray-50 text-gray-600 text-sm"><th class="border px-5 py-3 font-medium text-left w-48">操作</th><th class="border px-5 py-3 font-medium">页面ID</th><th class="border px-5 py-3 font-medium text-left">组装页名称</th><th class="border px-5 py-3 font-medium">发布状态</th><th class="border px-5 py-3 font-medium">创建时间</th><th class="border px-5 py-3 font-medium">更新时间</th></tr></thead><tbody>${tableRows || '<tr><td colspan="6" class="p-10 text-center text-gray-400">暂无数据</td></tr>'}</tbody></table></div>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderAssemblyEdit() {
|
|
|
+ const data = getCurrentAssemblyData();
|
|
|
+ let html = `
|
|
|
+ <div class="max-w-4xl mx-auto space-y-6 pb-20 mt-2">
|
|
|
+ <div class="flex items-center justify-between border-b pb-4"><div class="flex items-center gap-4"><button onclick="backToAssemblyList()" class="text-gray-600 hover:text-blue-600 flex items-center gap-1 font-medium"><i class="ph ph-arrow-left text-lg"></i> 返回</button><h2 class="text-xl font-bold">${editAssemblyIndex === null ? '新建组装页' : '编辑组装页'}</h2></div></div>
|
|
|
+ <section class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 flex gap-6 items-center">
|
|
|
+ <div class="shrink-0 flex items-center gap-2 h-[38px]">
|
|
|
+ <span class="text-sm font-medium text-gray-500">页面 ID：</span>
|
|
|
+ <span class="text-sm font-bold text-gray-800 bg-gray-100 px-3 py-1 rounded border border-gray-200 leading-none flex items-center">${data.id}</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1 flex items-center gap-3 border-l border-gray-200 pl-6 h-[38px]">
|
|
|
+ <label class="text-sm font-medium text-gray-700 shrink-0">组装页名称<span class="text-red-500 ml-0.5">*</span></label>
|
|
|
+ <input type="text" value="${data.name}" oninput="updateAssemblyName(this.value)" class="flex-1 px-3 py-1.5 border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 text-sm font-medium h-[34px]" placeholder="请为该页面设置一个名称 (必填)">
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ `;
|
|
|
+
|
|
|
+ const hasPrivilege = data.blocks.some(b => b.type === 'privilege');
|
|
|
+
|
|
|
+ data.blocks.forEach((block, index) => {
|
|
|
+ html += `<section class="bg-white rounded-xl shadow-sm border overflow-hidden relative mb-6">
|
|
|
+ <div class="absolute right-0 top-0 flex items-center z-10 bg-gray-50 border-b border-l rounded-bl-lg shadow-sm">
|
|
|
+ ${renderSortPopover('assemblyBlock', index, data.blocks.length)}`;
|
|
|
+
|
|
|
+ if (block.type !== 'privilege') {
|
|
|
+ html += `<div class="w-px h-4 bg-gray-300"></div><button onclick="duplicateAssemblyBlock(${index})" class="p-1.5 px-3 text-blue-600 hover:bg-blue-100 text-sm font-medium transition" title="复制模块"><i class="ph ph-copy mr-1"></i>复制</button>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ html += `<div class="w-px h-4 bg-gray-300"></div><button onclick="removeAssemblyBlock(${index})" class="p-1.5 px-3 text-red-500 hover:bg-red-100 text-sm font-medium rounded-bl-lg transition" title="删除模块"><i class="ph ph-trash mr-1"></i>删除</button></div>`;
|
|
|
+
|
|
|
+ if (block.type === 'image') {
|
|
|
+ html += `<div class="bg-gray-50 px-5 py-3 border-b font-medium flex items-center gap-2"><i class="ph ph-image text-gray-500 text-lg"></i> 图片模块</div>
|
|
|
+ <div class="p-6">
|
|
|
+ <div class="flex gap-4 items-center">
|
|
|
+ <label class="w-[360px] h-[160px] bg-[#eef6fc] rounded border relative group overflow-hidden cursor-pointer flex items-center justify-center shrink-0 shadow-sm">
|
|
|
+ ${block.data.imageUrl ? `<img src="${block.data.imageUrl}" class="w-full h-full object-cover">` : `<div class="text-gray-400 flex flex-col items-center"><i class="ph ph-image text-3xl mb-1"></i><span class="text-xs">未上传图片</span></div>`}
|
|
|
+ <div class="absolute inset-0 bg-black/50 hidden group-hover:flex flex-col items-center justify-center text-white"><i class="ph ph-upload-simple text-3xl mb-2"></i><span class="text-sm font-medium">点击上传图片</span></div>
|
|
|
+ <input type="file" class="hidden" accept="image/*" onchange="uploadImageCallback(event, (url)=>{tempAssemblyData.blocks[${index}].data.imageUrl=url; markAsModified(); renderLayout();})">
|
|
|
+ </label>
|
|
|
+ <div class="text-xs text-gray-500 space-y-1 bg-gray-50 p-3 rounded border"><p class="font-medium text-gray-700">建议宽度：750px</p><p>高度不限，系统将按比例自适应展示</p></div>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+ else if (block.type === 'privilege') {
|
|
|
+ html += `<div class="bg-gray-50 px-5 py-3 border-b font-medium flex items-center gap-2"><i class="ph ph-list-dashes text-gray-500 text-lg"></i> 权益商品模块 <span class="text-xs text-gray-400 ml-2 font-normal">(当前页面仅限添加一个)</span></div>
|
|
|
+ <div class="p-6">
|
|
|
+ <div class="mb-5 border-b pb-5"><label class="block text-sm font-medium mb-2">可配置大标题</label><input type="text" value="${block.data.title}" oninput="tempAssemblyData.blocks[${index}].data.title=this.value; markAsModified();" class="w-1/2 px-3 py-2 border rounded text-sm"></div>
|
|
|
+ <div class="space-y-3">${block.data.items.map((item, idx) => `<div class="flex items-center gap-4 p-3 border bg-gray-50 rounded-lg relative group"><div class="bg-white border rounded text-xs font-bold text-gray-500 px-2 py-1">NO. ${idx + 1}</div><div class="w-10 h-10 rounded-full border bg-white flex items-center justify-center text-gray-500 shrink-0"><i class="ph ph-file-text text-xl"></i></div><div class="flex-1 opacity-80 pointer-events-none"><div class="text-sm font-medium text-gray-900">${item.title}</div><div class="text-xs text-gray-500 mt-0.5 truncate">${item.desc}</div></div><div class="pr-2">${renderSortPopover(`assemblyPrivilege-${index}`, idx, block.data.items.length)}</div></div>`).join('')}</div>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+ else if (block.type === 'richtext') {
|
|
|
+ html += `<div class="bg-gray-50 px-5 py-3 border-b font-medium flex items-center gap-2"><i class="ph ph-text-align-left text-gray-500 text-lg"></i> 图文模块</div>
|
|
|
+ <div class="p-6">
|
|
|
+ <label class="block text-sm font-medium mb-1">图文内容 (富文本编辑器)</label>
|
|
|
+ <div class="border rounded flex flex-col shadow-sm">
|
|
|
+ ${getRichTextToolbar('assembly', index)}
|
|
|
+ <textarea id="rt-assembly-${index}" oninput="tempAssemblyData.blocks[${index}].data.content=this.value; markAsModified();" class="w-full px-4 py-3 text-sm h-32 focus:outline-none resize-y">${block.data.content}</textarea>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+ else if (block.type === 'buttonGroup') {
|
|
|
+ html += `<div class="bg-gray-50 px-5 py-3 border-b font-medium flex items-center gap-4"><div class="flex items-center gap-2"><i class="ph ph-hand-tap text-gray-500 text-lg"></i> 按钮模块</div><button onclick="addAssemblyButton(${index})" class="text-blue-600 bg-blue-50 hover:bg-blue-100 px-2 py-1 rounded text-sm flex items-center gap-1 transition"><i class="ph ph-plus-circle text-lg"></i> 添加按钮</button></div>
|
|
|
+ <div class="p-6 space-y-4">`;
|
|
|
+
|
|
|
+ block.data.buttons.forEach((btn, idx) => {
|
|
|
+ const actionType = btn.actionType || 'link';
|
|
|
+ html += `<div class="flex gap-4 items-start p-4 border rounded-lg bg-gray-50 relative">
|
|
|
+ <div class="absolute left-0 top-0 bg-gray-600 text-white text-[10px] font-bold px-2 py-0.5 rounded-tl-lg rounded-br-lg">BTN ${idx + 1}</div>
|
|
|
+ <div class="flex-1 pt-2 space-y-4">
|
|
|
+ <div class="grid grid-cols-3 gap-4">
|
|
|
+ <div><label class="block text-xs mb-1">按钮文案</label><input type="text" value="${btn.text}" oninput="tempAssemblyData.blocks[${index}].data.buttons[${idx}].text=this.value; markAsModified();" class="w-full px-3 py-1.5 border rounded text-sm"></div>
|
|
|
+ <div><label class="block text-xs mb-1">点击动作</label>
|
|
|
+ <select onchange="tempAssemblyData.blocks[${index}].data.buttons[${idx}].actionType=this.value; markAsModified(); renderLayout();" class="w-full px-3 py-1.5 border rounded text-sm bg-white">
|
|
|
+ <option value="link" ${actionType === 'link' ? 'selected' : ''}>跳转链接</option>
|
|
|
+ <option value="dialog" ${actionType === 'dialog' ? 'selected' : ''}>弹窗提示</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div><label class="block text-xs mb-1">按钮样式</label><select onchange="tempAssemblyData.blocks[${index}].data.buttons[${idx}].style=this.value; markAsModified();" class="w-full px-3 py-1.5 border rounded text-sm bg-white"><option value="primary" ${btn.style === 'primary' ? 'selected' : ''}>突出显示 (红色)</option><option value="secondary" ${btn.style === 'secondary' ? 'selected' : ''}>次要操作 (白色)</option></select></div>
|
|
|
+ </div>`;
|
|
|
+
|
|
|
+ if (actionType === 'link') {
|
|
|
+ html += `<div><label class="block text-xs mb-1">跳转链接 <span class="text-red-500">*</span></label><input type="text" value="${btn.link || ''}" oninput="tempAssemblyData.blocks[${index}].data.buttons[${idx}].link=this.value; markAsModified();" class="w-full px-3 py-1.5 border rounded text-sm" placeholder="必填，输入跳转URL"></div>`;
|
|
|
+ } else {
|
|
|
+ const d = btn.dialog || { title: '', desc: '', confirmText: '确认', confirmLink: '' };
|
|
|
+ html += `<div class="bg-white p-4 border border-gray-200 rounded text-sm space-y-3 shadow-sm">
|
|
|
+ <div class="font-medium text-gray-800 mb-2 border-b border-gray-100 pb-2"><i class="ph ph-browser"></i> 弹窗内容配置 (包含取消、确认按钮)</div>
|
|
|
+ <div><label class="block text-xs text-gray-600 mb-1">弹窗标题</label><input type="text" value="${d.title}" oninput="updateAssemblyButtonDialog(${index}, ${idx}, 'title', this.value)" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm focus:border-blue-500 outline-none" placeholder="弹窗标题"></div>
|
|
|
+ <div><label class="block text-xs text-gray-600 mb-1">弹窗描述</label><textarea oninput="updateAssemblyButtonDialog(${index}, ${idx}, 'desc', this.value)" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm h-16 focus:border-blue-500 outline-none" placeholder="弹窗正文提示...">${d.desc}</textarea></div>
|
|
|
+ <div class="grid grid-cols-2 gap-4">
|
|
|
+ <div><label class="block text-xs text-gray-600 mb-1">右侧确认按钮文案</label><input type="text" value="${d.confirmText}" oninput="updateAssemblyButtonDialog(${index}, ${idx}, 'confirmText', this.value)" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm focus:border-blue-500 outline-none" placeholder="例如：继续前往"></div>
|
|
|
+ <div><label class="block text-xs text-gray-600 mb-1">确认按钮跳转链接</label><input type="text" value="${d.confirmLink}" oninput="updateAssemblyButtonDialog(${index}, ${idx}, 'confirmLink', this.value)" class="w-full px-3 py-1.5 border border-gray-300 rounded text-sm focus:border-blue-500 outline-none" placeholder="选填，无链接则仅关闭弹窗"></div>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ html += `</div>
|
|
|
+ <div class="flex items-center gap-2 shrink-0 pb-0.5 pt-2">
|
|
|
+ ${renderSortPopover(`assemblyButton-${index}`, idx, block.data.buttons.length)}
|
|
|
+ <button onclick="tempAssemblyData.blocks[${index}].data.buttons.splice(${idx}, 1); markAsModified(); renderLayout();" class="text-red-500 bg-red-100 p-1.5 rounded shadow-sm"><i class="ph ph-trash text-lg"></i></button>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+ });
|
|
|
+
|
|
|
+ if(block.data.buttons.length === 0) {
|
|
|
+ html += `<div class="text-center text-gray-400 py-4 border border-dashed rounded">暂无按钮</div>`;
|
|
|
+ }
|
|
|
+ html += `</div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ html += `</section>`;
|
|
|
+ });
|
|
|
+
|
|
|
+ html += `
|
|
|
+ <div class="flex gap-4 justify-center py-6 border-t border-gray-200 mt-8 border-dashed border-2 rounded-xl bg-white shadow-sm">
|
|
|
+ <button onclick="addAssemblyBlock('image')" class="flex items-center gap-1.5 text-blue-600 font-medium hover:bg-blue-50 px-4 py-2 rounded transition"><i class="ph ph-image text-lg"></i>图片模块</button>
|
|
|
+ ${!hasPrivilege ? `<button onclick="addAssemblyBlock('privilege')" class="flex items-center gap-1.5 text-blue-600 font-medium hover:bg-blue-50 px-4 py-2 rounded transition"><i class="ph ph-list-dashes text-lg"></i>权益商品模块</button>` : ''}
|
|
|
+ <button onclick="addAssemblyBlock('richtext')" class="flex items-center gap-1.5 text-blue-600 font-medium hover:bg-blue-50 px-4 py-2 rounded transition"><i class="ph ph-text-align-left text-lg"></i>图文模块</button>
|
|
|
+ <button onclick="addAssemblyBlock('buttonGroup')" class="flex items-center gap-1.5 text-blue-600 font-medium hover:bg-blue-50 px-4 py-2 rounded transition"><i class="ph ph-hand-tap text-lg"></i>按钮模块</button>
|
|
|
+ </div>
|
|
|
+ </div>`;
|
|
|
+
|
|
|
+ document.getElementById('form-container').innerHTML = html;
|
|
|
+ }
|
|
|
+
|
|
|
+ // ==========================================
|
|
|
+ // 富文本功能 & 工具函数 (排序、上传、Toast)
|
|
|
+ // ==========================================
|
|
|
+
|
|
|
+ let rtTarget = { type: null, index: null };
|
|
|
+
|
|
|
+ function getRichTextToolbar(type, index = null) {
|
|
|
+ return `
|
|
|
+ <div class="bg-gray-50 border-b border-gray-300 px-3 py-2 flex gap-1 flex-wrap text-gray-400 items-center">
|
|
|
+ <button type="button" class="p-1.5 rounded cursor-not-allowed hover:bg-gray-200" title="字体大小"><i class="ph ph-text-t"></i></button>
|
|
|
+ <button type="button" class="p-1.5 rounded cursor-not-allowed hover:bg-gray-200" title="字体颜色"><i class="ph ph-text-a-under"></i></button>
|
|
|
+ <div class="w-px h-5 bg-gray-300 mx-1"></div>
|
|
|
+ <button type="button" class="p-1.5 rounded cursor-not-allowed hover:bg-gray-200" title="加粗"><i class="ph ph-text-b"></i></button>
|
|
|
+ <button type="button" class="p-1.5 rounded cursor-not-allowed hover:bg-gray-200" title="斜体"><i class="ph ph-text-italic"></i></button>
|
|
|
+ <button type="button" class="p-1.5 rounded cursor-not-allowed hover:bg-gray-200" title="下划线"><i class="ph ph-text-underline"></i></button>
|
|
|
+ <div class="w-px h-5 bg-gray-300 mx-1"></div>
|
|
|
+ <button type="button" class="p-1.5 rounded cursor-not-allowed hover:bg-gray-200" title="左对齐"><i class="ph ph-text-align-left"></i></button>
|
|
|
+ <button type="button" class="p-1.5 rounded cursor-not-allowed hover:bg-gray-200" title="居中对齐"><i class="ph ph-text-align-center"></i></button>
|
|
|
+ <button type="button" class="p-1.5 rounded cursor-not-allowed hover:bg-gray-200" title="右对齐"><i class="ph ph-text-align-right"></i></button>
|
|
|
+ <div class="w-px h-5 bg-gray-300 mx-1"></div>
|
|
|
+ <button type="button" class="p-1.5 rounded cursor-not-allowed hover:bg-gray-200" title="无序列表"><i class="ph ph-list-bullets"></i></button>
|
|
|
+ <button type="button" class="p-1.5 rounded cursor-not-allowed hover:bg-gray-200" title="有序列表"><i class="ph ph-list-numbers"></i></button>
|
|
|
+ <div class="w-px h-5 bg-gray-300 mx-1"></div>
|
|
|
+
|
|
|
+ <!-- 实际可用功能 -->
|
|
|
+ <button type="button" onclick="openRtLinkModal('${type}', ${index})" class="p-1.5 rounded hover:bg-gray-200 text-blue-600 transition font-medium" title="插入超链接"><i class="ph ph-link"></i> 链接</button>
|
|
|
+ <label class="p-1.5 rounded hover:bg-gray-200 cursor-pointer text-blue-600 transition font-medium flex items-center gap-1" title="插入图片">
|
|
|
+ <i class="ph ph-image"></i> 图片
|
|
|
+ <input type="file" class="hidden" accept="image/*" onchange="handleRichTextImage(event, '${type}', ${index})">
|
|
|
+ </label>
|
|
|
+ <label class="p-1.5 rounded hover:bg-gray-200 cursor-pointer text-blue-600 transition font-medium flex items-center gap-1" title="插入附件文件">
|
|
|
+ <i class="ph ph-paperclip"></i> 附件
|
|
|
+ <input type="file" class="hidden" onchange="handleRichTextFile(event, '${type}', ${index})">
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ }
|
|
|
+
|
|
|
+ function openRtLinkModal(type, index) {
|
|
|
+ rtTarget = { type, index };
|
|
|
+ document.getElementById('rt-link-url').value = '';
|
|
|
+ document.getElementById('rt-link-text').value = '';
|
|
|
+ document.getElementById('rt-link-modal-backdrop').classList.remove('hidden');
|
|
|
+ document.getElementById('rt-link-modal').classList.remove('hidden');
|
|
|
+ document.getElementById('rt-link-modal').classList.add('flex');
|
|
|
+ }
|
|
|
+
|
|
|
+ function closeRtLinkModal() {
|
|
|
+ document.getElementById('rt-link-modal-backdrop').classList.add('hidden');
|
|
|
+ document.getElementById('rt-link-modal').classList.add('hidden');
|
|
|
+ document.getElementById('rt-link-modal').classList.remove('flex');
|
|
|
+ }
|
|
|
+
|
|
|
+ function confirmRtLink() {
|
|
|
+ const url = document.getElementById('rt-link-url').value.trim();
|
|
|
+ const text = document.getElementById('rt-link-text').value.trim() || '点击查看';
|
|
|
+ if(!url) { showToast('请输入链接地址', 'error'); return; }
|
|
|
+
|
|
|
+ const html = `<a href="${url}" target="_blank" style="color:#2563eb; text-decoration:underline;">${text}</a>`;
|
|
|
+ appendToRichText(html);
|
|
|
+ closeRtLinkModal();
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleRichTextImage(event, type, index) {
|
|
|
+ const file = event.target.files[0];
|
|
|
+ if (!file) return;
|
|
|
+ const html = `\n<img src="[图片: ${file.name}]" style="max-width:100%; border-radius:4px; margin-top:8px;" />\n`;
|
|
|
+ rtTarget = { type, index };
|
|
|
+ appendToRichText(html);
|
|
|
+ event.target.value = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ function handleRichTextFile(event, type, index) {
|
|
|
+ const file = event.target.files[0];
|
|
|
+ if (!file) return;
|
|
|
+ const html = `\n<a href="[附件: ${file.name}]" target="_blank" style="color:#2563eb; text-decoration:underline; display:inline-block; margin-top:8px;">📎 ${file.name}</a>\n`;
|
|
|
+ rtTarget = { type, index };
|
|
|
+ appendToRichText(html);
|
|
|
+ event.target.value = '';
|
|
|
+ }
|
|
|
+
|
|
|
+ function appendToRichText(html) {
|
|
|
+ if (rtTarget.type === 'zone') {
|
|
|
+ zoneData.ruleModal.content += html;
|
|
|
+ } else if (rtTarget.type === 'assembly') {
|
|
|
+ tempAssemblyData.blocks[rtTarget.index].data.content += html;
|
|
|
+ }
|
|
|
+ markAsModified();
|
|
|
+ renderLayout();
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderSortPopover(type, index, maxCount) {
|
|
|
+ return `<div class="relative inline-block"><button onclick="toggleSortPopover('${type}', ${index}, event)" class="text-blue-500 bg-blue-50 p-1.5 rounded shadow-sm"><i class="ph ph-list-numbers"></i></button>
|
|
|
+ <div id="popover-${type}-${index}" class="hidden absolute right-0 top-full mt-2 z-50 w-48 bg-white border rounded-lg shadow-xl p-3 text-left">
|
|
|
+ <label class="block text-xs text-gray-700 mb-2">移动到序号：</label>
|
|
|
+ <div class="flex gap-2"><input type="number" id="sort-input-${type}-${index}" min="1" max="${maxCount}" value="${index + 1}" class="w-full px-2 py-1 border rounded text-sm outline-none"><button onclick="confirmSort('${type}', ${index})" class="bg-blue-600 text-white px-3 py-1 rounded text-sm">确定</button></div>
|
|
|
+ </div></div>`;
|
|
|
+ }
|
|
|
+
|
|
|
+ function toggleSortPopover(type, index, e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ const pid = `popover-${type}-${index}`;
|
|
|
+ document.querySelectorAll('[id^="popover-"]').forEach(el => { if(el.id !== pid) el.classList.add('hidden'); });
|
|
|
+ const p = document.getElementById(pid);
|
|
|
+ p.classList.toggle('hidden');
|
|
|
+ if(!p.classList.contains('hidden')) setTimeout(()=>document.getElementById(`sort-input-${type}-${index}`).select(), 50);
|
|
|
+ }
|
|
|
+
|
|
|
+ function confirmSort(type, oldIdx) {
|
|
|
+ const val = parseInt(document.getElementById(`sort-input-${type}-${oldIdx}`).value) - 1;
|
|
|
+ let arr;
|
|
|
+ if (type === 'homePrivilege') arr = homeData[currentTier].privileges;
|
|
|
+ else if (type === 'zoneCarousel') arr = zoneData.adCarousel;
|
|
|
+ else if (type === 'zoneExchange') arr = zoneData.exchangeConfig.items;
|
|
|
+ else if (type === 'echoPrivileges') arr = zoneData.echoPrivileges;
|
|
|
+ else if (type === 'echoCreditCards') arr = zoneData.echoCreditCards;
|
|
|
+ else if (type === 'assemblyBlock') arr = getCurrentAssemblyData().blocks;
|
|
|
+ else if (type.startsWith('assemblyPrivilege-')) arr = getCurrentAssemblyData().blocks[parseInt(type.split('-')[1])].data.items;
|
|
|
+ else if (type.startsWith('assemblyButton-')) arr = getCurrentAssemblyData().blocks[parseInt(type.split('-')[1])].data.buttons;
|
|
|
+
|
|
|
+ if (arr && val >= 0 && val < arr.length && val !== oldIdx) {
|
|
|
+ const item = arr.splice(oldIdx, 1)[0];
|
|
|
+ arr.splice(val, 0, item);
|
|
|
+ markAsModified();
|
|
|
+ }
|
|
|
+ renderLayout();
|
|
|
+ }
|
|
|
+
|
|
|
+ function uploadImageCallback(event, updateFn) {
|
|
|
+ const file = event.target.files[0];
|
|
|
+ if (file) { const r = new FileReader(); r.onload = e => updateFn(e.target.result); r.readAsDataURL(file); }
|
|
|
+ }
|
|
|
+
|
|
|
+ function showToast(msg, type = 'success') {
|
|
|
+ const t = document.getElementById('toast');
|
|
|
+ document.getElementById('toast-text').innerText = msg;
|
|
|
+
|
|
|
+ const icon = document.getElementById('toast-icon');
|
|
|
+ if(type === 'error') {
|
|
|
+ icon.className = 'ph ph-x-circle text-red-500 text-xl';
|
|
|
+ } else {
|
|
|
+ icon.className = 'ph ph-check-circle text-green-400 text-xl';
|
|
|
+ }
|
|
|
+
|
|
|
+ t.classList.remove('translate-x-full', 'opacity-0');
|
|
|
+ setTimeout(() => t.classList.add('translate-x-full', 'opacity-0'), 3000);
|
|
|
+ }
|
|
|
+
|
|
|
+ // ==========================================
|
|
|
+ // 链接弹窗动态处理
|
|
|
+ // ==========================================
|
|
|
+ function showLinkModal(menuType = null, listIndex = null) {
|
|
|
+
|
|
|
+ const targetMenu = menuType || currentMenu;
|
|
|
+
|
|
|
+ if (targetMenu === 'home') {
|
|
|
+ currentLinkAssemblyId = 'home';
|
|
|
+ } else if (targetMenu === 'zone') {
|
|
|
+ currentLinkAssemblyId = 'zone';
|
|
|
+ } else if (targetMenu === 'assembly') {
|
|
|
+ if (assemblyViewState === 'list' && listIndex !== null) {
|
|
|
+ currentLinkAssemblyId = assemblyList[listIndex].id;
|
|
|
+ } else if (assemblyViewState === 'edit' && tempAssemblyData) {
|
|
|
+ if (!tempAssemblyData.id) {
|
|
|
+ showToast('请先保存组装页再获取链接！', 'error');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ currentLinkAssemblyId = tempAssemblyData.id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!currentLinkAssemblyId) return;
|
|
|
+
|
|
|
+ document.getElementById('link-modal-content').innerHTML = `
|
|
|
+ <div class="flex gap-4 mb-2">
|
|
|
+ <div class="flex-1">
|
|
|
+ <label class="block text-xs font-medium text-gray-700 mb-1">Campaign ID</label>
|
|
|
+ <select id="modal-campaign-id" onchange="updateModalLinks()" class="w-full px-3 py-2 border border-gray-300 rounded text-sm outline-none focus:border-blue-500 bg-white">
|
|
|
+ <option value="">请选择 (无)</option>
|
|
|
+ <option value="CAMP202511">CAMP202511</option>
|
|
|
+ <option value="CAMP_WINTER">CAMP_WINTER</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1">
|
|
|
+ <label class="block text-xs font-medium text-gray-700 mb-1">Channel ID</label>
|
|
|
+ <select id="modal-channel-id" onchange="updateModalLinks()" class="w-full px-3 py-2 border border-gray-300 rounded text-sm outline-none focus:border-blue-500 bg-white">
|
|
|
+ <option value="">请选择 (无)</option>
|
|
|
+ <option value="CH_APP">APP推送</option>
|
|
|
+ <option value="CH_WECHAT">微信公众号</option>
|
|
|
+ </select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="modal-links-container" class="space-y-4"></div>
|
|
|
+ `;
|
|
|
+
|
|
|
+ updateModalLinks();
|
|
|
+
|
|
|
+ document.getElementById('link-modal-backdrop').classList.remove('hidden');
|
|
|
+ document.getElementById('link-modal').classList.remove('hidden');
|
|
|
+ document.getElementById('link-modal').classList.add('flex');
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateModalLinks() {
|
|
|
+ if(!currentLinkAssemblyId) return;
|
|
|
+
|
|
|
+ const campId = document.getElementById('modal-campaign-id').value;
|
|
|
+ const chanId = document.getElementById('modal-channel-id').value;
|
|
|
+
|
|
|
+ let queryParams = [];
|
|
|
+ if(campId) queryParams.push(`CampaignId=${campId}`);
|
|
|
+ if(chanId) queryParams.push(`Channelid=${chanId}`);
|
|
|
+ const queryStr = queryParams.length > 0 ? (currentLinkAssemblyId === 'home' || currentLinkAssemblyId === 'zone' ? '?' : '&') + queryParams.join('&') : '';
|
|
|
+
|
|
|
+ let basePath = '';
|
|
|
+ let isPublished = false;
|
|
|
+
|
|
|
+ if (currentLinkAssemblyId === 'home') {
|
|
|
+ basePath = 'home';
|
|
|
+ isPublished = pageStatus.home === 'published';
|
|
|
+ } else if (currentLinkAssemblyId === 'zone') {
|
|
|
+ basePath = 'zone';
|
|
|
+ isPublished = pageStatus.zone === 'published';
|
|
|
+ } else {
|
|
|
+ basePath = `assembly?id=${currentLinkAssemblyId}`;
|
|
|
+ const asm = assemblyList.find(a => a.id === currentLinkAssemblyId) || tempAssemblyData;
|
|
|
+ isPublished = asm && asm.status === 'published';
|
|
|
+ }
|
|
|
+
|
|
|
+ const prodH5Url = `https://hsbc.com/${basePath}${queryStr}`;
|
|
|
+ const prodAppUrl = `hsbc-app://${basePath}${queryStr}`;
|
|
|
+
|
|
|
+ const draftJoiner = (basePath === 'home' || basePath === 'zone') ? '?' : '&';
|
|
|
+ const testUrl = `https://test.hsbc.com/${basePath}${draftJoiner}draft=1${queryStr.replace('?', '&')}`;
|
|
|
+
|
|
|
+ let html = '';
|
|
|
+ if (isPublished) {
|
|
|
+ html += `
|
|
|
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm relative">
|
|
|
+ <div class="flex items-center gap-2 mb-3"><span class="w-2 h-2 rounded-full bg-green-500"></span><span class="font-bold text-gray-800">正式环境链接</span></div>
|
|
|
+ <div class="space-y-2">
|
|
|
+ <div class="flex gap-2 items-center">
|
|
|
+ <span class="text-xs text-gray-500 w-16">H5 链接</span>
|
|
|
+ <input type="text" readonly value="${prodH5Url}" class="flex-1 bg-gray-50 px-3 py-2 text-sm border border-gray-200 rounded text-gray-700 outline-none">
|
|
|
+ <button onclick="copyToClipboard('${prodH5Url}')" class="bg-blue-50 border border-blue-100 text-blue-600 px-4 py-2 rounded text-sm hover:bg-blue-100 font-medium whitespace-nowrap transition">复制</button>
|
|
|
+ </div>
|
|
|
+ <div class="flex gap-2 items-center">
|
|
|
+ <span class="text-xs text-gray-500 w-16">小程序/APP</span>
|
|
|
+ <input type="text" readonly value="${prodAppUrl}" class="flex-1 bg-gray-50 px-3 py-2 text-sm border border-gray-200 rounded text-gray-700 outline-none">
|
|
|
+ <button onclick="copyToClipboard('${prodAppUrl}')" class="bg-blue-50 border border-blue-100 text-blue-600 px-4 py-2 rounded text-sm hover:bg-blue-100 font-medium whitespace-nowrap transition">复制</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ }
|
|
|
+ html += `
|
|
|
+ <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm relative">
|
|
|
+ <div class="flex items-center gap-2 mb-3"><span class="w-2 h-2 rounded-full bg-blue-500"></span><span class="font-bold text-gray-800">草稿预览链接 (测试)</span></div>
|
|
|
+ <div class="flex gap-2 items-center">
|
|
|
+ <input type="text" readonly value="${testUrl}" class="flex-1 bg-gray-50 px-3 py-2 text-sm border border-gray-200 rounded text-gray-700 outline-none">
|
|
|
+ <button onclick="copyToClipboard('${testUrl}')" class="bg-blue-50 border border-blue-100 text-blue-600 px-4 py-2 rounded text-sm hover:bg-blue-100 font-medium whitespace-nowrap transition">复制</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ document.getElementById('modal-links-container').innerHTML = html;
|
|
|
+ }
|
|
|
+
|
|
|
+ function closeLinkModal() {
|
|
|
+ document.getElementById('link-modal-backdrop').classList.add('hidden');
|
|
|
+ document.getElementById('link-modal').classList.add('hidden');
|
|
|
+ document.getElementById('link-modal').classList.remove('flex');
|
|
|
+ currentLinkAssemblyId = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ function copyToClipboard(text) {
|
|
|
+ navigator.clipboard.writeText(text).then(() => showToast('链接已复制到剪贴板！'));
|
|
|
+ }
|
|
|
+
|
|
|
+ function toggleTagDropdown(e, i) { e.stopPropagation(); openTagDropdownIndex = (openTagDropdownIndex === i) ? null : i; renderLayout(); }
|
|
|
+ function filterTags(e, i) {
|
|
|
+ const k = e.target.value.toLowerCase();
|
|
|
+ document.querySelectorAll(`#tag-list-${i} label`).forEach(l => {
|
|
|
+ l.style.display = l.innerText.toLowerCase().includes(k) ? 'flex' : 'none';
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // ==========================================
|
|
|
+ // 组装页模块增删复制逻辑
|
|
|
+ // ==========================================
|
|
|
+ function handleCreateNewAssembly() {
|
|
|
+ editAssemblyIndex = null;
|
|
|
+ tempAssemblyData = createEmptyAssembly('');
|
|
|
+ assemblyViewState = 'edit';
|
|
|
+ markAsModified();
|
|
|
+ renderLayout();
|
|
|
+ }
|
|
|
+
|
|
|
+ function editAssembly(index) {
|
|
|
+ editAssemblyIndex = index;
|
|
|
+ tempAssemblyData = JSON.parse(JSON.stringify(assemblyList[index]));
|
|
|
+ assemblyViewState = 'edit';
|
|
|
+ renderLayout();
|
|
|
+ }
|
|
|
+
|
|
|
+ function deleteAssembly(index) {
|
|
|
+ if(confirm('确认要删除该组装页吗？此操作不可恢复。')) {
|
|
|
+ assemblyList.splice(index, 1);
|
|
|
+ showToast('删除成功');
|
|
|
+ renderLayout();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function backToAssemblyList() {
|
|
|
+ editAssemblyIndex = null;
|
|
|
+ tempAssemblyData = null;
|
|
|
+ assemblyViewState = 'list';
|
|
|
+ renderLayout();
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateAssemblyName(val) {
|
|
|
+ if (getCurrentAssemblyData()) {
|
|
|
+ getCurrentAssemblyData().name = val;
|
|
|
+ markAsModified();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function addAssemblyBlock(type) {
|
|
|
+ let newBlock = { type: type, id: generateBlockId(), data: {} };
|
|
|
+ if (type === 'image') newBlock.data = { imageUrl: '' };
|
|
|
+ if (type === 'privilege') newBlock.data = { title: '新权益标题', items: [{ id:'1', title:'模拟权益', desc:'描述' }] };
|
|
|
+ if (type === 'richtext') newBlock.data = { content: '<p>输入富文本内容...</p>' };
|
|
|
+ if (type === 'buttonGroup') newBlock.data = { buttons: [{ text: '点击跳转', link: '', style: 'primary', actionType: 'link' }] };
|
|
|
+ getCurrentAssemblyData().blocks.push(newBlock);
|
|
|
+ markAsModified();
|
|
|
+ renderLayout();
|
|
|
+ }
|
|
|
+
|
|
|
+ function duplicateAssemblyBlock(index) {
|
|
|
+ let block = getCurrentAssemblyData().blocks[index];
|
|
|
+ if (block.type === 'privilege') {
|
|
|
+ alert('权益商品模块每页仅限配置一个，无法复制！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let newBlock = JSON.parse(JSON.stringify(block));
|
|
|
+ newBlock.id = generateBlockId(); // 新ID防止重复
|
|
|
+ getCurrentAssemblyData().blocks.splice(index + 1, 0, newBlock);
|
|
|
+ markAsModified();
|
|
|
+ renderLayout();
|
|
|
+ }
|
|
|
+
|
|
|
+ function removeAssemblyBlock(index) {
|
|
|
+ if(confirm('确定删除该模块吗？')) {
|
|
|
+ getCurrentAssemblyData().blocks.splice(index, 1);
|
|
|
+ markAsModified();
|
|
|
+ renderLayout();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function addAssemblyButton(blockIndex) {
|
|
|
+ tempAssemblyData.blocks[blockIndex].data.buttons.push({
|
|
|
+ text: '新按钮', link: '', style: 'secondary',
|
|
|
+ actionType: 'link', dialog: { title: '', desc: '', confirmText: '确认', confirmLink: '' }
|
|
|
+ });
|
|
|
+ markAsModified();
|
|
|
+ renderLayout();
|
|
|
+ }
|
|
|
+
|
|
|
+ function updateAssemblyButtonDialog(blockIndex, btnIndex, field, value) {
|
|
|
+ let block = tempAssemblyData.blocks[blockIndex];
|
|
|
+ if (!block.data.buttons[btnIndex].dialog) {
|
|
|
+ block.data.buttons[btnIndex].dialog = { title: '', desc: '', confirmText: '确认', confirmLink: '' };
|
|
|
+ }
|
|
|
+ block.data.buttons[btnIndex].dialog[field] = value;
|
|
|
+ markAsModified();
|
|
|
+ }
|
|
|
+
|
|
|
+ switchMenu('home'); // Init
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|
Fade