cfc/cfc-frontend/pages/guide/packages/share.vue

<template>
  <view class="container">
    <!-- 任务模板信息卡片 -->
    <view class="package-card">
      <image class="cover" :src="getImageUrl(pkg.coverImage) || '/static/default-cover.png'" mode="aspectFill" />
      <view class="package-info">
        <text class="name">{{ pkg.name }}</text>
        <text class="desc">{{ pkg.description }}</text>
        <view class="meta">
          <text>{{ pkg.cycleDays }}天</text>
          <text class="price">{{ formatPriceWithSymbol(pkg.price) }}</text>
        </view>
      </view>
    </view>

    <!-- 分享选项 -->
    <view class="share-options">
      <text class="section-title">分享给家长</text>
      
      <view class="option-item" @click="copyShareCode">
        <text class="option-icon">📋</text>
        <text class="option-text">复制分享码</text>
      </view>
      
      <view class="option-item" @click="generatePoster">
        <text class="option-icon">🖼️</text>
        <text class="option-text">生成分享海报</text>
      </view>
      
      <view class="option-item" @click="shareToFriend">
        <text class="option-icon">📱</text>
        <text class="option-text">发送给朋友</text>
      </view>
    </view>

    <!-- 海报预览 -->
    <uni-popup ref="posterPopup" type="center">
      <view class="poster-popup">
        <text class="poster-title">分享海报</text>
        <canvas canvas-id="posterCanvas" class="poster-canvas"></canvas>
        <view class="poster-actions">
          <button class="btn-save" @click="savePoster">保存图片</button>
          <button class="btn-share" open-type="share">转发给朋友</button>
        </view>
        <text class="close-btn" @click="closePoster">关闭</text>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { getPackage } from '@/utils/api.js'
import config from '@/config.js'

export default {
  data() {
    return {
      pkgId: null,
      pkg: {},
      shareCode: ''
    }
  },
  onLoad(options) {
    this.pkgId = options.id
    this.loadPackage()
  },
  methods: {
    async loadPackage() {
      try {
        const res = await getPackage(this.pkgId)
        this.pkg = res.data || {}
        this.shareCode = this.pkg.shareCode || ''
      } catch (e) {
        console.error(e)
      }
    },
    copyShareCode() {
      uni.setClipboardData({ data: this.shareCode })
      uni.showToast({ title: '已复制分享码' })
    },
    generatePoster() {
      const ctx = uni.createCanvasContext('posterCanvas')
      
      // 背景
      ctx.setFillStyle('#ffffff')
      ctx.fillRect(0, 0, 600, 900)
      
      // 封面图（简化处理，实际需要下载图片）
      ctx.setFillStyle('#4CAF50')
      ctx.fillRect(0, 0, 600, 300)
      
      // 标题
      ctx.setFillStyle('#333333')
      ctx.setFontSize(32)
      ctx.fillText(this.pkg.name || '任务模板名称', 30, 350)
      
      // 描述
      ctx.setFillStyle('#666666')
      ctx.setFontSize(24)
      const desc = this.pkg.description || '暂无描述'
      ctx.fillText(desc.substring(0, 30), 30, 400)
      if (desc.length > 30) {
        ctx.fillText(desc.substring(30, 60), 30, 430)
      }
      
      // 周期和价格
      ctx.setFillStyle('#333333')
      ctx.setFontSize(28)
      ctx.fillText(`${this.pkg.cycleDays}天`, 30, 480)
      ctx.setFillStyle('#f44336')
      ctx.setFontSize(36)
      ctx.fillText(this.formatPriceWithSymbol(this.pkg.price), 30, 520)
      
      // 分享码
      ctx.setFillStyle('#4CAF50')
      ctx.setFontSize(24)
      ctx.fillText('分享码: ' + this.shareCode, 30, 580)
      
      // 提示文字
      ctx.setFillStyle('#999999')
      ctx.setFontSize(20)
      ctx.fillText('微信扫码或输入分享码查看任务模板', 30, 640)
      
      // 品牌标识
      ctx.setFillStyle('#cccccc')
      ctx.setFontSize(16)
      ctx.fillText('浠艾福', 480, 880)
      
      ctx.draw()
      
      this.$refs.posterPopup.open()
    },
    savePoster() {
      uni.canvasToTempFilePath({
        canvasId: 'posterCanvas',
        success: (res) => {
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              uni.showToast({ title: '已保存到相册' })
            },
            fail: () => {
              uni.showToast({ title: '保存失败', icon: 'none' })
            }
          })
        },
        fail: () => {
          uni.showToast({ title: '生成失败', icon: 'none' })
        }
      })
    },
    shareToFriend() {
      // 触发分享
    },
    closePoster() {
      this.$refs.posterPopup.close()
    },
    getImageUrl: function(path) {
      return config.API_BASE_URL + path
    }
  }
}
</script>

<style scoped>
.container { min-height: 100vh; background: #f5f5f5; padding: 30rpx; }

.package-card { background: #fff; border-radius: 16rpx; overflow: hidden; margin-bottom: 30rpx; }
.cover { width: 100%; height: 300rpx; }
.package-info { padding: 30rpx; }
.name { font-size: 34rpx; font-weight: bold; color: #333; display: block; margin-bottom: 10rpx; }
.desc { font-size: 26rpx; color: #666; display: block; margin-bottom: 20rpx; }
.meta { display: flex; align-items: center; gap: 20rpx; font-size: 26rpx; }
.price { font-size: 34rpx; color: #f44336; font-weight: bold; }

.share-options { background: #fff; border-radius: 16rpx; padding: 30rpx; }
.section-title { font-size: 30rpx; font-weight: bold; display: block; margin-bottom: 20rpx; }

.option-item { display: flex; align-items: center; padding: 30rpx 0; border-bottom: 1rpx solid #f0f0f0; }
.option-item:last-child { border-bottom: none; }
.option-icon { font-size: 40rpx; margin-right: 20rpx; }
.option-text { font-size: 28rpx; color: #333; }

.poster-popup { background: #fff; border-radius: 16rpx; padding: 30rpx; width: 600rpx; }
.poster-title { font-size: 32rpx; font-weight: bold; display: block; text-align: center; margin-bottom: 20rpx; }
.poster-canvas { width: 600rpx; height: 900rpx; background: #f5f5f5; margin: 0 auto; }
.poster-actions { display: flex; gap: 20rpx; margin-top: 20rpx; }
.btn-save, .btn-share { flex: 1; background: #4CAF50; color: #fff; font-size: 28rpx; }
.btn-share { background: #2196F3; }
.close-btn { display: block; text-align: center; margin-top: 20rpx; color: #999; font-size: 28rpx; }
</style>