cfc/cfc-frontend/components/ContentSharePoster.vue

<template>
  <view class="poster-overlay" v-if="show" @click.self="$emit('close')">
    <view class="poster-container">
      <canvas canvas-id="contentPosterCanvas" class="poster-canvas" id="contentPosterCanvas"></canvas>
      <!-- 模板选择（管理端定义的模板；未配置任何模板时不显示选择行） -->
      <view class="poster-tpl-row" v-if="serverTemplates.length > 0">
        <view class="tpl-label">海报模板</view>
        <view class="tpl-options">
          <view
            v-for="tpl in serverTemplates"
            :key="'tpl_' + tpl.id"
            class="tpl-option"
            :class="{ 'tpl-active': activeTemplateId === tpl.id }"
            @click="switchTemplate(tpl)"
          >
            <view class="tpl-dot" :style="{ background: tpl.mainColor }"></view>
            <text class="tpl-text">{{ tpl.name }}</text>
          </view>
        </view>
      </view>
      <!-- 背景颜色选择（渐变模板可用） -->
      <view class="poster-bg-row" v-if="template === 'gradient'">
        <view class="tpl-label">背景色</view>
        <view class="bg-options">
          <view
            v-for="(c, i) in bgOptions"
            :key="'bg_' + i"
            class="bg-option"
            :class="{ 'bg-active': bgColor === c }"
            :style="{ background: c }"
            @click="switchBgColor(c)"
          ></view>
        </view>
      </view>
      <view class="poster-actions">
        <button class="poster-btn save" @click="savePoster">保存到相册</button>
      </view>
    </view>
  </view>
</template>

<script>
import { getFontScale } from '@/utils/fontScale.js'

export default {
  name: 'ContentSharePoster',
  props: {
    show: { type: Boolean, default: false },
    title: { type: String, default: '' },
    coverImage: { type: String, default: '' },
    qrCodeBase64: { type: String, default: '' },
    typeLabel: { type: String, default: '好物推荐' },
    dimensionCode: { type: String, default: '' },
    summary: { type: String, default: '' },
    priceText: { type: String, default: '' },
    ctaText: { type: String, default: '长按识别二维码 · 查看详情' },
    inviteText: { type: String, default: '' },
    // 海报模板: gradient(default) | minimal | card
    template: { type: String, default: 'gradient' },
    // 自定义背景色（覆盖模板默认背景）
    bgColor: { type: String, default: '' },
    // 二维码尺寸覆盖（默认150rpx，建议活动类可用 100 缩小）
    qrSizeOverride: { type: Number, default: 150 },
    // 五维能量数据卡：{ label?: String, overall?: Number, dims: [{ key, label, score, color }] }
    // 传 null 时不画数据卡，按 coverImage -> brandFallback -> 占位图 顺序降级（原有行为不变）
    energyData: { type: Object, default: null },
    // 无 energyData 且 coverImage 为空时，是否用品牌渐变卡替代"暂无封面图"占位
    brandFallback: { type: Boolean, default: false },
    // Web 管理端定义的模板列表（[{id, name, templateKey, mainColor, darkColor, lightColor, bgColors, qrSize}]）
    // 传空数组时使用内置三套模板（原有行为不变）
    templates: { type: Array, default: () => [] }
  },
  watch: {
    show(val) {
      if (val) {
        this.$nextTick(function() {
          setTimeout(this.drawPoster.bind(this), 300)
        }.bind(this))
      }
    },
    // 模板列表异步到达：无选中或选中项已失效时默认选第一个，并通过 emit 同步父页面
    templates: {
      immediate: true,
      handler: function(list) {
        if (this.serverTemplates.length === 0) return
        if (!this.getActiveTemplate()) {
          this.applyTemplate(this.serverTemplates[0])
        }
      }
    }
  },
  computed: {
    serverTemplates: function() {
      var list = this.templates || []
      var out = []
      for (var i = 0; i < list.length; i++) {
        if (list[i] && list[i].id) out.push(list[i])
      }
      return out
    },
    // 当前选中的管理端模板（无则为 null）
    activeTemplate: function() {
      if (!this.activeTemplateId) return null
      var list = this.serverTemplates
      for (var i = 0; i < list.length; i++) {
        if (String(list[i].id) === String(this.activeTemplateId)) return list[i]
      }
      return null
    },
    // 背景色板：优先用管理端模板的配置，其次用内置七色
    bgOptions: function() {
      var tpl = this.activeTemplate
      if (tpl && tpl.bgColors) {
        try {
          var arr = JSON.parse(tpl.bgColors)
          if (arr && arr.length > 0) return arr
        } catch (e) {}
      }
      return this.bgColors
    },
    // 二维码尺寸：管理端模板配置优先，其次 qrSizeOverride prop
    effectiveQrSize: function() {
      var tpl = this.activeTemplate
      if (tpl && tpl.qrSize && tpl.qrSize > 0) return tpl.qrSize
      return this.qrSizeOverride || 150
    }
  },
  data() {
    return {
      // 选中的管理端模板 id（未使用管理端模板时为 null）
      activeTemplateId: null,
      // 可选的背景色（渐变模板下展示）
      bgColors: ['#FF8C42', '#6366F1', '#F59E0B', '#10B981', '#FF6B9D', '#1E293B', '#FFFFFF']
    }
  },
  methods: {
    // 海报画布文字按用户字号系数放大（画布有固定排版，放大区间比页面更保守，防止溢出裁切）
    _fs(size) {
      var scale = getFontScale()
      if (!scale || scale < 0.9) scale = 0.9
      if (scale > 1.25) scale = 1.25
      return Math.round(size * scale)
    },
    // 选中的管理端模板（返回对象或 null）
    getActiveTemplate: function() {
      if (!this.activeTemplateId) return null
      var list = this.serverTemplates
      for (var i = 0; i < list.length; i++) {
        if (String(list[i].id) === String(this.activeTemplateId)) return list[i]
      }
      return null
    },
    // 应用管理端模板：选中 + 同步模板类型/背景色到父页面（背景色取模板色板第一个）
    applyTemplate: function(tpl) {
      if (!tpl) return
      this.activeTemplateId = tpl.id
      this.$emit('update:template', tpl.templateKey)
      var bg = tpl.mainColor
      if (tpl.bgColors) {
        try {
          var arr = JSON.parse(tpl.bgColors)
          if (arr && arr.length > 0) bg = arr[0]
        } catch (e) {}
      }
      this.$emit('update:bgColor', bg)
      var self = this
      this.$nextTick(function() {
        setTimeout(self.drawPoster.bind(self), 100)
      })
    },
    // 海报模板配色（管理端模板配色优先，其次按维度取内置配色）
    getColors: function() {
      var tpl = this.getActiveTemplate()
      if (tpl) {
        return {
          main: tpl.mainColor || '#F97316',
          dark: tpl.darkColor || '#EA580C',
          light: tpl.lightColor || '#FFF7ED'
        }
      }
      var map = {
        body: { main: '#FF8C42', dark: '#EA580C', light: '#FFF7ED' },
        mind: { main: '#FF6B9D', dark: '#DB2777', light: '#FDF2F8' },
        wisdom: { main: '#6366F1', dark: '#4F46E5', light: '#EEF2FF' },
        action: { main: '#10B981', dark: '#059669', light: '#ECFDF5' },
        wealth: { main: '#F59E0B', dark: '#D97706', light: '#FFFBEB' }
      }
      return map[this.dimensionCode] || { main: '#F97316', dark: '#EA580C', light: '#FFF7ED' }
    },
    // 海报模板配色
    getTemplateConfig() {
      var colors = this.getColors()
      var template = this.template || 'gradient'
      var bgColor = this.bgColor || ''
      // 梯度背景模板
      if (template === 'gradient') {
        return { template: 'gradient', bgColor: bgColor || colors.main, main: colors.main, dark: colors.dark, light: colors.light }
      }
      // 极简模板：深色背景+白色卡片（管理端模板的 darkColor 作为默认底色）
      if (template === 'minimal') {
        var tpl = this.getActiveTemplate()
        var dark = tpl ? (bgColor || colors.dark) : (bgColor || '#1E293B')
        return { template: 'minimal', bgColor: dark, main: colors.main, dark: colors.dark, light: colors.light }
      }
      // 卡片模板：浅色背景+彩色顶栏
      return { template: 'card', bgColor: bgColor || '#FFFFFF', main: colors.main, dark: colors.dark, light: colors.light }
    },
    // 获取当前模板的背景样式
    getBgStyle() {
      var cfg = this.getTemplateConfig()
      if (cfg.template === 'gradient') {
        var dark = cfg.dark
        return 'linear-gradient(135deg, ' + cfg.main + ', ' + dark + ')'
      }
      if (cfg.template === 'minimal') {
        return 'linear-gradient(135deg, ' + cfg.bgColor + ', ' + cfg.dark + ')'
      }
      return 'linear-gradient(135deg, ' + cfg.main + ', ' + (cfg.bgColor || '#FFFFFF') + ')'
    },
    drawPoster() {
      var self = this
      uni.createSelectorQuery().in(this)
        .select('#contentPosterCanvas')
        .boundingClientRect(function(rect) {
          var scaleX = 1
          var scaleY = 1
          if (rect && rect.width && rect.height) {
            scaleX = rect.width / 500
            scaleY = rect.height / 800
          }
          self._renderPoster(scaleX, scaleY)
        })
        .exec()
    },

    _renderPoster(scaleX, scaleY) {
      var ctx = uni.createCanvasContext('contentPosterCanvas', this)
      var w = 500
      var h = 800
      var cfg = this.getTemplateConfig()

      // 画布 CSS 用 rpx,实际像素随设备变化(375px 屏约 310x496),而绘制按 500x800 设计坐标;
      // 不缩放坐标系时右侧/底部内容(含二维码 y≈552-702)会被裁剪出画布,导致海报显示不全。
      if (scaleX !== 1 || scaleY !== 1) {
        ctx.scale(scaleX, scaleY)
      }

      // 【模板1 · gradient】渐变背景
      if (cfg.template === 'gradient') {
        var gradient = ctx.createLinearGradient(0, 0, w * 0.3, h)
        gradient.addColorStop(0, cfg.main)
        gradient.addColorStop(0.55, cfg.dark)
        gradient.addColorStop(1, cfg.dark)
        ctx.setFillStyle(gradient)
        ctx.fillRect(0, 0, w, h)
      }
      // 【模板2 · minimal】纯色深色背景
      else if (cfg.template === 'minimal') {
        ctx.setFillStyle(cfg.bgColor)
        ctx.fillRect(0, 0, w, h)
      }
      // 【模板3 · card】白色背景
      else {
        ctx.setFillStyle('#FFFFFF')
        ctx.fillRect(0, 0, w, h)
      }

      this._drawTopDecoration(ctx, w, cfg)

      var cardX = 28
      var cardY = 112
      var cardW = 444
      var cardH = 600
      this._drawContentCard(ctx, cardX, cardY, cardW, cardH, cfg)

      var coverY = cardY + 20
      var coverW = cardW - 40
      var coverH = 220
      var self = this

      if (this.energyData) {
        // 方案C：五维能量数据卡，canvas 直接绘制（文字锐利、数据真实、无网络开销）
        this._drawEnergyCard(ctx, cardX + 20, coverY, coverW, coverH, cfg)
        this._drawContentAfterCover(ctx, w, h, cardX, cardW, coverY, coverH, cfg)
      } else if (this.coverImage) {
        uni.downloadFile({
          url: this.coverImage,
          success: function(res) {
            if (res.statusCode === 200) {
              // 按原比例绘制封面图（contain 居中），避免拉伸变形
              uni.getImageInfo({
                src: res.tempFilePath,
                success: function(info) {
                  var rect = self._fitCoverRect(info.width, info.height, cardX + 20, coverY, coverW, coverH)
                  ctx.drawImage(res.tempFilePath, rect.x, rect.y, rect.w, rect.h)
                  self._drawContentAfterCover(ctx, w, h, cardX, cardW, coverY, coverH, cfg)
                },
                fail: function() {
                  ctx.drawImage(res.tempFilePath, cardX + 20, coverY, coverW, coverH)
                  self._drawContentAfterCover(ctx, w, h, cardX, cardW, coverY, coverH, cfg)
                }
              })
            } else {
              self._drawCoverPlaceholder(ctx, cardX + 20, coverY, coverW, coverH)
              self._drawContentAfterCover(ctx, w, h, cardX, cardW, coverY, coverH, cfg)
            }
          },
          fail: function() {
            self._drawCoverPlaceholder(ctx, cardX + 20, coverY, coverW, coverH)
            self._drawContentAfterCover(ctx, w, h, cardX, cardW, coverY, coverH, cfg)
          }
        })
      } else if (this.brandFallback) {
        this._drawBrandCard(ctx, cardX + 20, coverY, coverW, coverH, cfg)
        this._drawContentAfterCover(ctx, w, h, cardX, cardW, coverY, coverH, cfg)
      } else {
        this._drawCoverPlaceholder(ctx, cardX + 20, coverY, coverW, coverH)
        this._drawContentAfterCover(ctx, w, h, cardX, cardW, coverY, coverH, cfg)
      }
    },

    _fitCoverRect(imgW, imgH, boxX, boxY, boxW, boxH) {
      if (!imgW || !imgH) {
        return { x: boxX, y: boxY, w: boxW, h: boxH }
      }
      var scale = Math.min(boxW / imgW, boxH / imgH)
      var w = imgW * scale
      var h = imgH * scale
      return {
        x: boxX + (boxW - w) / 2,
        y: boxY + (boxH - h) / 2,
        w: w,
        h: h
      }
    },

    _drawTopDecoration(ctx, w, colors) {
      var centerX = w / 2
      var dotColors = ['#FF8C42', '#6366F1', '#F59E0B', '#10B981', '#FF6B9D']
      var dotY = 28
      var dotR = 5
      var dotSpacing = 26
      var i, offsetX, offsetY

      for (i = 0; i < 5; i++) {
        offsetX = (i - 2) * dotSpacing
        offsetY = Math.abs(i - 2) * 3
        ctx.setFillStyle(dotColors[i])
        ctx.beginPath()
        ctx.arc(centerX + offsetX, dotY + offsetY, dotR, 0, 2 * Math.PI)
        ctx.fill()
      }

      ctx.setFillStyle('#ffffff')
      ctx.setFontSize(this._fs(20))
      ctx.setTextAlign('center')
      ctx.setTextBaseline('top')
      ctx.fillText('浠艾福', centerX, 52)

      ctx.setFontSize(this._fs(14))
      ctx.setFillStyle('rgba(255,255,255,0.8)')
      ctx.fillText('给全家的一站式幸福提案', centerX, 76)

      ctx.setStrokeStyle('rgba(255,255,255,0.25)')
      ctx.setLineWidth(1)
      ctx.beginPath()
      ctx.moveTo(80, 100)
      ctx.lineTo(w - 80, 100)
      ctx.stroke()
    },

    _drawContentCard(ctx, x, y, w, h, colors) {
      ctx.setFillStyle('rgba(0,0,0,0.04)')
      this._roundRect(ctx, x + 2, y + 3, w, h, 16)
      ctx.fill()

      ctx.setFillStyle(colors.light)
      this._roundRect(ctx, x, y, w, h, 16)
      ctx.fill()
    },

    _drawCoverPlaceholder(ctx, x, y, w, h) {
      ctx.setFillStyle('#FEF3C7')
      this._roundRect(ctx, x, y, w, h, 8)
      ctx.fill()

      ctx.setFillStyle('#F97316')
      ctx.setFontSize(this._fs(16))
      ctx.setTextAlign('center')
      ctx.setTextBaseline('middle')
      ctx.fillText('暂无封面图', x + w / 2, y + h / 2)
    },

    // 五维能量数据卡（方案C）：综合分大字 + 五维彩色圆/分数/进度条
    _drawEnergyCard(ctx, x, y, w, h, colors) {
      var data = this.energyData || {}
      var dims = data.dims || []

      ctx.setFillStyle('#FFFFFF')
      this._roundRect(ctx, x, y, w, h, 8)
      ctx.fill()

      // 顶部：左侧标题，右侧综合分
      ctx.setFillStyle('#78716C')
      ctx.setFontSize(this._fs(13))
      ctx.setTextAlign('left')
      ctx.setTextBaseline('top')
      ctx.fillText(data.label || '我们家的能量', x + 16, y + 16)

      var hasOverall = data.overall !== null && data.overall !== undefined && !isNaN(data.overall)
      if (hasOverall) {
        ctx.setFillStyle(colors.main)
        ctx.setFontSize(this._fs(30))
        ctx.setTextAlign('right')
        ctx.fillText(String(data.overall), x + w - 28, y + 8)
        ctx.setFillStyle('#78716C')
        ctx.setFontSize(this._fs(13))
        ctx.fillText('分', x + w - 16, y + 28)
      }

      ctx.setStrokeStyle('#F5F5F4')
      ctx.setLineWidth(1)
      ctx.beginPath()
      ctx.moveTo(x + 16, y + 54)
      ctx.lineTo(x + w - 16, y + 54)
      ctx.stroke()

      // 五维柱：彩色圆 + 单字 + 分数 + 进度条
      var count = dims.length
      for (var i = 0; i < count; i++) {
        var d = dims[i] || {}
        var cx = x + 16 + ((w - 32) / count) * i + (w - 32) / count / 2
        var color = d.color || colors.main
        var score = Number(d.score)
        if (isNaN(score) || score < 0) score = 0
        if (score > 100) score = 100

        ctx.setFillStyle(color)
        ctx.beginPath()
        ctx.arc(cx, y + 94, 17, 0, 2 * Math.PI)
        ctx.fill()

        ctx.setFillStyle('#FFFFFF')
        ctx.setFontSize(this._fs(15))
        ctx.setTextAlign('center')
        ctx.setTextBaseline('middle')
        ctx.fillText(d.label || '', cx, y + 95)

        ctx.setFillStyle('#1C1917')
        ctx.setFontSize(this._fs(18))
        ctx.setTextBaseline('top')
        ctx.fillText(String(score), cx, y + 120)

        var barW = 44
        var barH = 4
        var barX = cx - barW / 2
        var barY = y + 148
        ctx.setFillStyle('#F5F5F4')
        this._roundRect(ctx, barX, barY, barW, barH, 2)
        ctx.fill()
        if (score > 0) {
          ctx.setFillStyle(color)
          this._roundRect(ctx, barX, barY, barW * score / 100, barH, 2)
          ctx.fill()
        }
      }

      ctx.setFillStyle('#A8A29E')
      ctx.setFontSize(this._fs(11))
      ctx.setTextAlign('center')
      ctx.setTextBaseline('top')
      ctx.fillText('五维能量 · 浠艾福家庭测评', x + w / 2, y + 172)
    },

    // 品牌渐变卡：用户未解锁全景（无五维数据）且无封面图时的降级方案
    _drawBrandCard(ctx, x, y, w, h, colors) {
      var g = ctx.createLinearGradient(x, y, x + w, y + h)
      g.addColorStop(0, colors.main)
      g.addColorStop(1, colors.dark)
      ctx.setFillStyle(g)
      this._roundRect(ctx, x, y, w, h, 8)
      ctx.fill()

      var dotColors = ['#FF8C42', '#6366F1', '#F59E0B', '#10B981', '#FF6B9D']
      var centerX = x + w / 2
      for (var i = 0; i < 5; i++) {
        ctx.setFillStyle(dotColors[i])
        ctx.beginPath()
        ctx.arc(centerX + (i - 2) * 26, y + 66, 5, 0, 2 * Math.PI)
        ctx.fill()
      }

      ctx.setFillStyle('#FFFFFF')
      ctx.setFontSize(this._fs(24))
      ctx.setTextAlign('center')
      ctx.setTextBaseline('top')
      ctx.fillText('浠艾福', centerX, y + 86)

      ctx.setFillStyle('rgba(255,255,255,0.85)')
      ctx.setFontSize(this._fs(13))
      ctx.fillText('给全家的一站式幸福提案', centerX, y + 124)

      ctx.setFillStyle('rgba(255,255,255,0.7)')
      ctx.setFontSize(this._fs(12))
      ctx.fillText('测一测你家的五维能量', centerX, y + 152)
    },

    _drawContentAfterCover(ctx, w, h, cardX, cardW, coverY, coverH, colors) {
      var self = this

      var labelY = coverY + coverH + 16
      ctx.setFillStyle(colors.main)
      ctx.setFontSize(this._fs(13))
      ctx.setTextAlign('left')
      ctx.setTextBaseline('top')
      ctx.fillText(this.typeLabel, cardX + 20, labelY)

      // 标题（2行截断）
      var titleY = labelY + 22
      ctx.setFillStyle('#1C1917')
      ctx.setFontSize(this._fs(18))
      ctx.setTextAlign('left')
      ctx.setTextBaseline('top')
      this._drawWrappedText(ctx, this.title || '精彩内容', cardX + 20, titleY, cardW - 40, this._fs(24), 2)

      // 价格行（商品用；空则跳过）
      var priceY = titleY + 56
      if (this.priceText) {
        ctx.setFillStyle(colors.main)
        ctx.setFontSize(this._fs(17))
        ctx.setTextAlign('left')
        ctx.setTextBaseline('top')
        ctx.fillText(this.priceText, cardX + 20, priceY)
      }

      // 简介（1-2行灰字；空则跳过）
      var summaryY = (this.priceText ? priceY + 34 : priceY)
      if (this.summary) {
        ctx.setFillStyle('#78716C')
        ctx.setFontSize(this._fs(13))
        ctx.setTextAlign('left')
        ctx.setTextBaseline('top')
        this._drawWrappedText(ctx, this.summary, cardX + 20, summaryY, cardW - 40, this._fs(20), 2)
      }

      // 邀请语（二维码上方）
      var inviteY = (this.summary ? summaryY + 48 : summaryY)
      ctx.setFillStyle('#A8A29E')
      ctx.setFontSize(this._fs(13))
      ctx.setTextAlign('center')
      ctx.setTextBaseline('top')
      ctx.fillText(this.inviteText || '长按识别二维码 · 查看详情', w / 2, inviteY)

      // 二维码 - 可配置尺寸（管理端模板 qrSize 优先，其次 qrSizeOverride prop，默认150）
      var qrSize = this.effectiveQrSize
      var qrX = (w - qrSize) / 2
      var qrY = inviteY + 24

      if (this.qrCodeBase64) {
        var base64Data = this.qrCodeBase64
        if (base64Data.indexOf('data:image') === 0) {
          var commaIdx = base64Data.indexOf(',')
          if (commaIdx > -1) {
            base64Data = base64Data.substring(commaIdx + 1)
          }
        }

        var fs = uni.getFileSystemManager()
        var filePath = wx.env.USER_DATA_PATH + '/content_share_qr_tmp.png'

        fs.writeFile({
          filePath: filePath,
          data: base64Data,
          encoding: 'base64',
          success: function() {
            ctx.setFillStyle('#ffffff')
            self._roundRect(ctx, qrX - 10, qrY - 10, qrSize + 20, qrSize + 20, 8)
            ctx.fill()

            ctx.setStrokeStyle('#E7E5E4')
            ctx.setLineWidth(0.5)
            self._roundRect(ctx, qrX - 10, qrY - 10, qrSize + 20, qrSize + 20, 8)
            ctx.stroke()

            ctx.drawImage(filePath, qrX, qrY, qrSize, qrSize)
            self._drawBottomDecoration(ctx, w, h, qrY, qrSize, colors)
          },
          fail: function() {
            self._drawQrPlaceholder(ctx, qrX, qrY, qrSize)
            self._drawBottomDecoration(ctx, w, h, qrY, qrSize, colors)
          }
        })
      } else {
        this._drawQrPlaceholder(ctx, qrX, qrY, qrSize)
        this._drawBottomDecoration(ctx, w, h, qrY, qrSize, colors)
      }
    },

    _drawWrappedText(ctx, text, x, y, maxWidth, lineHeight, maxLines) {
      var chars = (text || '').split('')
      var line = ''
      var lineCount = 0
      for (var i = 0; i < chars.length; i++) {
        var testLine = line + chars[i]
        var testWidth = this._textWidth(ctx, testLine)
        if (testWidth > maxWidth && line.length > 0) {
          ctx.fillText(line, x, y + lineCount * lineHeight)
          line = chars[i]
          lineCount++
          if (lineCount >= maxLines - 1) {
            var remaining = chars.slice(i).join('')
            var remainingLine = line + remaining
            while (this._textWidth(ctx, remainingLine + '..') > maxWidth && remainingLine.length > 2) {
              remainingLine = remainingLine.substring(0, remainingLine.length - 1)
            }
            ctx.fillText(remainingLine + '..', x, y + lineCount * lineHeight)
            return
          }
        } else {
          line = testLine
        }
      }
      ctx.fillText(line, x, y + lineCount * lineHeight)
    },

    _textWidth(ctx, text) {
      if (ctx.measureText) {
        try { return ctx.measureText(text).width } catch (e) { return (text || '').length * 18 }
      }
      return (text || '').length * 18
    },

    _drawQrPlaceholder(ctx, x, y, size) {
      ctx.setFillStyle('#ffffff')
      this._roundRect(ctx, x - 10, y - 10, size + 20, size + 20, 8)
      ctx.fill()

      ctx.setStrokeStyle('#E7E5E4')
      ctx.setLineWidth(0.5)
      this._roundRect(ctx, x - 10, y - 10, size + 20, size + 20, 8)
      ctx.stroke()

      ctx.setFillStyle('#A8A29E')
      ctx.setFontSize(this._fs(16))
      ctx.setTextAlign('center')
      ctx.setTextBaseline('middle')
      ctx.fillText('二维码加载中', x + size / 2, y + size / 2)
    },

    _drawBottomDecoration(ctx, w, h, qrY, qrSize, colors) {
      var centerX = w / 2
      var bottomY = qrY + qrSize + 16

      var diamondY = bottomY + 6
      ctx.setFillStyle('rgba(0,0,0,0.06)')
      ctx.beginPath()
      ctx.moveTo(centerX - 76, diamondY)
      ctx.lineTo(centerX - 72, diamondY - 4)
      ctx.lineTo(centerX - 68, diamondY)
      ctx.lineTo(centerX - 72, diamondY + 4)
      ctx.closePath()
      ctx.fill()
      ctx.beginPath()
      ctx.moveTo(centerX + 68, diamondY)
      ctx.lineTo(centerX + 72, diamondY - 4)
      ctx.lineTo(centerX + 76, diamondY)
      ctx.lineTo(centerX + 72, diamondY + 4)
      ctx.closePath()
      ctx.fill()

      ctx.setFillStyle(colors.main)
      ctx.setFontSize(this._fs(18))
      ctx.setTextAlign('center')
      ctx.setTextBaseline('top')
      ctx.fillText(this.ctaText || '长按识别二维码 · 查看详情', centerX, bottomY)

      var dotColors = ['#FF8C42', '#6366F1', '#F59E0B', '#10B981', '#FF6B9D']
      var dotY = h - 22
      var dotR = 4
      var dotSpacing = 20
      var i_b, offsetX_b

      for (i_b = 0; i_b < 5; i_b++) {
        offsetX_b = (i_b - 2) * dotSpacing
        ctx.setFillStyle(dotColors[i_b])
        ctx.beginPath()
        ctx.arc(centerX + offsetX_b, dotY, dotR, 0, 2 * Math.PI)
        ctx.fill()
      }

      ctx.setFillStyle('rgba(255,255,255,0.45)')
      ctx.setFontSize(this._fs(12))
      ctx.setTextAlign('center')
      ctx.setTextBaseline('top')
      ctx.fillText('浠艾福 · 家庭健康俱乐部', centerX, dotY + 7)

      ctx.draw()
    },

    _roundRect(ctx, x, y, w, h, r) {
      ctx.beginPath()
      ctx.moveTo(x + r, y)
      ctx.arcTo(x + w, y, x + w, y + r, r)
      ctx.arcTo(x + w, y + h, x + w - r, y + h, r)
      ctx.arcTo(x, y + h, x, y + h - r, r)
      ctx.arcTo(x, y, x + r, y, r)
      ctx.closePath()
    },

    switchTemplate(tpl) {
      // 仅支持管理端定义模板（对象）；未配置模板时无选择行，不会触发
      if (!tpl || typeof tpl !== 'object') return
      this.applyTemplate(tpl)
    },
    switchBgColor(color) {
      this.$emit('update:bgColor', color)
      var self = this
      this.$nextTick(function() {
        setTimeout(self.drawPoster.bind(self), 100)
      })
    },

    savePoster() {
      var self = this
      uni.canvasToTempFilePath({
        canvasId: 'contentPosterCanvas',
        destWidth: 500,
        destHeight: 800,
        success: function(res) {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function() {
              uni.showToast({ title: '已保存到相册', icon: 'success' })
              self.$emit('close')
            },
            fail: function(err) {
              if (err && err.errMsg && (err.errMsg.indexOf('deny') > -1 || err.errMsg.indexOf('auth denied') > -1 || err.errMsg.indexOf('authorize') > -1)) {
                uni.showModal({
                  title: '提示',
                  content: '需要相册权限才能保存图片',
                  confirmText: '去设置',
                  success: function(modalRes) {
                    if (modalRes.confirm) {
                      uni.openSetting()
                    }
                  }
                })
              } else {
                uni.showToast({ title: '保存失败，请重试', icon: 'none' })
              }
            }
          })
        },
        fail: function() {
          uni.showToast({ title: '生成图片失败', icon: 'none' })
        }
      }, this)
    }
  }
}
</script>

<style scoped>
.poster-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.poster-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.poster-canvas {
  width: 620rpx;
  height: 992rpx;
  margin-bottom: 80rpx;
  border-radius: 16rpx;
}
.poster-actions {
  display: flex;
  flex-direction: column;
  width: 620rpx;
  margin-top: 30rpx;
}
.poster-btn {
  height: 80rpx;
  line-height: 80rpx;
  font-size: 30rpx;
  border-radius: 40rpx;
  text-align: center;
  border: none;
}
.poster-btn::after { border: none; }
.poster-btn.save {
  background: #ffffff;
  color: #F97316;
  font-weight: 600;
}
.poster-btn.save:active { opacity: 0.85; }
.poster-tpl-row {
  display: flex;
  align-items: center;
  margin: 12rpx 0;
  font-size: 24rpx;
}
.tpl-label {
  margin-right: 20rpx;
  color: #666;
}
.tpl-options {
  display: flex;
}
.tpl-option {
  flex: 1;
  margin: 0 4rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}
.tpl-dot {
  width: 24rpx;
  height: 24rpx;
  border-radius: 999rpx;
  margin-bottom: 4rpx;
  border: 1rpx solid rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}
.tpl-text {
  font-size: 14rpx;
  text-align: center;
  color: #666;
}
.tpl-active .tpl-text { color: #F97316; }

</style>