LayUI 到 Bootstrap：JavaScript 代码重构实现模态框、复制功能与防红域名选择逻辑

将 LayUI 的 JavaScript 代码重构成 Bootstrap 的 JavaScript 代码，主要涉及 UI 组件的替换和事件绑定的调整。以下是重构后的代码： ```javascript function turl() { var id = $(this).data('id'); var url1 = "http://{$safe_url}/safe/index?id=" + id; var qrUrl = "/qrcode.php?size=290x290&data=" + url1; var modalContent = '<div class="modal-dialog">' + '<div class="modal-content">' + '<div class="modal-header">' + '<h5 class="modal-title">提链</h5>' + '<button type="button" class="close" data-dismiss="modal" aria-label="Close">' + '<span aria-hidden="true">&times;</span>' + '</button>' + '</div>' + '<div class="modal-body">' + '<div style="padding: 15px;">' + '<div style="margin-bottom: 10px;">' + '<div style="font-weight: bold; margin-bottom: 5px;">原始链接:</div>' + '<div style="word-break: break-all;">' + '<a href="' + url1 + '" target="_blank" style="color: #1E9FFF;">' + url1 + '</a>' + '</div>' + '</div>' + '<div id="domain-select-container"></div>' + '<div id="final-url" style="margin: 10px 0;"></div>' + '<div style="text-align: center; margin: 10px 0;">' + '<img src="' + qrUrl + '" alt="QR Code" style="width: 290px; height: 290px;"><br>' + '</div>' + '<div style="text-align: center; padding: 20px 0;">' + '<button id="copyBtn" class="btn btn-primary" data-clipboard-text="' + url1 + '">复制链接</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>'; var modal = $(modalContent).appendTo('body').modal({ show: true }); // 初始化复制功能 var clipboard = new ClipboardJS('#copyBtn'); clipboard.on('success', function(e) { alert('复制成功'); e.clearSelection(); }); clipboard.on('error', function() { alert('复制失败，请手动复制'); }); $.get("{:url('wxgroup/getDomains')}", function(res) { if (res.code == 1 && res.data.length > 0) { var domainSelect = '<div style="margin-bottom: 10px;">' + '<div style="font-weight: bold; margin-bottom: 5px;">选择防红域名:</div>' + '<select id="domain-select" class="form-control">' + '<option value="">请选择防红域名</option>'; res.data.forEach(function(domain) { domainSelect += '<option value="' + domain.domain + '">' + domain.domain + '</option>'; }); domainSelect += '</select></div>'; $('#domain-select-container').html(domainSelect); $('#domain-select').on('change', function() { var domain = $(this).val(); if (domain) { var base64Url = btoa(url1); var finalUrl = 'http://' + domain + '?c=' + base64Url; $('#final-url').html( '<div style="font-weight: bold; margin-bottom: 5px;">最终链接:</div>' + '<div style="word-break: break-all;">' + '<a href="' + finalUrl + '" target="_blank" style="color: #1E9FFF;">' + finalUrl + '</a>' + '</div>' ); $('#copyBtn').attr('data-clipboard-text', finalUrl); modal.find('img').attr('src', "/qrcode.php?size=290x290&data=" + encodeURIComponent(finalUrl)); } else { $('#final-url').html(''); $('#copyBtn').attr('data-clipboard-text', url1); modal.find('img').attr('src', qrUrl); } }); } }); } ``` 代码逻辑点： 1. 模态框的创建与显示：使用 Bootstrap 的模态框组件替换 LayUI 的 `layer.open`，并通过 `modal({ show: true })` 显示模态框。 2. 复制功能的初始化：使用 `ClipboardJS` 初始化复制功能，并在成功或失败时显示相应的提示信息。 3. 防红域名选择逻辑：通过 `$.get` 获取域名列表，并在选择域名时生成最终的防红链接，同时更新二维码和复制按钮的链接。 ######[AI写代码神器 | 1083点数解答 | 2025-03-11 15:17:09]