staff/pagesA/invite/components/SharePopup.vue

<template>
  <wd-popup v-model="innerVisible" position="bottom" :safe-area-inset-bottom="true" @close="handleClose">
    <view class="share-popup">
      <view class="share-header li-flex li-justify-between li-items-center li-px-30 li-py-20">
        <text class="li-text-32">分享</text>
        <text class="ri-close-line li-text-48 li-text-#999" @click="handleClose"></text>
      </view>
      
      <view class="share-content li-p-30">
        <view class="share-methods li-flex li-justify-around">
          <view class="share-item li-flex li-flex-col li-items-center" @click="handleShare('wechat')">
            <view class="icon-wrapper li-bg-#07c160 li-mb-15">
              <text class="ri-wechat-line li-text-white li-text-48"></text>
            </view>
            <text class="li-text-26">微信好友</text>
          </view>
          <view class="share-item li-flex li-flex-col li-items-center" @click="handleGenerate">
            <view class="icon-wrapper li-bg-#0070F0 li-mb-15">
              <text class="ri-image-line li-text-white li-text-48"></text>
            </view>
            <text class="li-text-26">生成海报</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 海报预览弹窗 -->
    <wd-popup v-model="showPoster" position="center" :safe-area-inset-bottom="true">
      <view class="poster-preview">
        <canvas canvas-id="posterCanvas" class="poster-canvas"></canvas>
        <view class="poster-actions li-flex li-justify-around li-mt-30">
          <wd-button size="small" @click="showPoster = false">取消</wd-button>
          <wd-button size="small" type="primary" @click="savePoster">保存图片</wd-button>
        </view>
      </view>
    </wd-popup>
  </wd-popup>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'
import { useToast } from '@/uni_modules/wot-design-uni'

const Toast = useToast()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const innerVisible = ref(false)

// 监听props的变化
watch(() => props.visible, (val) => {
  innerVisible.value = val
})

const emit = defineEmits(['update:visible', 'close', 'generate', 'share'])
const showPoster = ref(false)

// 关闭弹窗
const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}

// 处理分享
const handleShare = (type) => {
  emit('share', type)
  handleClose()
}

// 处理生成海报
const handleGenerate = async () => {
  showPoster.value = true
  await generatePoster()
}

// 生成海报
const generatePoster = async () => {
  try {
    const ctx = uni.createCanvasContext('posterCanvas')
    
    // 设置画布大小
    const canvasWidth = 300
    const canvasHeight = 450
    
    // 绘制背景
    ctx.setFillStyle('#ffffff')
    ctx.fillRect(0, 0, canvasWidth, canvasHeight)
    
    // 绘制标题
    ctx.setFillStyle('#333333')
    ctx.setFontSize(16)
    ctx.setTextAlign('center')
    ctx.fillText('邀请您加入我们的物业管理平台', canvasWidth / 2, 40)
    
    // 绘制二维码（示例）
    ctx.setFillStyle('#000000')
    ctx.fillRect(100, 200, 100, 100)
    
    // 绘制底部文字
    ctx.setFillStyle('#666666')
    ctx.setFontSize(14)
    ctx.fillText('扫码加入', canvasWidth / 2, 350)
    
    // 执行绘制
    ctx.draw()
  } catch (error) {
    Toast.error('生成海报失败')
  }
}

// 保存海报
const savePoster = () => {
  uni.canvasToTempFilePath({
    canvasId: 'posterCanvas',
    success: (res) => {
      uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: () => {
          Toast.success('保存成功')
          showPoster.value = false
          handleClose()
        },
        fail: () => {
          Toast.error('保存失败')
        }
      })
    },
    fail: () => {
      Toast.error('生成图片失败')
    }
  })
}
</script>

<style lang="scss">
.share-popup {
  .share-header {
    border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
  }
  
  .share-methods {
    .share-item {
      .icon-wrapper {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

.poster-preview {
  background: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  
  .poster-canvas {
    width: 600rpx;
    height: 900rpx;
    background: #fff;
  }
  
  .poster-actions {
    padding: 0 40rpx;
  }
}
</style>