dengbw
158 lines
7.4 KiB
PHP
158 lines
7.4 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="zh-cmn-Hans">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title><?= $_title ?></title>
|
|
<link rel="stylesheet" href="/css/h5/syt/special.css?v=20210416">
|
|
<link rel="stylesheet" href="https://qs.haodian.cn/web/javascript/swiper/css/swiper.min.css">
|
|
<script type="text/javascript" src="https://qs.haodian.cn/web/javascript/jquery.3.4.1.min.js"></script>
|
|
<script type="text/javascript" src="https://qs.haodian.cn/web/javascript/vue.2.6.10.min.js"></script>
|
|
<script type="text/javascript" src="https://qs.haodian.cn/web/javascript/axios.min.js"></script>
|
|
<script type="text/javascript" src="https://qs.haodian.cn/web/javascript/swiper/js/swiper.min.js"></script>
|
|
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
|
|
<script type="text/javascript" src="https://qs.haodian.cn/web/javascript/qs.js"></script>
|
|
<script type="text/javascript" src="https://qs.haodian.cn/web/javascript/vue-mugen-scroll.js"></script>
|
|
<script type="text/javascript" src="https://qs.haodian.cn/web/javascript/mDialog.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="poster">
|
|
<div class="detail-banner relative p-swiper">
|
|
<div class="swiper-container left-0 top-0">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide img-cover" v-for="item in list">
|
|
<div class="relative">
|
|
<img class="wp100 block" :src="item.img" style="pointer-events:none;" />
|
|
<img class="absolute left-0 bottom-0 ml60 mb80 img-130x130" :src="item.code"
|
|
style="pointer-events:none;" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination ulib-rl750"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div @click="showPoster">
|
|
<div style="height:70px;"></div>
|
|
<div class="fixed left-0 bottom-0 right-0 bg-000-op80 pl30 pr30 text-center z-index-4"
|
|
style="height:65px;padding-top:10px;">
|
|
<div style="width:100%;height:45px;background-color:#f55537;-webkit-border-radius:750px;border-radius:750px;">
|
|
<button style="width:100%;height:45px;background-color:#f55537;border:none;line-height:45px;font-size:16px;color:#fff;-webkit-border-radius:750px;border-radius:750px;">
|
|
生成海报
|
|
</button>
|
|
</div>
|
|
</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 img-42x42 text-middle" src="/img/h5/syt/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($posters)?>,
|
|
msgisShowPoster: false,
|
|
canW: 750,
|
|
canH: 0,
|
|
activeIndex: 0,
|
|
posterSrc: '',
|
|
},
|
|
mounted() {
|
|
let that = this
|
|
var 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.msgisShowPoster = true
|
|
this.posterSrc = ''
|
|
this.draw()
|
|
},
|
|
closePoster: function () {
|
|
this.msgisShowPoster = false
|
|
},
|
|
|
|
//海报生成
|
|
draw() {
|
|
let that = this
|
|
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.drawImage(codeimg, 60, that.canH - 210, 130, 130)
|
|
that.posterSrc = canvas.toDataURL("image/jpg");
|
|
}
|
|
}
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
<script type="text/javascript">
|
|
wx.config({
|
|
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
|
|
appId: "<?=$sign_package['appId']?>", // 必填，公众号的唯一标识
|
|
timestamp: "<?=$sign_package['timestamp']?>", // 必填，生成签名的时间戳
|
|
nonceStr: "<?=$sign_package['nonceStr']?>", // 必填，生成签名的随机串
|
|
signature: "<?=$sign_package['signature']?>",// 必填，签名
|
|
jsApiList: ["hideAllNonBaseMenuItem"], // 必填，需要使用的JS接口列表
|
|
openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
|
|
});
|
|
wx.ready(function () {
|
|
wx.hideAllNonBaseMenuItem();
|
|
});
|
|
wx.error(function (res) {
|
|
console.log('res', res);
|
|
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|