qimall/addons/Store/client/views/cash/com-collection-code.php

<!-- 分享二维码，链接，海报弹窗 -->
<style>
    .canvas-div{
        position: fixed;
        left: -1000000px;
        top: -10000000px;
    }

    .share-name{
        width: 70px;
        display: inline-block;
        margin-right: 18px;
        text-align: end;
    }

    .share-pop-model{
        margin-top: 20px;
    }

</style>
<template id="com-collection-code">
    <div class="com-collection-code">
        <div id="qrcode-info" class="canvas-div">
            <!-- 默认海报 -->
            <canvas id="myDefCanvas" width="360" height="460" style="border:1px solid #c3c3c3;">
            <!-- 二维码 -->
            <div id="qrcode-pop" style="width:100px; height:100px; margin-top:15px;"></div>
        </div>

        <slot name="share-button" :show="showPop"></slot>

        <el-dialog
                title="付款码"
                :visible.sync="show"
                :append-to-body="true"
                width="30%">
            <div style="padding-top: 10px" class="share-pop-model" flex>
                <div class="share-name">二维码</div>
                <div style="width: 180px; height: 180px;background: #F2F2F2;margin-right: 12px;" flex="main:center cross:center">
                    <el-image id="code-img" style="width: 144px; height: 144px;" :src="qrCodeImg"></el-image>
                </div>
                <el-button flex type="text" v-if="showPoster" @click="getRechargeCode">下载海报</el-button>
                <el-button flex type="text" @click="downloadShareImg('qrcode')">下载二维码</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    Vue.component('com-collection-code', {
        template: '#com-collection-code',
        props: {
            url: {
                type: String,
                default: "",
            },
            showPoster: {
                type: Boolean,
                default: false,
            },
            posterTilte: {
                type: String,
                default: '',
            }
        },
        data(){
            return {
                qrCodeImg: "",
                show: false,
            }
        },
        created(){
        },
        methods: {
            async getData(){
                if(!this.url) return;
                this.qrCodeImg = await this.getQrCode(this.url);
            },
            copyLink(str) {
                var clipboard = new ClipboardJS('.copy_btn', {
                    text: function() {
                        return str;
                    }
                });
                var self = this;
                clipboard.on('success', function(e) {
                    // console.log("success")
                    self.$message.success('复制成功');
                    e.clearSelection();
                    clipboard.destroy()
                });
                clipboard.on('error', function(e) {
                    // console.log("error")
                    self.$message.error('复制失败，请手动复制');
                });
            },
            // 默认海报生成
            getRechargeCode(){
                if(!this.url) return;
                var c = document.getElementById("myDefCanvas");
                var ctx = c.getContext("2d");
                ctx.fillStyle="#1989FA";
                ctx.fillRect(0,0,360,460);
                ctx.font="40px Arial";
                ctx.fillStyle="#FFF";
                ctx.fillText(this.posterTilte,100,124);
                ctx.fillStyle="#FFF";
                ctx.fillRect(70,156,220,220);
                let img = document.getElementById("code-img")
                ctx.drawImage(img,78,164,204,204);
                var a = document.getElementById("myPoster");
                let srcInfo = c.toDataURL('image/png');
                this.downloadShareImg("poster",srcInfo);
            },
            // 生成二维码
            getQrCode(url){
                console.log(111111);
                let qrcodeInfo = document.getElementById("qrcode-info");
                document.getElementById("qrcode-pop").remove(); //删除生成的二维码
                let addCodeDom = document.createElement("div")
                addCodeDom.setAttribute("id","qrcode-pop");
                addCodeDom.setAttribute("style","width:300px; height:300px;");
                qrcodeInfo.appendChild(addCodeDom) //添加标签
                let qrCodeDom = document.getElementById("qrcode-pop")
                var qrcode = new QRCode(qrCodeDom, {
                    width : 300,
                    height : 300
                });
                let urlObject = new URL(url);
                let encodedUrl = encodeURI(urlObject.href);
                qrcode.makeCode(encodedUrl);
                // 获取二维码生成的图片信息
                let src = "";
                return new Promise((req,rej) => {
                    setTimeout(() => {
                        src = qrCodeDom.getElementsByTagName("img")[0].src;
                        req(src)
                    }, 200);
                })
                
            },
            // 图片下载
            downloadShareImg(type,img){
                let img_url = img;
                if ('qrcode' == type) {
                    if(!this.url) return;
                    img_url = this.qrCodeImg;
                }
                fetch(img_url).then(res => res.blob().then(blob => {
                    var a = document.createElement('a');
                    var url = window.URL.createObjectURL(blob);
                    a.href = url;
                    a.download = "";
                    a.click();
                    window.URL.revokeObjectURL(url);
                }))
            },
            showPop(){
                if(!this.url) {
                    this.$message({
                        message: '暂无分享链接',
                        type: 'warning'
                    });
                    return;
                }
                this.show = true;
                let that = this;
                this.$nextTick(v => {
                    that.getData();
                })
                console.info("test");
            }
        }
    });
</script>