qimall/backend/views/components/common/com-share-pop.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-share-pop">
    <div class="com-share-pop">
        <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 v-if="showShareLink">
                <div class="share-name">分享链接</div>
                <el-input style="width: 50%;" v-model="url" placeholder="暂无链接" disabled>
                    <template slot="append">
                        <el-button circle size="mini" type="text" @click="copyLink(url)" class="copy_btn">复制</el-button>
                    </template>
                </el-input>
            </div>
            <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-share-pop', {
        template: '#com-share-pop',
        props: {
            url: {
                type: String,
                default: "",
            },
            showPoster: {
                type: Boolean,
                default: false,
            },
            posterTilte: {
                type: String,
                default: '',
            },
            showShareLink: {
                type: Boolean,
                default: true,
            },
        },
        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() {
                console.log(this.showShareLink, 'showShareLink ==================');
                if (!this.url) {
                    this.$message({
                        message: '暂无分享链接',
                        type: 'warning'
                    });
                    return;
                }
                this.show = true;
                let that = this;
                this.$nextTick(v => {
                    that.getData();
                })
                console.info("test");
            }
        }
    });
</script>