{"version":3,"sources":["webpack:///./src/views/newActivity/newInviter.vue?f015","webpack:///src/views/newActivity/newInviter.vue","webpack:///./src/views/newActivity/newInviter.vue?0d8e","webpack:///./src/views/newActivity/newInviter.vue","webpack:///./src/assets/img/invite_bg.png","webpack:///./src/assets/img/invite_logo.png","webpack:///./src/views/newActivity/newInviter.vue?ae67"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","style","backgroundImage","posterHtmlBg","_m","on","createPoster","_v","staticRenderFns","component","module","exports"],"mappings":"kJAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACF,EAAG,MAAM,CAACE,YAAY,aAAaC,MAAM,CAAC,GAAK,eAAe,CAACH,EAAG,MAAM,CAACE,YAAY,UAAUE,MAAM,CAAEC,gBAAiB,OAAOT,EAAIU,aAAa,MAAO,CAACV,EAAIW,GAAG,GAAGX,EAAIW,GAAG,OAAOP,EAAG,SAAS,CAACE,YAAY,SAASM,GAAG,CAAC,MAAQZ,EAAIa,eAAe,CAACb,EAAIc,GAAG,eACpXC,EAAkB,CAAC,WAAa,IAAIf,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,UAAU,CAACF,EAAG,MAAM,CAACE,YAAY,WAAWC,MAAM,CAAC,GAAK,kBAAkB,WAAa,IAAIP,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,QAAQ,CAACF,EAAG,MAAM,CAACE,YAAY,UAAUC,MAAM,CAAC,IAAM,EAAQ,e,kJCuBjX,GACE,WAAF,GACE,KAFF,WAGI,MAAJ,CACM,UAAN,GACM,cAAN,OACM,aAAN,YAGE,QAAF,CACI,aADJ,SACA,GAEM,IAAN,uCACA,sBACM,QAAN,OACM,IAAN,aACQ,MAAR,UACQ,OAAR,UACQ,UAAR,UACQ,WAAR,UACQ,aAAR,qBAEM,EAAN,aAGI,aAhBJ,WAkBM,IAAN,OACA,wCACM,IAAN,GACQ,SAAR,EACQ,YAAR,EACQ,SAAR,EACQ,iBAAR,EACQ,QALR,SAKA,GACU,IAAV,iCACU,EAAV,yBAEA,kBAEQ,EAAR,mCACQ,EAAR,yBAII,QApCJ,SAoCA,GAAM,IAAN,OACM,QAAN,iBACM,IAAN,oCACM,GAAN,gFAGQ,EAAR,qCACU,EAAV,kBAEA,CACQ,IAAR,8BACQ,EAAR,OACQ,EAAR,4BACQ,SAAR,oBACQ,EAAR,UAII,QAtDJ,SAsDA,GAEM,IACN,iBAAQ,KAAR,6BACA,yBACA,8BACM,EAAN,OAEM,EAAN,4DAKM,IAAN,wCAEM,EAAN,iBAEM,IAAN,oBAGI,QA1EJ,SA0EA,GACM,IAAN,YACM,EAAN,MACM,EAAN,wBACM,EAAN,kBACQ,IAAR,mCACQ,EAAR,cACQ,EAAR,gBACQ,IAAR,qBACQ,EAAR,oBACQ,IAAR,8BAOQ,EAAR,8BACU,KAAV,CACY,QAAZ,KAGQ,EAAR,+BAAU,MAAV,OAIE,QA7GF,WA8GI,IAAJ,yEACI,QAAJ,aACI,KAAJ,kBCxImW,I,wBCQ/VS,EAAY,eACd,EACAjB,EACAgB,GACA,EACA,KACA,WACA,MAIa,aAAAC,E,gCCnBfC,EAAOC,QAAU,IAA0B,8B,qBCA3CD,EAAOC,QAAU,IAA0B,gC,kCCA3C","file":"js/chunk-1510c8cc.1730714105667.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"wrap\"},[_c('div',{staticClass:\"posterHtml\",attrs:{\"id\":\"posterHtml\"}},[_c('div',{staticClass:\"bgImage\",style:({backgroundImage: 'url('+_vm.posterHtmlBg+')'})},[_vm._m(0),_vm._m(1)])]),_c('button',{staticClass:\"baocun\",on:{\"click\":_vm.createPoster}},[_vm._v(\"保存宣传海报\")])])}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"qrcode\"},[_c('div',{staticClass:\"imgStyle\",attrs:{\"id\":\"qrcodeImg\"}})])},function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"logo\"},[_c('img',{staticClass:\"logoImg\",attrs:{\"src\":require(\"../../assets/img/invite_logo.png\")}})])}]\n\nexport { render, staticRenderFns }","<template>\n    <div class=\"wrap\">\n        <!-- 海报html元素 -->\n        <div id=\"posterHtml\" class=\"posterHtml\">\n            <div class=\"bgImage\" :style=\"{backgroundImage: 'url('+posterHtmlBg+')'}\">\n                <!-- 二维码 -->\n                <div class=\"qrcode\">\n                    <div id=\"qrcodeImg\" class=\"imgStyle\"></div>\n                </div>\n                <div class=\"logo\">\n                    <img class=\"logoImg\" src=\"../../assets/img/invite_logo.png\" />\n                </div>\n            </div>\n        </div>\n        <button class=\"baocun\" @click=\"createPoster\">保存宣传海报</button>\n    </div>\n</template>\n  \n<script>\n\nimport wx from \"weixin-js-sdk-ts\";\nimport QRCode from 'qrcodejs2'\nimport html2canvas from 'html2canvas'\n\nexport default {\n    components: {},\n    data() {\n        return {\n            posterImg: '', // 最终生成的海报图片\n            posterImgName: '分享有礼', // 最终生成的海报图片名称\n            posterHtmlBg: require('../../assets/img/invite_bg.png'), // 背景图\n        };\n    },\n    methods: {\n        createQrcode(text) {\n            // 生成二维码\n            const qrcodeImgEl = document.getElementById('qrcodeImg')\n            let  width = window.screen.width\n            console.log(width)\n            let qrcode = new QRCode(qrcodeImgEl, {\n                width: width/375*155,\n                height: width/375*155,\n                colorDark: '#000000',\n                colorLight: '#ffffff',\n                correctLevel: QRCode.CorrectLevel.H\n            })\n            qrcode.makeCode(text)\n        },\n        //click 点击按钮生成海报\n        createPoster() { \n            // 生成海报\n            const vm = this\n            const domObj = document.getElementById('posterHtml')\n            html2canvas(domObj, {\n                useCORS: true,\n                allowTaint: false,\n                logging: false,\n                letterRendering: true,\n                onclone(doc) {\n                    let e = doc.querySelector('#posterHtml')\n                    e.style.display = 'block'\n                }\n            }).then(canvas => {\n                // 在微信里,可长按保存或转发\n                vm.posterImg = canvas.toDataURL('image/png')\n                vm.imgDown(vm.posterImg)\n            })\n        },\n        // 保存图片到本地\n        imgDown(img) {\n            console.log('img ===',img)\n            var ua = navigator.userAgent.toLowerCase()\n            if (ua.match(/MicroMessenger/i) === 'micromessenger' || ua.indexOf('micromessenger') !== -1) {\n            //第一种情况在微信小程序中没有奏效，第二种奏效了\n            //ios的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）\n                wx.miniProgram.getEnv((res) => {\n                   this.saveImg(img)\n                })\n            } else {\n                var alink = document.createElement('a')\n                alink.href = img\n                alink.download = this.posterImgName // 图片名\n                document.body.appendChild(alink)\n                alink.click()\n                // this.savePic(img)\n            }\n        },\n        savePic(Url){\n            // Url = this.dialogImgUrl //图片路径，也可以传值进来\n            var triggerEvent = \"touchstart\"; //指定下载方式\n            var blob=new Blob([''], {type:'application/octet-stream'}); //二进制大型对象blob\n            var url = URL.createObjectURL(blob); //创建一个字符串路径空位\n            var a = document.createElement('a'); //创建一个 a 标签\n            a.href = Url;  //把路径赋到a标签的href上\n            //正则表达式，这里是把图片文件名分离出来。拿到文件名赋到a.download,作为文件名来使用文本\n            a.download = Url.replace(/(.*\\/)*([^.]+.*)/ig,\"$2\").split(\"?\")[0]; \n            /* var e = document.createEvent('MouseEvents');  //创建事件（MouseEvents鼠标事件）\n            e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); //初始化鼠标事件（initMouseEvent已弃用）*/\n            \n            //代替方法。创建鼠标事件并初始化（后面这些参数我也不清楚，参考文档吧 https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent）\n            var e = new MouseEvent('click', ( true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null));  \n            //派遣后，它将不再执行任何操作。执行保存到本地\n            a.dispatchEvent(e); \n            //释放一个已经存在的路径（有创建createObjectURL就要释放revokeObjectURL）\n            URL.revokeObjectURL(url);  \n        },\n\n        saveImg(imgBaseSrc) {\n            let img = new Image()\n            img.src = imgBaseSrc //这里是图片的src\n            img.crossOrigin = 'anonymous' //The opeartaion is insecure , 其他跨域问题自行代理解决.\n            img.onload = function() {\n                let canvas = document.createElement('canvas')\n                canvas.width = img.width\n                canvas.height = img.height\n                let ctx = canvas.getContext('2d')\n                ctx.drawImage(this, 0, 0)\n                let imgBase64Data = canvas.toDataURL('image/jpeg', 1) //这里就拿到了base64\n\n                /*\n                h5中postMessage虽然会立即提交信息，但是小程序并不会立即受理。小程序webview上的监听函数，只会在特定时机触发并接收到消息。\n                即postMessage所有的消息都只能等得分享或webview的生命周期结束时才会被触发，它是一个消息队列。\n                在保存图片时，可以立即触发它的返回事件。\n                */\n                wx.miniProgram.postMessage({\n                    data: {\n                        imgData: imgBase64Data // 刚才拿到的base64 数据\n                    }\n                })\n                wx.miniProgram.navigateBack({ delta: 1 }) // 注意：只有执行此事件后，才能在webview的事件监听中接收到信息\n            }\n        }\n    },\n    mounted() { \n        let url = 'https://m.sxdjcq.com/invite?siteInviteId=' + this.$route.query.memberId\n        console.log(url,'111')\n        this.createQrcode(url) //这里放的是二维码地址\n    },\n};\n\n</script>\n  \n<style lang=\"less\" scoped>\n.wrap {\n    position: relative;\n    background-size: cover;\n    height: 100vh;\n    width: 100vw;\n    background-color: #4A8FE8;\n}\n.posterHtml{\n    width: 100vw;\n    height: calc(100vw/750*267*2 + 100vw/375*155 + 100vw/375*667/667*290 + 82px);\n    background-color: #4A8FE8;\n}\n.bgImage{\n    background-repeat: no-repeat;\n    background-size: 100vw 100vw/750*1334;\n    width: 100vw;\n    height: 100vw/750*1334;\n}\n\n.qrcode{\n    display: flex;\n    justify-content: center;\n    padding-top: 100vw/750*267*2;\n}\n\n.imgStyle{\n    border-width: 4px;\n    border-style: dashed;\n    border-color: #30A4D7;\n    padding: 4px;\n}\n\n.logo{\n    display: flex;\n    justify-content: center;\n    padding-top: 100vw/375*667/667*290;\n}\n\n.logoImg{\n    width: 142px;\n    height: 62px;\n}\n\n\n.baocun{\n  display: block;\n  width: 60%;\n  height: 44px;\n  padding: 0;\n  line-height: 44px;\n  text-align: center;\n  position: fixed;\n  top: 100vw/375*812/812*480;\n  left: 20%;\n  color: rgb(255, 255, 255);\n  background-color: #FEC539;\n  font-size: 18px;\n  font-weight: bold;\n  border-radius: 22px;\n  border: 0;\n  \n}\n</style>\n  ","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./newInviter.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./newInviter.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./newInviter.vue?vue&type=template&id=32386bb8&scoped=true&\"\nimport script from \"./newInviter.vue?vue&type=script&lang=js&\"\nexport * from \"./newInviter.vue?vue&type=script&lang=js&\"\nimport style0 from \"./newInviter.vue?vue&type=style&index=0&id=32386bb8&lang=less&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"32386bb8\",\n  null\n  \n)\n\nexport default component.exports","module.exports = __webpack_public_path__ + \"img/invite_bg.9efefcf1.png\";","module.exports = __webpack_public_path__ + \"img/invite_logo.967c5b6d.png\";","export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--10-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./newInviter.vue?vue&type=style&index=0&id=32386bb8&lang=less&scoped=true&\""],"sourceRoot":""}