CZKJ.XKJ.Helper/src/common/js/poster.js

export default {
    shareText(goods, appName) {
        let str =
            `${appName}今日推荐～\n`;
        for (let good of goods) {
            if (good.tagPrice) {
                str += `\n${good.name} 原价：${good.tagPrice / 100}元  特价：${good.price / 100}元`;
            } else {
                str += `\n${good.name} 特价：${good.price / 100}元`;
            }
        }
        str += `\n\n【线上下单更多优惠，自提或配送到家都支持哦】`;

        uni.setClipboardData({
            data: str,
            success: () => {
                uni.showToast({
                    title: '复制成功',
                    icon: 'none',
                    duration: 2000,
                })
            },
        });
    },

    sharePoster(goods, config, self, storeId,appName) {
        uni.showLoading({
            title: "加载中...",
            mask: true,
        });
        // let bg = "https://oss.ixiaokejia.com/images/common/today.png";
        // 顶部图
        let bgTop = {
            src: "https://oss.ixiaokejia.com/images/common/today_top.jpg",
            h: 290,
            w: 750,
            x: 0,
            y: 0
        };
        // 底部图
        let bgBottom = {
            src: "https://oss.ixiaokejia.com/images/common/today_bottom.jpg",
            h: 380,
            w: 750,
            x: 0,
            y: 0,    // 之后计算
        };
        let appLogo = {
            src: config.logoUrl,
            w: 120,
            h: 120,
            x: 24,
            y: 0
        };

        let appNameXY = {
            x:27,
            y:150,
            y2:180,
            size:24,
            color:'#333333'
        }

        // 单个商品信息
        let XY = {
            lineH: 173,
            img: {
                x: 35,
                y: 310,
                w: 150,
                h: 140,
            },
            title: {
                x: 205,
                y: 335,
                y2: 363,
                size: 22,
                color: "#000000",
            },
            price: {
                x: 205,
                y: 410,
                size: 32,
                color: "#ff0000",
            },
            oldPrice: {
                x: 205,
                y: 440,
                size: 18,
                color: "#666666",
            },
        };

        // 设置canvas 高
        let n = Math.ceil(goods.length / 2);
        let canvasH = bgTop.h + bgBottom.h + n * XY.lineH;
        self.canvasHeight = canvasH + 'px'

        bgBottom.y = bgTop.h + n * XY.lineH

        const ctx = uni.createCanvasContext("canvas", self);

        Promise.all([
            uni.getImageInfo({
                src: bgTop.src,
            }),
            uni.getImageInfo({
                src: appLogo.src,
            }),
            uni.getImageInfo({
                src: bgBottom.src,
            }),
            self.api
                .get("/Share/GetQRCode", {
                    path: "pages/goods/category",
                    paremeters: JSON.stringify({
                        storeId: storeId
                    }),
                    width: 355,
                })
                .then((res) => {
                    return uni.getImageInfo({
                        src: res.data,
                    });
                }),
        ]).then((resList) => {
            // 背景
            ctx.setFillStyle("#fff");
            ctx.fillRect(0, 0, 750, canvasH);
            // 顶图
            if (resList[0][1].path) {
                ctx.drawImage(resList[0][1].path, bgTop.x, bgTop.y, bgTop.w, bgTop.h);
            }

            // appLogo
            if (resList[1][1].path) {
                ctx.drawImage(resList[1][1].path, appLogo.x, appLogo.y, appLogo.w, appLogo.h);
            }

            // appLogo
            if (resList[2][1].path) {
                ctx.drawImage(resList[2][1].path, bgBottom.x, bgBottom.y, bgBottom.w, bgBottom.h);
            }

            // // qrcode
            if (resList[3][1].path) {
                ctx.drawImage(resList[3][1].path, 110, bgBottom.y + 100, 220, 220);
            }

            // appName
            ctx.setFontSize(appNameXY.size);
            ctx.setFillStyle(appNameXY.color);
            if (appName.length > 8) {
                let name1 = appName.substr(0, 5);
                let name2 = appName.substr(5, 5);
                if (appName.length > 10) {
                    name2 += "...";
                }
                ctx.fillText(
                    name1,
                    appNameXY.x,
                    appNameXY.y
                );
                ctx.fillText(
                    name2,
                    appNameXY.x,
                    appNameXY.y2
                )
            } else {
                ctx.fillText(
                   appName,
                    appNameXY.x,
                    appNameXY.y
                );
            }


            // 商品
            let index = 1;
            for (let item of goods) {
                uni.getImageInfo({
                    src: item.mainImage,
                    success: (img) => {
                        if (index % 2 === 1) {
                            // 左

                            // 图片
                            let arrIndex = Math.floor(index / 2);
                            let deviation = arrIndex * 173;
                            // ctx.setFillStyle("#ff0000");
                            // ctx.fillRect(
                            //     XY.img.x,
                            //     XY.img.y + deviation,
                            //     XY.img.w,
                            //     XY.img.h
                            // );
                            // ctx.draw();
                            ctx.drawImage(
                                img.path,
                                XY.img.x,
                                XY.img.y + deviation,
                                XY.img.w,
                                XY.img.h
                            );

                            // name
                            ctx.setFontSize(XY.title.size);
                            ctx.setFillStyle(XY.title.color);
                            if (item.name.length > 8) {
                                let name1 = item.name.substr(0, 8);
                                let name2 = item.name.substr(8, 7);
                                if (item.name.length > 15) {
                                    name2 += "...";
                                }
                                ctx.fillText(
                                    name1,
                                    XY.title.x,
                                    XY.title.y + deviation
                                );
                                ctx.fillText(
                                    name2,
                                    XY.title.x,
                                    XY.title.y2 + deviation
                                );
                            } else {
                                console.log(item.name, 2222);
                                ctx.fillText(
                                    item.name,
                                    XY.title.x,
                                    XY.title.y + deviation
                                );
                            }

                            // price
                            ctx.setFontSize(XY.price.size);
                            ctx.setFillStyle(XY.price.color);
                            ctx.fillText(
                                item.price / 100 + "元",
                                XY.price.x,
                                XY.price.y + deviation
                            );

                            // oldPrice
                            if (item.tagPrice) {
                                ctx.setFontSize(XY.oldPrice.size);
                                ctx.setFillStyle(XY.oldPrice.color);
                                let text =
                                    "原价：" + item.tagPrice / 100 + "元";
                                ctx.fillText(
                                    text,
                                    XY.oldPrice.x,
                                    XY.oldPrice.y + deviation
                                );
                                ctx.fillRect(
                                    XY.oldPrice.x,
                                    XY.oldPrice.y + deviation - 7,
                                    text.length * (XY.oldPrice.size - 2),
                                    1
                                );
                            }
                        } else {
                            // 右
                            // 图片
                            let arrIndex = Math.floor(index / 2) - 1;
                            let deviation = arrIndex * 173;
                            let xdeviation = 355;
                            // ctx.setFillStyle("#ff0000");
                            // ctx.fillRect(
                            //     XY.img.x + xdeviation,
                            //     XY.img.y + deviation,
                            //     XY.img.w,
                            //     XY.img.h
                            // );
                            // ctx.draw();
                            ctx.drawImage(
                                img.path,
                                XY.img.x + xdeviation,
                                XY.img.y + deviation,
                                XY.img.w,
                                XY.img.h
                            );

                            // name
                            ctx.setFontSize(XY.title.size);
                            ctx.setFillStyle(XY.title.color);
                            if (item.name.length > 8) {
                                let name1 = item.name.substr(0, 8);
                                let name2 = item.name.substr(8, 7);
                                if (item.name.length > 15) {
                                    name2 += "...";
                                }
                                ctx.fillText(
                                    name1,
                                    XY.title.x + xdeviation,
                                    XY.title.y + deviation
                                );
                                ctx.fillText(
                                    name2,
                                    XY.title.x + xdeviation,
                                    XY.title.y2 + deviation
                                );
                            } else {
                                ctx.fillText(
                                    item.name,
                                    XY.title.x + xdeviation,
                                    XY.title.y + deviation
                                );
                            }

                            // price
                            ctx.setFontSize(XY.price.size);
                            ctx.setFillStyle(XY.price.color);
                            ctx.fillText(
                                item.price / 100 + "元",
                                XY.price.x + xdeviation,
                                XY.price.y + deviation
                            );

                            // oldPrice
                            if (item.tagPrice) {
                                ctx.setFontSize(XY.oldPrice.size);
                                ctx.setFillStyle(XY.oldPrice.color);
                                let text =
                                    "原价：" + item.tagPrice / 100 + "元";
                                ctx.fillText(
                                    text,
                                    XY.oldPrice.x + xdeviation,
                                    XY.oldPrice.y + deviation
                                );
                                ctx.fillRect(
                                    XY.oldPrice.x + xdeviation,
                                    XY.oldPrice.y + deviation - 7,
                                    text.length * (XY.oldPrice.size - 2),
                                    1
                                );
                            }
                        }
                        index++;
                        console.log(index);
                        if (index > goods.length) {
                            ctx.stroke();

                            ctx.draw();
                            self.canvasShow = true;
                            // 生成临时路径
                            setTimeout(() => {
                                uni.canvasToTempFilePath({
                                    canvasId: "canvas",
                                    fileType: "jpg",
                                    success: function (res) {
                                        self.canvasShow = false;
                                        uni.hideLoading();
                                        self.canvasImgPath =
                                            res.tempFilePath;
                                        uni.previewImage({
                                            urls: [self.canvasImgPath],
                                            longPressActions: true,
                                        });

                                        // 保存到相册
                                        uni.saveImageToPhotosAlbum({
                                            filePath: self.canvasImgPath,
                                            success: function () {
                                                self.fn.showToast("海报保存成功");
                                            },
                                            complete: function () {
                                            },
                                        });
                                    },
                                });
                            }, 1000);
                        }
                    },
                });
            }
        });
    }
}