tuanfeng-pc-mer/src/views/shop/exchange/index.vue

<template>
    <div class="storeCode">
        <div class="paymentCode-left">
            <div class="paymentCode-title">店铺兑换商品二维码</div>
            <template v-if="canvasImg == ''">
                <!-- v-if="canvasImg == ''" -->
                <div ref="paymentCodeCanvas" id="paymentCodeCanvas">
                    <div class="paymentCode-img" ref="businessCardCanvas" id="businessCardCanvas">
                        <div class="paymentCode-img-live">兑换专区</div>
                        <div class="paymentCode-img-title">扫码兑换商品</div>
                        <div class="img-box">
                            <img :src="codeInfo.shopCode" alt="">
                        </div>
                        <div class="img-button">{{ codeInfo.shopName }}</div>
                    </div>
                </div>
            </template>
            <template v-else>
                <div class="paymentCode-img-box">
                    <el-image style="width: 463px; height: 595px" :src="canvasImg" :preview-src-list="srcList">
                    </el-image>
                </div>
            </template>
            <div class="paymentCode-open">
                <div class="open-icon">
                    <img src="@/assets/images/scan.png" alt="">
                </div>
                <div class="open-text">打开微信扫一扫即可进入兑换专区</div>
            </div>
            <div class="paymentCode-btn" @click="downloadCode">下载兑换二维码</div>
        </div>
    </div>
</template>

<script>
import { shopSysGetById } from "@/api/shopSys"
import QRCode from 'qrcode';
//  引入 cookie 的库
import Cookies from 'js-cookie'
import html2canvas from 'html2canvas'
export default {
    created() {
        this.generateCode()
    },
    data() {
        return {
            codeInfo: {
                shopName: '',
                shopCode: ''
            },
            canvasImg: '',
            srcList: [],
            //  支持支付方式数据
            payList: [
                {
                    url: require('@/assets/images/mode-img/1.png'),
                    text: '团蜂佣金'
                },
                {
                    url: require('@/assets/images/mode-img/2.png'),
                    text: '团蜂代金券'
                },
                {
                    url: require('@/assets/images/mode-img/3.png'),
                    text: '建行支付'
                },
                {
                    url: require('@/assets/images/mode-img/4.png'),
                    text: '团蜂消费金'
                },
                {
                    url: require('@/assets/images/mode-img/5.png'),
                    text: '微信支付'
                },
                {
                    url: require('@/assets/images/mode-img/6.png'),
                    text: '支付宝'
                },
            ],
            //  没有 logo 的二维码图片
            qCodeImg: '',
            shopLogo: ''
        }
    },
    // updated() {
    // },
    methods: {
        //  生成二维码
        async setQRcode() {
            //  https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/shop/shop-detail?shopId=494
            //  获取本地存储的商家 id
            let shopId = Cookies.get('shopID');
            // let urlCode = `https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=${shopId}&shopName=${this.codeInfo.shopName}`
            // let urlCode = `http://192.168.0.151:8988/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=${shopId}&shopName=${this.codeInfo.shopName}`

            let urlCode = ""
            if(process.env.NODE_ENV == "production"){
                urlCode = `https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=${shopId}&shopName=${this.codeInfo.shopName}`
                // urlCode = `https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=491&shopName=测试小店`
            }else{
                urlCode = `https://test.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=${shopId}&shopName=${this.codeInfo.shopName}`
            }
            // let urlCode = `https://test.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/exchange/index?shopId=${shopId}&shopName=${this.codeInfo.shopName}`
            //  根据 qcode 生成二维码链接
            // let imgCode = await QRCode.toDataURL(`https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/another-tf/another-user/shop/shop-detail?shopId=${shopId}`)
            // console.log(imgCode);
            const qrCodeCanvas = document.createElement('canvas');
            qrCodeCanvas.width = 300; // 根据需要调整二维码尺寸
            qrCodeCanvas.height = 300; // 根据需要调整二维码尺寸
            await QRCode.toCanvas(qrCodeCanvas, urlCode);
            const ctx = qrCodeCanvas.getContext('2d');
            const logo = new Image();
            //  本地头像
            logo.src = this.shopLogo || 'https://jufeng-shop-1317254189.cos.ap-guangzhou.myqcloud.com/1722073118502-微信图片_20230511154105.jpg';
            //  解决跨域 重要
            logo.setAttribute('crossOrigin', 'anonymous');
            console.log(logo);
            logo.onload = () => {
                console.log("进来2");
                const logoSize = qrCodeCanvas.width * 0.26; // 根据需要调整logo尺寸
                const logoX = (qrCodeCanvas.width - logoSize) / 2;
                const logoY = (qrCodeCanvas.height - logoSize) / 2;
                // 绘制二维码
                ctx.drawImage(logo, logoX, logoY, logoSize, logoSize);
                // 将生成的二维码插入到页面中
                this.codeInfo.shopCode = qrCodeCanvas.toDataURL();
                this.$nextTick(() => {
                    this.generateImage()
                })
            };
        },
        async generateCode() {
            const res = await shopSysGetById({})
            this.codeInfo.shopName = res.data.shopName
            this.shopLogo = res.data.shopLogo
            //  生成 qCode 二维码
            this.setQRcode()
        },
        generateImage() {
            html2canvas(this.$refs.paymentCodeCanvas, {
                dpi: 300,
                useCORS: false,
                allowTaint: true,
                logging: false,
                scale: 1,
                windowHeight: this.$refs.businessCardCanvas?.offsetHeight,
                width: this.$refs.businessCardCanvas?.offsetWidth,
                height: this.$refs.businessCardCanvas?.offsetHeight
            }).then((canvas) => {
                console.log("执行到这里了9999");
                this.canvasImg = canvas.toDataURL('image/png');
                // console.log(this.canvasImg)
                this.srcList.push(this.canvasImg)
            }).catch(() => {
                console.log("生成图片错误");
            });
        },
        downloadCode() {
            this.$confirm('您确定需要下载商家二维码吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.setImgSize(463, 595)
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消下载成功'
                });
            });
        },
        //  设置图片大小
        setImgSize(width, height) {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')

            // 设置canvas尺寸
            canvas.width = width
            canvas.height = height

            // 绘制图片到canvas上
            const img = new Image()
            img.src = this.canvasImg
            img.onload = () => {
                ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

                // 将canvas内容转换为base64格式的图片数据
                const imageData = canvas.toDataURL('image/png')

                // 创建下载链接并设置文件名
                const filename = `${this.codeInfo.shopName}的店铺二维码.png`
                const link = document.createElement('a')
                link.href = imageData
                link.download = filename

                // 将下载链接添加到页面并点击下载
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
            }
        },
    }
}
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

img {
    margin: 0;
    padding: 0;
}

.storeCode {
    display: flex;
    justify-content: center;
    gap: 117px;
    padding-top: 50px;

    .paymentCode-left {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .paymentCode-title {
            font-size: 28px;
            color: #000;
            font-weight: 500;
            margin-bottom: 20px;
        }

        .paymentCode-img {
            width: 463px;
            height: 595px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #EF530E;
            border-radius: 10px;
            position: relative;

            .paymentCode-img-live {
                font-size: 28px;
                color: #fff;
                font-weight: 700;
                font-style: italic;
                margin-top: 15px;
            }

            .paymentCode-img-title {
                display: block !important;
                width: 100%;
                height: 56px !important;
                color: #fff !important;
                font-size: 50px !important;
                margin: 20px 0 24px !important;
                font-weight: 700 !important;
                font-style: italic !important;
                box-sizing: border-box;
                text-align: center;
                line-height: 56px;
            }

            .img-box {
                width: 300px;
                height: 300px;

                img {
                    width: 100% !important;
                    height: 100% !important;
                }
            }


            .img-button {
                width: 100% !important;
                height: 88px !important;
                background-color: #fff;
                position: absolute;
                left: 0;
                bottom: 0;
                border-radius: 0 0 9px 9px !important;
                text-align: center !important;
                line-height: 88px !important;
                font-size: 24px !important;
            }
        }

        .paymentCode-img-box {
            width: 463px;
            height: 595px;

            img {
                width: 100% !important;
                height: 100% !important;
            }
        }

        .paymentCode-open {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-top: 30px;

            .open-icon {
                width: 50px;
                height: 50px;

                img {
                    width: 100% !important;
                    height: 100% !important;
                }
            }

            .open-text {
                font-size: 28px;
                color: #3D3D3D;
            }
        }

        .paymentCode-btn {
            width: 315px;
            height: 67px;
            background-color: #EF530E;
            color: #fff;
            border-radius: 10px;
            text-align: center;
            line-height: 67px;
            margin-top: 32px;
            font-size: 28px;
            cursor: pointer;
        }
    }


}
</style>