cardtest/pages/userGoods/goodsCode/goodsCode.js

// pages/userGoods/goodsCode/goodsCode.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        qrcode      : '',    //二维码
        Picture     : 'https://lifetest.ysd-bs.com/storage/materials/2021/08/06/shareImg.jpg',   //海报图片
        rightId     : '',    //产品id
        userInfo    : '',    //我的信息
        isImgLay    : false, //是否显示图片弹出层
        parentId    : '',    //是否分享进入
        shareState  : false, //显示分享朋友圈弹出层
        pageDown    : '',    //下载海报和展示海报
        pageShare   : '',    //分享好友朋友圈海报
        profitText  : '',    //奖励文字
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad (options) {
        this.setData({
            rightId : options.rightid,
            parentId: options.parent_id
        })

        // 获取二维码
        wx.$api.user.publicCode('mini', 'goods', 'pages/userGoods/goodsDet/goodsDet?rightid=' + options.rightid + '&type=shareGoods').then(res=>{
            this.setData({
                qrcode   : res.data.qrcode,
                userInfo : res.data.user
            })
        }).catch(err=>{
            if(!err.login){
                // 写入缓存
                wx.setStorage({
                    key     : 'token',
                    data    : ''
                })
            }
        })

        // 获取分享海报图
        this.posterShow();
    },

    /**
     * 分享海报图
     */
    posterShow(){
        wx.$api.user.productPoster(this.data.rightId).then(res=>{
            this.setData({
                pageDown  : res.data.cover,
                pageShare : res.data.wechat_cover,
                profitText: res.data.profit_text
            })
        }).catch(err=>{
            if(!err.login){
                // 写入缓存
                wx.setStorage({
                    key     : 'token',
                    data    : ''
                })
            }
        })
    },

    /**
     * 预览图片
     */
    bigPicture(e) { 
        wx.previewImage({
            current : e.currentTarget.dataset.src,
            urls    : [e.currentTarget.dataset.src]
        })
    },

    /**
	 * 分享朋友圈弹出层状态
	 */
    shareShow() {
        this.setData({
            shareState: !this.data.shareState
        })
    },

    /**
	 * 绘图
	 */
	dowImg(){
		wx.showLoading({
            title: '加载中',
        })

        let downImg = new Promise(success=>{
            wx.getImageInfo({
                src     : this.data.pageDown,
                success : res => {
                    success(res.path)
                }
            })
        })
        
        // 下载素材
        let codeImg = new Promise(success => {
            wx.getImageInfo({
                src     : this.data.qrcode,
                success : res => {
                    success(res.path)
                }
            })
        })

        Promise.all([codeImg, downImg]).then(res => {
            // 绘制海报
            const ctx = wx.createCanvasContext('qrcodeCard')
            ctx.save()

            // 绘制背景
            ctx.drawImage(res[1], 0, 0, 375, 650)

            // 绘制白色背景
            ctx.drawImage('/static/img/goodsCode_white.png', 30, 460, 120, 120)

            // 绘制二维码
            ctx.drawImage(res[0], 40, 470, 100, 100)

            ctx.save();
            ctx.beginPath(); //开始绘制
            ctx.arc(70 / 2 + 156, 70 / 2 + 250, 70 / 2, 0, Math.PI * 2, false);
            ctx.clip();

            // 保存图片
            ctx.draw(true, () => {
                wx.hideLoading()
                wx.canvasToTempFilePath({
                    canvasId: 'qrcodeCard',
                    x: 0,
                    y: 0,
                    success: res => {
                        wx.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success : res=>{
                                wx.showToast({
                                    title: '分享海报已保存至相册',
                                    icon : 'none'
                                })
                            },
                            fail    : err=>{
                                wx.showModal({
                                    title       : '提示',
                                    content     : '暂未授权小程序写入您的相册，无法存储二维码海报',
                                    confirmColor: '#d82526',
                                    confirmText : '去设置',
                                    success     : info=>{
                                        if (info.confirm){
                                            wx.openSetting()
                                        }
                                    }
                                })
                            },
                            complete: e => {}
                        })
                    }
                })
            })

        }).catch(err=>{
            wx.showToast({
                title: '海报下载，请检查网络',
                icon : 'none'
            })
        })
	},

    /**
	 * 图片弹出层
	 */
	removeSaveImg(){
		this.setData({
            isImgLay: !this.data.isImgLay
        })
    },
    
    /**
	 * 保存图片到本地
	 */
	saveImg(){
        this.dowImg();
        this.setData({
            isImgLay: !this.data.isImgLay
        })
    },

    /**
	 * 分享
	 */
	onShareAppMessage(){
		return {
			title	: this.data.userInfo.nickname + "邀请您进入本时生活",
            path	: "/pages/userGoods/goodsDet/goodsDet?parent_id=" + this.data.userInfo.user_id + "&rightid=" + this.data.rightId + "&type=shareGoods",
			imageUrl: this.data.pageShare
		}
    },
    
    /**
	 * 用户点击右上角分享朋友圈
	 */
	// onShareTimeline: function () {
	// 	return {
	//         title   : this.data.userInfo.nickname + "邀请您进入本时生活",
    //         path	: "/pages/userGoods/goodsDet/goodsDet?parent_id=" + this.data.userInfo.user_id + "&rightid=" + this.data.rightId + "&type=shareGoods",
    //         imageUrl: this.data.pageShare
	//     }
	// }
})