|
|
|
|
@ -1,80 +1,119 @@
|
|
|
|
|
(function () {
|
|
|
|
|
let locale = 'en';
|
|
|
|
|
|
|
|
|
|
// 获取模版列表
|
|
|
|
|
var getTemplateList = function () {
|
|
|
|
|
// 获取JSON数据
|
|
|
|
|
$.ajax({
|
|
|
|
|
url: 'http://www.dtviptvott.com:20018/template/list',
|
|
|
|
|
type: 'GET',
|
|
|
|
|
dataType: 'json',
|
|
|
|
|
success: function (response) {
|
|
|
|
|
console.log('请求成功:', response);
|
|
|
|
|
// 处理响应数据
|
|
|
|
|
$('#result').html(JSON.stringify(response, null, 2));
|
|
|
|
|
},
|
|
|
|
|
error: function (xhr, status, error) {
|
|
|
|
|
console.log('请求失败:', error);
|
|
|
|
|
},
|
|
|
|
|
requestFN({ url: 'list' }, function (data) {
|
|
|
|
|
data.forEach(function (item) {
|
|
|
|
|
item.content = JSON.parse(item.content);
|
|
|
|
|
});
|
|
|
|
|
console.log(data);
|
|
|
|
|
renderListItem(data);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
$(function () {
|
|
|
|
|
$.getJSON('data.json', function (data) {
|
|
|
|
|
var listPanel = $('#list-panel');
|
|
|
|
|
$.each(data, function (index, item) {
|
|
|
|
|
var listItem = `
|
|
|
|
|
<div class="list-item">
|
|
|
|
|
<img class="list-item-image" src="${item.mainData.image}" alt="${item.name}">
|
|
|
|
|
var renderListItem = function (list) {
|
|
|
|
|
var listPanel = $('#list-panel');
|
|
|
|
|
listPanel.empty();
|
|
|
|
|
$.each(list, function (index, item) {
|
|
|
|
|
let background = item.content?.welcomeData?.background || item.content?.mainData?.background || '';
|
|
|
|
|
let isImage = background.indexOf('http') !== -1;
|
|
|
|
|
let backgroundImage = isImage ? `url(${background})` : background;
|
|
|
|
|
var listItem = `
|
|
|
|
|
<div class="list-item" data-id="${item.id}">
|
|
|
|
|
<div class="list-item-image" style="background: ${backgroundImage} no-repeat center center / cover"></div>
|
|
|
|
|
<div class="list-item-content">
|
|
|
|
|
<span class="list-item-name">${item.name}</span>
|
|
|
|
|
<div class="list-item-actions">
|
|
|
|
|
<button class="action-btn">...</button>
|
|
|
|
|
<div class="action-menu">
|
|
|
|
|
<button class="copy-btn">复制</button>
|
|
|
|
|
<button class="delete-btn">删除</button>
|
|
|
|
|
<button class="edit-btn">编辑</button>
|
|
|
|
|
<button class="apply-btn">应用</button>
|
|
|
|
|
<button class="copy-btn">${userLangConfig[locale].list.copy}</button>
|
|
|
|
|
<button class="delete-btn">${userLangConfig[locale].list.delete}</button>
|
|
|
|
|
<button class="edit-btn">${userLangConfig[locale].list.edit}</button>
|
|
|
|
|
<button class="apply-btn">${userLangConfig[locale].list.apply}</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="list-item-date">
|
|
|
|
|
<span>更新时间：${item.updateTime}</span>
|
|
|
|
|
<span>${userLangConfig[locale].list.update_time}：${item.createTime}</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
`;
|
|
|
|
|
listPanel.append(listItem);
|
|
|
|
|
});
|
|
|
|
|
listPanel.append(listItem);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Action button click handler
|
|
|
|
|
listPanel.on('click', '.action-btn', function (e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
var menu = $(this).siblings('.action-menu');
|
|
|
|
|
$('.action-menu').not(menu).hide();
|
|
|
|
|
menu.toggle();
|
|
|
|
|
});
|
|
|
|
|
// 统一的事件处理函数，在文档加载后只绑定一次
|
|
|
|
|
var bindEvents = function () {
|
|
|
|
|
$(document).on('click', '.action-btn', function (e) {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
var menu = $(this).siblings('.action-menu');
|
|
|
|
|
$('.action-menu').not(menu).hide();
|
|
|
|
|
menu.toggle();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Hide menu when clicking outside
|
|
|
|
|
$(document).on('click', function () {
|
|
|
|
|
$('.action-menu').hide();
|
|
|
|
|
});
|
|
|
|
|
$(document).on('click', function () {
|
|
|
|
|
$('.action-menu').hide();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Event handlers for action menu buttons
|
|
|
|
|
listPanel.on('click', '.copy-btn', function () {
|
|
|
|
|
console.log('复制');
|
|
|
|
|
$(document).on('click', '.copy-btn', function () {
|
|
|
|
|
var id = $(this).closest('.list-item').data('id');
|
|
|
|
|
requestFN({ type: 'POST', url: `copy?id=${id}` }, function (data) {
|
|
|
|
|
getTemplateList();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
listPanel.on('click', '.delete-btn', function () {
|
|
|
|
|
console.log('删除');
|
|
|
|
|
$(document).on('click', '.delete-btn', function () {
|
|
|
|
|
var id = $(this).closest('.list-item').data('id');
|
|
|
|
|
requestFN({ type: 'POST', url: `deleteById?id=${id}` }, function (data) {
|
|
|
|
|
getTemplateList();
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
listPanel.on('click', '.edit-btn', function () {
|
|
|
|
|
console.log('编辑');
|
|
|
|
|
});
|
|
|
|
|
$(document).on('click', '.edit-btn', function () {
|
|
|
|
|
var id = $(this).closest('.list-item').data('id');
|
|
|
|
|
window.location.href = `index.html?id=${id}`;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
listPanel.on('click', '.apply-btn', function () {
|
|
|
|
|
console.log('应用');
|
|
|
|
|
$(document).on('click', '.apply-btn', function () {
|
|
|
|
|
var id = $(this).closest('.list-item').data('id');
|
|
|
|
|
requestFN({ type: 'POST', url: `apply?id=${id}` }, function (data) {
|
|
|
|
|
layer.msg(`${userLangConfig[locale].base.success}`);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var i18n = function () {
|
|
|
|
|
return new Promise((resolve) => {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
locale = 'zh-CN';
|
|
|
|
|
// locale = 'en';
|
|
|
|
|
// 设置语言
|
|
|
|
|
layui.i18n.set({
|
|
|
|
|
locale: locale,
|
|
|
|
|
messages: {
|
|
|
|
|
// 扩展其他语言包
|
|
|
|
|
en: userLangConfig.en,
|
|
|
|
|
'zh-CN': userLangConfig['zh-CN'],
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
// 渲染页面模板
|
|
|
|
|
const template = $('#template').html();
|
|
|
|
|
const html = layui.laytpl(template, { tagStyle: 'modern' }).render();
|
|
|
|
|
$('#root').html(html);
|
|
|
|
|
resolve();
|
|
|
|
|
}, 500);
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
$(function () {
|
|
|
|
|
(async function () {
|
|
|
|
|
// 国际化
|
|
|
|
|
await i18n();
|
|
|
|
|
|
|
|
|
|
getTemplateList();
|
|
|
|
|
|
|
|
|
|
getTemplateList();
|
|
|
|
|
bindEvents();
|
|
|
|
|
})();
|
|
|
|
|
});
|
|
|
|
|
})();
|
|
|
|
|
|
