|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | 天诚科技 [ 刘海东 17600099397赋能开发者，助力企业发展 ] -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Licensed 该系统并不是自由软件，未经许可不能去掉相关版权 -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
<!-- | Author:甘肃天诚志信电子商务有限公司 刘海东 联系电话维系17600099397 -->
|
|
|
<!-- +---------------------------------------------------------------------- -->
|
|
|
{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}
|
|
|
|
