ss_new_ui_skin_and_page/js/mp_toast/toast.js

/**
 * H5版本的Toast提示工具
 */

// Toast管理器
const toastManager = {
  toastElement: null,
  toastTimer: null,

  // 显示Toast
  show(message, duration = 3000, type = 'info') {
    // 清除之前的Toast
    this.hide()

    // 创建Toast元素
    this.toastElement = document.createElement('div')
    this.toastElement.className = `h5-toast h5-toast-${type}`
    this.toastElement.textContent = message

    // 添加样式（如果还没有添加）
    if (!document.getElementById('h5-toast-style')) {
      const style = document.createElement('style')
      style.id = 'h5-toast-style'
      style.textContent = `
        .h5-toast {
          position: fixed;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          padding: 12px 20px;
          border-radius: 6px;
          font-size: 14px;
          z-index: 10001;
          max-width: 80%;
          text-align: center;
          opacity: 0;
          transition: opacity 0.3s ease;
        }
        .h5-toast.show {
          opacity: 1;
        }
        .h5-toast-info {
          background: rgba(0, 0, 0, 0.8);
          color: white;
        }
        .h5-toast-success {
          background: rgba(40, 167, 69, 0.9);
          color: white;
        }
        .h5-toast-warning {
          background: rgba(255, 193, 7, 0.9);
          color: #212529;
        }
        .h5-toast-error {
          background: rgba(220, 53, 69, 0.9);
          color: white;
        }
      `
      document.head.appendChild(style)
    }

    // 添加到页面
    document.body.appendChild(this.toastElement)

    // 显示动画
    setTimeout(() => {
      this.toastElement.classList.add('show')
    }, 10)

    // 自动隐藏
    this.toastTimer = setTimeout(() => {
      this.hide()
    }, duration)
  },

  // 隐藏Toast
  hide() {
    if (this.toastTimer) {
      clearTimeout(this.toastTimer)
      this.toastTimer = null
    }

    if (this.toastElement) {
      this.toastElement.classList.remove('show')
      setTimeout(() => {
        if (this.toastElement && this.toastElement.parentNode) {
          document.body.removeChild(this.toastElement)
        }
        this.toastElement = null
      }, 300)
    }
  }
}

// 全局Toast函数
function showToastEffect(message, duration = 3000, type = 'info') {
  toastManager.show(message, duration, type)
}

// 导出到全局
window.showToastEffect = showToastEffect
window.toastManager = toastManager

console.log('✅ H5 Toast工具已加载')