<template> <div> <div class="qrcodeposter_wrap" v-if="showDom" id="canvasPoster"> <img class="avatar_pic" :src="avatarImg" @load="imgLoad" alt /> <div class="name">{{userName}}</div> <div class="interview">邀请你加入代表通</div> <div class="title">#扫描下方二维码邀请目标医生 加入专区#</div> <!-- <div class="qrcode_img">{{avatarImg}}</div> --> <!-- wx --> <div class="codeImg" style="1.45rem;height:1.45rem;margin:.15rem auto" id="qrCode"></div> <div class="footer_txt"> 邀请语:圣诞快乐!感谢您仍奋战在守护人类健康的第一线 ,愿您重视自己的健康生活和能力,以提供最高水准的医疗 </div> </div> <img style="100%;height:100%" :src="dataImg" v-if="dataImg" alt> </div> </template>
import QRCode from "qrcode2"; import html2canvas from "html2canvas"; export default { data() { return { avatarImg: "", userName: "", showDom: true, dataImg:'' }; }, created() { this.userName = this.curUser.userName; this.avatarImg = this.curUser.url; }, computed: { ...mapGetters({ curUser: "user/curUser", }), }, mounted() { this.QCode(); }, methods: { // 创建海报 createPoster() { const poster = document.getElementById("canvasPoster"); html2canvas(poster, { dpi: window.devicePixelRatio * 2, backgroundColor: "#fff", useCORS: true, scale: 2, async: true, }).then((canvas) => { this.dataImg = canvas.toDataURL("image/jpeg"); this.showDom = false; }); }, imgLoad() { this.createPoster(); }, // wx 二维码 QCode() { let qrcode = new QRCode("qrCode", { 150, height: 150, // 高度 text: `${location.origin}${location.pathname}/#/?inviteUid=${this.curUser.userId}`, colorDark: "#000", colorLight: "#fff", }); }, }, }; </script>