link-wechat-web-pc/src/views/weGroupFission/modules/share.vue

<template>
    <el-dialog title="活动分享" width="500px" :visible.sync="visible" destroy-on-close>
        <template #title>
            <div class="modal-title">
                <span role="img" aria-label="share">✨</span>
                <span>活动分享</span>
            </div>
        </template>

        <div class="share-content">
            <div class="share-card">
                <div class="card-header">
                    <div class="header-icon wechat-icon">
                        <i class="el-icon-link"></i>
                    </div>
                    <span class="header-title">小程序链接分享</span>
                </div>

                <div class="card-body">
                    <div class="link-input-wrapper">
                        <el-input v-model="wechatPath" readonly>
                            <i slot="suffix" class="el-icon-link action-icon copy-icon" :data-clipboard-text="wechatPath"></i>
                        </el-input>
                        <div id="share-qrcode" v-show="false"></div>
                    </div>

                    <div class="download-row">
                        <el-link icon="el-icon-download" type="primary" @click="onDownload('miniCode')">下载小程序码</el-link>
                        <el-link icon="el-icon-picture-outline" type="primary" @click="onDownload('poster')">下载活动海报</el-link>
                    </div>
                </div>
            </div>

            <CompPreview ref="targetDom" :form-data="formData" />
        </div>
    </el-dialog>
</template>

<script>
import QRCode from 'qrcodejs2';
import html2canvas from 'html2canvas';
import CompPreview from './CompPreview.vue';
import { 
    queryById,
    getWechatGroupFissionUrl
} from '@/api/activity/index';
export default {
    name: '',
    components: {
        CompPreview
    },
    data() {
        return {
            qrcode: null,
            clipboard: null,
            visible: false,
            wechatPath: '获取中...',
            formData: {
                timeRange: []
            }
        };
    },
    mounted() {
        // 复制功能
        this.clipboard = new this.ClipboardJS('.copy-icon');
    },
    destroyed() {
        this.clipboard && this.clipboard.destroy();
    },
    methods: {
        async show(record) {
            this.visible = true;
            if (record && record.id) {
                await this.getQRCode(record);
                this.getData(record);
            }
        },
        // 初始数据
        getData(record) {
            // 加载详情
            queryById({ id: record.id }).then(res => {
                if (res.code === 200) {
                    this.formData = res.data;
                    // 时间
                    if (res.data.beginDate && res.data.endDate) {
                        this.formData.timeRange = [res.data.beginDate, res.data.endDate];
                    }
                    // 阶梯数组
                    if (res.data.weGroupFissionStepList) {
                        this.formData.inviteTiers = res.data.weGroupFissionStepList.map((item) => ({
                            reward: item.rewardAmount,
                            count: item.invitationCount,
                        }));
                    }
                    // 额外奖励数组
                    if (res.data.weGroupFissionExtraList) {
                        this.formData.inviteExtras = res.data.weGroupFissionExtraList.map((item) => {
                            let nd = {
                                tierIndex: item.sortNum - 1,
                                rewardType: item.rewardType,
                                rewardValue: undefined
                            };
                            if (item.rewardType == 1) {
                                nd.rewardValue = item.rewardAmount;
                            } else if (item.rewardType == 2) {
                                nd.rewardName = item.rightInfoName;
                                nd.rewardValue = item.rightInfoId;
                            } else if (item.rewardType == 3) {
                                nd.rewardName = item.lotteryActivityName;
                                nd.rewardValue = item.lotteryActivityId;
                            }
                            return nd;
                        });
                    }
                    
                    this.$refs.targetDom.getQRCode(this.wechatPath);
                }
            });
        },
        // 初始化二维码
        async getQRCode(record) {
            await getWechatGroupFissionUrl({
                url: 'packageF/pages/activity/weGroupFission/poster',
                version: 'release',
                groupFissionId: record.id,
            }).then(res => {
                if (res.code === 200) {
                    this.wechatPath = res.data;
                }
            });
            this.qrcode = new QRCode('share-qrcode', {
                text: this.wechatPath, 
                width: 200, 
                height: 200, 
                colorDark: '#000000', // 二维码前景色
                colorLight: '#ffffff', // 二维码背景色
                correctLevel: QRCode.CorrectLevel.H // 容错级别：L/M/Q/H（H最高）
            });
        },
        // 下载功能
        async onDownload(type) {
            if (type === 'miniCode') {
                const qrImg = document.querySelector('#share-qrcode img') || document.querySelector('#share-qrcode canvas');
                if (!qrImg) {
                    this.$message.error('二维码生成失败！');
                    return;
                }

                // 创建下载链接
                const a = document.createElement('a');
                a.download = '小程序码-' + new Date().getTime() + '.png'; // 下载文件名

                // 处理 Canvas 或 Img 转 DataURL
                if (qrImg.tagName === 'CANVAS') {
                    a.href = qrImg.toDataURL('image/png');
                } else {
                    a.href = qrImg.src;
                }

                // 触发下载
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            } else {
                try {
                    // 1. 获取目标 DOM 元素
                    const targetElement = this.$refs.targetDom.$el;
                    if (!targetElement) {
                        this.$message.error('未找到要截图的DOM元素！');
                        return;
                    }

                    // 2. 配置 html2canvas 参数（关键：解决样式、跨域等问题）
                    const canvas = await html2canvas(targetElement, {
                        useCORS: true, // 允许跨域图片（必开，否则跨域图片会空白）
                        allowTaint: true, // 允许污染画布
                        scale: 2, // 缩放比例（2倍生成高清图，避免模糊）
                        logging: false, // 关闭控制台日志
                        backgroundColor: '#ffffff', // 背景色（默认透明，建议设置）
                        // 可选：指定截图区域（x/y 偏移，width/height 尺寸）
                        // x: 0,
                        // y: 0,
                        // width: targetElement.offsetWidth,
                        // height: targetElement.offsetHeight
                    });

                    // 3. 转换 Canvas 为 Blob（比 Base64 更适合大文件）
                    canvas.toBlob((blob) => {
                        // 4. 创建下载链接
                        const url = URL.createObjectURL(blob);
                        const a = document.createElement('a');
                        a.href = url;
                        // 自定义下载文件名（时间戳避免重复）
                        a.download = `活动海报-${new Date().getTime()}.png`;
                        // 触发下载
                        document.body.appendChild(a);
                        a.click();
                        // 5. 清理资源
                        document.body.removeChild(a);
                        URL.revokeObjectURL(url);

                        this.$message.success('图片生成并下载成功！');
                    }, 'image/png'); // 指定图片格式为 PNG

                } catch (error) {
                    console.error('生成图片失败：', error);
                    this.$message.error('图片生成失败，请重试！');
                }
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f1f1f;
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-content {
    .share-card {
        padding: 20px;
        background: #f8faff; 
        border-radius: 12px;
        border: 1px solid #eff4f9; 
        transition: all 0.3s;

        &:hover {
            border-color: #d9e4ff;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 16px;

            .header-icon {
                width: 28px;
                height: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 6px;
                margin-right: 10px;
                font-size: 16px;

                &.wechat-icon {
                    background: #e7f8eb; 
                    color: #07c160;
                }

                &.h5-icon {
                    background: #e6f7ff; 
                    color: #1890ff;
                }
            }

            .header-title {
                font-size: 15px;
                font-weight: 600;
                color: #333;
            }
        }

        .card-body {
            .link-input-wrapper {
                margin-bottom: 12px;

                .action-icon {
                    font-size: 22px;
                    cursor: pointer;
                    transition: all 0.2s;
                    color: #1890ff; 
                    padding: 4px;
                    border-radius: 4px;

                    &:hover {
                        color: #40a9ff;
                    }

                    &.copy-icon:active {
                        color: #096dd9;
                    }
                }
            }

            .download-row {
                display: flex;
                gap: 20px;
            }
        }
    }
}

.poster-preview {
    border: 0;
    border-radius: 0;
    position: fixed;
    top: -2000px;
}
</style>