{"version":3,"sources":["components/sharePoster/index.js"],"names":["SharePoster","props","_this2","Object","_Users_zhanghaozhe_server_mr_julyedu_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_classCallCheck__WEBPACK_IMPORTED_MODULE_2__","this","_Users_zhanghaozhe_server_mr_julyedu_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_possibleConstructorReturn__WEBPACK_IMPORTED_MODULE_4__","_Users_zhanghaozhe_server_mr_julyedu_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_getPrototypeOf__WEBPACK_IMPORTED_MODULE_5__","call","initCanvas","imgList","index","_this","_Users_zhanghaozhe_server_mr_julyedu_node_modules_babel_preset_react_app_node_modules_babel_runtime_helpers_esm_assertThisInitialized__WEBPACK_IMPORTED_MODULE_7__","imgSrc1","poster","avatarPositionX","header_position_x","avatarPositionY","header_position_y","qrCodePositionX","qr_code_x","qrCodePositionY","qr_code_y","canvas","qr_code_width","qr_code_height","concat","getParam","document","getElementById","context","getContext","getBase64","then","img","bgImage","Image","src","qrCodeImg","ua","navigator","userAgent","toLowerCase","indexOf","match","test","setAttribute","onload","drawImage","fillStyle","username_color","font","fillText","state","name","avatarHeight","restore","imgUrl","imgPosition","setState","billSrc","convertCanvasToImage","children","curEle","tagName","nodeList","childNodes","ary","i","length","curNode","nodeType","Array","prototype","slice","k","nodeName","splice","ctx","x","y","r","save","cx","cy","beginPath","arc","Math","PI","clip","getBase64Image","createElement","width","height","ext","substring","lastIndexOf","toDataURL","image","squareClick","smallactive","codeSrc","smallListImg","distPrice","_this3","getCodeWe","http","get","API","home","res","data","code","avatar","list","dist_course","username","antd_mobile_lib_toast__WEBPACK_IMPORTED_MODULE_1___default","a","info","msg","qrCodeLink","Promise","resolve","QRCode","err","url","base64","timeStamp","Date","onerror","_this4","_this$state","_this$state$distPrice","_this$state$smallList","react__WEBPACK_IMPORTED_MODULE_8___default","className","_common__WEBPACK_IMPORTED_MODULE_10__","title","arrow","cart","id","alt","count_type","first_level_tip","first_level_scale","map","item","onClick","bind","key","square","Component"],"mappings":"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","file":"mrstatic/js/shareposter.3c664772.chunk.js","sourcesContent":["import React, {Component} from 'react';\nimport './index.scss';\nimport {HeaderBar} from '@/common';\nimport {http, getParam} from '@/utils';\nimport QRCode from 'qrcode';\nimport { Toast} from 'antd-mobile';\n\nclass SharePoster extends Component {\n    constructor(props) {\n        super(props)\n        this.state = {\n            codeSrc: '',\n            billSrc: '',         // 图片链接\n            imgUrl: '',\n            smallListImg: [],  // 小图片地址\n            smallactive: 0,  // 小图选中标记\n            distPrice: '',  // 分销价格\n            name: '',       // 用户姓名\n            bgImage: []          // 背景图\n        }\n    }\n\n    componentDidMount() {\n        this.getCodeWe();\n        http.get(`${API.home}/m/dist/posters/${getParam('courseId')}/${getParam('uid')}`).then((res) => {\n            // console.log(res);\n            if (res.data.code === 200) {\n                this.setState({\n                    imgUrl: res.data.data.avatar,\n                    smallListImg: res.data.data.list,\n                    distPrice: res.data.data.dist_course,\n                    bgImage: res.data.data.list,\n                    name: res.data.data.username\n                })\n                this.initCanvas(this.state.bgImage, 0)\n            } else {\n                Toast.info(res.data.msg, 2)\n            }\n        })\n    }\n\n    // 初始化海报\n    initCanvas = (imgList, index) => {\n        let _this = this;\n        let imgSrc1 = imgList[index].poster;\n        let $width = 450;\n        let $height = 800;\n        let avatarWidth = 50    // imgList[index].poster_width    // 头像宽度\n        let avatarHeight = 50   // imgList[index].poster_height     // 头像高度\n        let avatarPositionX = (imgList[index].header_position_x * $width) // 头像x轴位置\n        let avatarPositionY = (imgList[index].header_position_y * $height)- 18   // 头像Y轴位置\n\n        let qrCodePositionX = imgList[index].qr_code_x * $width // 二维码x轴位置\n        let qrCodePositionY = imgList[index].qr_code_y * $height + 7  // 二维码y轴位置\n        let qrCodeWidth = (imgList[index].qr_code_width * $width)      // 二维码宽度\n        let qrCodeHeight = (imgList[index].qr_code_height * $height) - avatarHeight / 2     // 二维码高度\n\n        let qrCodeLink = `https://m.julyedu.com/detail?id=${getParam('courseId')}&dist_code${getParam('dist_code')}`\n\n        var canvas = document.getElementById(\"canvas\"),\n            context = canvas.getContext(\"2d\");\n        // console.log(_this);\n        _this.getBase64(imgSrc1)\n        // 背景图片合成\n            .then((img) => {\n                let bgImage = new Image();\n                bgImage.src = img;\n                let qrCodeImg = document.getElementById('qrcode');\n                let ua = navigator.userAgent.toLowerCase();\n                // Android终端\n                let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1;\n                // Ios终端\n                let isiOS = !!ua.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/);\n                if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {\n                    qrCodeImg = document.getElementById('qrcode');\n                } else if (/(Android)/i.test(navigator.userAgent)) {\n                    //Android终端\n                    qrCodeImg = document.getElementById('qrcode');\n\n                }\n\n                bgImage.setAttribute('crossOrigin', 'anonymous');\n                bgImage.onload = function () {\n                    context.drawImage(bgImage, 0, 0, 450, 800);\n                    context.drawImage(qrCodeImg, qrCodePositionX, qrCodePositionY, 100, 100);\n                    context.fillStyle = imgList[index].username_color;\n                    context.font = \"16px serif\";\n                    context.fillText('@' + _this.state.name, (avatarPositionX + avatarWidth) + 20, (avatarPositionY + avatarHeight / 2));\n                    context.font = \"14px serif\";\n                    context.fillText('正在学习该课程', (avatarPositionX + avatarWidth) + 20, (avatarPositionY + avatarHeight / 2) + 20);\n                    context.restore();\n                }\n\n            })\n            // 头像生成\n            .then(() => {\n                _this.getBase64(_this.state.imgUrl)\n                    .then((img) => {\n                        let bgImage = new Image();\n                        bgImage.src = img;\n                        bgImage.setAttribute('crossOrigin', 'anonymous');\n                        bgImage.setAttribute('border-Radius', '50%');\n                        bgImage.onload = function () {\n                            _this.imgPosition(context, bgImage, avatarPositionX, avatarPositionY, 24);\n                            context.drawImage(bgImage, avatarPositionX, avatarPositionY, 48, 48);\n                            context.restore();\n                            _this.setState({\n                                billSrc: _this.convertCanvasToImage(canvas)\n                            })\n\n                        }\n                    })\n\n            })\n    }\n    children = (curEle, tagName) => {\n        var nodeList = curEle.childNodes;\n        var ary = [];\n        if (/MSIE(6|7|8)/.test(navigator.userAgent)) {\n            for (var i = 0; i < nodeList.length; i++) {\n                var curNode = nodeList[i];\n                if (curNode.nodeType === 1) {\n                    ary[ary.length] = curNode;\n                }\n            }\n        } else {\n            ary = Array.prototype.slice.call(curEle.children);\n        }\n\n        // 获取指定子元素\n        if (typeof tagName === \"string\") {\n            for (var k = 0; k < ary.length; k++) {\n                curEle = ary[k];\n                if (curEle.nodeName.toLowerCase() !== tagName.toLowerCase()) {\n                    ary.splice(k, 1);\n                    k--;\n                }\n            }\n        }\n\n        return ary;\n    }\n\n    // 合成图片位置\n    imgPosition = (ctx, img, x, y, r) => {\n        ctx.save();\n        var d = 2 * r;\n        var cx = x + r;\n        var cy = y + r;\n        ctx.beginPath();\n        ctx.arc(cx, cy, r, 0, 2 * Math.PI);\n        ctx.clip();\n    }\n\n    // 获取二维码\n    getCodeWe() {\n        let _this = this\n        let qrCodeLink = `https://m.julyedu.com/detail?id=${getParam('courseId')}&dist_code=${getParam('dist_code')}`\n        return new Promise(resolve => {\n            QRCode.toDataURL(qrCodeLink, {}, function (err, url) {\n                _this.setState({\n                    codeSrc: url\n                })\n            })\n            /*\n                        let qrcode = new QRCode(document.getElementById('qrcode'), {\n                            text: qrCodeLink,\n                            width: 160,\n                            height: 160,\n                            colorDark: \"#000000\", // 生成的二维码的深色部分\n                            colorLight: \"#ffffff\", //生成二维码的浅色部分\n                        })\n            */\n            resolve()\n        })\n    }\n\n    // 图片路径转成base64\n    getBase64(img) {\n        let _this = this;\n        return new Promise(resolve => {\n            let base64 = null;\n            let image = new Image();\n            let timeStamp = +new Date();\n            image.setAttribute('crossOrigin', 'anonymous');\n            image.src = img + '?' + timeStamp;\n            image.onload = () => {\n                base64 = _this.getBase64Image(image)\n                resolve(base64)\n            }\n            image.onerror = function () {\n                let timeStamp = +new Date();\n                _this.getBase64(img + '?' + timeStamp);\n            }\n        })\n\n    }\n\n    // 图片路径放入canvas转成base64\n    getBase64Image = (img) => {\n        let canvas = document.createElement(\"canvas\");\n        canvas.width = img.width;\n        canvas.height = img.height;\n\n        let ctx = canvas.getContext(\"2d\");\n        ctx.drawImage(img, 0, 0, img.width, img.height);\n        let ext = img.src.substring(img.src.lastIndexOf(\".\") + 1).toLowerCase();\n        let dataURL = canvas.toDataURL(\"image/\" + ext);\n        return dataURL;\n    }\n\n    // canvas转换成img图片\n    convertCanvasToImage = (canvas) => {\n        let image = new Image();\n        image.src = canvas.toDataURL(\"image/png\");\n        return image;\n    }\n\n    // 小图切换\n    squareClick = (index) => {\n        this.setState({\n            smallactive: index\n        });\n        this.initCanvas(this.state.bgImage, index);\n    }\n\n    render() {\n        const { distPrice={}, smallListImg=[], smallactive } = this.state;\n        return (\n            <div className='share-poster'>\n                <HeaderBar\n                    title='生成专属海报'\n                    arrow={true}\n                    cart={false}\n                />\n                <div className=\"total-container\">\n                    <div className='placard-img-container' id='imgWrapper'>\n                        <img src={this.state.billSrc.src} alt=\"\" />\n                    </div>\n                    <img\n                        src={this.state.codeSrc}\n                        alt=\"\"\n                        id='qrcode'\n                        className='placard-code'\n                    />\n                    <canvas\n                        id='canvas'\n                        width='450'\n                        height='800'\n                        className={this.state.billSrc === '' ? '' : 'hide'}\n                    />\n                </div>\n                <div className='placard-desc'>\n                    <span className='placard-sharetxt'>\n                        长按保存海报分享给好友，每有一人通过您的分享购买该课程，您可以\n                        {\n                            distPrice.count_type === 0 &&\n                            <span className='placard-price'>\n                                获得{distPrice.first_level_tip}元的佣金奖励。\n                            </span>\n                        }\n                        {\n                            distPrice.count_type === 1 &&\n                            <span className='placard-price'>\n                                获得成交金额的{distPrice.first_level_scale}%作为佣金奖励。\n                            </span>\n                        }\n                    </span>\n                </div>\n                <div className='placard-swiper'>\n                    <ul className='placard-list'>\n                        {\n                            smallListImg.length > 0 && smallListImg.map((item, index) => {\n                                return (\n                                    <li\n                                        onClick={this.squareClick.bind(this, index)}\n                                        key={index}\n                                        className={smallactive === index ? 'active' : ''}\n                                    >\n                                        <img src={item.square} alt=\"\" />\n                                    </li>\n                                );\n                            })\n                        }\n                    </ul>\n                </div>\n            </div>\n        );\n    }\n}\n\nexport default SharePoster;\n"],"sourceRoot":""}