分享功能改造（海报组件参数化 + 5 项分享入口）实施计划

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 通过参数化现有 Canvas 海报组件，为商品详情、文章详情、家庭邀请卡、财富中心 5 处分享入口落地统一的海报分享能力，并支持按五维维度自动配色。

Architecture: 前端纯改动，后端零改动。改造 ContentSharePoster.vue（文章+商品共用海报，新增 dimensionCode/summary/priceText/ctaText/inviteText props + 五维配色 + 居中弹窗），改造 SharePoster.vue（家庭邀请卡，新增 familyName prop + 文案 + 字号缩小 2px），4 个页面接入。

Tech Stack: uni-app (Vue 2 Options API) / 微信小程序 canvas 2d 绘制（uni.createCanvasContext）

验证方式： 本项目 canvas 组件无单元测试框架，验证以 npm run build:mp-weixin 编译通过 + 微信开发者工具手测清单为主。每个任务末尾提交 commit。

关联设计文档： docs/superpowers/specs/2026-08-01-share-poster-redesign-design.md

前置信息（工程师必读）

项目关键事实

前端目录：/sc-data/cfc/cfc-frontend/（本计划所有路径相对此目录）
Vue 2 Options API；formatPriceWithSymbol(cents) 全局挂载（Vue.prototype），价格单位是分，返回带 ¥ 的字符串
五维色系映射（多个页面已有此映射，保持一致）：
- body 身 #FF8C42 / mind 心 #FF6B9D / wisdom 智 #6366F1 / action 行 #10B981 / wealth 富 #F59E0B
后端通用二维码接口已存在：POST /api/share/qrcode，入参 { page, scene }，返回 { qrCodeBase64 }。前端封装：getShareQrCode(page, scene)（utils/api.js:1456）
家庭邀请二维码接口：getInviteQrCode()（utils/api.js:1452）→ POST /api/invite/qrcode
家庭信息接口：getFamilyMembers() → POST /api/family/user/family-members，返回 data.familyName
分享 mixin：components/share-mixin.js，提供 referralCode、loadReferralCode()、autoBindInviteCode(code)、getSharePath()
昵称/头像：uni.getStorageSync('nickname') / uni.getStorageSync('avatar')
禁止：可选链 ?.、:key 表达式、CSS Grid、中文 class 名（见 AGENTS.md）

微信小程序码 scene 说明

getwxacodeunlimit 的 scene 最大 32 可见字符
商品海报 scene 格式定案：id=<商品id>&ref=<邀请码>（如 id=45&ref=ABC123 = 15 字符）
扫码后小程序直接打开 page 指定的页面，scene 出现在该页面 onLoad(options) 的 options.scene 中（需 decodeURIComponent）
从 scene 进入时 options.id 不存在，id 要从 scene 里解析

Canvas 绘制注意

使用 ctx.draw() 一次性刷屏（每个绘制方法的最后一行）
异步绘制（头像/封面下载、二维码 base64 写文件）用回调链，_drawBottomDecoration 是最终渲染点
_drawWrappedText(ctx, text, x, y, maxWidth, lineHeight, maxLines) 已有，用于多行截断文本

文件结构

文件	责任	改动
`components/SharePoster.vue`	家庭邀请卡海报	+familyName prop、+邀请文案、字号-2px
`components/ContentSharePoster.vue`	文章/商品共用内容海报	+5 props、+五维配色、+简介/邀请语/价格行、居中弹窗
`pages/article-center/article-detail.vue`	文章详情页	去分享按钮、generatePoster 传新参数
`pages/discover-detail/product-detail/product-detail.vue`	商品详情页	+分享按钮、+海报组件、+scene解析、+shareMixin
`pages/promotion/index.vue`	财富中心首页	+分享给好友按钮、+海报组件
`pages/profile-extra/family-members.vue`	家庭成员页	传 familyName

Task 1: SharePoster.vue — 家庭邀请卡（familyName + 文案 + 字号缩小2px）

Files:

Modify: components/SharePoster.vue
[ ] Step 1: 新增 familyName prop

在 components/SharePoster.vue 的 props 中（referralCode 行之后）添加：

    referralCode: { type: String, default: '' },
    familyName: { type: String, default: '' },
    qrCodeBase64: { type: String, default: '' }

Step 2: 字号全面缩小 2px

将文件中所有 ctx.setFontSize(N) 改为 ctx.setFontSize(N-2)。具体位置与改动：

行号(当前)	原值	新值
119	20	18
125	14	12
265	24	22
272	17	15
279	46	44
303	14	12
370	16	14
405	19	17
427	12	10

Step 3: 二维码上方新增邀请文案

_drawContentAfterAvatar 方法中，当前 hintY 区块（约 302-307 行）绘制的是「长按识别二维码 · 一起加入浠艾福」。将其替换为邀请文案（保留 QR 位置不变，避免布局溢出）：

      // --- 邀请文案（二维码上方）---
      var hintY = codeY + 80
      ctx.setFontSize(14)
      ctx.setFillStyle('#D6D3D1')
      ctx.setTextAlign('center')
      ctx.setTextBaseline('top')
      var inviteText = ''
      if (this.nickname && this.familyName) {
        inviteText = this.nickname + '邀请你来' + this.familyName
      } else if (this.nickname) {
        inviteText = this.nickname + '邀请你加入浠艾福'
      } else {
        inviteText = '长按识别二维码 · 一起加入浠艾福'
      }
      ctx.fillText(inviteText, w / 2, hintY)

[ ] Step 4: 验证构建

cd /sc-data/cfc/cfc-frontend && npm run build:mp-weixin

Expected: 编译成功，无报错。

[ ] Step 5: Commit

cd /sc-data/cfc && git add cfc-frontend/components/SharePoster.vue && git commit -m "feat(cfc-frontend): SharePoster 家庭邀请卡加 familyName 文案与邀请语，字号缩小2px"

Task 2: ContentSharePoster.vue — 参数化 + 五维配色 + 居中弹窗

Files:

Modify: components/ContentSharePoster.vue
[ ] Step 1: 新增 5 个 props

在 props 中（typeLabel 之后）添加：

    typeLabel: { type: String, default: '好物推荐' },
    dimensionCode: { type: String, default: '' },
    summary: { type: String, default: '' },
    priceText: { type: String, default: '' },
    ctaText: { type: String, default: '长按识别二维码 · 查看详情' },
    inviteText: { type: String, default: '' }

Step 2: 新增配色计算

在 methods 开头（drawPoster() 之前）新增：

    getColors() {
      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' }
    },

Step 3: drawPoster 使用动态配色

将 drawPoster() 中的背景渐变（第 38-43 行）改为：

    drawPoster() {
      var ctx = uni.createCanvasContext('contentPosterCanvas', this)
      var w = 500
      var h = 800
      var colors = this.getColors()

      var gradient = ctx.createLinearGradient(0, 0, w * 0.3, h)
      gradient.addColorStop(0, colors.main)
      gradient.addColorStop(0.55, colors.dark)
      gradient.addColorStop(1, colors.dark)
      ctx.setFillStyle(gradient)
      ctx.fillRect(0, 0, w, h)

      this._drawTopDecoration(ctx, w, colors)

Step 4: _drawTopDecoration 接收 colors 参数

将 _drawTopDecoration(ctx, w) 改为 _drawTopDecoration(ctx, w, colors)，并把方法内所有硬编码橙色改为 colors 参数。具体：

    _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(20)
      ctx.setTextAlign('center')
      ctx.setTextBaseline('top')
      ctx.fillText('浠艾福', centerX, 52)

      ctx.setFontSize(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()
    },

Step 5: _drawContentCard 使用动态配色

将 _drawContentCard(ctx, x, y, w, h) 改为接收 colors 并改用动态色：

    _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()
    },

并在 drawPoster() 中的调用处改为 this._drawContentCard(ctx, cardX, cardY, cardW, cardH, colors)。

Step 6: 重写 _drawContentAfterCover（加入简介/邀请语/价格行）

将整个 _drawContentAfterCover 方法（第 137-203 行）替换为：

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

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

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

      // 价格行（商品用；空则跳过）
      var priceY = titleY + 56
      if (this.priceText) {
        ctx.setFillStyle(colors.main)
        ctx.setFontSize(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(13)
        ctx.setTextAlign('left')
        ctx.setTextBaseline('top')
        this._drawWrappedText(ctx, this.summary, cardX + 20, summaryY, cardW - 40, 20, 2)
      }

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

      // 二维码
      var qrSize = 150
      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)
      }
    },

Step 7: _drawBottomDecoration 使用动态配色 + ctaText

将 _drawBottomDecoration(ctx, w, h, qrY, qrSize) 改为接收 colors，并替换 CTA 文本和颜色：

    _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(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(12)
      ctx.setTextAlign('center')
      ctx.setTextBaseline('top')
      ctx.fillText('浠艾福 · 家庭健康俱乐部', centerX, dotY + 7)

      ctx.draw()
    },

Step 8: 更新 drawPoster 中其他调用点

drawPoster() 中：

this._drawContentCard(ctx, cardX, cardY, cardW, cardH) → this._drawContentCard(ctx, cardX, cardY, cardW, cardH, colors)
三处 self._drawContentAfterCover(ctx, w, h, cardX, cardW, coverY, coverH) → self._drawContentAfterCover(ctx, w, h, cardX, cardW, coverY, coverH, colors)
[ ] Step 9: 弹窗样式 — 居中卡片 + 去掉取消按钮

模板（第 5-8 行）去掉「取消」按钮，只保留保存：

      <view class="poster-actions">
        <button class="poster-btn save" @click="savePoster">保存到相册</button>
      </view>

样式（355-404 行）改为更紧凑的居中卡片：

.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;
  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; }

[ ] Step 10: 验证构建

cd /sc-data/cfc/cfc-frontend && npm run build:mp-weixin

Expected: 编译成功，无报错。

[ ] Step 11: Commit

cd /sc-data/cfc && git add cfc-frontend/components/ContentSharePoster.vue && git commit -m "feat(cfc-frontend): ContentSharePoster 参数化五维配色+简介/邀请语/价格行+居中弹窗"

Task 3: 文章详情页 — 去分享按钮 + 传新参数

Files:

Modify: pages/article-center/article-detail.vue
[ ] Step 1: 去掉「分享」按钮

模板底部（约 43-46 行）删除 open-type="share" 的 button，只留海报按钮：

      <!-- 底部 -->
      <view class="detail-footer">
        <view class="share-btn" @click="generatePoster">
          <text class="share-btn-icon">🖼</text>
          <text class="share-btn-text">海报</text>
        </view>
      </view>

Step 2: data 新增海报参数

在 data() 的 showPoster: false, posterQrCode: '' 行后添加：

      showPoster: false, posterQrCode: '',
      posterDimension: '', posterSummary: '', posterInviteText: '',

Step 3: 新增 getMainDimension 方法

在 parseDimensions 方法后添加：

    getMainDimension: function() {
      var dims = this.article ? this.parseDimensions(this.article) : []
      var best = null
      var i
      for (i = 0; i < dims.length; i++) {
        if (!best || dims[i].weight > best.weight) best = dims[i]
      }
      return best ? best.code : ''
    },

Step 4: generatePoster 传新参数

将 generatePoster 方法改为：

    async generatePoster() {
      if (!this.articleId) return
      uni.showLoading({ title: '生成海报中...' })
      try {
        var res = await getShareQrCode('pages/article-center/article-detail', 'id=' + this.articleId)
        if (res && res.data) {
          this.posterQrCode = res.data.qrCodeBase64 || ''
          this.posterDimension = this.getMainDimension()
          this.posterSummary = (this.article && this.article.summary) || ''
          this.posterInviteText = '「' + (uni.getStorageSync('nickname') || '好友') + '」邀请你一起阅读这篇文章'
          this.showPoster = true
        }
      } catch (e) { uni.showToast({ title: '生成失败', icon: 'none' }) }
      finally { uni.hideLoading() }
    },

Step 5: 模板传参

将 ContentSharePoster 标签改为：

    <ContentSharePoster :show="showPoster" :title="article && article.title" :coverImage="article && article.coverImage" :qrCodeBase64="posterQrCode" typeLabel="好文推荐" :dimensionCode="posterDimension" :summary="posterSummary" :inviteText="posterInviteText" @close="closePoster" />

[ ] Step 6: 验证构建

cd /sc-data/cfc/cfc-frontend && npm run build:mp-weixin

Expected: 编译成功，无报错。

[ ] Step 7: Commit

cd /sc-data/cfc && git add cfc-frontend/pages/article-center/article-detail.vue && git commit -m "feat(cfc-frontend): 文章详情去掉分享按钮，海报传维度/简介/邀请语"

Task 4: 商品详情页 — 加分享按钮 + 海报 + scene 解析

Files:

Modify: pages/discover-detail/product-detail/product-detail.vue
[ ] Step 1: 引入依赖

script 开头（import MpHtml 之后）添加：

import { productDetail, productOrderCreate, productOrderPay, cartAdd, getShareQrCode } from '@/utils/api.js'
import MpHtml from '@/components/mp-html/mp-html.vue'
import ContentSharePoster from '@/components/ContentSharePoster.vue'
import shareMixin from '../../../components/share-mixin.js'

[ ] Step 2: 注册组件与 mixin

export default {
components: { MpHtml, ContentSharePoster },
mixins: [shareMixin],
data() {
return {
  product: {},
  loading: false,
  showPoster: false,
  posterQrCode: '',
  posterDimension: '',
  posterInviteText: ''
}
},

[ ] Step 3: 新增 priceText / productDimension 计算属性

在 domainLabel() 计算属性后添加：

    priceText() {
      if (!this.product || !this.product.price) return ''
      var txt = this.formatPriceWithSymbol(this.product.price)
      if (this.product.memberPrice) {
        txt += ' 会员' + this.formatPriceWithSymbol(this.product.memberPrice)
      }
      return txt
    },
    productDimension() {
      var p = this.product
      if (!p) return ''
      if (p.dimensionWeights) {
        try {
          var w = JSON.parse(p.dimensionWeights)
          if (w && typeof w === 'object') {
            var best = null
            var bestWeight = -1
            var keys = Object.keys(w)
            for (var i = 0; i < keys.length; i++) {
              if (w[keys[i]] > bestWeight) {
                bestWeight = w[keys[i]]
                best = keys[i]
              }
            }
            if (best) return best
          }
        } catch (e) {}
      }
      if (p.domain) return p.domain
      return ''
    },

Step 4: onLoad 解析 scene（id + ref）

将现有 onLoad 改为：

  onLoad(options) {
    var pid = options && options.id ? options.id : ''
    if (options && options.scene) {
      try {
        var sceneDecoded = decodeURIComponent(options.scene)
        var idMatch = sceneDecoded.match(/id=(\d+)/)
        if (idMatch && idMatch[1]) pid = idMatch[1]
        var refMatch = sceneDecoded.match(/ref=([^&]+)/)
        if (refMatch && refMatch[1]) this.autoBindInviteCode(refMatch[1])
      } catch (e) {}
    }
    if (pid) {
      this.loadDetail(pid)
    }
  },

Step 5: 新增 onShareProduct 方法

在 onAddToCart 方法后添加：

    async onShareProduct() {
      if (!this.product || !this.product.id) return
      uni.showLoading({ title: '生成海报中...' })
      try {
        if (!this.referralCode) {
          await this.loadReferralCode()
        }
        var scene = 'id=' + this.product.id + (this.referralCode ? '&ref=' + this.referralCode : '')
        if (scene.length > 32) {
          scene = scene.substring(0, 32)
        }
        var res = await getShareQrCode('pages/discover-detail/product-detail/product-detail', scene)
        if (res && res.data) {
          this.posterQrCode = res.data.qrCodeBase64 || ''
          this.posterDimension = this.productDimension
          this.posterInviteText = '「' + (uni.getStorageSync('nickname') || '好友') + '」邀请你一起看看这个好物'
          this.showPoster = true
        }
      } catch (e) {
        uni.showToast({ title: '生成失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },

Step 6: 底部栏加「分享」按钮

模板底部栏（约 47-52 行）在「加入购物车」前加分享按钮：

        <view class="action-btns">
          <view class="action-extra">
            <button class="btn-share" @click="onShareProduct">分享</button>
          </view>
          <view class="action-extra">
            <button class="btn-cart" @click="onAddToCart">加入购物车</button>
          </view>
          <button class="btn-buy" @click="onBuy">立即购买</button>
        </view>

Step 7: 底部栏外添加海报组件

在 </scroll-view> 之后、<view v-else class="empty-wrap"> 之前（或模板末尾 </view> 之前）添加：

    <ContentSharePoster :show="showPoster" :title="product.name" :coverImage="product.coverImage" :qrCodeBase64="posterQrCode" typeLabel="好物推荐" :dimensionCode="posterDimension" :priceText="priceText" :summary="product.intro" ctaText="长按识别二维码 · 查看商品" :inviteText="posterInviteText" @close="showPoster = false" />

Step 8: 新增 .btn-share 样式

在 style 中 .btn-cart 样式后添加：

.btn-share {
  background: #fff;
  color: #666;
  border: 2rpx solid #ddd;
  font-size: 26rpx;
  padding: 0 24rpx;
  height: 64rpx;
  line-height: 64rpx;
  border-radius: 32rpx;
  margin-right: 16rpx;
}
.btn-share::after {
  border: none;
}

[ ] Step 9: 验证构建

cd /sc-data/cfc/cfc-frontend && npm run build:mp-weixin

Expected: 编译成功，无报错。

[ ] Step 10: Commit

cd /sc-data/cfc && git add cfc-frontend/pages/discover-detail/product-detail/product-detail.vue && git commit -m "feat(cfc-frontend): 商品详情加分享海报按钮+scene邀请码解析"

Task 5: 财富中心首页 — 加「分享给好友」按钮 + 海报

Files:

Modify: pages/promotion/index.vue
[ ] Step 1: 引入依赖

script 部分 import（现有 getReferralSummary 等 import 行）后添加：

import { getReferralSummary, getCommissionSummary, getFamilyEarningsSummary, getFamilyEarningsMembers, getFamilyEarningsRecords, distributeToMember, toggleMemberBalance, withdrawFamilyEarnings, getInviteQrCode, getFamilyMembers, getReferralCode } from '../../utils/api.js'
import SharePoster from '@/components/SharePoster.vue'

（注意：将 getInviteQrCode, getFamilyMembers, getReferralCode 合并进现有 import 语句，若已有部分则去重。）

[ ] Step 2: 注册组件 + data

export default {
components: { SharePoster },
data() {
return {
  // ... 现有字段 ...
  showPoster: false,
  inviteQrCode: '',
  familyName: '',
  shareNickname: '',
  shareAvatar: '',
  shareReferralCode: ''
}
},

（在现有 data 字段后追加 5 个新字段，保留原有字段不变。）

Step 3: 菜单区加「分享给好友」按钮

在「邀请好友」menu-item（约 167-171 行）之后添加：

      <view class="menu-item" @click="shareToFriend">
        <view class="menu-icon-wrap icon-share">
          <text class="menu-icon-text">📤</text>
        </view>
        <text class="menu-text">分享给好友</text>
      </view>

Step 4: 新增 shareToFriend 方法

在 goInvite() 方法后添加：

    async shareToFriend() {
      uni.showLoading({ title: '生成中...' })
      try {
        if (!this.shareReferralCode) {
          try {
            var codeRes = await getReferralCode()
            if (codeRes && codeRes.data) {
              this.shareReferralCode = codeRes.data.referralCode || codeRes.data.code || ''
            }
          } catch (e) {}
        }
        var qrRes = await getInviteQrCode()
        if (qrRes && qrRes.data) {
          this.inviteQrCode = qrRes.data.qrCodeBase64 || ''
        }
        if (!this.familyName) {
          try {
            var famRes = await getFamilyMembers()
            if (famRes.code === 200 && famRes.data && famRes.data.familyName) {
              this.familyName = famRes.data.familyName
            }
          } catch (e) {}
        }
        this.shareNickname = uni.getStorageSync('nickname') || ''
        this.shareAvatar = uni.getStorageSync('avatar') || ''
        this.showPoster = true
      } catch (e) {
        uni.showToast({ title: '生成失败', icon: 'none' })
      } finally {
        uni.hideLoading()
      }
    },

Step 5: 模板加海报组件

在 </scroll-view> 之前（模板末尾）添加：

    <SharePoster :show="showPoster" :referralCode="shareReferralCode" :qrCodeBase64="inviteQrCode" :nickname="shareNickname" :userAvatar="shareAvatar" :familyName="familyName" @close="showPoster = false" />

Step 6: 新增样式

在 .icon-leaderboard 样式后添加：

.icon-share { background: #E0F2FE; }

[ ] Step 7: 验证构建

cd /sc-data/cfc/cfc-frontend && npm run build:mp-weixin

Expected: 编译成功，无报错。

[ ] Step 8: Commit

cd /sc-data/cfc && git add cfc-frontend/pages/promotion/index.vue && git commit -m "feat(cfc-frontend): 财富中心首页加分享给好友按钮与邀请海报"

Task 6: 家庭成员页 — 传 familyName

Files:

Modify: pages/profile-extra/family-members.vue
[ ] Step 1: 传 familyName

模板第 35 行的 SharePoster 标签改为：

    <SharePoster :show="showPoster" :referralCode="inviteCode" :qrCodeBase64="inviteQrCode" :nickname="userNickname" :userAvatar="userAvatar" :familyName="familyName" @close="showPoster = false" />

（familyName 已在 data 和 loadFamilyInfo 中赋值，无需其他改动。）

[ ] Step 2: 验证构建

cd /sc-data/cfc/cfc-frontend && npm run build:mp-weixin

Expected: 编译成功，无报错。

[ ] Step 3: Commit

cd /sc-data/cfc && git add cfc-frontend/pages/profile-extra/family-members.vue && git commit -m "feat(cfc-frontend): 家庭成员邀请卡传入家庭名"

Task 7: 全量验证 + 手测清单

Files:

无代码改动

[ ] Step 1: 前端全量构建

cd /sc-data/cfc/cfc-frontend && npm run build:mp-weixin

Expected: 编译成功，exit code 0。

[ ] Step 2: 后端编译确认（零改动，确保不受影响）
```
cd /sc-data/cfc/cfc-backend && mvn compile -q
```

Expected: BUILD SUCCESS（无输出即成功）。

Step 3: 微信开发者工具手测清单

导入 dist/dev/mp-weixin/（或 dist/build/mp-weixin/）到微信开发者工具，逐项验证：

#	场景	预期
1	文章详情页	只有「海报」按钮，无「分享」按钮；微信右上角转发带邀请码
2	文章海报	弹窗居中、不遮全屏、点周边关闭；有简介、邀请语；配色随文章维度变化（身橙/心粉/智蓝/行绿/富金）
3	保存海报	保存到相册成功；无相册权限时弹出去设置引导
4	商品详情页	底部有「分享」按钮；点击生成商品海报（封面+名称+价格+邀请语+二维码）
5	扫描商品海报二维码	打开商品详情页，且邀请码自动绑定（后端 400 说明已有邀请人则跳过）
6	家庭成员页「分享邀请卡」	海报文字缩小 2px；二维码上方有「{昵称}邀请你来{家庭名}」
7	财富中心「分享给好友」	点击弹出家庭邀请卡海报，含家庭名
8	无家庭名兜底	海报显示「{昵称}邀请你加入浠艾福」

[ ] Step 4: 提交收尾（若有手测发现的小修复，单独提交）
```
cd /sc-data/cfc && git status && git log --oneline -8
```

风险与回滚

每个任务独立 commit，可单独 git revert <commit> 回滚
最复杂的是 Task 2（ContentSharePoster 重构），canvas 布局改动集中，若真机显示异常优先检查 _drawContentAfterCover 的 Y 坐标计算
scene 32 字符限制：id=<id>&ref=<code> 中 id 为多位数字时也足够（id 上限 9 位数 + ref 6 位 = 约 20 字符），后端还有截断保护

行号(当前)	原值	新值
119	20	18
125	14	12
265	24	22
272	17	15
279	46	44
303	14	12
370	16	14
405	19	17
427	12	10

行号(当前)	原值	新值
119	20	18
125	14	12
265	24	22
272	17	15
279	46	44
303	14	12
370	16	14
405	19	17
427	12	10

2026-08-01-share-poster-redesign.md 30 KB Geschiedenis Ruwe

分享功能改造（海报组件参数化 + 5 项分享入口）实施计划

前置信息（工程师必读）

项目关键事实

微信小程序码 scene 说明

Canvas 绘制注意

文件结构

Task 1: SharePoster.vue — 家庭邀请卡（familyName + 文案 + 字号缩小2px）

Task 2: ContentSharePoster.vue — 参数化 + 五维配色 + 居中弹窗

Task 3: 文章详情页 — 去分享按钮 + 传新参数

Task 4: 商品详情页 — 加分享按钮 + 海报 + scene 解析

Task 5: 财富中心首页 — 加「分享给好友」按钮 + 海报

Task 6: 家庭成员页 — 传 familyName

Task 7: 全量验证 + 手测清单

风险与回滚

2026-08-01-share-poster-redesign.md 30 KB

Geschiedenis Ruwe

行号(当前)	原值	新值
119	20	18
125	14	12
265	24	22
272	17	15
279	46	44
303	14	12
370	16	14
405	19	17
427	12	10