zx_flk_app/component/shareBox/index.vue

<template>
    <view>
        <painter style="position: absolute; top: -9999rpx" :palette="imgDraw" @imgOK="onImgOK" />
    </view>
</template>

<script>
import painter from '@/component/painter/painter';
export default {
    components: {
        painter
    },
    data() {
        return {
            imgDraw: {},
            // 绘制图片的大对象
            sharePath: '' // 生成的分享图
        };
    },
    props: {
        // 是否开始绘图
        isCanDraw: {
            type: Boolean,
            default: false
        },
        qrCode: {
            type: String,
            default: ''
        },
        headimg: {
            type: String,
            default: ''
        }
    },
    methods: {
        handleStartDrawImg() {
            uni.showLoading({
                title: '生成中'
            });
            this.setData({
                imgDraw: {
                    width: '500rpx',
                    height: '890rpx',
                    background: 'https://qiniu.bms16.com/appsrc%2Fhire%2Finvite_%20posters.png',
                    views: [
                        {
                            type: 'image',
                            url: this.headimg,
                            css: {
                                top: '780rpx',
                                left: '40rpx',
                                width: '80rpx',
                                height: '80rpx',
                                borderRadius: '40rpx'
                            }
                        },
                        {
                            type: 'image',
                            url: this.qrCode,
                            css: {
                                top: '765rpx',
                                right: '30rpx',
                                width: '110rpx',
                                height: '110rpx'
                            }
                        },
                        {
                            type: 'text',
                            text: `长按扫描识别二维码`,
                            css: {
                                top: '792rpx',
                                left: '140rpx',
                                fontSize: '20rpx',
                                color: '#858C93'
                            }
                        },
                        {
                            type: 'text',
                            text: `扫码赢取积分兑换奖励`,
                            css: {
                                top: '822rpx',
                                left: '140rpx',
                                fontSize: '20rpx',
                                color: '#858C93'
                            }
                        } // {
                        //   type: 'text',
                        //   text: `宇宙最萌蓝牙耳机测评员`,
                        //   css: {
                        //     top: '644rpx',
                        //     left: '375rpx',
                        //     maxLines: 1,
                        //     align: 'center',
                        //     fontWeight: 'bold',
                        //     fontSize: '44rpx',
                        //     color: '#3c3c3c'
                        //   }
                        // },
                        // {
                        //   type: 'image',
                        //   url: 'https://qiniu-image.qtshe.com/20190605index.jpg',
                        //   css: {
                        //     top: '834rpx',
                        //     left: '470rpx',
                        //     width: '200rpx',
                        //     height: '200rpx'
                        //   }
                        // }
                    ]
                }
            });
        },

        onImgErr(e) {
            uni.hideLoading();
            uni.showToast({
                title: '生成分享图失败，请刷新页面重试'
            }); //通知外部绘制完成，重置isCanDraw为false

            this.$emit('initData');
        },

        onImgOK(e) {
            uni.hideLoading(); // 展示分享图

            uni.showShareImageMenu({
                path: e.detail.path,
                fail: (err) => {
                }
            }); //通知外部绘制完成，重置isCanDraw为false

            this.$emit('initData');
        }
    },
    watch: {
        isCanDraw: {
            handler: function (newVal) {
                if (newVal) {
                    this.handleStartDrawImg();
                }
            },

            immediate: true
        }
    }
};
</script>
<style>
@import './index.css';
</style>