bdrp-app/src/components/QRcode.vue

<script setup>
import QRCode from 'qrcode'
import UQRCode from 'uqrcodejs'
import { computed, getCurrentInstance, nextTick, onMounted, ref, toRefs, watch } from 'vue'
import { envConfig } from '@/constants/env'
import { readLocalFileAsBase64 } from '@/utils/appLocalFile'
import { setPosterMergePending } from '@/utils/posterRenderMergeBridge'
import ImageSaveGuide from './ImageSaveGuide.vue'
import '@/utils/textEncoderPolyfill'

const props = defineProps({
  linkIdentifier: {
    type: String,
    required: true,
  },
  mode: {
    type: String,
    default: 'promote', // 例如 "promote" | "invitation"
  },
})
const { linkIdentifier, mode } = toRefs(props)
/** 自定义组件内 canvas API 需传入实例；勿在异步回调里再调 getCurrentInstance()（常为 null） */
const componentInstance = getCurrentInstance()
const posterCanvasRefs = ref([]) // 用于绘制海报的canvas数组
/** APP：canvas 绘制缓冲区宽高（须与 drawImage 使用的一致，否则可能空白或裁切异常） */
const posterCanvasSizes = ref(/** @type {Record<number, { width: number, height: number }>} */({}))
/** App：二维码临时路径，用于叠在底图上预览（不依赖 canvas 导出图） */
const posterQrPath = ref(/** @type {Record<number, string>} */({}))
/** App：离屏 canvas 合成后导出的整图路径，仅用于保存相册 */
const posterCompositePath = ref(/** @type {Record<number, string>} */({}))
const currentIndex = ref(0) // 当前显示的海报索引
const postersGenerated = ref([]) // 标记海报是否已经生成过，将在onMounted中初始化
const show = defineModel('show')
const canvasIdPrefix = 'posterCanvas'
/**
 * App：大图合成用 renderjs（视图层真实 DOM + HTML5 Canvas），避免 legacy canvas 大图只导出左上角。
 * 二维码仍用下方小 legacy 画布 uqrcode + canvasToTempFilePath。
 * 合成在 renderjs 内 document.createElement('canvas')，不依赖页面里挂 id 的 canvas（App 上常取不到 DOM）。
 */
const posterMergeRequest = ref(/** @type {null | Record<string, unknown>} */(null))
/** APP 端生成二维码专用（与海报主 canvas 分离），供 uqrcodejs + uni.createCanvasContext 使用 */
const QR_GEN_CANVAS_ID = 'poster-qr-gen'
const QR_GEN_SIZE = 150

/** 设为 false 可关闭海报合成相关 console（真机调试时在 HBuilderX / 自定义基座 控制台看 [QRcode]） */
const QR_POSTER_DEBUG = true

function qlog(...args) {
  if (QR_POSTER_DEBUG)
    console.warn('[QRcode]', ...args)
}

const isWebPlatform = computed(() => {
  try {
    return uni.getSystemInfoSync().uniPlatform === 'web'
  }
  catch {
    return typeof window !== 'undefined'
  }
})

function showToast(options) {
  const message = typeof options === 'string' ? options : (options?.message || options?.title || '')
  if (!message)
    return
  uni.showToast({
    title: message,
    icon: options?.type === 'success' ? 'success' : 'none',
  })
}

// 微信环境检测
const isWeChat = computed(() => {
  if (typeof navigator === 'undefined')
    return false
  return /MicroMessenger/i.test(navigator.userAgent)
})

// 图片保存指引遮罩层相关
const showImageGuide = ref(false)
const currentImageUrl = ref('')
const imageGuideTitle = ref('')
const url = computed(() => {
  const baseUrl = (envConfig.siteOrigin || '').replace(/\/$/, '') || (typeof window !== 'undefined' ? window.location.origin : '')
  return mode.value === 'promote'
    ? `${baseUrl}/agent/promotionInquire/`
    : `${baseUrl}/agent/invitationAgentApply/`
})

// 海报图片数组
const posterImages = ref([])

/**
 * 二维码在设计稿中的坐标系（与 tg_qrcode / yq 等正式海报资源像素一致）。
 * 占位图等小尺寸资源必须通过 scaleQrRectForPoster 换算，否则 y=1620 等会画在画布外，看起来像「没有二维码」。
 */
const POSTER_DESIGN_PX = {
  promote: { width: 1242, height: 2208 },
  invitation: { width: 1242, height: 2208 },
}

/** getImageInfo 仍异常时的兜底（与 POSTER_DESIGN_PX 一致，便于坐标换算） */
const POSTER_SIZE_FALLBACK_PX = { width: 1242, height: 2208 }

/**
 * getImageInfo 在部分平台对 SVG 等异常资源返回 width/height ≤0，需兜底后再参与绘制与坐标换算。
 */
function normalizeImageSize(info, fallback) {
  const w = typeof info.width === 'number' ? info.width : 0
  const h = typeof info.height === 'number' ? info.height : 0
  if (w > 0 && h > 0)
    return info
  qlog('normalizeImageSize: invalid size, using fallback', { w, h, fallback })
  return { ...info, width: fallback.width, height: fallback.height }
}

/** 将设计稿上的二维码矩形换算为当前底图实际像素 */
function scaleQrRectForPoster(position, posterInfo, modeKey) {
  const design = POSTER_DESIGN_PX[modeKey] || POSTER_DESIGN_PX.promote
  const sx = posterInfo.width / design.width
  const sy = posterInfo.height / design.height
  const scale = Math.min(sx, sy)
  const x = position.x * sx
  const y = position.y < 0
    ? posterInfo.height + position.y * sy
    : position.y * sy
  const size = position.size * scale
  return { x, y, size }
}

// QR码位置配置（为每个海报单独配置）
const qrCodePositions = ref({
  promote: [
    { x: 405, y: 1270, size: 440 }, // tg_qrcode_1.png
    { x: 405, y: 1270, size: 440 }, // tg_qrcode_2.jpg
    { x: 405, y: 1270, size: 440 }, // tg_qrcode_3.jpg
    { x: 405, y: 1270, size: 440 }, // tg_qrcode_4.jpg
    { x: 405, y: 1270, size: 440 }, // tg_qrcode_5.jpg
    { x: 210, y: 1660, size: 340 }, // tg_qrcode_6.jpg
    { x: 405, y: 1270, size: 440 }, // tg_qrcode_7.jpg
    { x: 405, y: 1270, size: 440 }, // tg_qrcode_8.jpg
  ],
  // invitation模式的配置 (yq_qrcode)
  invitation: [
    { x: 405, y: -1590, size: 435 }, // yq_qrcode_1.png
  ],
})

function getCanvasId(index) {
  return `${canvasIdPrefix}-${index}`
}

/** H5：预览区中等比展示整图（contain），在弹窗轮播高度内完整可见、宽可不拉满 */
function posterCanvasContainStyle(index) {
  const w = posterCanvasSizes.value[index]?.width ?? POSTER_SIZE_FALLBACK_PX.width
  const h = posterCanvasSizes.value[index]?.height ?? POSTER_SIZE_FALLBACK_PX.height
  return {
    aspectRatio: `${w} / ${h}`,
    maxWidth: '100%',
    maxHeight: '100%',
    width: 'auto',
    height: 'auto',
    objectFit: 'contain',
    display: 'block',
  }
}

function dataUrlFromBase64(mime, base64) {
  return `data:${mime};base64,${base64}`
}

function imageMimeFromInfoType(type) {
  const t = (type || 'png').toLowerCase()
  if (t === 'jpg' || t === 'jpeg')
    return 'image/jpeg'
  return `image/${t}`
}

/**
 * App：renderjs 视图层合成整图，逻辑层收 dataUrl 后写入 _doc。
 * 底图/二维码均以 data URL 传入，避免跨源 file:// 导致画布 tainted。
 */
async function compositePosterWithRenderJs(index) {
  const posterSrc = posterImages.value[index]
  const posterInfoRaw = await getImageInfo(posterSrc)
  const posterInfo = normalizeImageSize(posterInfoRaw, POSTER_SIZE_FALLBACK_PX)
  const qrRel = posterQrPath.value[index]
  if (!qrRel)
    throw new Error('missing qr path')
  const qrInfoRaw = await getImageInfo(qrRel)
  const qrInfo = normalizeImageSize(qrInfoRaw, { width: QR_GEN_SIZE, height: QR_GEN_SIZE })

  const positions = qrCodePositions.value[mode.value]
  const position = positions[index] || positions[0]
  const { x: qrX, y: qrY, size: qrSize } = scaleQrRectForPoster(position, posterInfo, mode.value)

  const pw = posterInfo.width
  const ph = posterInfo.height

  posterCanvasSizes.value = {
    ...posterCanvasSizes.value,
    [index]: { width: pw, height: ph },
  }

  const posterB64 = await readLocalFileAsBase64(posterInfo.path)
  const qrB64 = await readLocalFileAsBase64(qrInfo.path)
  const posterDataUrl = dataUrlFromBase64(imageMimeFromInfoType(posterInfo.type), posterB64)
  const qrDataUrl = dataUrlFromBase64('image/png', qrB64)

  const path = await new Promise((resolve, reject) => {
    setPosterMergePending({ resolve, reject, index })
    posterMergeRequest.value = null
    nextTick(() => {
      posterMergeRequest.value = {
        posterDataUrl,
        qrDataUrl,
        w: pw,
        h: ph,
        qrx: qrX,
        qry: qrY,
        qrs: qrSize,
        nonce: Date.now(),
      }
    })
  })
  qlog('poster renderjs ok', { index, path: String(path).slice(0, 72), wh: [pw, ph] })
  return path
}

/** App：合成导出（预览与保存共用）。有缓存则复用。 */
async function runPosterCompositeExport(index) {
  const cached = posterCompositePath.value[index]
  if (cached)
    return cached

  const path = await compositePosterWithRenderJs(index)
  posterCompositePath.value = { ...posterCompositePath.value, [index]: path }
  return path
}

/**
 * 单例合成 canvas，并发调用会互相踩缓冲区；所有合成（生成预览 / 保存）串行排队。
 */
let _compositeExportQueueTail = Promise.resolve()

function scheduleCompositeExport(index) {
  const p = _compositeExportQueueTail.then(() => runPosterCompositeExport(index))
  _compositeExportQueueTail = p.catch(() => { })
  return p
}

// 处理轮播图切换事件
function onSwipeChange(payload) {
  const nextIndex = typeof payload === 'number'
    ? payload
    : Number(payload?.detail?.current ?? 0)
  currentIndex.value = nextIndex
  if (!postersGenerated.value[nextIndex]) {
    generatePoster(nextIndex)
  }
}

/** 推广模式 8 张底图，邀请模式 1 张；文件放在 `src/static/images/`，运行时为 `/static/images/...` */
const PROMOTE_POSTER_URLS = [
  '/static/images/tg_qrcode_1.png',
  '/static/images/tg_qrcode_2.png',
  '/static/images/tg_qrcode_3.png',
  '/static/images/tg_qrcode_4.png',
  '/static/images/tg_qrcode_5.png',
  '/static/images/tg_qrcode_6.png',
  '/static/images/tg_qrcode_7.png',
  '/static/images/tg_qrcode_8.png',
]
const INVITATION_POSTER_URLS = ['/static/images/yq_qrcode_1.png']

function loadPosterImages() {
  return mode.value === 'promote' ? [...PROMOTE_POSTER_URLS] : [...INVITATION_POSTER_URLS]
}

onMounted(() => {
  posterImages.value = loadPosterImages()
  postersGenerated.value = Array.from({ length: posterImages.value.length }).fill(false)
})

watch(mode, () => {
  posterImages.value = loadPosterImages()
  postersGenerated.value = Array.from({ length: posterImages.value.length }).fill(false)
  currentIndex.value = 0
  posterCanvasSizes.value = {}
  posterQrPath.value = {}
  posterCompositePath.value = {}
  if (show.value) {
    nextTick(() => {
      generatePoster(currentIndex.value)
    })
  }
})

watch(linkIdentifier, () => {
  postersGenerated.value = Array.from({ length: posterImages.value.length }).fill(false)
  posterCanvasSizes.value = {}
  posterQrPath.value = {}
  posterCompositePath.value = {}
  if (show.value) {
    nextTick(() => {
      generatePoster(currentIndex.value)
    })
  }
})

async function getImageInfo(src) {
  return await new Promise((resolve, reject) => {
    uni.getImageInfo({
      src,
      success: resolve,
      fail: reject,
    })
  })
}

async function getQRCodeDataUrl() {
  return await new Promise((resolve, reject) => {
    QRCode.toDataURL(
      generalUrl(),
      { width: QR_GEN_SIZE, margin: 0 },
      (err, qrCodeUrl) => {
        if (err) {
          reject(err)
          return
        }
        resolve(qrCodeUrl)
      },
    )
  })
}

/**
 * APP 端：qrcode 的 toDataURL 依赖 document.createElement('canvas')，在 App 中会报
 * “You need to specify a canvas element”。改用 uqrcodejs + uni canvas 生成临时图片路径。
 */
async function getQRCodeTempPathForApp() {
  const instance = componentInstance?.proxy
  const link = generalUrl()
  qlog('getQRCodeTempPathForApp start', { linkLen: link.length, hasProxy: !!instance, canvasId: QR_GEN_CANVAS_ID })
  const qr = new UQRCode()
  qr.data = link
  qr.size = QR_GEN_SIZE
  qr.margin = 0
  qr.make()
  const ctx = uni.createCanvasContext(QR_GEN_CANVAS_ID, instance)
  qr.canvasContext = ctx
  await qr.drawCanvas()

  await new Promise(resolve => setTimeout(resolve, 300))

  return await new Promise((resolve, reject) => {
    uni.canvasToTempFilePath({
      canvasId: QR_GEN_CANVAS_ID,
      width: QR_GEN_SIZE,
      height: QR_GEN_SIZE,
      destWidth: QR_GEN_SIZE,
      destHeight: QR_GEN_SIZE,
      fileType: 'png',
      success: (res) => {
        qlog('canvasToTempFilePath(qr) ok', String(res.tempFilePath).slice(0, 80))
        resolve(res.tempFilePath)
      },
      fail: (err) => {
        qlog('canvasToTempFilePath(qr) fail', err)
        reject(err)
      },
    }, instance)
  })
}

async function generatePosterByWeb(index) {
  const canvas = posterCanvasRefs.value[index]
  if (!canvas)
    return

  const ctx = canvas.getContext('2d')
  const posterImg = new Image()
  posterImg.src = posterImages.value[index]

  posterImg.onload = async () => {
    canvas.width = posterImg.width
    canvas.height = posterImg.height
    ctx.drawImage(posterImg, 0, 0)

    try {
      const qrCodeUrl = await getQRCodeDataUrl()
      const qrCodeImg = new Image()
      qrCodeImg.src = qrCodeUrl
      qrCodeImg.onload = () => {
        const positions = qrCodePositions.value[mode.value]
        const position = positions[index] || positions[0]
        const qrY = position.y < 0 ? posterImg.height + position.y : position.y
        ctx.drawImage(qrCodeImg, position.x, qrY, position.size, position.size)
        postersGenerated.value[index] = true
      }
    }
    catch (error) {
      console.error('生成二维码失败:', error)
    }
  }
}

async function generatePosterByUni(index) {
  try {
    let sys = {}
    try {
      sys = uni.getSystemInfoSync()
    }
    catch (e) {
      qlog('getSystemInfoSync fail', e)
    }
    qlog('generatePosterByUni start', {
      index,
      canvasId: getCanvasId(index),
      mode: mode.value,
      hasProxy: !!componentInstance?.proxy,
      uniPlatform: sys.uniPlatform,
      windowWidth: sys.windowWidth,
    })

    const posterSrc = posterImages.value[index]
    const posterInfoRaw = await getImageInfo(posterSrc)
    const posterInfo = normalizeImageSize(posterInfoRaw, POSTER_SIZE_FALLBACK_PX)
    qlog('poster getImageInfo', {
      src: typeof posterSrc === 'string' ? posterSrc.slice(0, 120) : posterSrc,
      path: posterInfo.path,
      w: posterInfo.width,
      h: posterInfo.height,
      rawWh: [posterInfoRaw.width, posterInfoRaw.height],
      type: posterInfo.type,
    })

    posterCanvasSizes.value = {
      ...posterCanvasSizes.value,
      [index]: { width: posterInfo.width, height: posterInfo.height },
    }
    await nextTick()

    const qrTempPath = await getQRCodeTempPathForApp()
    posterQrPath.value = { ...posterQrPath.value, [index]: qrTempPath }
    qlog('qr temp for composite', { index, path: String(qrTempPath).slice(0, 80) })

    const positions = qrCodePositions.value[mode.value]
    const position = positions[index] || positions[0]
    const { x: qrX, y: qrY, size: qrSize } = scaleQrRectForPoster(position, posterInfo, mode.value)
    qlog('scaled qr rect', { raw: position, qrX, qrY, qrSize, posterWh: [posterInfo.width, posterInfo.height] })

    await scheduleCompositeExport(index)
    postersGenerated.value[index] = true
  }
  catch (error) {
    qlog('generatePosterByUni ERROR', error)
    console.error('App海报绘制失败:', error)
    showToast('海报生成失败，请稍后重试')
  }
}

// 生成海报并合成二维码
async function generatePoster(index) {
  if (postersGenerated.value[index])
    return

  await nextTick()
  qlog('generatePoster', { index, isWeb: isWebPlatform.value, show: show.value })
  if (isWebPlatform.value)
    await generatePosterByWeb(index)
  else
    await generatePosterByUni(index)
}

// 监听 show 变化，show 为 true 时生成海报
watch(show, (newVal) => {
  if (newVal && !postersGenerated.value[currentIndex.value]) {
    generatePoster(currentIndex.value) // 当弹窗显示且当前海报未生成时生成海报
  }
})

// 微信环境保存图片
async function exportCurrentPosterDataUrl() {
  const canvas = posterCanvasRefs.value[currentIndex.value]
  if (!canvas)
    throw new Error('海报尚未生成完成')
  return canvas.toDataURL('image/png')
}

async function exportCurrentPosterTempFilePath() {
  const idx = currentIndex.value
  try {
    return await scheduleCompositeExport(idx)
  }
  catch (e) {
    console.error('导出合成海报失败:', e)
    throw e
  }
}

async function savePosterForWeChat() {
  try {
    const dataURL = await exportCurrentPosterDataUrl()
    currentImageUrl.value = dataURL
    imageGuideTitle.value = '保存图片到相册'
    showImageGuide.value = true
  }
  catch (error) {
    console.error('获取海报失败:', error)
    showToast('海报尚未生成完成，请稍后重试')
  }
}

// 关闭图片保存指引
function closeImageGuide() {
  showImageGuide.value = false
}

// 保存海报图片 - 多种保存方式（非微信环境）
async function savePosterByUni() {
  try {
    const tempFilePath = await exportCurrentPosterTempFilePath()
    await new Promise((resolve, reject) => {
      uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: resolve,
        fail: reject,
      })
    })
    showToast({ message: '图片已保存到相册' })
  }
  catch (error) {
    console.error('App 保存图片失败:', error)
    showToast({ message: '保存失败，请检查相册权限' })
  }
}

async function savePoster() {
  if (!isWebPlatform.value) {
    await savePosterByUni()
    return
  }

  try {
    const dataURL = await exportCurrentPosterDataUrl()
    const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    if (isMobile)
      await saveForMobile(dataURL)
    else
      saveForPC(dataURL)
  }
  catch (error) {
    console.error('导出海报失败:', error)
    showToast({ message: '海报尚未生成完成，请稍后重试' })
  }
}

// PC浏览器保存方式
function saveForPC(dataURL) {
  const a = document.createElement('a')
  a.href = dataURL
  a.download = '赤眉海报.png'
  a.click()
}

// 手机浏览器保存方式
async function saveForMobile(dataURL) {
  // 方法1: 尝试使用 File System Access API (Chrome 86+)
  const fileSystemSuccess = await saveWithFileSystemAPI(dataURL)
  if (fileSystemSuccess)
    return

  // 方法2: 尝试使用 Blob 和 URL.createObjectURL
  try {
    const blob = dataURLToBlob(dataURL)
    const url = URL.createObjectURL(blob)

    const a = document.createElement('a')
    a.href = url
    a.download = '赤眉海报.png'
    a.style.display = 'none'
    document.body.appendChild(a)
    a.click()
    document.body.removeChild(a)

    // 清理 URL 对象
    setTimeout(() => URL.revokeObjectURL(url), 100)

    showToast({ message: '图片已保存到相册' })
  }
  catch (error) {
    console.error('Blob保存失败:', error)
    // 方法3: 尝试使用 share API (支持分享到其他应用)
    const shareSuccess = await tryShareAPI(dataURL)
    if (!shareSuccess) {
      // 方法4: 降级到长按保存提示
      showLongPressTip(dataURL)
    }
  }
}

// 显示长按保存提示（非微信环境使用）
function showLongPressTip(dataURL) {
  // 设置遮罩层内容
  currentImageUrl.value = dataURL
  imageGuideTitle.value = '保存图片到相册'

  // 显示遮罩层
  showImageGuide.value = true
}

// 将 dataURL 转换为 Blob
function dataURLToBlob(dataURL) {
  const arr = dataURL.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new Blob([u8arr], { type: mime })
}

// 备用保存方法 - 使用 File System Access API (现代浏览器)
async function saveWithFileSystemAPI(dataURL) {
  if ('showSaveFilePicker' in window) {
    try {
      const blob = dataURLToBlob(dataURL)
      const fileHandle = await window.showSaveFilePicker({
        suggestedName: '赤眉海报.png',
        types: [{
          description: 'PNG images',
          accept: { 'image/png': ['.png'] },
        }],
      })

      const writable = await fileHandle.createWritable()
      await writable.write(blob)
      await writable.close()

      showToast({ message: '图片已保存' })
      return true
    }
    catch (error) {
      console.error('File System API 保存失败:', error)
      return false
    }
  }
  return false
}

// 尝试使用 Share API
async function tryShareAPI(dataURL) {
  if (navigator.share && navigator.canShare) {
    try {
      const blob = dataURLToBlob(dataURL)
      const file = new File([blob], '赤眉海报.png', { type: 'image/png' })

      if (navigator.canShare({ files: [file] })) {
        await navigator.share({
          title: '赤眉海报',
          text: '分享海报图片',
          files: [file],
        })
        showToast({ message: '图片已分享' })
        return true
      }
    }
    catch (error) {
      console.error('Share API 失败:', error)
    }
  }
  return false
}

function generalUrl() {
  return url.value + encodeURIComponent(linkIdentifier.value)
}

function copyUrl() {
  copyToClipboard(generalUrl())
}

// 复制链接
function copyToClipboard(text) {
  if (!isWebPlatform.value) {
    uni.setClipboardData({
      data: text,
      success: () => showToast({ message: '链接已复制！' }),
      fail: () => showToast({ message: '复制失败，请手动复制' }),
    })
    return
  }

  if (navigator.clipboard && window.isSecureContext) {
    // 支持 Clipboard API
    navigator.clipboard
      .writeText(text)
      .then(() => {
        showToast({ message: '链接已复制！' })
      })
      .catch((err) => {
        console.error('复制失败:', err)
      })
  }
  else {
    // 对于不支持 Clipboard API 的浏览器，使用 fallback 方法
    const textArea = document.createElement('textarea')
    textArea.value = text
    document.body.appendChild(textArea)
    textArea.select()
    try {
      document.execCommand('copy')
      showToast({ message: '链接已复制！' })
    }
    catch (err) {
      console.error('复制失败:', err)
    }
    finally {
      document.body.removeChild(textArea)
    }
  }
}
</script>

<script>
import { handlePosterRenderMergeDone, handlePosterRenderMergeFailed } from '@/utils/posterRenderMergeBridge'

export default {
  methods: {
    onPosterRenderMergeDone(e) {
      handlePosterRenderMergeDone(e?.dataUrl).catch((err) => {
        console.error('[QRcode] poster merge write failed', err)
      })
    },
    onPosterRenderMergeFailed(e) {
      handlePosterRenderMergeFailed(e?.err)
    },
  },
}
</script>

<script module="posterRender" lang="renderjs">
export default {
  methods: {
    onMergeReqChange(newVal, _oldVal, ownerInstance) {
      if (!newVal || !newVal.posterDataUrl || !newVal.qrDataUrl)
        return
      const c = document.createElement('canvas')
      c.width = newVal.w
      c.height = newVal.h
      const ctx = c.getContext('2d')
      if (!ctx) {
        ownerInstance.callMethod('onPosterRenderMergeFailed', { err: 'no_canvas_2d' })
        return
      }
      const p = new Image()
      p.onload = () => {
        const q = new Image()
        q.onload = () => {
          try {
            ctx.drawImage(p, 0, 0, newVal.w, newVal.h)
            ctx.drawImage(q, newVal.qrx, newVal.qry, newVal.qrs, newVal.qrs)
            const dataUrl = c.toDataURL('image/png')
            ownerInstance.callMethod('onPosterRenderMergeDone', { dataUrl })
          }
          catch (err) {
            ownerInstance.callMethod('onPosterRenderMergeFailed', { err: String(err) })
          }
        }
        q.onerror = () => ownerInstance.callMethod('onPosterRenderMergeFailed', { err: 'qr_image_load' })
        q.src = newVal.qrDataUrl
      }
      p.onerror = () => ownerInstance.callMethod('onPosterRenderMergeFailed', { err: 'poster_image_load' })
      p.src = newVal.posterDataUrl
    },
  },
}
</script>

<template>
  <!-- 放在弹窗外，避免 wd-popup 关闭时子树未挂载导致 APP 无法 createCanvasContext -->
  <canvas v-if="!isWebPlatform" :id="QR_GEN_CANVAS_ID" :canvas-id="QR_GEN_CANVAS_ID" class="poster-qr-gen-canvas" />
  <!-- App：仅作 renderjs 的 change 锚点；真正画布在 renderjs 里 createElement('canvas') -->
  <view v-if="!isWebPlatform" class="poster-renderjs-anchor" :poster-merge-req="posterMergeRequest"
    :change:poster-merge-req="posterRender.onMergeReqChange" aria-hidden="true" />
  <wd-popup v-model="show" round position="bottom" :style="{ maxHeight: '95vh' }">
    <view class="qrcode-popup-container">
      <view class="qrcode-content">
        <swiper class="poster-swiper rounded-lg shadow sm:rounded-xl" indicator-color="white" circular indicator-dots
          @change="onSwipeChange">
          <swiper-item v-for="(_, index) in posterImages" :key="index" class="poster-swiper-item">
            <view class="poster-canvas-box">
              <template v-if="isWebPlatform">
                <view class="poster-preview-box web-preview">
                  <canvas :id="getCanvasId(index)" :ref="(el) => (posterCanvasRefs[index] = el)"
                    :canvas-id="getCanvasId(index)" :width="posterCanvasSizes[index]?.width ?? 300"
                    :height="posterCanvasSizes[index]?.height ?? 300" :style="posterCanvasContainStyle(index)"
                    class="poster-canvas poster-canvas--h5-contain rounded-lg sm:rounded-xl" />
                </view>
              </template>
              <template v-else>
                <!-- App：预览与保存同源；aspectFit 在轮播高度内整图可见，等比、宽可不拉满 -->
                <view v-if="posterCompositePath[index]" class="poster-app-preview">
                  <image :src="posterCompositePath[index]" mode="aspectFit"
                    class="poster-app-composite rounded-lg sm:rounded-xl" />
                </view>
                <view v-else class="poster-preview-placeholder">
                  <text class="poster-preview-placeholder-text">
                    海报生成中…
                  </text>
                </view>
              </template>
            </view>
          </swiper-item>
        </swiper>
      </view>
      <view v-if="mode === 'promote'" class="swipe-tip mb-1 px-2 text-center text-xs text-gray-700 sm:mb-2 sm:text-sm">
        <text class="swipe-icon">
          ←
        </text> 左右滑动切换海报
        <text class="swipe-icon">
          →
        </text>
      </view>
      <wd-divider class="my-2 sm:my-3">
        保存与复制
      </wd-divider>

      <view class="flex items-center justify-around px-4 pb-3 sm:pb-4">
        <!-- 微信环境：保存与复制 -->
        <template v-if="isWeChat">
          <view class="flex flex-col cursor-pointer items-center justify-center" @click="savePosterForWeChat">
            <image src="/static/images/icon_share_img.svg" class="share-icon h-9 w-9 rounded-full sm:h-10 sm:w-10" />
            <view class="mt-1 text-center text-xs text-gray-600">
              保存图片
            </view>
          </view>
          <view class="flex flex-col cursor-pointer items-center justify-center" @click="copyUrl">
            <image src="/static/images/icon_share_url.svg" class="share-icon h-9 w-9 rounded-full sm:h-10 sm:w-10" />
            <view class="mt-1 text-center text-xs text-gray-600">
              复制链接
            </view>
          </view>
        </template>
        <!-- 非微信环境：显示保存和复制按钮 -->
        <template v-else>
          <view class="flex flex-col cursor-pointer items-center justify-center" @click="savePoster">
            <image src="/static/images/icon_share_img.svg" class="share-icon h-9 w-9 rounded-full sm:h-10 sm:w-10" />
            <view class="mt-1 text-center text-xs text-gray-600">
              保存图片
            </view>
          </view>
          <view class="flex flex-col cursor-pointer items-center justify-center" @click="copyUrl">
            <image src="/static/images/icon_share_url.svg" class="share-icon h-9 w-9 rounded-full sm:h-10 sm:w-10" />
            <view class="mt-1 text-center text-xs text-gray-600">
              复制链接
            </view>
          </view>
        </template>
      </view>
    </view>
  </wd-popup>

  <!-- 图片保存指引遮罩层 -->
  <ImageSaveGuide :show="showImageGuide" :image-url="currentImageUrl" :title="imageGuideTitle"
    @close="closeImageGuide" />
</template>

<style lang="scss" scoped>
.qrcode-popup-container {
  display: flex;
  flex-direction: column;
  max-height: 95vh;
  overflow: hidden;
}

/* 移出可视区域，避免与海报轮播重叠；尺寸需与 QR_GEN_SIZE 一致 */
.poster-qr-gen-canvas {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 150px;
  height: 150px;
  overflow: hidden;
}

.qrcode-content {
  flex-shrink: 0;
  padding: 0.75rem;
}

/* 小屏设备优化 */
@media (max-width: 375px) {
  .qrcode-content {
    padding: 0.5rem;
  }
}

/* 中等及以上屏幕 */
@media (min-width: 640px) {
  .qrcode-content {
    padding: 1rem;
  }
}

.poster-swiper {
  height: calc(95vh - 180px);
  min-height: 300px;
  max-height: 500px;
  width: 100%;
}

/* 轮播项铺满高度，内部再「contain」缩放海报，避免 canvas 被 100%×100% 非等比拉伸、看起来像放大裁切 */
.poster-swiper-item {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-canvas-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
}

.poster-canvas-box>view {
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
}

/* App：在轮播固定高度内等比居中，整图可见（不强制拉满宽） */
.poster-app-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.poster-app-composite {
  width: 100%;
  height: 100%;
}

/* App：renderjs 属性绑定锚点（不占布局） */
.poster-renderjs-anchor {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  z-index: -9999;
}

.poster-preview-box.web-preview {
  width: 100%;
  height: 100%;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-canvas--h5-contain {
  margin: 0 auto;
}

.poster-preview-placeholder {
  width: 100%;
  height: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-preview-placeholder-text {
  font-size: 14px;
  color: #999;
}

/* 小屏设备：更小的海报高度 */
@media (max-width: 375px) {
  .poster-swiper {
    height: calc(95vh - 160px);
    min-height: 280px;
    max-height: 400px;
  }
}

/* 中等屏幕 */
@media (min-width: 640px) and (max-width: 767px) {
  .poster-swiper {
    height: calc(95vh - 190px);
    max-height: 520px;
  }
}

/* 大屏幕 */
@media (min-width: 768px) {
  .poster-swiper {
    height: calc(95vh - 200px);
    max-height: 600px;
  }
}

/* H5：未加 contain 类名时兜底（当前 web 分支已用 poster-canvas--h5-contain） */
.poster-canvas {
  display: block;
}

.swipe-tip {
  animation: fadeInOut 2s infinite;
  flex-shrink: 0;
}

.swipe-icon {
  display: inline-block;
  animation: slideLeftRight 1.5s infinite;
  font-size: 14px;
}

@media (min-width: 640px) {
  .swipe-icon {
    font-size: 16px;
  }
}

.share-icon {
  transition: transform 0.2s ease;
}

.share-icon:active {
  transform: scale(0.95);
}

@keyframes fadeInOut {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }
}

@keyframes slideLeftRight {

  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(5px);
  }
}

/* 优化 wd-divider 在小屏幕上的间距 */
:deep(.wd-divider) {
  margin: 0.5rem 0;
}

@media (min-width: 640px) {
  :deep(.wd-divider) {
    margin: 0.75rem 0;
  }
}
</style>