xiaoyu
160 lines
6.8 KiB
PHP
160 lines
6.8 KiB
PHP
<script type="text/javascript" src="https://qs.liche.cn/web/javascript/clipboard.min.js"></script>
|
|
<script type="text/javascript" src="https://qs.liche.cn/web/javascript/html2canvas.min.js?v123"></script>
|
|
<body>
|
|
<div id="app" ref="app">
|
|
<div class="poster2">
|
|
<div class="detail-banner relative p-swiper">
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide bg-size-cover" v-for="item in list">
|
|
<div class="relative">
|
|
<img class="wp100 block" style="pointer-events:none;" :src="item.img"/>
|
|
<div class="absolute left-0 right-0 bottom-0 mb10 text-center font-20"
|
|
:style="'color:'+fillStyle">{{posterTip}}
|
|
</div>
|
|
<img class="absolute right-0 bottom-0 mr40 mb80 imgsize-160X160"
|
|
style="pointer-events:none;" :src="item.code"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination ulib-rl750"></div>
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
</div>
|
|
</div>
|
|
<!--
|
|
<div class="bts-1-eee inner30">
|
|
<div class="text-center">分享文案</div>
|
|
<div class="mt30 relative bds-1-eee inner30 pr200 ulib-r20 font-28" v-for="(item,index) in shareTx">
|
|
<span>{{item}}</span>
|
|
<a class="absolute right-0 box-middle mr30 inline-block pl30 pr30 line-height-17 bg-eee ulib-r750 J_copy" :data-clipboard-text="item">复制</a>
|
|
</div>
|
|
</div>
|
|
-->
|
|
<div @click="showPoster">
|
|
<div style="height:70px;"></div>
|
|
<div class="fixed left-0 bottom-0 right-0 bg-000-op80 pt20 pb20 pl30 pr30 text-center z-index-4">
|
|
<button class="wp100 bg-fff border-none pt30 pb30 font-32 color-1a1a1a ulib-r10">生成海报</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="msg fn-hide" :style="msgisShowPoster?'display:block':'display:none'">
|
|
<div class="msgBgPoster" @click="closePoster"></div>
|
|
<div class="msgMain">
|
|
<i @click="closePoster" class="posterClose" v-if="posterSrc"><span></span></i>
|
|
<div class="msgPoster">
|
|
<div class="postercon overflowhidden ulib-r20">
|
|
<div style="display:none;">
|
|
<canvas id="canvas"></canvas>
|
|
</div>
|
|
<div v-if="posterSrc"><img class="wp100 ulib-r20" :src='posterSrc' alt=""/></div>
|
|
</div>
|
|
<div class="pt30 pb10 text-center text-center font-30 color-fff" v-if="posterSrc">
|
|
<img class="inline-block imgsize-42X42 text-middle"
|
|
src="https://qs.liche.cn/web/images/project/H5-ShiYu/icon-finger.png" alt=""/>
|
|
<span class="ml10 text-middle">长按图片保存到手机发送给好友</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<script type="text/javascript">
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
list: <?=json_encode($lists, JSON_UNESCAPED_UNICODE)?>,
|
|
msgisShowPoster: false,
|
|
canW: 750,
|
|
canH: 0,
|
|
activeIndex: 0,
|
|
posterSrc: '',
|
|
posterTip: '<?=$posterTip?>',
|
|
fillStyle: '<?=$fillStyle?>',
|
|
shareTx: <?=json_encode($shareTitle, JSON_UNESCAPED_UNICODE)?>,
|
|
},
|
|
mounted() {
|
|
//复制文字
|
|
let clipboardDemos = new ClipboardJS('.J_copy');
|
|
clipboardDemos.on('success', function (e) {
|
|
e.clearSelection();
|
|
var msgDia = mDialog.msg({
|
|
duration: 250,
|
|
pause: 2000,
|
|
content: "复制成功！"
|
|
});
|
|
});
|
|
|
|
|
|
let that = this
|
|
let swiper = new Swiper('.p-swiper .swiper-container', {
|
|
//loop: true,
|
|
autoHeight: true,
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
type: 'fraction',
|
|
},
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
on: {
|
|
slideChangeTransitionEnd: function () {
|
|
that.activeIndex = this.activeIndex
|
|
},
|
|
},
|
|
});
|
|
},
|
|
methods: {
|
|
showPoster: function () {
|
|
this.posterSrc = ''
|
|
this.draw()
|
|
},
|
|
closePoster: function () {
|
|
this.msgisShowPoster = false
|
|
},
|
|
|
|
//海报生成
|
|
draw() {
|
|
let that = this
|
|
let imgloading = mDialog.load({
|
|
shade: false,
|
|
text: "生成中...",
|
|
offset: ["35%", "40%"],
|
|
});
|
|
that.canH = that.list[that.activeIndex].height / that.list[that.activeIndex].width * that.canW
|
|
$("#canvas").attr({
|
|
'width': that.canW,
|
|
'height': that.canH,
|
|
});
|
|
let canvas = document.getElementById('canvas');
|
|
let ctx = canvas.getContext("2d");
|
|
let imgBg = new Image();
|
|
imgBg.setAttribute("crossOrigin", 'Anonymous')//如果二维码图片域名跨域，则保留此代码
|
|
imgBg.src = that.list[that.activeIndex].img
|
|
imgBg.onload = function () {
|
|
ctx.drawImage(imgBg, 0, 0, that.list[that.activeIndex].width, that.list[that.activeIndex].height, 0, 0, that.canW, that.canH)
|
|
let codeimg = new Image();
|
|
codeimg.setAttribute("crossOrigin", 'Anonymous')//如果二维码图片域名跨域，则保留此代码
|
|
codeimg.src = that.list[that.activeIndex].code
|
|
codeimg.onload = function () {
|
|
ctx.fillStyle = that.fillStyle;
|
|
ctx.textAlign = "center";
|
|
ctx.font = "20px Georgia";
|
|
ctx.fillText(that.posterTip, that.canW / 2, that.canH - 10,);
|
|
ctx.drawImage(codeimg, that.canW - 200, that.canH - 240, 160, 160)
|
|
setTimeout(function () {
|
|
that.posterSrc = canvas.toDataURL("image/jpg")
|
|
that.msgisShowPoster = true;
|
|
mDialog.close(imgloading);
|
|
}, 200);
|
|
}
|
|
|
|
}
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
<?= $this->load->view('h5/market/sylive/share_script') ?>
|
|
</body>
|