vue3-mgt-template/demoHtml/flex/js/list.js

(function () {
    // 获取模版列表
    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);
            },
        });
    };

    $(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}">
                        <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>
                                </div>
                            </div>
                        </div>
                        <div class="list-item-date">
                            <span>更新时间：${item.updateTime}</span>
                        </div>
                    </div>
                `;
                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();
            });

            // Hide menu when clicking outside
            $(document).on('click', function () {
                $('.action-menu').hide();
            });

            // Event handlers for action menu buttons
            listPanel.on('click', '.copy-btn', function () {
                console.log('复制');
            });

            listPanel.on('click', '.delete-btn', function () {
                console.log('删除');
            });

            listPanel.on('click', '.edit-btn', function () {
                console.log('编辑');
            });

            listPanel.on('click', '.apply-btn', function () {
                console.log('应用');
            });
        });

        getTemplateList();
    });
})();