Book

 · 12 days ago

share_image_controller.js



import { BridgeComponent } from "@hotwired/hotwire-native-bridge"
export default class extends BridgeComponent {
  static component = "share"
  static targets = ["button"]
  static values = {
    url: String,           // 生成图片的 API endpoint
    generating: Boolean    // 是否正在生成
  }
  async share(event) {
    event.preventDefault()
    if (this.generatingValue) return
    this.generatingValue = true
    this.updateButtonState()
    try {
      // 1. 请求服务器生成图片
      const response = await fetch(this.urlValue, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
        }
      })
      if (!response.ok) throw new Error('Failed to generate image')
      const data = await response.json()
      // 2. 发送 share 事件到 iOS,直接触发分享面板
      this.send("share", { url: data.image_url })
    } catch (error) {
      console.error('Share error:', error)
      alert('生成图片失败,请重试')
    } finally {
      this.generatingValue = false
      this.updateButtonState()
    }
  }
  updateButtonState() {
    if (this.hasButtonTarget) {
      this.buttonTarget.disabled = this.generatingValue
      this.buttonTarget.textContent = this.generatingValue ? '生成中...' : '分享图片'
    }
  }
}

Download Pickful App

Better experience on mobile

iOS QR

iOS

Android QR

Android

APK QR

APK