bwj_wechat/pages/tabbar-pages/home/analysis/shareBox/index.js

Component({
    properties: {
        // 是否开始绘图
        isCanDraw: {
            type: Boolean,
            value: false,
            observer(newVal) {
                newVal && this.handleStartDrawImg()
            }
        },
        drawMsg: {
            type: Object,
            value: {}
        }
    },
    data: {
        imgDraw: {}, // 绘制图片的大对象
        sharePath: '' // 生成的分享图
    },
    methods: {
        handleStartDrawImg() {
            console.log(this.data.drawMsg)
            let data = this.data.drawMsg;
            wx.showLoading({
                title: '生成中'
            })
            this.setData({
                imgDraw: {
                    width: '750rpx',
                    height: '982rpx',
                    background: 'https://bwj.obs.cn-east-2.myhuaweicloud.com/resources/WeChat/share/shareImage.png', //背景图片
                    views: [
                        /* 顶部蓝色背景 */
                        {
                            type: 'rect',
                            css: {
                                top: '36rpx',
                                left: '30rpx',
                                width: '690rpx',
                                height: '114rpx',
                                borderRadius: '6rpx 6rpx 0px 0px',
                                color: '#00C1D2'
                            }
                        },
                        /* Logo */
                        {
                            type: 'image',
                            url: 'https://bwj.obs.cn-east-2.myhuaweicloud.com/resources/WeChat/tacitly-approve/MRuserImg.png',
                            css: {
                                top: '64rpx',
                                left: '50rpx',
                                width: '58rpx',
                                height: '58rpx',
                                borderColor: '#FFF',
                                borderRadius: '29rpx'
                            }
                        },
                        /* 数据盒子 */
                        {
                            type: 'rect',
                            css: {
                                top: '66rpx',
                                left: '368rpx',
                                width: '312rpx',
                                height: '54rpx',
                                color: '#ffffff',
                                borderRadius: '4rpx'
                            }
                        },
                        /* 数据文字 */
                        {
                            type: 'text',
                            text: '数据',
                            css: {
                                height: '40rpx',
                                top: '74rpx',
                                left: '525rpx',
                                fontSize: '28rpx',
                                align: 'center',
                                color: '#00C1D2',
                                lineHeight: '40rpx',
                                fontWeight: '500',
                            }
                        },
                        /* 供需数据盒子 */
                        {
                            type: 'rect',
                            css: {
                                top: '150rpx',
                                left: '30rpx',
                                width: '690rpx',
                                height: '282rpx',
                                borderRadius: '0px 0px 6rpx 6rpx',
                                color: '#ffffff'
                            }
                        },
                        /* 用户头像 */
                        {
                            type: 'image',
                            url: data.headportraiturl || 'https://bwj.obs.cn-east-2.myhuaweicloud.com/resources/WeChat/userCenter/userImg.png',
                            css: {
                                top: '184rpx',
                                left: '70rpx',
                                width: '32rpx',
                                height: '32rpx',
                                borderColor: '#FFF',
                                borderRadius: '16rpx'
                            }
                        },
                        /* 用户名称 */
                        {
                            type: 'text',
                            text: `${data.createby}`,
                            css: {
                                top: '182rpx',
                                left: '110rpx',
                                fontSize: '28rpx',
                                color: '#000'
                            }
                        },
                        /* 用户地址 */
                        {
                            type: 'text',
                            text: `${data.tposition||'暂无地址'}`,
                            css: {
                                top: '226rpx',
                                left: '108rpx',
                                fontSize: '24rpx',
                                height: '34rpx',
                                lineHeight: '34rpx',
                                width: '588rpx',
                                color: 'rgba(0,0,0,.7)',
                                maxLines: '1'
                            }
                        },
                        /* 供需标题 */
                        {
                            type: 'text',
                            text: `[${data.ftype}] ${data.ftitle}`,
                            css: {
                                top: '270rpx',
                                left: '70rpx',
                                fontSize: '32rpx',
                                height: '44rpx',
                                lineHeight: '44rpx',
                                width: '630rpx',
                                color: 'rgb(0,0,0)',
                                fontWeight: '500',
                                maxLines: '1'
                            }
                        },
                        /* 供需详情 */
                        {
                            type: 'text',
                            text: `${data.fcontent}`,
                            css: {
                                top: '322rpx',
                                left: '70rpx',
                                fontSize: '28rpx',
                                height: '80rpx',
                                lineHeight: '40rpx',
                                width: '620rpx',
                                color: 'rgba(0,0,0,.7)',
                                maxLines: '2'
                            }
                        },
                        /* 第二行盒子 */
                        {
                            type: 'rect',
                            css: {
                                top: '462rpx',
                                left: '30rpx',
                                width: '690rpx',
                                height: '276rpx',
                                borderRadius: '6rpx',
                                color: '#ffffff'
                            }
                        },
                        /* 2-1 */
                        {
                            type: 'rect',
                            css: {
                                top: '502rpx',
                                left: '60rpx',
                                width: '196rpx',
                                height: '196rpx',
                                color: '#F6F7F8'
                            }
                        },
                        /* No.1 */
                        {
                            type: 'text',
                            text: `No.1`,
                            css: {
                                top: '522rpx',
                                left: '80rpx',
                                fontSize: '20rpx',
                                height: '28rpx',
                                lineHeight: '28rpx',
                                color: 'rgb(0,0,0)',
                            }
                        },
                        /* 分享数 */
                        {
                            type: 'text',
                            text: `分享数`,
                            css: {
                                top: '555rpx',
                                left: '80rpx',
                                fontSize: '24rpx',
                                height: '34rpx',
                                lineHeight: '34rpx',
                                color: 'rgb(0,0,0)',
                                fontWeight: '600'
                            }
                        },
                        /* 数量 */
                        {
                            type: 'text',
                            text: `${data.fsharetimes}`,
                            css: {
                                top: '618rpx',
                                left: '80rpx',
                                fontSize: '36rpx',
                                height: '50rpx',
                                lineHeight: '50rpx',
                                color: '#00C1D2',
                                fontWeight: '600'
                            }
                        },
                        /* 2-2 */
                        {
                            type: 'rect',
                            css: {
                                top: '502rpx',
                                left: '276rpx',
                                width: '196rpx',
                                height: '196rpx',
                                color: '#F6F7F8'
                            }
                        },
                        /* No.2 */
                        {
                            type: 'text',
                            text: `No.2`,
                            css: {
                                top: '522rpx',
                                left: '296rpx',
                                fontSize: '20rpx',
                                height: '28rpx',
                                lineHeight: '28rpx',
                                color: 'rgb(0,0,0)',
                            }
                        },
                        /* 电话数 */
                        {
                            type: 'text',
                            text: `电话数`,
                            css: {
                                top: '555rpx',
                                left: '296rpx',
                                fontSize: '24rpx',
                                height: '34rpx',
                                lineHeight: '34rpx',
                                color: 'rgb(0,0,0)',
                                fontWeight: '600'
                            }
                        },
                        /* 数量 */
                        {
                            type: 'text',
                            text: `${data.fphonetimes}`,
                            css: {
                                top: '618rpx',
                                left: '296rpx',
                                fontSize: '36rpx',
                                height: '50rpx',
                                lineHeight: '50rpx',
                                color: '#00C1D2',
                                fontWeight: '600'
                            }
                        },
                        /* 2-3 */
                        {
                            type: 'rect',
                            css: {
                                top: '502rpx',
                                left: '492rpx',
                                width: '196rpx',
                                height: '196rpx',
                                color: '#F6F7F8'
                            }
                        },
                        /* No.3 */
                        {
                            type: 'text',
                            text: `No.3`,
                            css: {
                                top: '522rpx',
                                left: '512rpx',
                                fontSize: '20rpx',
                                height: '28rpx',
                                lineHeight: '28rpx',
                                color: 'rgb(0,0,0)',
                            }
                        },
                        /* 浏览数 */
                        {
                            type: 'text',
                            text: `浏览数`,
                            css: {
                                top: '555rpx',
                                left: '512rpx',
                                fontSize: '24rpx',
                                height: '34rpx',
                                lineHeight: '34rpx',
                                color: 'rgb(0,0,0)',
                                fontWeight: '600'
                            }
                        },
                        /* 数量 */
                        {
                            type: 'text',
                            text: `${data.freadtimes}`,
                            css: {
                                top: '618rpx',
                                left: '512rpx',
                                fontSize: '36rpx',
                                height: '50rpx',
                                lineHeight: '50rpx',
                                color: '#00C1D2',
                                fontWeight: '600'
                            }
                        },
                        /* 第三行盒子 */
                        {
                            type: 'rect',
                            css: {
                                top: '768rpx',
                                left: '30rpx',
                                width: '690rpx',
                                height: '184rpx',
                                borderRadius: '6rpx',
                                color: '#ffffff'
                            }
                        },
                        /* 扫码了解更多资讯 */
                        {
                            type: 'text',
                            text: `扫码了解更多资讯`,
                            css: {
                                top: '838rpx',
                                left: '142rpx',
                                fontSize: '32rpx',
                                height: '44rpx',
                                lineHeight: '44rpx',
                                color: 'rgba(0,0,0,.7)',
                                fontWeight: '600'
                            }
                        },
                        /* 箭头 */
                        {
                            type: 'image',
                            url: 'https://bwj.obs.cn-east-2.myhuaweicloud.com/resources/WeChat/share/right.png',
                            css: {
                                top: '842rpx',
                                left: '408rpx',
                                width: '52rpx',
                                height: '36rpx',
                            }
                        },
                        /* 用户头像 */
                        {
                            type: 'image',
                            url: 'https://bwj.obs.cn-east-2.myhuaweicloud.com/resources/WeChat/qrCode.png',
                            css: {
                                top: '798rpx',
                                left: '524rpx',
                                width: '120rpx',
                                height: '120rpx',
                            }
                        },
                    ]
                }
            })
        },
        onImgErr(e) {
            wx.hideLoading()
            wx.showToast({
                title: '生成分享图失败，请刷新页面重试'
            })
            //通知外部绘制完成，重置isCanDraw为false
            this.triggerEvent('initData')
        },
        onImgOK(e) {
            wx.hideLoading()
            // 展示分享图
            wx.showShareImageMenu({
                path: e.detail.path,
                fail: err => {
                    console.log(err)
                }
            })
            //通知外部绘制完成，重置isCanDraw为false
            this.triggerEvent('initData')
        }
    }
})