Ver código fonte

丘比养车

lilei 4 anos atrás
pai
commit
f00d1495dc

+ 294 - 0
posterQbyc.html

@@ -0,0 +1,294 @@
+<!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">
+		<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%;
+			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%;
+			padding-bottom: 100px;
+			background-color: #fff;
+		}
+		.qrcode{
+			border: 5px solid #fff;
+			position: absolute;
+			right: 10px;
+			bottom: 10px;
+			z-index: 10000;
+		}
+		.poster-pic{
+			display: block;
+			width: 100%;
+		}
+		.footer-box{
+			position: fixed;
+			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: 80%;
+			top: 10%;
+			left: 50%;
+			margin-left: -40%;
+			margin-top: -40px;
+			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>
+	<link rel="stylesheet" href="http://static.qiubcar.com/active/swiper.min.css">
+	<script src="http://static.qiubcar.com/active/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="http://static.qiubcar.com/active/html2canvas.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);
+		}
+		
+		// app 中点击保存图片到手机
+		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"
+			$("#cancel-btn").hide()
+		}
+		// 保存到相册
+		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: getQueryVariable("orgId") ? data.staticHtmlPath + '?orgId=' + getQueryVariable("orgId") : data.staticHtmlPath,
+									width: 80,
+									height: 80,
+									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(){
+								var dom = document.getElementById('poster-con' + swiperInd)
+								var width = dom.clientWidth
+								var height = dom.clientHeight
+								//  合并图片和二维码
+								html2canvas(dom, {
+									width:width,
+									height:height,
+									backgroundColor: "#ffffff",
+									allowTaint: true,
+									useCORS: true,
+									scale: 2
+								}).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>

BIN
新模板/新年活动/example.jpg


BIN
新模板/新年活动/example1.jpg


BIN
新模板/新年活动/example2.jpg


BIN
新模板/新年活动/img/logo.png


BIN
新模板/新年活动/img/logo1.png


BIN
新模板/新年活动/img/logo2.png


+ 10 - 6
新模板/新年活动/script.js

@@ -26,7 +26,9 @@ if(baseType == 'test'){
 }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 reqUrl = 'http://md.zyucgj.com/saas/clz/'
+}else if(baseType == 'qbx'){
+	var reqUrl = 'https://md.qiubcar.com/saas/clz/'
 }
 // 隐藏预约弹框
 var closeYy = function (){
@@ -82,8 +84,8 @@ window.onload = function(){
 				if(res.status == 200){
 					const data = res.data
 					if(staticHtmlPath){  //  发布
-						const joinerNumVal = parseInt(data.initBuyNum) + parseInt(data.joinerNum)
-						joinerNum.innerHTML = joinerNumVal
+						// const joinerNumVal = parseInt(data.initBuyNum) + parseInt(data.joinerNum)
+						// joinerNum.innerHTML = joinerNumVal
 						$('.zy-h5-store-info').show()
 					}
 					//  根据门店id处理对应页面展示
@@ -207,10 +209,11 @@ window.onload = function(){
 	}
 	// 分享
 	share.onclick = function(){
+		let domain = window.location.protocol + '//' + window.location.host
 		if(storeId){
-			window.location.href = 'http://static.chelingzhu.com/active/poster.html?id=' + activeId + '&reqUrl=' + reqUrl + '&orgId=' + storeId
+			window.location.href = domain + '/active/poster.html?id=' + activeId + '&reqUrl=' + reqUrl + '&orgId=' + storeId
 		}else{
-			window.location.href = 'http://static.chelingzhu.com/active/poster.html?id=' + activeId + '&reqUrl=' + reqUrl
+			window.location.href = domain + '/active/poster.html?id=' + activeId + '&reqUrl=' + reqUrl
 		}
 		
 	}
@@ -238,12 +241,13 @@ window.onload = function(){
 							<div class="kh-list-td">报名状态</div>
 						</div>`
 					for(let i = 0; i < data.length; i++){
-						html += `<div class="kh-list-tr kh-list-tr-head">
+						html += `<div class="kh-list-tr">
 							<div class="kh-list-td">${data[i].joinerMobile}</div>
 							<div class="kh-list-td">已报名</div>
 						</div>`
 					}
 					document.getElementById("kh-list").innerHTML = html
+					joinerNum.innerHTML = data.length
 				}
 			},
 		})

+ 3 - 2
新模板/新年活动/shareWx.js

@@ -25,8 +25,9 @@ var shareCls = {
 				url: url
 			},
 			headers:{
-				'X-HEADER-APPID': '!z2Yc.aes|j/r6hk33Kyyfehctv+KGW0HnQCXBK61W5sJRNoN9JqM='
-				},
+				// 'X-HEADER-APPID': '!z2Yc.aes|j/r6hk33Kyyfehctv+KGW0HnQCXBK61W5sJRNoN9JqM=' ,// 车领主appid
+				'X-HEADER-APPID': '!z2Yc.aes|6RQI2+w0x2IGaPEw0OrPMrUkJmxBuX/24QMvaWcGjCA=' // 丘比养车appid
+			},
 			success:function(res){
 				 var wxData = res
 				 wx.config({

BIN
新模板/新年活动/新年活动.zip