contact-subscribe.js

(function contactSubscribeBootstrap() {
  const QR_IMAGE_PATH = '/add_weichat/personal.jpg';
  const STYLE_ID = 'contact-subscribe-style';
  const MODAL_ID = 'contact-subscribe-modal';

  function injectStyles() {
    if (document.getElementById(STYLE_ID)) {
      return;
    }

    const style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = `
      .contact-subscribe-modal {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(15, 23, 42, 0.55);
        backdrop-filter: blur(8px);
        z-index: 10000;
      }

      .contact-subscribe-modal.is-open {
        display: flex;
      }

      .contact-subscribe-dialog {
        width: min(420px, 100%);
        background: rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(226, 232, 240, 0.9);
        border-radius: 28px;
        padding: 28px;
        box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18);
        position: relative;
        text-align: center;
      }

      .contact-subscribe-close {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 50%;
        background: rgba(15, 23, 42, 0.06);
        color: #475569;
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
      }

      .contact-subscribe-title {
        margin: 0 0 10px;
        font-size: 22px;
        font-weight: 800;
        color: #0f172a;
      }

      .contact-subscribe-copy {
        margin: 0 0 20px;
        font-size: 14px;
        line-height: 1.7;
        color: #64748b;
      }

      .contact-subscribe-qr {
        display: block;
        width: min(240px, 72vw);
        height: auto;
        margin: 0 auto 16px;
        border-radius: 20px;
        border: 1px solid #e2e8f0;
        background: #fff;
      }

      .contact-subscribe-tip {
        margin: 0;
        font-size: 12px;
        line-height: 1.6;
        color: #94a3b8;
      }
    `;

    document.head.appendChild(style);
  }

  function createModal() {
    const existing = document.getElementById(MODAL_ID);
    if (existing) {
      return existing;
    }

    const modal = document.createElement('div');
    modal.id = MODAL_ID;
    modal.className = 'contact-subscribe-modal';
    modal.innerHTML = `
      <div class="contact-subscribe-dialog" role="dialog" aria-modal="true" aria-labelledby="contact-subscribe-title">
        <button type="button" class="contact-subscribe-close" aria-label="关闭">×</button>
        <h3 class="contact-subscribe-title" id="contact-subscribe-title">联系订阅</h3>
        <p class="contact-subscribe-copy">扫码添加微信，咨询会员订阅、功能使用或合作细节。</p>
        <img class="contact-subscribe-qr" src="${QR_IMAGE_PATH}" alt="联系订阅微信二维码" />
        <p class="contact-subscribe-tip">如果二维码未加载，请确认本地静态资源目录 ` + '`/add_weichat/personal.jpg`' + ` 可访问。</p>
      </div>
    `;

    document.body.appendChild(modal);
    return modal;
  }

  function openModal() {
    const modal = createModal();
    modal.classList.add('is-open');
    document.body.style.overflow = 'hidden';
  }

  function closeModal() {
    const modal = document.getElementById(MODAL_ID);
    if (!modal) {
      return;
    }
    modal.classList.remove('is-open');
    document.body.style.overflow = '';
  }

  function bindModalEvents() {
    const modal = createModal();
    const closeButton = modal.querySelector('.contact-subscribe-close');

    closeButton.addEventListener('click', closeModal);

    modal.addEventListener('click', (event) => {
      if (event.target === modal) {
        closeModal();
      }
    });

    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape') {
        closeModal();
      }
    });
  }

  function bindTriggers() {
    document.querySelectorAll('[data-contact-subscribe]').forEach((element) => {
      if (element.dataset.contactSubscribeBound === 'true') {
        return;
      }

      element.dataset.contactSubscribeBound = 'true';
      element.addEventListener('click', (event) => {
        event.preventDefault();
        openModal();
      });
    });
  }

  function initContactSubscribe() {
    injectStyles();
    bindModalEvents();
    bindTriggers();
  }

  window.ContactSubscribe = {
    init: initContactSubscribe,
    open: openModal,
    close: closeModal,
    qrImagePath: QR_IMAGE_PATH
  };

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initContactSubscribe, { once: true });
  } else {
    initContactSubscribe();
  }
})();