lilei пре 5 година
комит
20e12a98e1

Разлика између датотеке није приказан због своје велике величине
+ 70 - 0
index.html


+ 290 - 0
poster.html

@@ -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: 5px 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: 100,
+									height: 100,
+									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>

Разлика између датотеке није приказан због своје велике величине
+ 386 - 0
tpl.html


+ 46 - 0
海报/theme - jiyou/alert.js

@@ -0,0 +1,46 @@
+window.alert = function(msg, callback) {
+    var div = document.createElement("div");
+    div.innerHTML = "<style type=\"text/css\">"
+            + ".nbaMask { position: fixed; z-index: 10001; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }                                                                                                                                                                       "
+            + ".nbaMaskTransparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; }                                                                                                                                                                                            "
+            + ".nbaDialog { position: fixed; z-index: 10001; width: 80%; max-width: 300px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden; opacity: 1; color: white; }"
+            + ".nbaDialog .nbaDialogHd { padding: 1.2rem .27rem .08rem .27rem; }                                                                                                                                                                                                                         "
+            + ".nbaDialog .nbaDialogHd .nbaDialogTitle { font-size: 17px; font-weight: 400; }                                                                                                                                                                                                           "
+            + ".nbaDialog .nbaDialogBd { padding: 0 .27rem; font-size: 15px; line-height: 1.3; word-wrap: break-word; word-break: break-all; color: #000000; }                                                                                                                                          "
+            + ".nbaDialog .nbaDialogFt { position: relative; line-height: 48px; font-size: 17px; display: -webkit-box; display: -webkit-flex; display: flex; }                                                                                                                                          "
+            + ".nbaDialog .nbaDialogFt:after { content: \" \"; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }               "
+            + ".nbaDialog .nbaDialogBtn { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #09BB07; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; margin-bottom: 0; }                                                                       "
+            + ".nbaDialog .nbaDialogBtn:after { content: \" \"; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); }             "
+            + ".nbaDialog a { text-decoration: none; -webkit-tap-highlight-color: transparent; }"
+            + "</style>"
+            + "<div id=\"dialogs2\" style=\"display: none\">"
+            + "<div class=\"nbaMask\"></div>"
+            + "<div class=\"nbaDialog\">"
+            + "    <div class=\"nbaDialogHd\">"
+            + "        <strong class=\"nbaDialogTitle\"></strong>"
+            + "    </div>"
+            + "    <div class=\"nbaDialogBd\" id=\"dialog_msg2\">弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内</div>"
+            + "    <div class=\"nbaDialogHd\">"
+            + "        <strong class=\"nbaDialogTitle\"></strong>"
+            + "    </div>"
+            + "    <div class=\"nbaDialogFt\">"
+            + "        <a href=\"javascript:;\" class=\"nbaDialogBtn nbaDialogBtnPrimary\" id=\"dialog_ok2\">确定</a>"
+            + "    </div></div></div>";
+    document.body.appendChild(div);
+ 
+    var dialogs2 = document.getElementById("dialogs2");
+    dialogs2.style.display = 'block';
+ 
+    var dialog_msg2 = document.getElementById("dialog_msg2");
+    dialog_msg2.innerHTML = msg;
+ 
+    // var dialog_cancel = document.getElementById("dialog_cancel");
+    // dialog_cancel.onclick = function() {
+    // dialogs2.style.display = 'none';
+    // };
+    var dialog_ok2 = document.getElementById("dialog_ok2");
+    dialog_ok2.onclick = function() {
+        dialogs2.style.display = 'none';
+        // callback();
+    };
+};

BIN
海报/theme - jiyou/example.jpg


BIN
海报/theme - jiyou/img/fbg.jpg


BIN
海报/theme - jiyou/img/hbg.jpg


BIN
海报/theme - jiyou/img/main_bg.jpg


BIN
海报/theme - jiyou/img/title.png


+ 249 - 0
海报/theme - jiyou/poster.html

@@ -0,0 +1,249 @@
+<!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">长按保存分享给你的好友吧</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 acitveId = getQueryVariable("id")
+		var reqUrl = getQueryVariable("reqUrl")
+		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'
+									}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>

+ 100 - 0
海报/theme - jiyou/script.js

@@ -0,0 +1,100 @@
+var getNode = function(id){
+	return document.getElementById(id)
+}
+var yuyue = getNode("yuyue")
+var share = getNode("share")
+var modal = getNode("zy-h5-modal")
+var modalZz = getNode("zy-h5-fix-z")
+var submitModal = getNode("submitModal")
+var canselModal = getNode("canselModal")
+var userPhone = getNode("userPhone")
+// test,  测试     local:本地     pre :预发布      pro:生产
+if(baseType == 'test'){
+	var reqUrl = 'http://192.168.16.100:9110/saas/clz/'
+}else if(baseType == 'local'){
+	var reqUrl = 'http://127.0.0.1:9110/saas/clz/'
+}else if(baseType == 'pre'){
+	var reqUrl = 'http://md.test.zyucgj.com/saas/clz/'
+}else if(baseType == 'pro'){
+	var reqUrl = 'http://md.chelingzhu.com/saas/clz/'
+}
+// 隐藏预约弹框
+var closeYy = function (){
+	userPhone.value = ''
+	modal.style.display = 'none'
+	modalZz.style.display = 'none'
+}
+window.onload = function(){
+	
+	getActivityData()
+	//  获取活动信息
+	function getActivityData(){
+		//  获取活动信息 (海报和门店二维码)
+		$.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(staticHtmlPath){  //  发布
+						const joinerNum = parseInt(data.initBuyNum) + parseInt(data.joinerNum)
+						document.getElementById('joinerNum').innerHTML = joinerNum
+					}
+				}
+			},
+		})
+	}
+	// 打开预约弹框
+	yuyue.onclick = function(){
+		modal.style.display = 'block'
+		modalZz.style.display = 'block'
+	}
+	// 关闭预约弹框
+	canselModal.onclick = function(){
+		closeYy()
+	}
+	// 提交预约
+	submitModal.onclick = function(){
+		// 提交代码到后台
+		var mobile = userPhone.value
+		if(mobile==''){
+			alert("请输入手机号码");
+			return false; 
+		}
+		if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(mobile))){ 
+			alert("手机号码错误,请重填");  
+			return false; 
+		}
+		
+		const obj = JSON.stringify({
+			"joinerMobile": mobile,
+			"activeId": acitveId,
+		})
+		//  立即参与
+		$.ajax({
+			url: reqUrl + 'active/signUp',
+			type: 'post',
+			contentType: 'application/json;charset=UTF-8',
+			// 设置的是请求参数
+			data: obj,
+			dataType: 'json',
+			success: function (res) {
+				console.log(res)
+				if(res.status == 200){
+					closeYy()
+				}
+				alert(res.message)
+			}
+		})
+	}
+	// 分享
+	share.onclick = function(){
+		window.location.href = 'http://static.chelingzhu.com/active/poster.html?id=' + acitveId + '&reqUrl=' + reqUrl
+	}
+}

BIN
海报/theme - jiyou/thumb.jpg


+ 46 - 0
海报/theme - meiyan/alert.js

@@ -0,0 +1,46 @@
+window.alert = function(msg, callback) {
+    var div = document.createElement("div");
+    div.innerHTML = "<style type=\"text/css\">"
+            + ".nbaMask { position: fixed; z-index: 10001; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }                                                                                                                                                                       "
+            + ".nbaMaskTransparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; }                                                                                                                                                                                            "
+            + ".nbaDialog { position: fixed; z-index: 10001; width: 80%; max-width: 300px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden; opacity: 1; color: white; }"
+            + ".nbaDialog .nbaDialogHd { padding: 1.2rem .27rem .08rem .27rem; }                                                                                                                                                                                                                         "
+            + ".nbaDialog .nbaDialogHd .nbaDialogTitle { font-size: 17px; font-weight: 400; }                                                                                                                                                                                                           "
+            + ".nbaDialog .nbaDialogBd { padding: 0 .27rem; font-size: 15px; line-height: 1.3; word-wrap: break-word; word-break: break-all; color: #000000; }                                                                                                                                          "
+            + ".nbaDialog .nbaDialogFt { position: relative; line-height: 48px; font-size: 17px; display: -webkit-box; display: -webkit-flex; display: flex; }                                                                                                                                          "
+            + ".nbaDialog .nbaDialogFt:after { content: \" \"; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }               "
+            + ".nbaDialog .nbaDialogBtn { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #09BB07; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; margin-bottom: 0; }                                                                       "
+            + ".nbaDialog .nbaDialogBtn:after { content: \" \"; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); }             "
+            + ".nbaDialog a { text-decoration: none; -webkit-tap-highlight-color: transparent; }"
+            + "</style>"
+            + "<div id=\"dialogs2\" style=\"display: none\">"
+            + "<div class=\"nbaMask\"></div>"
+            + "<div class=\"nbaDialog\">"
+            + "    <div class=\"nbaDialogHd\">"
+            + "        <strong class=\"nbaDialogTitle\"></strong>"
+            + "    </div>"
+            + "    <div class=\"nbaDialogBd\" id=\"dialog_msg2\">弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内</div>"
+            + "    <div class=\"nbaDialogHd\">"
+            + "        <strong class=\"nbaDialogTitle\"></strong>"
+            + "    </div>"
+            + "    <div class=\"nbaDialogFt\">"
+            + "        <a href=\"javascript:;\" class=\"nbaDialogBtn nbaDialogBtnPrimary\" id=\"dialog_ok2\">确定</a>"
+            + "    </div></div></div>";
+    document.body.appendChild(div);
+ 
+    var dialogs2 = document.getElementById("dialogs2");
+    dialogs2.style.display = 'block';
+ 
+    var dialog_msg2 = document.getElementById("dialog_msg2");
+    dialog_msg2.innerHTML = msg;
+ 
+    // var dialog_cancel = document.getElementById("dialog_cancel");
+    // dialog_cancel.onclick = function() {
+    // dialogs2.style.display = 'none';
+    // };
+    var dialog_ok2 = document.getElementById("dialog_ok2");
+    dialog_ok2.onclick = function() {
+        dialogs2.style.display = 'none';
+        // callback();
+    };
+};

BIN
海报/theme - meiyan/example.jpg


BIN
海报/theme - meiyan/img/fbg.jpg


BIN
海报/theme - meiyan/img/hbg.jpg


BIN
海报/theme - meiyan/img/main_bg.jpg


BIN
海报/theme - meiyan/img/title.png


+ 249 - 0
海报/theme - meiyan/poster.html

@@ -0,0 +1,249 @@
+<!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">长按保存分享给你的好友吧</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 acitveId = getQueryVariable("id")
+		var reqUrl = getQueryVariable("reqUrl")
+		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'
+									}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>

+ 100 - 0
海报/theme - meiyan/script.js

@@ -0,0 +1,100 @@
+var getNode = function(id){
+	return document.getElementById(id)
+}
+var yuyue = getNode("yuyue")
+var share = getNode("share")
+var modal = getNode("zy-h5-modal")
+var modalZz = getNode("zy-h5-fix-z")
+var submitModal = getNode("submitModal")
+var canselModal = getNode("canselModal")
+var userPhone = getNode("userPhone")
+// test,  测试     local:本地     pre :预发布      pro:生产
+if(baseType == 'test'){
+	var reqUrl = 'http://192.168.16.100:9110/saas/clz/'
+}else if(baseType == 'local'){
+	var reqUrl = 'http://127.0.0.1:9110/saas/clz/'
+}else if(baseType == 'pre'){
+	var reqUrl = 'http://md.test.zyucgj.com/saas/clz/'
+}else if(baseType == 'pro'){
+	var reqUrl = 'http://md.chelingzhu.com/saas/clz/'
+}
+// 隐藏预约弹框
+var closeYy = function (){
+	userPhone.value = ''
+	modal.style.display = 'none'
+	modalZz.style.display = 'none'
+}
+window.onload = function(){
+	
+	getActivityData()
+	//  获取活动信息
+	function getActivityData(){
+		//  获取活动信息 (海报和门店二维码)
+		$.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(staticHtmlPath){  //  发布
+						const joinerNum = parseInt(data.initBuyNum) + parseInt(data.joinerNum)
+						document.getElementById('joinerNum').innerHTML = joinerNum
+					}
+				}
+			},
+		})
+	}
+	// 打开预约弹框
+	yuyue.onclick = function(){
+		modal.style.display = 'block'
+		modalZz.style.display = 'block'
+	}
+	// 关闭预约弹框
+	canselModal.onclick = function(){
+		closeYy()
+	}
+	// 提交预约
+	submitModal.onclick = function(){
+		// 提交代码到后台
+		var mobile = userPhone.value
+		if(mobile==''){
+			alert("请输入手机号码");
+			return false; 
+		}
+		if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(mobile))){ 
+			alert("手机号码错误,请重填");  
+			return false; 
+		}
+		
+		const obj = JSON.stringify({
+			"joinerMobile": mobile,
+			"activeId": acitveId,
+		})
+		//  立即参与
+		$.ajax({
+			url: reqUrl + 'active/signUp',
+			type: 'post',
+			contentType: 'application/json;charset=UTF-8',
+			// 设置的是请求参数
+			data: obj,
+			dataType: 'json',
+			success: function (res) {
+				console.log(res)
+				if(res.status == 200){
+					closeYy()
+				}
+				alert(res.message)
+			}
+		})
+	}
+	// 分享
+	share.onclick = function(){
+		window.location.href = 'http://static.chelingzhu.com/active/poster.html?id=' + acitveId + '&reqUrl=' + reqUrl
+	}
+}

BIN
海报/theme - meiyan/thumb.jpg


+ 46 - 0
海报/theme/alert.js

@@ -0,0 +1,46 @@
+window.alert = function(msg, callback) {
+    var div = document.createElement("div");
+    div.innerHTML = "<style type=\"text/css\">"
+            + ".nbaMask { position: fixed; z-index: 10001; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); }                                                                                                                                                                       "
+            + ".nbaMaskTransparent { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0; }                                                                                                                                                                                            "
+            + ".nbaDialog { position: fixed; z-index: 10001; width: 80%; max-width: 300px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-color: #fff; text-align: center; border-radius: 8px; overflow: hidden; opacity: 1; color: white; }"
+            + ".nbaDialog .nbaDialogHd { padding: 1.2rem .27rem .08rem .27rem; }                                                                                                                                                                                                                         "
+            + ".nbaDialog .nbaDialogHd .nbaDialogTitle { font-size: 17px; font-weight: 400; }                                                                                                                                                                                                           "
+            + ".nbaDialog .nbaDialogBd { padding: 0 .27rem; font-size: 15px; line-height: 1.3; word-wrap: break-word; word-break: break-all; color: #000000; }                                                                                                                                          "
+            + ".nbaDialog .nbaDialogFt { position: relative; line-height: 48px; font-size: 17px; display: -webkit-box; display: -webkit-flex; display: flex; }                                                                                                                                          "
+            + ".nbaDialog .nbaDialogFt:after { content: \" \"; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }               "
+            + ".nbaDialog .nbaDialogBtn { display: block; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; color: #09BB07; text-decoration: none; -webkit-tap-highlight-color: transparent; position: relative; margin-bottom: 0; }                                                                       "
+            + ".nbaDialog .nbaDialogBtn:after { content: \" \"; position: absolute; left: 0; top: 0; width: 1px; bottom: 0; border-left: 1px solid #e6e6e6; color: #e6e6e6; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleX(0.5); transform: scaleX(0.5); }             "
+            + ".nbaDialog a { text-decoration: none; -webkit-tap-highlight-color: transparent; }"
+            + "</style>"
+            + "<div id=\"dialogs2\" style=\"display: none\">"
+            + "<div class=\"nbaMask\"></div>"
+            + "<div class=\"nbaDialog\">"
+            + "    <div class=\"nbaDialogHd\">"
+            + "        <strong class=\"nbaDialogTitle\"></strong>"
+            + "    </div>"
+            + "    <div class=\"nbaDialogBd\" id=\"dialog_msg2\">弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内</div>"
+            + "    <div class=\"nbaDialogHd\">"
+            + "        <strong class=\"nbaDialogTitle\"></strong>"
+            + "    </div>"
+            + "    <div class=\"nbaDialogFt\">"
+            + "        <a href=\"javascript:;\" class=\"nbaDialogBtn nbaDialogBtnPrimary\" id=\"dialog_ok2\">确定</a>"
+            + "    </div></div></div>";
+    document.body.appendChild(div);
+ 
+    var dialogs2 = document.getElementById("dialogs2");
+    dialogs2.style.display = 'block';
+ 
+    var dialog_msg2 = document.getElementById("dialog_msg2");
+    dialog_msg2.innerHTML = msg;
+ 
+    // var dialog_cancel = document.getElementById("dialog_cancel");
+    // dialog_cancel.onclick = function() {
+    // dialogs2.style.display = 'none';
+    // };
+    var dialog_ok2 = document.getElementById("dialog_ok2");
+    dialog_ok2.onclick = function() {
+        dialogs2.style.display = 'none';
+        // callback();
+    };
+};

BIN
海报/theme/example.jpg


BIN
海报/theme/img/fbg.jpg


BIN
海报/theme/img/hbg.jpg


BIN
海报/theme/img/main_bg.jpg


BIN
海报/theme/img/title.png


+ 290 - 0
海报/theme/poster.html

@@ -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>

+ 100 - 0
海报/theme/script.js

@@ -0,0 +1,100 @@
+var getNode = function(id){
+	return document.getElementById(id)
+}
+var yuyue = getNode("yuyue")
+var share = getNode("share")
+var modal = getNode("zy-h5-modal")
+var modalZz = getNode("zy-h5-fix-z")
+var submitModal = getNode("submitModal")
+var canselModal = getNode("canselModal")
+var userPhone = getNode("userPhone")
+// test,  测试     local:本地     pre :预发布      pro:生产
+if(baseType == 'test'){
+	var reqUrl = 'http://192.168.16.100:9110/saas/clz/'
+}else if(baseType == 'local'){
+	var reqUrl = 'http://127.0.0.1:9110/saas/clz/'
+}else if(baseType == 'pre'){
+	var reqUrl = 'http://md.test.zyucgj.com/saas/clz/'
+}else if(baseType == 'pro'){
+	var reqUrl = 'http://md.chelingzhu.com/saas/clz/'
+}
+// 隐藏预约弹框
+var closeYy = function (){
+	userPhone.value = ''
+	modal.style.display = 'none'
+	modalZz.style.display = 'none'
+}
+window.onload = function(){
+	
+	getActivityData()
+	//  获取活动信息
+	function getActivityData(){
+		//  获取活动信息 (海报和门店二维码)
+		$.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(staticHtmlPath){  //  发布
+						const joinerNum = parseInt(data.initBuyNum) + parseInt(data.joinerNum)
+						document.getElementById('joinerNum').innerHTML = joinerNum
+					}
+				}
+			},
+		})
+	}
+	// 打开预约弹框
+	yuyue.onclick = function(){
+		modal.style.display = 'block'
+		modalZz.style.display = 'block'
+	}
+	// 关闭预约弹框
+	canselModal.onclick = function(){
+		closeYy()
+	}
+	// 提交预约
+	submitModal.onclick = function(){
+		// 提交代码到后台
+		var mobile = userPhone.value
+		if(mobile==''){
+			alert("请输入手机号码");
+			return false; 
+		}
+		if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(mobile))){ 
+			alert("手机号码错误,请重填");  
+			return false; 
+		}
+		
+		const obj = JSON.stringify({
+			"joinerMobile": mobile,
+			"activeId": acitveId,
+		})
+		//  立即参与
+		$.ajax({
+			url: reqUrl + 'active/signUp',
+			type: 'post',
+			contentType: 'application/json;charset=UTF-8',
+			// 设置的是请求参数
+			data: obj,
+			dataType: 'json',
+			success: function (res) {
+				console.log(res)
+				if(res.status == 200){
+					closeYy()
+				}
+				alert(res.message)
+			}
+		})
+	}
+	// 分享
+	share.onclick = function(){
+		window.location.href = 'http://static.chelingzhu.com/active/poster.html?id=' + acitveId + '&reqUrl=' + reqUrl
+	}
+}

BIN
海报/theme/thumb.jpg


Неке датотеке нису приказане због велике количине промена