页面搭建

microserviceUserH5/vcloud/doubleElevenActivity.html

@@ -25,24 +25,26 @@
 		}
 		.middle-container{
 			width: 7.5rem;
-			height: 28.9rem;
+			/* height: 28.9rem; */
 			margin: 0 auto;
 			position: relative;
 			background: url(../static/img/doubleElevenActivity/bg.png) no-repeat;
             background-size: 100% 100%;
 			margin-top: -2.06rem;
+			padding-bottom: 0.5rem;
 		}
 		.tips{
 			width: 6.9rem;
 			height: 1.76rem;
 			position: absolute;
-			top: -1rem;
+			top: 1.82rem;
 			left: 0;
+			z-index: 9;
 		}
 		.step-container{
 			width: 6.9rem;
 			position: relative;
-			padding-top: 2.42rem;
+			padding-top: 2.82rem;
 			margin-left: 0.3rem;
 		}
 		.main-step-content{
@@ -51,7 +53,7 @@
 			z-index: 9;
 			border-radius: 0.1rem;
 			background-color: #ffffff;
-			padding-bottom: 0.88rem;
+			padding-bottom: 1.18rem;
 		}
 		.top-step{
 			display: flex;
@@ -73,6 +75,9 @@
 			margin-top: 0.4rem;
 		}
 		.red-packet{
+			margin: 0.3rem 0.3rem 0 0.3rem;
+		}
+		.red-packet-next{
 			margin: 0.3rem;
 		}
 		.packet{
@@ -153,10 +158,16 @@
 			width: 0.2rem;
 			height: 0.32rem;
 		}
+		.invite-text{
+			margin-top: 0.6rem;
+			font-size: 0.28rem;
+			text-align: center;
+			color: #ffffff;
+		}
 		.rule-container{
 			width: 6.9rem;
 			position: relative;
-			margin-top: 4.06rem;
+			margin-top: 1.6rem;
 			margin-left: 0.3rem;
 		}
 		.rule-tips{
@@ -180,6 +191,199 @@
 			font-size: 0.24rem;
 			line-height: 0.4rem;
 		}
+		.packet-block{
+			width: 6.9rem;
+			min-height: 2.16rem;
+			max-height: 9.16rem;
+			border-radius: 0.1rem;
+			background-color: #ffffff;
+			overflow-y: scroll;
+			position: relative;
+			z-index: 99;
+        }
+		.packet-titles{
+			position: absolute;
+			top: 0.14rem;
+			left: 2.32rem;
+			font-size: 0.36rem;
+			color: #FEF1C4;
+		}
+		.packet-times{
+			position: absolute;
+			top: 0.64rem;
+			right: 1.58rem;
+			font-size: 0.24rem;
+			color: #FEF1C4;
+		}
+		.packet-info{
+			position: absolute;
+			bottom: 0.1rem;
+			right: 0.88rem;
+			font-size: 0.24rem;
+			color: #FEF1C4;
+		}
+		.share-btn{
+			width: 1.04rem;
+			height: 0.48rem;
+			position: absolute;
+			top: 0.24rem;
+			right: 0.34rem;
+		}
+		.share-num{
+			position: absolute;
+			top: 0.08rem;
+			left: 0.12rem;
+			font-size: 0.24rem;
+			color: #FD1C15;
+		}
+		.share{
+			width: 100%;
+			height: 100%;
+		}
+		.icon{
+			width: 0.2rem;
+			height: 0.16rem;
+			position: absolute;
+			bottom: 0.2rem;
+			right: 0.34rem;
+		}
+		.user-list{
+			width: 5.72rem;
+			max-height: 5.68rem;
+			margin: 0 auto;
+			/* background: #FFFFFF; */
+			border-radius: 0.2rem;
+			border: 0.02rem solid #FFE4E3;
+			background-color: #FEF1C4;
+			padding: 0.3rem 0.3rem 0 0.3rem;
+			overflow-y: scroll;
+			display: block;
+		}
+		.user-item{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 0.28rem;
+		}
+		.user-left{
+			display: flex;
+		}
+		.head-img{
+			width: 0.52rem;
+			height: 0.52rem;
+			padding-top: 0.06rem;
+			border-radius: 50%;
+		}
+		.user-info{
+			margin-left: 0.14rem;
+			font-size: 0.24rem;
+		}
+		.user-name{
+			color: #272624;
+		}
+		.user-time{
+			color: #999999;
+		}
+		.meal{
+			font-size: 0.24rem;
+			color: #FD2B1B;
+			max-width: 1.72rem;
+		}
+		.receive{
+			width: 1.14rem;
+			height: 0.52rem;
+			line-height: 0.52rem;
+			font-size: 0.24rem;
+		    color: #ffffff;
+			background-color: #3B7FFF;
+			border-radius: 0.08rem;
+			text-align: center;
+		}
+		.pop {
+			width: 6.22rem;
+			height: 8.5rem;
+			position: absolute;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			top: -6.96rem;
+			z-index: 999;
+		}
+		.pop-bg{
+			width: 100%;
+			height: 100%;
+		}
+		.mask {
+			width: 100%;
+			height: 100vh;
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 9999;
+			background: rgba(0, 0, 0, 0.24);
+			display: none;
+		}
+		.top-title{
+			position: absolute;
+			top: 3.14rem;
+			left: 50%;
+			transform: translateX(-50%);
+			font-size: 0.32rem;
+			color: #ffffff;
+		}
+		.share-num-text{
+			position: absolute;
+			top: 4.94rem;
+			left: 50%;
+			transform: translateX(-50%);
+			font-size: 0.4rem;
+			color: #F23200;
+			letter-spacing: 0.06rem;
+			font-weight: 600;
+			line-height: 0.56rem;
+			text-align: center;
+		}
+		.bottom{
+			position: absolute;
+			bottom: 0.46rem;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+		.bottom-title-row{
+			width: 5.16rem;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+		}
+		.line{
+			width: 1.5rem;
+			height: 0.02rem;
+			background-color: #ffffff;
+		}
+		.bottom-title{
+			font-size: 0.24rem;
+			color: #ffffff;
+		}
+		.bottom-share-row{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding-top: 0.18rem;
+			margin: 0 0.2rem;
+		}
+		.left-friend_share,.right-wechat{
+			display: flex;
+			align-items: center;
+			font-size: 0.28rem;
+			color: #ffffff;
+		}
+		.friend_share,.wechat{
+			width: 0.68rem;
+			height: 0.68rem;
+			margin-right: 0.2rem;
+		}
+		.share-text{
+			opacity: 0.8;
+		}
 	</style>
 </head>
 
@@ -189,7 +393,6 @@
 			<img class="top-banner" src="../static/img/doubleElevenActivity/top-banner.png" />
 		</div>
 		<div class="middle-container">
-			<!-- <img class="main-bg" src="../static/img/doubleElevenActivity/bg.png" /> -->
 			<div class="step-container">
 			    <img class="tips" src="../static/img/doubleElevenActivity/tip.png" />
 			    <div class="main-step-content">
@@ -228,10 +431,164 @@
 					</div>
 				</div>
 			</div>
+			<div class="invite-text">*邀请好友即得厚礼，红包购机买一赠一</div>
 			<div class="rule-container">
-			    <img class="rule-tips" src="../static/img/doubleElevenActivity/rule.png" />
-				<div class="rule-content">
-					
+			    <img class="rule-tips" src="../static/img/doubleElevenActivity/packet-tip.png" />
+				<div class="packet-block">
+					<div class="red-packet-next">
+						<div class="packet">
+							<img class="fxhb" src="../static/img/doubleElevenActivity/fxhb.png" />
+							<div class="money"><span class="money-mark">¥</span><span class="money-val">1111</span></div>
+							<div class="packet-titles">无门槛</div>
+							<div class="packet-times">11月11-11月31日有效</div>
+							<div class="share-btn">
+							    <img class="share" src="../static/img/doubleElevenActivity/share.png" />
+								<div class="share-num">3/6</div>
+							</div>
+							<div class="packet-info">尚未有用户领取红包购买云机</div>
+							<img class="icon" src="../static/img/doubleElevenActivity/icon_down.png" />
+							<!-- <img class="icon" src="../static/img/doubleElevenActivity/icon_up.png" /> -->
+						</div>
+						<div class="user-list" flag="1">
+							<div class="user-item">
+								<div class="user-left">
+									<img class="head-img" src="../static/img/doubleElevenActivity/head-img.png" />
+									<div class="user-info">
+										<div class="user-name">用户名</div>
+										<div class="user-time">11月20日10:32:13</div>
+									</div>
+								</div>
+								<div class="meal">星动/30天云手机套餐</div>
+							    <div class="receive">领取</div>
+							</div>
+							<div class="user-item">
+								<div class="user-left">
+									<img class="head-img" src="../static/img/doubleElevenActivity/head-img.png" />
+									<div class="user-info">
+										<div class="user-name">用户名</div>
+										<div class="user-time">11月20日10:32:13</div>
+									</div>
+								</div>
+								<div class="meal">星动/30天云手机套餐</div>
+							    <div class="receive">领取</div>
+							</div>
+							<div class="user-item">
+								<div class="user-left">
+									<img class="head-img" src="../static/img/doubleElevenActivity/head-img.png" />
+									<div class="user-info">
+										<div class="user-name">用户名</div>
+										<div class="user-time">11月20日10:32:13</div>
+									</div>
+								</div>
+								<div class="meal">星动/30天云手机套餐</div>
+							    <div class="receive">领取</div>
+							</div>
+							<div class="user-item">
+								<div class="user-left">
+									<img class="head-img" src="../static/img/doubleElevenActivity/head-img.png" />
+									<div class="user-info">
+										<div class="user-name">用户名</div>
+										<div class="user-time">11月20日10:32:13</div>
+									</div>
+								</div>
+								<div class="meal">星动/30天云手机套餐</div>
+							    <div class="receive">领取</div>
+							</div>
+							<div class="user-item">
+								<div class="user-left">
+									<img class="head-img" src="../static/img/doubleElevenActivity/head-img.png" />
+									<div class="user-info">
+										<div class="user-name">用户名</div>
+										<div class="user-time">11月20日10:32:13</div>
+									</div>
+								</div>
+								<div class="meal">星动/30天云手机套餐</div>
+							    <div class="receive">领取</div>
+							</div>
+							<div class="user-item">
+								<div class="user-left">
+									<img class="head-img" src="../static/img/doubleElevenActivity/head-img.png" />
+									<div class="user-info">
+										<div class="user-name">用户名</div>
+										<div class="user-time">11月20日10:32:13</div>
+									</div>
+								</div>
+								<div class="meal">星动/30天云手机套餐</div>
+							    <div class="receive">领取</div>
+							</div>
+							<div class="user-item">
+								<div class="user-left">
+									<img class="head-img" src="../static/img/doubleElevenActivity/head-img.png" />
+									<div class="user-info">
+										<div class="user-name">用户名</div>
+										<div class="user-time">11月20日10:32:13</div>
+									</div>
+								</div>
+								<div class="meal">星动/30天云手机套餐</div>
+							    <div class="receive">领取</div>
+							</div>
+						</div>
+					</div>
+					<div class="red-packet-next">
+						<div class="packet">
+							<img class="fxhb" src="../static/img/doubleElevenActivity/fxhb.png" />
+							<div class="money"><span class="money-mark">¥</span><span class="money-val">1111</span></div>
+							<div class="packet-titles">无门槛</div>
+							<div class="packet-times">11月11-11月31日有效</div>
+							<div class="share-btn">
+							    <img class="share" src="../static/img/doubleElevenActivity/share.png" />
+							</div>
+							<div class="packet-info">尚未有用户领取红包购买云机</div>
+							<img class="icon" src="../static/img/doubleElevenActivity/icon_down.png" />
+							<!-- <img class="icon" src="../static/img/doubleElevenActivity/icon_up.png" /> -->
+						</div>
+						<div class="user-list">
+							<div class="user-item">
+								<div class="user-left">
+									<img class="head-img" src="../static/img/doubleElevenActivity/head-img.png" />
+									<div class="user-info">
+										<div class="user-name">用户名</div>
+										<div class="user-time">11月20日10:32:13</div>
+									</div>
+								</div>
+								<div class="meal">星动/30天云手机套餐</div>
+							    <div class="receive">领取</div>
+							</div>
+							<div class="user-item">
+								<div class="user-left">
+									<img class="head-img" src="../static/img/doubleElevenActivity/head-img.png" />
+									<div class="user-info">
+										<div class="user-name">用户名</div>
+										<div class="user-time">11月20日10:32:13</div>
+									</div>
+								</div>
+								<div class="meal">星动/30天云手机套餐</div>
+							    <div class="receive">领取</div>
+							</div>
+							<div class="user-item">
+								<div class="user-left">
+									<img class="head-img" src="../static/img/doubleElevenActivity/head-img.png" />
+									<div class="user-info">
+										<div class="user-name">用户名</div>
+										<div class="user-time">11月20日10:32:13</div>
+									</div>
+								</div>
+								<div class="meal">星动/30天云手机套餐</div>
+							    <div class="receive">领取</div>
+							</div>
+							<div class="user-item">
+								<div class="user-left">
+									<img class="head-img" src="../static/img/doubleElevenActivity/head-img.png" />
+									<div class="user-info">
+										<div class="user-name">用户名</div>
+										<div class="user-time">11月20日10:32:13</div>
+									</div>
+								</div>
+								<div class="meal">星动/30天云手机套餐</div>
+							    <div class="receive">领取</div>
+							</div>
+						</div>
+					</div>
 				</div>
 			</div>
 			<div class="rule-container">
@@ -314,6 +671,30 @@
 				</div>
 			</div>
 		</div>
+		<div class="mask">
+			<div class="pop">
+			    <img class="pop-bg" src="../static/img/doubleElevenActivity/pop_share.png" />
+			    <div class="top-title">恭喜你</div>
+			    <div class="share-num-text">还有*张优惠券可以分享</div>
+				<div class="bottom">
+					<div class="bottom-title-row">
+						<span class="line"></span>
+						<span class="bottom-title">分享到</span>
+						<span class="line"></span>
+					</div>
+					<div class="bottom-share-row">
+						<div class="left-friend_share">
+							<img class="friend_share" src="../static/img/doubleElevenActivity/icon_wechat_friend_share.png" />
+							<div class="share-text">朋友圈</div>
+						</div>
+						<div class="right-wechat">
+							<img class="wechat" src="../static/img/doubleElevenActivity/wechat.png" />
+							<div class="share-text">微信好友</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
 	</div>
 	<script>
 		toastr.options.positionClass = 'toast-center-center';
@@ -351,47 +732,89 @@
 				},
 			})
 		}
+		$('.red-packet-next')[0].addEventListener('click',() => {
+			$('.user-list').eq(0).toggle();
+			const flag = $('.user-list').eq(0).attr('flag');
+			if(flag === '1'){
+				$('.icon').eq(0).attr('src','../static/img/doubleElevenActivity/icon_up.png');
+				$('.user-list').eq(0).attr('flag','2');
+			}else{
+				$('.icon').eq(0).attr('src','../static/img/doubleElevenActivity/icon_down.png');
+				$('.user-list').eq(0).attr('flag','1');
+			}
+		})
 		//点击分享
-		$('.share-node')[0].addEventListener('click',()=>{
-			if(!id){
-				copyUrl();
-			} else if (isiOS) {
-				$.ajax({
-					url: baseUrl + '/api/user/v1/promote',
-					type: 'get',
-					headers: {
-						'Authorization': id  //id
-					},
-					contentType: "application/json",
-					dataType: 'json',
-					cache: false,
-					success: function (res) {
-						var jsonStr = JSON.stringify(res.data)
-						var jsonObj = JSON.parse(jsonStr)
-						// WKWebView使用
-						// 使用下方方法,会报错,为使界面执行逻辑通畅,因此使用try-catch
-						try {
-							getMessage(jsonObj);
-						} catch (error) {
-							console.log(error)
-						}
-						try {
-							window.webkit.messageHandlers.getMessage.postMessage(jsonObj)
-						} catch (error) {
-							copyUrl();
-						}
+		$('.share-btn')[0].addEventListener('click',(e) => {
+			e.stopPropagation();
+			$('.pop').animate({top: '48vh'},"fast");
+			$('.mask').show();
+			document.documentElement.style.overflow='auto';
+		});
+		//点击朋友圈
+		$('.left-friend_share')[0].addEventListener('click',(e) => {
+			if (isAndroid) {
+					if(window.native){
+						window.native.shareToWechatCircle();
+					}else{
+				        toastr.error('不支持当前环境！');
 					}
-				})
-			} else if (isAndroid) {
-				if(window.native){
-					window.native.onClikWebView()
 				}else{
-					copyUrl();
+					toastr.error('不支持当前环境！');
 				}
-			}else{
-				copyUrl();
-			}
-		},false);
+		});
+		//点击微信
+		$('.right-wechat')[0].addEventListener('click',(e) => {
+			if (isAndroid) {
+					if(window.native){
+						window.native.shareToWechat();
+					}else{
+				        toastr.error('不支持当前环境！');
+					}
+				}else{
+					toastr.error('不支持当前环境！');
+				}
+		});
+		// //点击分享
+		// $('.share-node')[0].addEventListener('click',()=>{
+		// 	if(!id){
+		// 		copyUrl();
+		// 	} else if (isiOS) {
+		// 		$.ajax({
+		// 			url: baseUrl + '/api/user/v1/promote',
+		// 			type: 'get',
+		// 			headers: {
+		// 				'Authorization': id  //id
+		// 			},
+		// 			contentType: "application/json",
+		// 			dataType: 'json',
+		// 			cache: false,
+		// 			success: function (res) {
+		// 				var jsonStr = JSON.stringify(res.data)
+		// 				var jsonObj = JSON.parse(jsonStr)
+		// 				// WKWebView使用
+		// 				// 使用下方方法,会报错,为使界面执行逻辑通畅,因此使用try-catch
+		// 				try {
+		// 					getMessage(jsonObj);
+		// 				} catch (error) {
+		// 					console.log(error)
+		// 				}
+		// 				try {
+		// 					window.webkit.messageHandlers.getMessage.postMessage(jsonObj)
+		// 				} catch (error) {
+		// 					copyUrl();
+		// 				}
+		// 			}
+		// 		})
+		// 	} else if (isAndroid) {
+		// 		if(window.native){
+		// 			window.native.onClikWebView()
+		// 		}else{
+		// 			copyUrl();
+		// 		}
+		// 	}else{
+		// 		copyUrl();
+		// 	}
+		// },false);
 		//调用免费换机接口
 		function changePhone(){
 			let data = {