cfc/cfc-frontend/pages/promotion/components/SharePoster.vue

<template>
  <view class="poster-overlay" v-if="show" @click.self="$emit('close')">
    <view class="poster-container">
      <canvas canvas-id="sharePosterCanvas" class="poster-canvas" id="sharePosterCanvas"></canvas>
      <view class="poster-actions">
        <button class="poster-btn save" @click="savePoster">保存到相册</button>
        <button class="poster-btn cancel" @click="$emit('close')">取消</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SharePoster',
  props: {
    show: { type: Boolean, default: false },
    userAvatar: { type: String, default: '' },
    nickname: { type: String, default: '' },
    familyName: { type: String, default: '' },
    qrCodeBase64: { type: String, default: '' }
  },
  watch: {
    show(val) {
      if (val) {
        this.$nextTick(function() {
          setTimeout(function() {
            this.drawPoster()
          }.bind(this), 300)
        }.bind(this))
      }
    }
  },
  methods: {
    // ============================================================
    //  ENTRY POINT
    // ============================================================
    drawPoster() {
      var self = this
      uni.createSelectorQuery().in(this)
        .select('#sharePosterCanvas')
        .boundingClientRect(function(rect) {
          var scaleX = 1
          var scaleY = 1
          if (rect && rect.width && rect.height) {
            scaleX = rect.width / 500
            scaleY = rect.height / 750
          }
          self._renderPoster(scaleX, scaleY)
        })
        .exec()
    },

    _renderPoster(scaleX, scaleY) {
      var ctx = uni.createCanvasContext('sharePosterCanvas', this)
      var w = 500
      var h = 750

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

      // 1. Background gradient — warm orange
      var gradient = ctx.createLinearGradient(0, 0, w * 0.3, h)
      gradient.addColorStop(0, '#F97316')
      gradient.addColorStop(0.55, '#EA580C')
      gradient.addColorStop(1, '#D94F0A')
      ctx.setFillStyle(gradient)
      ctx.fillRect(0, 0, w, h)

      // 2. Top decorative area (brand, tagline, dimension dots, divider)
      this._drawTopDecoration(ctx, w)

      // 3. White/cream content card
      var cardX = 28
      var cardY = 108
      var cardW = 444
      var cardH = 496
      this._drawContentCard(ctx, cardX, cardY, cardW, cardH)

      // 4. Avatar decorative frame (drawn before async avatar download)
      var avatarX = w / 2
      var avatarY = cardY + 72
      var avatarR = 52
      this._drawAvatarFrame(ctx, avatarX, avatarY, avatarR)

      // 5. Download avatar (async) then draw remaining content
      var self = this
      if (this.userAvatar) {
        uni.downloadFile({
          url: this.userAvatar,
          success: function(res) {
            if (res.statusCode === 200) {
              ctx.save()
              ctx.beginPath()
              ctx.arc(avatarX, avatarY, avatarR, 0, 2 * Math.PI)
              ctx.clip()
              ctx.drawImage(res.tempFilePath, avatarX - avatarR, avatarY - avatarR, avatarR * 2, avatarR * 2)
              ctx.restore()
            } else {
              self._drawDefaultAvatar(ctx, avatarX, avatarY, avatarR)
            }
            self._drawContentAfterAvatar(ctx, w, h, cardX, cardW, avatarX, avatarY)
          },
          fail: function() {
            self._drawDefaultAvatar(ctx, avatarX, avatarY, avatarR)
            self._drawContentAfterAvatar(ctx, w, h, cardX, cardW, avatarX, avatarY)
          }
        })
      } else {
        this._drawDefaultAvatar(ctx, avatarX, avatarY, avatarR)
        this._drawContentAfterAvatar(ctx, w, h, cardX, cardW, avatarX, avatarY)
      }
    },

    // ============================================================
    //  TOP DECORATION — brand, tagline, dimension dots, divider
    // ============================================================
    _drawTopDecoration(ctx, w) {
      var centerX = w / 2
      var dotColors = ['#FF8C42', '#6366F1', '#F59E0B', '#10B981', '#FF6B9D']
      var dotY = 28
      var dotR = 5
      var dotSpacing = 26
      var i, offsetX, offsetY

      // 5 dimension dots in a gentle arc
      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()
      }

      // Brand name
      ctx.setFillStyle('#ffffff')
      ctx.setFontSize(18)
      ctx.setTextAlign('center')
      ctx.setTextBaseline('top')
      ctx.fillText('浠艾福', centerX, 52)

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

      // Dotted divider
      ctx.setStrokeStyle('rgba(255,255,255,0.25)')
      ctx.setLineWidth(1)
      ctx.beginPath()
      var dashX = 80
      var dashY = 100
      ctx.moveTo(dashX, dashY)
      ctx.lineTo(w - dashX, dashY)
      ctx.stroke()
    },

    // ============================================================
    //  CONTENT CARD — warm white rounded rect with bracket corners
    // ============================================================
    _drawContentCard(ctx, x, y, w, h) {
      // Shadow/3D offset
      ctx.setFillStyle('rgba(0,0,0,0.04)')
      this._roundRect(ctx, x + 2, y + 3, w, h, 16)
      ctx.fill()

      // Main white card
      ctx.setFillStyle('#FFFCF5')
      this._roundRect(ctx, x, y, w, h, 16)
      ctx.fill()

      // Corner decorative brackets
      var br = 10
      var bl = 22
      ctx.setStrokeStyle('#F97316')
      ctx.setLineWidth(1.5)

      // Top-left
      ctx.beginPath()
      ctx.moveTo(x + br, y + br + bl)
      ctx.lineTo(x + br, y + br)
      ctx.lineTo(x + br + bl, y + br)
      ctx.stroke()

      // Top-right
      ctx.beginPath()
      ctx.moveTo(x + w - br - bl, y + br)
      ctx.lineTo(x + w - br, y + br)
      ctx.lineTo(x + w - br, y + br + bl)
      ctx.stroke()

      // Bottom-left
      ctx.beginPath()
      ctx.moveTo(x + br, y + h - br - bl)
      ctx.lineTo(x + br, y + h - br)
      ctx.lineTo(x + br + bl, y + h - br)
      ctx.stroke()

      // Bottom-right
      ctx.beginPath()
      ctx.moveTo(x + w - br - bl, y + h - br)
      ctx.lineTo(x + w - br, y + h - br)
      ctx.lineTo(x + w - br, y + h - br - bl)
      ctx.stroke()
    },

    // ============================================================
    //  AVATAR FRAME — dotted outer ring + solid inner ring
    // ============================================================
    _drawAvatarFrame(ctx, x, y, r) {
      // Outer dotted ring
      ctx.setStrokeStyle('rgba(249,115,22,0.2)')
      ctx.setLineWidth(1.5)
      ctx.beginPath()
      ctx.arc(x, y, r + 12, 0, 2 * Math.PI)
      ctx.stroke()

      // Solid ring
      ctx.setStrokeStyle('#F97316')
      ctx.setLineWidth(2.5)
      ctx.beginPath()
      ctx.arc(x, y, r + 4, 0, 2 * Math.PI)
      ctx.stroke()
    },

    // ============================================================
    //  ROUNDED RECTANGLE HELPER
    // ============================================================
    _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()
    },

    // ============================================================
    //  DEFAULT AVATAR (fallback when image download fails)
    // ============================================================
    _drawDefaultAvatar(ctx, x, y, r) {
      // Warm cream circle background
      ctx.setFillStyle('#FFF0E0')
      ctx.beginPath()
      ctx.arc(x, y, r, 0, 2 * Math.PI)
      ctx.fill()

      // Draw a simple person silhouette with Canvas primitives
      ctx.setFillStyle('#F97316')

      // Head (smaller circle, upper portion)
      var headR = r * 0.32
      var headY = y - r * 0.12
      ctx.beginPath()
      ctx.arc(x, headY, headR, 0, 2 * Math.PI)
      ctx.fill()

      // Body (trapezoid-like shape: shoulders + torso)
      ctx.beginPath()
      var shoulderW = r * 0.55
      var bodyTop = headY + headR * 0.5
      var bodyBottom = y + r * 0.55
      var hipW = r * 0.35
      ctx.moveTo(x - shoulderW, bodyTop)
      ctx.quadraticCurveTo(x - shoulderW, bodyTop + 10, x - hipW, bodyBottom)
      ctx.lineTo(x + hipW, bodyBottom)
      ctx.quadraticCurveTo(x + shoulderW, bodyTop + 10, x + shoulderW, bodyTop)
      ctx.closePath()
      ctx.fill()
    },

    // ============================================================
    //  NICKNAME TRUNCATION — 昵称过长时截断,避免标题溢出海报
    // ============================================================
    _shortName(name, max) {
      var s = (name || '').trim()
      if (!s) return ''
      if (s.length <= max) return s
      return s.substring(0, max) + '…'
    },

    // ============================================================
    //  HEADLINE + INTRO + QR — 邀请标题 + 简单介绍 + 二维码(不展示邀请码)
    // ============================================================
    _drawContentAfterAvatar(ctx, w, h, _cardX, _cardW, _avatarX, avatarY) {
      var self = this
      var base64Data, commaIdx, fs, filePath
      var centerX = w / 2

      // --- 邀请标题：XXX邀请你关注家庭健康 ---
      var name = this._shortName(this.nickname, 8)
      var headlineY = avatarY + 78
      ctx.setFillStyle('#1C1917')
      ctx.setFontSize(21)
      ctx.setTextAlign('center')
      ctx.setTextBaseline('top')
      ctx.fillText(name ? name + '邀请你关注家庭健康' : '邀请你关注家庭健康', centerX, headlineY)

      // --- 标题下的短分隔线 ---
      var dividerY = headlineY + 36
      ctx.setStrokeStyle('rgba(249,115,22,0.35)')
      ctx.setLineWidth(1.5)
      ctx.beginPath()
      ctx.moveTo(centerX - 22, dividerY)
      ctx.lineTo(centerX + 22, dividerY)
      ctx.stroke()

      // --- 简单介绍：品牌 / 五维 / 定位 ---
      var brandY = dividerY + 14
      ctx.setFillStyle('#F97316')
      ctx.setFontSize(14)
      ctx.fillText(this.familyName ? this.familyName + ' · 家庭健康俱乐部' : '浠艾福 · 家庭健康俱乐部', centerX, brandY)

      var dimY = brandY + 24
      ctx.setFillStyle('#78716C')
      ctx.setFontSize(13)
      ctx.fillText('身体 · 心理 · 智慧 · 行动 · 财富', centerX, dimY)

      var descY = dimY + 22
      ctx.setFillStyle('#A8A29E')
      ctx.setFontSize(13)
      ctx.fillText('一家专注全家健康的成长平台', centerX, descY)

      // --- QR code ---
      var qrSize = 180
      var qrX = (w - qrSize) / 2
      var qrY = descY + 24

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

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

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

            // Subtle border
            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)
          },
          fail: function() {
            self._drawQrPlaceholder(ctx, qrX, qrY, qrSize)
            self._drawBottomDecoration(ctx, w, h, qrY, qrSize)
          }
        })
      } else {
        this._drawQrPlaceholder(ctx, qrX, qrY, qrSize)
        this._drawBottomDecoration(ctx, w, h, qrY, qrSize)
      }
    },

    // ============================================================
    //  QR PLACEHOLDER (fallback when QR write fails)
    // ============================================================
    _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(14)
      ctx.setTextAlign('center')
      ctx.setTextBaseline('middle')
      ctx.fillText('二维码加载中', x + size / 2, y + size / 2)
    },

    // ============================================================
    //  BOTTOM DECORATION — CTA, dots, brand footer, ctx.draw()
    // ============================================================
    _drawBottomDecoration(ctx, w, h, qrY, qrSize) {
      var centerX = w / 2
      var bottomY = qrY + qrSize + 16

      // Decorative small diamonds on sides
      var diamondY = bottomY + 10
      ctx.setFillStyle('rgba(249,115,22,0.15)')
      // Left diamond
      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()
      // Right diamond
      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()

      // CTA text
      ctx.setFillStyle('#F97316')
      ctx.setFontSize(17)
      ctx.setTextAlign('center')
      ctx.setTextBaseline('top')
      ctx.fillText('长按识别二维码，了解浠艾福', centerX, bottomY)

      // 5 dimension dots in the bottom area (outside card)
      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()
      }

      // Footer brand text
      ctx.setFillStyle('rgba(255,255,255,0.45)')
      ctx.setFontSize(10)
      ctx.setTextAlign('center')
      ctx.setTextBaseline('top')
      ctx.fillText('浠艾福 · 家庭健康俱乐部', centerX, dotY + 7)

      // FINAL RENDER — flush all queued canvas commands
      ctx.draw()
    },

    // ============================================================
    //  SAVE POSTER TO PHOTO ALBUM (preserved as-is)
    // ============================================================
    savePoster() {
      var self = this
      uni.canvasToTempFilePath({
        canvasId: 'sharePosterCanvas',
        destWidth: 500,
        destHeight: 750,
        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: 930rpx;
  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;
  margin-bottom: 16rpx;
}
.poster-btn.save:active { opacity: 0.85; }
.poster-btn.cancel {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}
.poster-btn.cancel:active { opacity: 0.85; }
</style>