调试

microserviceUserH5/static/css/doubleElevenActivity.css

@@ -225,7 +225,7 @@ ul, li {
 .packet-times{
   position: absolute;
   top: 0.64rem;
-  right: 1.58rem;
+  right: 1.68rem;
   font-size: 0.24rem;
   color: #FEF1C4;
 }
@@ -285,8 +285,8 @@ ul, li {
   display: flex;
 }
 .head-img{
-  width: 0.52rem;
-  height: 0.52rem;
+  width: 0.68rem;
+  height: 0.68rem;
   padding-top: 0.06rem;
   border-radius: 50%;
 }
@@ -443,4 +443,13 @@ ul, li {
     min-width: 80px !important;
     width: auto;
   }
+}
+
+.no-user{
+  background-color: #F16902;
+}
+
+.usered{
+  background-color: #E3E7EE;
+  color: #AAADB3;
 }

microserviceUserH5/vcloud/doubleElevenActivity.html

@@ -97,99 +97,7 @@
 			<div class="packet-container">
 			    <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" />
-						</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>
 				</div>
 			</div>
 			<div class="rule-container">
@@ -307,6 +215,7 @@
 	<script type="text/javascript">
 	    let timer,flag = true;
 		var url = window.location.href;
+		var startTime,endTime;
 		url = url.split('/');
 		var topVal = -0.5;
 		var baseUrl = 'http://192.168.211.34:8044'
@@ -319,9 +228,9 @@
 			isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
 			isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
 		(function(){
+			getActivityTime();
 			awardHandle();
 			headerAward();
-			getList();
 		})()
 		//轮播
 		function headerAward(){
@@ -340,6 +249,21 @@
 				$('.award-text').eq(index).text(`恭喜1${[3,5,7,8,3,5,7,8,3,5][getRandom()]}${getRandom()}****${getRandom()}${getRandom()}${getRandom()}${getRandom()}用户免费获得唔即年卡`);
 				$('.award-list').eq(0).animate({top: -(topVal) + 'rem'},"fast");
 		}
+		//获取时间
+		function getActivityTime(){
+			$.ajax({
+				url: baseUrl + `/v1/activity/getActivityTime?name=双十一活动`,
+				type: 'get',
+				contentType:"application/json",
+				dataType: 'json',
+				cache: false,
+				success: function (res) {
+					startTime = res.data.startTime;
+					endTime = res.data.endTime;
+					getList();
+				},
+			})
+		}
 		//调用获取数据列表接口
 		function getList(){
 			if(!id){
@@ -359,38 +283,56 @@
 				success: function (res) {
 					if(res.status === 0){
 						if(res.data && res.data.length > 0){
+							let res = {
+								data: [{
+									totalMoney: 66,
+									shareCount: 1,
+									quantity: 6,
+									list:[{
+										receiveUser: '111',
+										creatTime: '2020-11-11 11:21:08',
+										receivePhoneDuration: 30,
+										state: 2
+									}]
+								}]
+							}
 							$('.invite-text').eq(0).show();
 							$('.packet-container').eq(0).show();
 							var str = '',
+							    list = '',
 							    len = res.data.length;
 							for (var i = 0; i < len; i++) {
 								var totalMoney = res.data[i].totalMoney,
 								    shareCount = res.data[i].shareCount,
+									dataList = res.data[i].list,
 								    quantity = res.data[i].quantity;
-								str += `<div class="packet">
+									dataList.map((item) => {
+										list += `<div class="user-item">
+											<div class="user-left">
+												<img class="head-img" src="../static/img/doubleElevenActivity/touxiang_da_icon.png" />
+												<div class="user-info">
+													<div class="user-name">${item.receiveUser}</div>
+													<div class="user-time">${item.creatTime}</div>
+												</div>
+											</div>
+											<div class="meal">无极${item.receivePhoneDuration===30?'月卡':item.receivePhoneDuration===120?'季卡':item.receivePhoneDuration===365?'年卡':item.receivePhoneDuration+'卡'}</div>
+											<div class="${['receive no-user','receive',' receive usered'][item.state]}" totalMoney=${totalMoney}>${['未使用','领取','已领取'][item.state]}</div>
+										</div>`
+									})
+								    str += `<div class="packet">
 											<img class="fxhb" src="../static/img/doubleElevenActivity/fxhb.png" />
 											<div class="money"><span class="money-mark">¥</span><span class="money-val">${totalMoney}</span></div>
 											<div class="packet-titles">无门槛</div>
-											<div class="packet-times">${quantity}</div>
+											<div class="packet-times">${startTime.substring(5,11)}-${endTime.substring(5,11)}日有效</div>
 											<div class="share-btn">
 												<img class="share" src="../static/img/doubleElevenActivity/share.png" />
 												<div class="share-num">${shareCount}/${quantity}</div>
 											</div>
-											<div class="packet-info">尚未有用户领取红包购买云机</div>
-											<img class="icon" src="../static/img/doubleElevenActivity/icon_down.png" />
+											<div class="packet-info">${dataList.length !== 0?'':'尚未有用户领取红包购买云机'}</div>
+											<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="${dataList.length !== 0?'user-list':''}" flag="2">
+											${list}
 									    </div>`
 							}
 							$('.red-packet-next').eq(0).append(str);
@@ -403,8 +345,17 @@
 				}
 			})
 		}
+// 6，dt_双11_h5_活动页面
+// 7, dt_双11_h5_快来参加双11
+// 8, dt_双11_mp_快来参加双11
+
+// 9，dt_双11_android_分享红包
+// 9，dt_双11_h5_分享红包
+
+// 10, dt_双11_h5_使用红包
+// 11, dt_双11_h5_领取红包
 		//埋点
-		operate('dt_yhs_活动页面浏览');
+		operate('dt_双11_h5_活动页面');
 		function operate(pointName,type){
 			$.ajax({
 				url: baseUrl + '/api/public/v1/systemBuriedPoint/stat',
@@ -416,31 +367,44 @@
 				dataType: 'json',
 				cache: false,
 				success: function (res) {
-					if(type === 'click'){
-						changePhone();
-					}
+					
 				},
 			})
 		}
-		$('.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');
+		//点击红包
+		$('.red-packet-next')[0].addEventListener('click',(e) => {
+			if(['fxhb','packet-titles','money-val'].includes(e.target.className)){
+				$('.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');
+				}
 			}
 		})
 		//点击参加按钮
 		$('.join-activity-btn')[0].addEventListener('click',()=>{
-			window.native.startPurchase();
+			if (isAndroid) {
+				window.native.startPurchase();
+				operate('dt_双11_h5_快来参加双11');
+			}
+		});
+		//点击领取
+		$('.red-packet-next')[0].addEventListener('click',(e)=>{
+			if(e.target.className === 'receive'){
+				e.stopPropagation();
+				if (isAndroid) {
+					window.native.activatePhone(112);
+				}
+			}
 		});
 		//点击分享
 		$('.red-packet-next')[0].addEventListener('click',(e) => {
+			console.log(e)
 			if(e.target.className === 'share' || e.target.className === 'share-num'){
-				e.stopPropagation();
 				$('.pop').animate({top: '48vh'},"fast");
 				$('.mask').show();
 				document.documentElement.style.overflow='auto';
@@ -452,19 +416,17 @@
 		});
 		//点击分享微信
 		$('.right-wechat')[0].addEventListener('click',()=>{
-			shareHandle('shareToWechat');
-		});
-		//点击领取
-		$('.receive')[0].addEventListener('click',()=>{
-			window.native.activatePhone(112);
+			shareHandle('shareToWechatMin');
 		});
 		function shareHandle(type) {
+			shareAddress();
 			if (isAndroid) {
 					if(window.native){
+				        operate('dt_双11_h5_分享红包');
 						window.native[type](
 							'111',
 							'111',
-							'pages/home/home?AppID=wxe7a691bd1cd74958',
+							'pages/home/home?AppID=wxe7a691bd1cd74958&',
 							'https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/18fe2f6bb3c843c0b6fc3935a7411c51~tplv-k3u1fbpfcp-zoom-mark-crop-v2:240:240:0:0.awebp'
 						);
 					}else{
@@ -478,98 +440,25 @@
 				})
 			}
 		}
-		//点击关闭弹窗
-		$('.red-packet-next')[0].addEventListener('click',(e)=>{
-			console.log(e.target.className)
-			if(e.target.className === 'el'){
-				$('.pop').animate({top: '-6.96rem'},"fast");
-				$('.mask').hide();
-				document.documentElement.style.overflow='auto';
-			}
-			
-		});
-		// //点击分享
-		// $('.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 = {
-				inviteTime: entryPageTime,
-				type: fromType,
-				account: account,
-				password: password
-			}
-			if(!id){
-				delete data.inviteTime
-			}
-			let ajaxObj = {
-				url: baseUrl + '/v1/activity/orderRedEnvelopeSharing',
-				type: 'post',
-				headers: {
-					'Authorization': id  //id
-				},
-				data:JSON.stringify(data),
-				contentType: "application/json",
+		// 获取链接
+		function shareAddress(){
+			$.ajax({
+				url: baseUrl + `/v1/activity/shareAddress?paramJson=111111`,
+				type: 'get',
+				contentType:"application/json",
 				dataType: 'json',
 				cache: false,
 				success: function (res) {
-					if(res.status === 0){
-						$('.dialog').animate({top: '46vh'},"fast");
-						$('.mask').show();
-						$('.tip').animate({top: '-6.96rem'},"fast");
-						document.documentElement.style.overflow='hidden';
-					}else{
-						$('#tip-text').text(res.msg);
-						$('.tip').animate({top: '48vh'},"fast");
-						$('.mask').show();
-						$('.dialog').animate({top: '-6.96rem'},"fast");
-						document.documentElement.style.overflow='hidden';
-					}
-				}
-			}
-			if(!id){
-				delete ajaxObj.headers
-			}
-			$.ajax(ajaxObj)
+					console.log(res)
+				},
+			})
 		}
+		//点击关闭弹窗
+		$('.del')[0].addEventListener('click',(e)=>{
+			$('.pop').animate({top: '-6.96rem'},"fast");
+			$('.mask').hide();
+			document.documentElement.style.overflow='auto';
+		});
 		//防止提示一秒内重复显示
 		function stopManyClick(fn) {
 		if (flag) {