Pārlūkot izejas kodu

新年活动-参与活动门店列表

chenrui 4 gadi atpakaļ
vecāks
revīzija
cb60ba4b52

BIN
新模板/新年活动 - new/img/arrow-down.png


BIN
新模板/新年活动 - new/img/arrow-up.png


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


BIN
新模板/新年活动 - new/img/storeList.jpg


+ 32 - 13
新模板/新年活动 - new/index.html

@@ -75,10 +75,9 @@
 			<div class="zy-h5-store-info">
 				<div class="store-info-cont">
 					<div id="showStore">
-						<div class="store-info-title">★参与活动门店列表★</div>
-						<div class="store-info-open">
-							点击查看适用门店
-						</div>
+						<img src="img/arrow-up.png" class="arrow-up" />
+						<div class="store-info-title">★点击箭头查看门店★</div>
+						<!-- <div class="store-info-open">点击查看适用门店</div> -->
 					</div>
 				</div>
 				<!-- 关注头像 -->
@@ -183,12 +182,16 @@
 			<!-- 适用门店列表 -->
 			<div class="mask"></div>
 			<div class="store-info-list">
-				<div id="close-store" class="close-btns">ⓧ 关闭</div>
-				<div class="store-info-title">
-					★参与活动门店列表★
+				<!-- <div id="close-store" class="close-btns">ⓧ 关闭</div> -->
+				<div id="close-store">
+					<img src="img/arrow-down.png" class="arrow-down" />
+					<div class="store-info-title">
+						★点击箭头查看门店★
+					</div>
 				</div>
 				<div class="store-info-card">
-					<div>
+					<img src="img/storeList.jpg" class="store-info-pic" />
+					<!-- <div>
 						<div class="store-info-names">
 							<span id="store">
 								昆仑润滑车领主(长青二路店)
@@ -214,7 +217,7 @@
 								</span>
 							</div>
 						</div>
-					</div>  
+					</div> --> 
 				</div>
 			</div>
 			<!-- 底部浮动栏 -->
@@ -261,8 +264,8 @@
 			background: #b10c1a;
 		}
 		.zy-h5-bgimg{
-			width: 40%;
-			margin: 15px 15px 25px;
+			width: 38%;
+			margin: 0 0 15px;
 		}
 		.zy-h5-title{
 			text-align:center;
@@ -431,7 +434,7 @@
 			font-weight: bold;
 			font-size: 20px;
 			text-align: center;
-			padding: 20px 0;
+			padding: 15px 0 25px;
 		}
 		.store-info-open{
 			text-align: center;
@@ -440,6 +443,11 @@
 			padding: 1em;
 			font-size: 1em;
 		}
+		.zy-h5-store-info .arrow-up{
+			display: block;
+			margin: 10px auto 0;
+			width: 34px;
+		}
 		.mask{
 			height: 100%;
 			width: 100%;
@@ -457,11 +465,17 @@
 			bottom: -1000em;
 			background-color: #FFFFFF;
 			max-height: 80%;
-			padding: 1.5em 2em 5em;
+			/* padding: 1.5em 2em 5em; */
+			padding: 1.5em 0 5em;
 			display: flex;
 			flex-direction: column;
 			box-shadow: 0em 0em 1em #333;
 		}
+		.arrow-down{
+			display: block;
+			margin: 0 auto;
+			width: 34px;
+		}
 		.close-btns{
 			position: absolute;
 			right: 1em;
@@ -472,6 +486,11 @@
 		.store-info-card{
 			flex-grow: 1;
 			overflow: auto;
+			height: 500px;
+		}
+		.store-info-pic{
+			display: block;
+			width: 100%;
 		}
 		.store-info-names{
 			padding: 0.5em 1em;

+ 15 - 22
新模板/新年活动 - new/script.js

@@ -17,10 +17,10 @@ var submitModal = getNode("submitModal")  //  提交预约
 var canselModal = getNode("canselModal")  //  取消预约
 var userPhone = getNode("userPhone")  //  预约手机号
 var joinerNum = getNode("joinerNum")  //  参与人数
-var storeHead = getNode("store-head")  //  头部门店名称
+// var storeHead = getNode("store-head")  //  头部门店名称
 var store = getNode("store")  //  门店
-var address = getNode("address")  //  地址
-var tel = getNode("tel")  //  电话
+// var address = getNode("address")  //  地址
+// var tel = getNode("tel")  //  电话
 
 var storeId = getQueryString('orgId') || 0  //  门店id
 var companyId = ''
@@ -64,17 +64,17 @@ window.onload = function(){
 	})
 	
 	// 查看地址
-	$(".address").click(function(e){
-		e.stopPropagation()
-		wx.openLocation({
-		    latitude: item.lat, // 纬度,浮点数,范围为90 ~ -90
-		    longitude: item.lng, // 经度,浮点数,范围为180 ~ -180。
-		    name: item.name, // 位置名
-		    address: item.addrDetail, // 地址详情说明
-		    scale: 26, // 地图缩放级别,整形值,范围从1~28。默认为最大
-		    infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
-		});
-	})
+	// $(".address").click(function(e){
+	// 	e.stopPropagation()
+	// 	wx.openLocation({
+	// 	    latitude: item.lat, // 纬度,浮点数,范围为90 ~ -90
+	// 	    longitude: item.lng, // 经度,浮点数,范围为180 ~ -180。
+	// 	    name: item.name, // 位置名
+	// 	    address: item.addrDetail, // 地址详情说明
+	// 	    scale: 26, // 地图缩放级别,整形值,范围从1~28。默认为最大
+	// 	    infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
+	// 	});
+	// })
 	
 	// 分享初始化
 	setTimeout(function(){
@@ -140,14 +140,7 @@ window.onload = function(){
 							success: function (result) {
 								if(result.status == 200){
 									var data = result.data
-									storeHead.innerHTML = data.name || ''
-									store.innerHTML = data.name || ''
-									var addrCityName = data.addrCityName || ''
-									var addrDistrictName = data.addrDistrictName || ''
-									var addrDetail = data.addrDetail || ''
-									address.innerHTML = addrCityName + addrDistrictName + addrDetail
-									tel.innerHTML = data.managerMobile
-									document.getElementById("tel-link").href = 'tel:' + data.managerMobile
+									// storeHead.innerHTML = data.name || ''
 									companyId = data.companyId
 									joinerList(companyId)  //  参与人列表数据
 								}

+ 135 - 46
新模板/新年活动 - new/tpl.html

@@ -22,10 +22,7 @@
 							<img class="img-title" src="${active.staticMouldTheme.basePath}/img/tit1.png">
 						</div>
 						<div class="store-name">
-							<span id="store-head">--</span>
-						</div>
-						<div class="active-time">
-							${active.contentTitle!}
+							<span id="store-head">${active.contentTitle!}</span>
 						</div>
 					</div>
 				</div>
@@ -69,25 +66,10 @@
 			<!--门店信息-->
 			<div class="zy-h5-store-info">
 				<div class="store-info-cont">
-					<div class="store-info-box">
-						<span>门店名称:</span>
-						<span id="store">XXXXXXX</span>
-					</div>
-					<div class="store-info-box">
-						<span>门店电话:</span>
-						<span>
-							<a id="tel-link" href="javascript:;">
-								<i id="tel">XXXXXXX</i>
-								<svg t="1589357171261" class="icon" style="vertical-align: sub;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1184" width="16" height="16"><path d="M1020.765599 154.386263C1020.765599 89.326865 987.28345 57.088501 913.487954 37.054507 839.692583 17.020526 777.566181 3.165394 777.566181 3.165394 720.824641-10.981854 663.169494 23.635711 649.003341 80.452889L610.800805 233.675027C596.617668 290.560389 631.183258 348.098737 688.030695 362.272396 688.030695 362.272396 702.326846 366.678777 743.500477 375.919969 674.660513 559.358011 527.497727 691.361427 377.214242 745.028871 373.701051 730.938506 366.674793 702.757788 366.674793 702.757788 352.511387 645.951274 294.943405 611.289315 238.125689 625.455569L80.380247 664.785939C23.668179 678.925831-10.99544 736.57873 3.169215 793.389915L35.742252 923.532923C45.473616 980.250012 94.753824 1022.287923 152.863901 1022.287923 632.192772 1022.287923 1020.765599 633.715134 1020.765599 154.386263ZM121.897793 908.750484 87.987187 772.24241C85.504739 762.285654 91.648609 752.067042 101.527703 749.603912L259.273145 710.273542C269.212555 707.795389 279.364257 713.907789 281.856821 723.90528L302.608163 807.134381C309.284388 833.911333 336.103424 849.229037 358.537622 842.533069L358.537622 842.533069C590.664487 773.249875 773.382895 589.859611 841.784663 357.448461L841.784663 357.448461C848.891716 333.300864 827.631247 306.988082 794.011982 298.605863L709.17815 277.454424C699.177799 274.961048 693.114226 264.867589 695.618778 254.82252L733.821313 101.600394C736.30501 91.639055 746.508662 85.512531 756.418601 87.983366L902.466976 119.420589C919.560643 123.34343 933.351039 137.26732 933.351039 154.386263 933.351039 585.437409 583.914959 934.873401 152.863901 934.873401 137.544 934.873401 124.465783 923.717081 121.897793 908.750484Z" p-id="1185" fill="#1396dc"></path></svg>
-							</a>
-					    </span>
-					</div>
-					<div class="store-info-box">
-						<span>门店地址:</span>
-						<span id="address">
-							<span id="address">XXXXXXX</span>
-							<svg t="1587695882868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1906" width="22" height="22"><path d="M514.529 140.428c-156.365 0-283.125 125.12-283.125 279.465s283.125 459.123 283.125 459.123 283.125-304.778 283.125-459.123-126.76-279.465-283.125-279.465z m0 418.533c-74.783 0-135.408-60.624-135.408-135.408s60.625-135.408 135.408-135.408 135.408 60.624 135.408 135.408c0 74.783-60.625 135.408-135.408 135.408z" p-id="1907" fill="#1296db"></path></svg>
-					    </span>
+					<div id="showStore">
+						<img src="${active.staticMouldTheme.basePath}/img/arrow-up.png" class="arrow-up" />
+						<div class="store-info-title">★点击箭头查看门店★</div>
+						<!-- <div class="store-info-open">点击查看适用门店</div> -->
 					</div>
 				</div>
 				<!-- 关注头像 -->
@@ -155,6 +137,47 @@
 			     	<div class="kh-list" id="kh-list"></div>
 			     </div>
 			</div>
+			<!-- 适用门店列表 -->
+			<div class="mask"></div>
+			<div class="store-info-list">
+				<!-- <div id="close-store" class="close-btns">ⓧ 关闭</div> -->
+				<div id="close-store">
+					<img src="${active.staticMouldTheme.basePath}/img/arrow-down.png" class="arrow-down" />
+					<div class="store-info-title">
+						★点击箭头查看门店★
+					</div>
+				</div>
+				<div class="store-info-card">
+					<img src="${active.staticMouldTheme.basePath}/img/storeList.jpg" class="store-info-pic" />
+					<!-- <div>
+						<div class="store-info-names">
+							<span id="store">
+								昆仑润滑车领主(长青二路店)
+							</span>
+						</div>
+						<div class="store-info-s">
+							<div class="store-info-box">
+								<span>门店电话:</span>
+								<span>
+									<a href="tel:400-1616-312">
+										<i class="tel">
+											400-1616-312 
+										</i>
+										<svg t="1589357171261" class="icon" style="vertical-align: sub;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1184" width="16" height="16"><path d="M1020.765599 154.386263C1020.765599 89.326865 987.28345 57.088501 913.487954 37.054507 839.692583 17.020526 777.566181 3.165394 777.566181 3.165394 720.824641-10.981854 663.169494 23.635711 649.003341 80.452889L610.800805 233.675027C596.617668 290.560389 631.183258 348.098737 688.030695 362.272396 688.030695 362.272396 702.326846 366.678777 743.500477 375.919969 674.660513 559.358011 527.497727 691.361427 377.214242 745.028871 373.701051 730.938506 366.674793 702.757788 366.674793 702.757788 352.511387 645.951274 294.943405 611.289315 238.125689 625.455569L80.380247 664.785939C23.668179 678.925831-10.99544 736.57873 3.169215 793.389915L35.742252 923.532923C45.473616 980.250012 94.753824 1022.287923 152.863901 1022.287923 632.192772 1022.287923 1020.765599 633.715134 1020.765599 154.386263ZM121.897793 908.750484 87.987187 772.24241C85.504739 762.285654 91.648609 752.067042 101.527703 749.603912L259.273145 710.273542C269.212555 707.795389 279.364257 713.907789 281.856821 723.90528L302.608163 807.134381C309.284388 833.911333 336.103424 849.229037 358.537622 842.533069L358.537622 842.533069C590.664487 773.249875 773.382895 589.859611 841.784663 357.448461L841.784663 357.448461C848.891716 333.300864 827.631247 306.988082 794.011982 298.605863L709.17815 277.454424C699.177799 274.961048 693.114226 264.867589 695.618778 254.82252L733.821313 101.600394C736.30501 91.639055 746.508662 85.512531 756.418601 87.983366L902.466976 119.420589C919.560643 123.34343 933.351039 137.26732 933.351039 154.386263 933.351039 585.437409 583.914959 934.873401 152.863901 934.873401 137.544 934.873401 124.465783 923.717081 121.897793 908.750484Z" p-id="1185" fill="#1396dc"></path></svg>
+									</a>
+							    </span>
+							</div>
+							<div class="store-info-box">
+								<span>门店地址:</span>
+								<span class="address">
+									陕西省西安市未央区北二环华帝金座A座
+									<svg t="1587695882868" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1906" width="35" height="35"><path d="M514.529 140.428c-156.365 0-283.125 125.12-283.125 279.465s283.125 459.123 283.125 459.123 283.125-304.778 283.125-459.123-126.76-279.465-283.125-279.465z m0 418.533c-74.783 0-135.408-60.624-135.408-135.408s60.625-135.408 135.408-135.408 135.408 60.624 135.408 135.408c0 74.783-60.625 135.408-135.408 135.408z" p-id="1907" fill="#1296db"></path></svg>
+								</span>
+							</div>
+						</div>
+					</div> --> 
+				</div>
+			</div>
 			<!-- 底部浮动栏 -->
 			<div class="zy-h5-bf-bar" id="zy-h5-bf-bar">
 				<span class="zy-h5-yuyue" id="yuyue">
@@ -170,7 +193,7 @@
 			<!-- 预约弹框 -->
 			<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-title">在线预约</div>
+				<div class="zy-h5-modal-title">在线报名预约</div>
 				<div class="zy-h5-modal-content">
 					<p class="zy-h5-modal-form">
 						<input type="tel" id="userPhone" maxlength="11" placeholder="输入手机号预约"/>
@@ -192,27 +215,19 @@
 		body{
 			font: 16px/1.231 "Microsoft Yahei","Helvetica Neue",Helvetica Neue,Helvetica,Arial,Lantinghei SC,Hiragino Sans GB,sans-serif,Times New Roman;
 		}
+		
 		.wrapper{
 			position: relative;
 		}
 		/*模板样式*/
-		.countdown-box{
-			color: #fff;
-			text-align: center;
-			padding: 10px 0;
-			background: #a50614;
-		}
-		.countdown-des{
-			font-size: 13px;
-		}
 		.zy-h5-main{
 			position: relative;
 			overflow: hidden;
 			background: #b10c1a;
 		}
 		.zy-h5-bgimg{
-			width: 40%;
-			margin: 15px 15px 25px;
+			width: 38%;
+			margin: 0 0 15px;
 		}
 		.zy-h5-title{
 			text-align:center;
@@ -224,12 +239,15 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
+			text-shadow: 1px 3px 5px #73010c;
+			font-weight: 900;
 		}
 		.img-title-box span{
 			position: absolute;
 			font-size: 3em;
 			color: #f3e190;
 			font-style: italic;
+			font-family: 'webfont';
 			text-shadow: 1px 3px 5px #73010c;
 			font-weight: 900;
 		}
@@ -248,6 +266,7 @@
 			background-size: auto 100%;
 			height: 3em;
 			color: #b10c1a;
+			font-weight: lighter;
 		}
 		.store-name span{
 			font-size: 1.2em;
@@ -375,27 +394,97 @@
 		.zy-h5-store-info{
 			/* display: none; */
 		}
+		.store-info-title{
+			font-weight: bold;
+			font-size: 20px;
+			text-align: center;
+			padding: 15px 0 25px;
+		}
+		.store-info-open{
+			text-align: center;
+		}
 		.zy-h5-store-info > .store-info-cont{
 			padding: 1em;
 			font-size: 1em;
 		}
-		.zy-h5-store-info > .store-info-cont > .store-info-box{
+		.zy-h5-store-info .arrow-up{
+			display: block;
+			margin: 10px auto 0;
+			width: 34px;
+		}
+		.mask{
+			height: 100%;
+			width: 100%;
+			position: fixed;
+			z-index: 40;
+			left: 0;
+			top: 0;
+			background: rgba(0,0,0,0.5);
+			display: none;
+		}
+		.store-info-list{
+			position: fixed;
+			z-index: 50;
+			left: 0;
+			bottom: -1000em;
+			background-color: #FFFFFF;
+			max-height: 80%;
+			/* padding: 1.5em 2em 5em; */
+			padding: 1.5em 0 5em;
+			display: flex;
+			flex-direction: column;
+			box-shadow: 0em 0em 1em #333;
+		}
+		.arrow-down{
+			display: block;
+			margin: 0 auto;
+			width: 34px;
+		}
+		.close-btns{
+			position: absolute;
+			right: 1em;
+			top: 1em;
+			color: #b10c1a;
+			font-size: 0.8em;
+		}
+		.store-info-card{
+			flex-grow: 1;
+			overflow: auto;
+			height: 500px;
+		}
+		.store-info-pic{
+			display: block;
+			width: 100%;
+		}
+		.store-info-names{
+			padding: 0.5em 1em;
+			background: #b10c1a;
+			color: #fff;
+			border-radius: 0.3em;
+			box-shadow: 2px 2px 5px #666;
+			position: relative;
+		}
+		.store-info-box{
 			padding: 0.5em 0;
-			border-bottom: 0.1em solid #eee;
+			border-bottom: 0.1em solid #d1bb73;
 			display: flex;
-			align-items: center;
+			background: #ecd383;
+			color: #483803;
 		}
-		.zy-h5-store-info > .store-info-cont > .store-info-box span:first-child{
-			font-weight:bold;
-			width: 80px;
+		.store-info-s{
+			margin:0 1em 1em;
+			padding: 1em;
+			background: #ecd383;
+			border-radius: 0 0 0.2em 0.2em;
 		}
-		.zy-h5-store-info > .store-info-cont > .store-info-box span:last-child{
+		.store-info-box span:last-child{
 			line-height: 1.5em;
 			display: flex;
-			align-items: center;
+			flex-grow: 1;
+			width: 50%;
 		}
-		.zy-h5-store-info > .store-info-cont > .store-info-box span:last-child a{
-			color: #000;
+		.store-info-box span:last-child a{
+			color: #483803;
 			text-decoration: none;
 		}
 		 
@@ -637,7 +726,7 @@
 		}
 		
 		loadScript(baseUrl+"/alert.js")
-		loadScript(baseUrl+"/leftTime.min.js")
+		// loadScript(baseUrl+"/leftTime.min.js")
 		loadScript(baseUrl+"/script.js")
 		loadScript(baseUrl+"/spin.min.js")
 		loadScript(baseUrl+"/shareWx.js")