zyedu/application/wap/view/first/spread/poster_spread.html

<!-- +---------------------------------------------------------------------- -->
<!-- | CRMEB [ CRMEB赋能开发者，助力企业发展 ] -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权 -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Author: CRMEB Team <admin@crmeb.com> -->
<!-- +---------------------------------------------------------------------- -->
{extend name="public/container"}
{block name="title"}推广海报{/block}
{block name="head"}
<style>
    body {
        background-color: rgba(0, 0, 0, .6);
        font-size: .24rem;
        text-align: center;
        color: #cecece;
    }

    .poster {
        width: 6rem;
        margin-top: .76rem;
        margin-bottom: .5rem;
        vertical-align: middle;
    }
</style>
{/block}
{block name="content"}
<div v-cloak id="app">
    <img :src="imgSrc" class="poster">
    <quick-menu></quick-menu>
</div>
<script>
    require([
        'vue',
        'helper',
        'quick',
        'qrcode'
    ], function (Vue, $h) {
        var url = '{$url}',
            poster = '{$spread_poster_url}',
            site_name = '{$Auth_site_name}',
            vm = new Vue({
                el: '#app',
                data: {
                    loading: false,
                    imgSrc: ''
                },
                watch: {
                    loading: function (loading) {
                        loading ? $h.loadFFF() : $h.loadClear();
                    }
                },
                created: function () {
                    this.createPoster();
                },
                methods: {
                    createPoster: function () {
                        this.loading = true;
                        var imagePromise = new Promise(function (resolve, reject) {
                            var image = new Image();
                            image.crossOrigin = 'anonymous';
                            image.src = poster + '?' + new Date().getTime();
                            image.onload = function () {
                                resolve(image);
                            };
                            image.onerror = function () {
                                reject('error-image');
                            };
                        }),
                            qrcodePromise = new Promise(function (resolve, reject) {
                                resolve(new QRCode(document.createElement('canvas'), url));
                            });
                        Promise.all([
                            imagePromise,
                            qrcodePromise
                        ]).then(function (sources) {
                            var canvas = document.createElement('canvas'),
                                context = canvas.getContext('2d');
                            canvas.width = 600;
                            canvas.height = 960;

                            context.fillStyle = '#FFFFFF';
                            context.fillRect(0, 0, 600, 960);

                            context.drawImage(sources[0], 0, 0, 600, 740);
                            context.drawImage(sources[1]._el.firstElementChild, 108, 775, 150, 150);

                            context.font = '22px sans-serif';
                            context.fillStyle = '#999999';
                            context.textBaseline = 'top';

                            var text = '邀您加入' + site_name;
                            var list = [];
                            var start = 0;
                            for (var i = 0; i <= text.length; i++) {
                                if (context.measureText(text.slice(start, i)).width > 198) {
                                    list.push(text.slice(start, i - 1));
                                    start = i - 1;
                                }
                            }
                            if (start !== text.length) {
                                list.push(text.slice(start));
                            }
                            if (list.length > 3) {
                                list.length = 3;
                                for (var j = 0; j <= list[2].length; j++) {
                                    if (context.measureText(list[2].slice(0, j) + '……').width > 198) {
                                        list[2] = list[2].slice(0, j - 1) + '……';
                                        break;
                                    }
                                }
                            }
                            list.push('长按识别或扫码进入');
                            for (var k = 0; k < list.length; k++) {
                                context.fillText(list[k], 294, 775 + (150 / list.length) * k);
                            }

                            vm.imgSrc = canvas.toDataURL('image/jpeg');
                            vm.loading = false;
                            canvas = null;
                        }).catch(function (err) {
                            vm.loading = false;
                            $h.pushMsg(err);
                        });
                    }
                }
            });
    });
</script>
{/block}