|
@@ -0,0 +1,290 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
|
+ <meta http-equiv="pragram" content="no-cache">
|
|
|
+ <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
|
|
|
+ <meta http-equiv="expires" content="0">
|
|
|
+ <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
|
|
|
+ <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
|
|
|
+ <title>海报</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <div class="wrapper">
|
|
|
+ <!-- swiper -->
|
|
|
+ <div class="swiper-container">
|
|
|
+ <div class="swiper-wrapper" id="swiper-wrapper"></div>
|
|
|
+ <!-- 分页器 -->
|
|
|
+ <div class="swiper-pagination"></div>
|
|
|
+ </div>
|
|
|
+ <!-- swiper end -->
|
|
|
+ <!-- 底部按钮操作 -->
|
|
|
+ <div class="footer-box">
|
|
|
+ <div class="download" id="use-item">
|
|
|
+ <svg t="1589188673344" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5245" width="24" height="24"><path d="M1.948098 12.487805h999.02439v999.02439h-999.02439z" fill="#FFFFFF" fill-opacity=".01" p-id="5246"></path><path d="M331.326439 674.341463l125.827122 115.337366a49.95122 49.95122 0 0 0 67.509073 0L650.46478 674.341463h215.064976a49.95122 49.95122 0 0 1 49.95122 49.95122v118.109658a49.95122 49.95122 0 0 1-49.95122 49.95122h-724.292683a49.95122 49.95122 0 0 1-49.951219-49.95122V724.292683a49.95122 49.95122 0 0 1 49.951219-49.95122h190.089366z" fill="#8AB6FE" p-id="5247"></path><path d="M590.798049 472.213854h135.617561a24.97561 24.97561 0 0 1 16.858536 43.407609l-235.52 215.864196a24.97561 24.97561 0 0 1-33.717073 0l-235.52-215.864196a24.97561 24.97561 0 0 1 16.883512-43.407609h135.617561V193.061463a49.95122 49.95122 0 0 1 49.95122-49.951219h99.902439a49.95122 49.95122 0 0 1 49.951219 49.951219v279.177366z" fill="#3C85FD" p-id="5248"></path></svg>
|
|
|
+ <p>保存到相册</p>
|
|
|
+ </div>
|
|
|
+ <p class="cancel-btn" id="cancel-btn">取消</p>
|
|
|
+ </div>
|
|
|
+ <!-- 底部按钮操作 end -->
|
|
|
+ <!-- 使用海报 弹框 -->
|
|
|
+ <div class="zy-h5-fix-z" id="zy-h5-fix-z"></div>
|
|
|
+ <div class="zy-h5-modal" id="zy-h5-modal">
|
|
|
+ <div class="zy-h5-modal-content">
|
|
|
+ <img src="#" class="poster-pic" id="poster-img" />
|
|
|
+ <p class="save-txt" id="save-txt">长按保存海报图片</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
+ <style>
|
|
|
+ *{
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ html,body{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .wrapper{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .swiper-container{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ --swiper-theme-color: #ebedf0;
|
|
|
+ --swiper-pagination-color: #fff;/* 两种都可以 */
|
|
|
+ }
|
|
|
+ .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
|
|
|
+ bottom: 140px;
|
|
|
+ }
|
|
|
+ .poster-con{
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .qrcode{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 5%;
|
|
|
+ right: 20px;
|
|
|
+ margin-left: -64px;
|
|
|
+ border: 10px solid #fff;
|
|
|
+ }
|
|
|
+ .poster-pic{
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .footer-box{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .footer-box > .download{
|
|
|
+ background-color: #ededed;
|
|
|
+ padding: 3% 0;
|
|
|
+ }
|
|
|
+ .download > img{
|
|
|
+ display: inline-block;
|
|
|
+ width: 40px;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ .download > p{
|
|
|
+ margin: 0;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ .footer-box > .cancel-btn{
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0;
|
|
|
+ padding: 2% 0;
|
|
|
+ }
|
|
|
+ /*弹框样式*/
|
|
|
+ .zy-h5-fix-z{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: rgba(0,0,0,0.5);
|
|
|
+ display: none;
|
|
|
+ z-index: 5000;
|
|
|
+ }
|
|
|
+ .zy-h5-modal{
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 10000;
|
|
|
+ width: 70%;
|
|
|
+ top: 30%;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: -35%;
|
|
|
+ margin-top: -140px;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .save-txt{
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 36px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
|
|
+ <script src="https://unpkg.com/swiper/js/swiper.js"> </script>
|
|
|
+ <script src="https://unpkg.com/swiper/js/swiper.min.js"> </script>
|
|
|
+ <!-- 生成二维码 -->
|
|
|
+ <script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
|
|
|
+ <!-- html转canvas base64图片 -->
|
|
|
+ <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta3/html2canvas.min.js"></script>
|
|
|
+ <script>
|
|
|
+ function getQueryVariable(variable)
|
|
|
+ {
|
|
|
+ var query = window.location.search.substring(1);
|
|
|
+ var vars = query.split("&");
|
|
|
+ for (var i=0;i<vars.length;i++) {
|
|
|
+ var pair = vars[i].split("=");
|
|
|
+ if(pair[0] == variable){return pair[1];}
|
|
|
+ }
|
|
|
+ return(false);
|
|
|
+ }
|
|
|
+
|
|
|
+ var bitmap = null;
|
|
|
+ if(window.plus){
|
|
|
+ plusReady();
|
|
|
+ }else{
|
|
|
+ document.addEventListener("plusready",plusReady,false);
|
|
|
+ }
|
|
|
+ function plusReady(){
|
|
|
+ bitmap = new plus.nativeObj.Bitmap();
|
|
|
+ document.getElementById("save-txt").display = "none"
|
|
|
+ }
|
|
|
+ // 保存到相册
|
|
|
+ function savePhoto(dataURL){
|
|
|
+ if(window.plus){
|
|
|
+ // 加载海报图片
|
|
|
+ bitmap.loadBase64Data(dataURL, function() {
|
|
|
+ var itemId = new Date().getTime()
|
|
|
+ //保存到系统相册
|
|
|
+ bitmap.save("_doc/poster_"+itemId+".jpg", {
|
|
|
+ overwrite: true, //是否覆盖已有图片, true 是
|
|
|
+ quality: 100 //图片质量,1-100 默认50, 100质量最高
|
|
|
+ }, function(e) {
|
|
|
+ plus.gallery.save(e.target, function () {
|
|
|
+ alert( "保存图片到相册成功" );
|
|
|
+ });
|
|
|
+ }, function(e) {
|
|
|
+ alert("图片保存失败")
|
|
|
+ });
|
|
|
+ }, function(e) {
|
|
|
+ alert("图片保存失败")
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ var acitveId = getQueryVariable("id")
|
|
|
+ var reqUrl = getQueryVariable("reqUrl")
|
|
|
+
|
|
|
+ window.onclose = function(){
|
|
|
+ bitmap.clear()
|
|
|
+ }
|
|
|
+
|
|
|
+ window.onload = function(){
|
|
|
+ // swiper当前下标
|
|
|
+ var swiperInd = 0
|
|
|
+ // 获取活动信息 (海报和门店二维码)
|
|
|
+ $.ajax({
|
|
|
+ url: reqUrl + 'active/findActiveAttach/' + acitveId,
|
|
|
+ type: 'get',
|
|
|
+ header: {
|
|
|
+ contentType: 'application/json;charset=UTF-8',
|
|
|
+ },
|
|
|
+ // 设置的是请求参数
|
|
|
+ data: {},
|
|
|
+ dataType: 'json',
|
|
|
+ success: function (res) {
|
|
|
+ if(res.status == 200){
|
|
|
+ const data = res.data
|
|
|
+ if(data.activeAttachList){
|
|
|
+ let html = ''
|
|
|
+ for(let i = 0; i < data.activeAttachList.length; i++){
|
|
|
+ html += `<div class="swiper-slide">
|
|
|
+ <div class="poster-con" id="poster-con${i}">
|
|
|
+ <div class="qrcode" id="qrcode${i}"></div>
|
|
|
+ <img src="${data.activeAttachList[i].attachPath}" class="poster-pic" style="pointer-events: none;" />
|
|
|
+ </div>
|
|
|
+ </div>`
|
|
|
+ }
|
|
|
+ document.getElementById("swiper-wrapper").innerHTML = html
|
|
|
+
|
|
|
+ for(let i = 0; i < data.activeAttachList.length; i++){
|
|
|
+ // 生成二维码
|
|
|
+ new QRCode(document.getElementById("qrcode" + i ), {
|
|
|
+ text: data.staticHtmlPath,
|
|
|
+ width: 75,
|
|
|
+ height: 75,
|
|
|
+ colorDark : "#000000",
|
|
|
+ colorLight : "#ffffff",
|
|
|
+ correctLevel : QRCode.CorrectLevel.H
|
|
|
+ })
|
|
|
+ }
|
|
|
+ // swiper
|
|
|
+ var mySwiper = new Swiper ('.swiper-container', {
|
|
|
+ // loop: true, // 循环模式选项
|
|
|
+ // 如果需要分页器
|
|
|
+ pagination: {
|
|
|
+ el: '.swiper-pagination',
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ slideChange: function(){
|
|
|
+ swiperInd = this.activeIndex
|
|
|
+ },
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // 打开 海报弹框
|
|
|
+ document.getElementById("use-item").onclick = function(){
|
|
|
+ // 合并图片和二维码
|
|
|
+ html2canvas(document.getElementById('poster-con' + swiperInd), {
|
|
|
+ backgroundColor: "transparent",
|
|
|
+ allowTaint: true,
|
|
|
+ useCORS: true
|
|
|
+ }).then(canvas => {
|
|
|
+ let dataURL = canvas.toDataURL("image/png")
|
|
|
+ document.getElementById('poster-img').src = dataURL
|
|
|
+ if (dataURL !== "") {
|
|
|
+ // 打开弹框
|
|
|
+ document.getElementById("zy-h5-modal").style.display = 'block'
|
|
|
+ document.getElementById("zy-h5-fix-z").style.display = 'block'
|
|
|
+ // 保存到相册
|
|
|
+ savePhoto(dataURL)
|
|
|
+ }else{
|
|
|
+ alert('海报生成失败,请重试')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ document.getElementById("zy-h5-fix-z").onclick = function(){
|
|
|
+ document.getElementById("zy-h5-modal").style.display = 'none'
|
|
|
+ document.getElementById("zy-h5-fix-z").style.display = 'none'
|
|
|
+ }
|
|
|
+ // 取消
|
|
|
+ document.getElementById('cancel-btn').onclick = function(){
|
|
|
+ history.go(-1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ alert(res.message)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ </script>
|
|
|
+</html>
|