heyang 3 年之前
父节点
当前提交
e3f54e54be

+ 98 - 3
microserviceUserH5/static/css/anniversaryCelebrate.css

@@ -433,7 +433,7 @@ ul, li {
   border-bottom: 0.01rem solid rgba(91, 180, 255, 1);
 }
 
-.rule-mask,.award-result-mask,.no-start-mask {
+.law-mask,.rule-mask,.award-result-mask,.no-start-mask {
   width: 100%;
   height: 100vh;
   position: fixed;
@@ -456,6 +456,30 @@ ul, li {
   transform: translateX(-50%);
 }
 
+.law-result-dialog{
+  width: 5.52rem;
+  height: 7.16rem;
+  background: url(../../static/img/anniversaryCelebrate/law-bg.png) no-repeat;
+  background-size: 100% 100%;
+  border-radius: 0.2rem;
+  position: absolute;
+  left: 50%;
+  top: -10.86rem;
+  transform: translateX(-50%);
+}
+
+.rule-result-dialog{
+  width: 5.52rem;
+  height: 8.93rem;
+  background: url(../../static/img/anniversaryCelebrate/rule-bg.png) no-repeat;
+  background-size: 100% 100%;
+  border-radius: 0.2rem;
+  position: absolute;
+  left: 50%;
+  top: -10.86rem;
+  transform: translateX(-50%);
+}
+
 .award-result-one-dialog{
   width: 5.52rem;
   height: 8.11rem;
@@ -468,8 +492,17 @@ ul, li {
   transform: translateX(-50%);
 }
 
+.award-success{
+  width: 5.8rem;
+  height: 3.44rem;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+}
+
 .award-result-wrap{
-  width: 5.6rem;
+  margin-left: 0.2rem;
 }
 
 .award-result-tip{
@@ -513,6 +546,34 @@ ul, li {
   margin-left: 1rem;
 }
 
+.many-card-item:nth-child(6n) {
+  padding-top: 0.35rem;
+  margin-left: 1rem;
+}
+
+.many-card-item:nth-child(7n) {
+  padding-top: 0.35rem;
+}
+
+.many-one-card{
+  padding-top: 0.35rem;
+  margin-left: 1rem;
+}
+
+.many-two-card{
+  padding-top: 0.35rem;
+}
+
+.line{
+  position: absolute;
+  bottom: 3.2rem;
+  left: 0.6rem;
+  width: 4.35rem;
+  height: 0.01rem;
+  background: #F1F3FE;
+  opacity: 0.5;
+}
+
 .many-card-item{
   display: none;
 }
@@ -558,10 +619,16 @@ ul, li {
 }
 
 .one-result{
+  display: flex;
+  flex-wrap: wrap;
   margin-bottom: 1.2rem;
 }
 
-.award-result-close{
+.one-card-item{
+  width: 5.52rem;
+}
+
+.rule-close,.law-close,.award-result-close{
   width: 0.68rem;
   height: 0.68rem;
   position: absolute;
@@ -570,6 +637,34 @@ ul, li {
   transform: translateX(-50%);
 }
 
+.rule-content{
+  width: 5.52rem;
+  height: 6.6rem;
+  padding: 0.2rem 0;
+  border-radius: 0.1rem;
+  overflow-y: scroll;
+  position: absolute;
+  top: 1.8rem;
+}
+
+.law-content{
+  top: 0;
+}
+
+.light-show{
+  position: absolute;
+  top: -0.8rem;
+  left: 1.2rem;
+  animation: mymove 0.8s;
+  display: none;
+}
+
+.rule-point{
+  margin: 0 0.2rem;
+  font-size: 0.24rem;
+  line-height: 0.48rem;
+}
+
 #toast-container>.toast-error {
   background-image: none !important;
 }

二进制
microserviceUserH5/static/img/anniversaryCelebrate/award-result.png


二进制
microserviceUserH5/static/img/anniversaryCelebrate/award-success.png


二进制
microserviceUserH5/static/img/anniversaryCelebrate/first.png


二进制
microserviceUserH5/static/img/anniversaryCelebrate/get-award-show.png


二进制
microserviceUserH5/static/img/anniversaryCelebrate/law-bg.png


二进制
microserviceUserH5/static/img/anniversaryCelebrate/rule-bg.png


二进制
microserviceUserH5/static/img/anniversaryCelebrate/second.png


+ 1 - 1
microserviceUserH5/static/js/vender/config.js

@@ -1,7 +1,7 @@
 var url = window.location.href;
 url = url.split('/');
 var baseUrl = url[0] + '//' + url[2];
-// var baseUrl = 'http://14.18.190.141:24380'
+var baseUrl = 'http://14.18.190.141:1280'
 // var baseUrl = 'http://prese.phone.androidscloud.com'
 // var baseUrl = 'http://vclusters.imwork.net:2221'
 

+ 249 - 43
microserviceUserH5/vcloud/anniversaryCelebrate.html

@@ -26,6 +26,8 @@
 		</div>
 		<div class="star-wrap">
 			<img class="star" src="../static/img/anniversaryCelebrate/star.png" />
+			<img class="light-show" src="../static/img/anniversaryCelebrate/light-show.gif" />
+			<img class="award-success" src="../static/img/anniversaryCelebrate/award-success.png" />
 			<div class="point-wrap"></div>
 		</div>
 		<div class="station-wrap">
@@ -63,7 +65,7 @@
 				<div class="change-wrap">
 					<div class="get-award-wrap">
 						<img class="award-img" src="../static/img/anniversaryCelebrate/left-bg.png" />
-						<img class="get-award-img" src="../static/img/anniversaryCelebrate/get-award-hidden.png" />
+						<img class="get-award-img" src="../static/img/anniversaryCelebrate/get-award-show.png" />
 						<div class="get-award-text">领取</div>
 					</div>
 					<div class="get-award-wrap">
@@ -92,6 +94,7 @@
 			<div class="award-result-dialog-sure">
 				<div class="have-times-wrap">
 					<div class="award-result-tip"></div>
+					<div class="line"></div>
 					<div class="card-wrap award-result-wrap"></div>
 					<div class="btn-row">
 						<img class="award-btn continue-lighten" src="../static/img/anniversaryCelebrate/continue-lighten.png" />
@@ -102,6 +105,83 @@
 				<img class="award-result-close" src="../static/img/anniversaryCelebrate/close.png" />
 			</div>
 		</div>
+		<div class="rule-mask">
+			<div class="rule-result-dialog">
+				<div class="rule-content">
+					<div class="rule-point">1、本次活动参与活动的套餐是星曜月卡、年卡套餐,其他套餐不参与活动,现金购买及续费皆可参与活动</div>
+					<div class="rule-point">2、激活码、优惠券、星币购买的订单不参与本次活动</div>
+					<div class="rule-point">3、本次活动购买限时折扣次数不限,获得赠送天数,可分配在购买套餐的云机账户上,单账号购买新增云机总数上限为200台</div>
+					<div class="rule-point">4、本次活动赠送星曜机型,单次点亮赠送天数1~30天随机,外环全部点亮额外获得88天,内环全部点亮额外赠送188天,10次可全部点亮</div>
+					<div class="rule-point">5、已点亮位置单次不会重复点亮,活动奖励即时领取,单次活动全部点亮后重置点亮进度,可再次进行点亮活动。</div>
+					<div class="rule-point">6、运营平台有权对用户购买数据进行审核,如发现活动订单中存在异常情况(包括任何形式的用户作弊行为),有权取消优惠,退款处理。</div>
+				</div>
+				<img class="rule-close" src="../static/img/anniversaryCelebrate/close.png" />
+			</div>
+		</div>
+		<div class="law-mask">
+			<div class="law-result-dialog">
+				<div class="rule-content law-content">
+					<div class="rule-point">
+						法律声明:
+					</div>
+					<div class="rule-point">
+						1.同一用户是指使用同一帐号、同一手机号、同一设备或同一提现账户的用户。上述与用户身
+						份相关的信息,其中任意一项或数项相同,或通过特定标记形成关联,或活动平台有合理理由认
+						为存在关联的,都视为同一个用户。部分参与方式中,对用户帐号有限制,同一个设备最多可使
+						用一个帐号参与活动,同一帐号最多可以使用一台设备参与活动;用户使用多个帐号在同一个设
+						备上登录的,视为同一用户,仅有一个帐号可参与本活动。
+					</div>
+					<div class="rule-point">
+						2.用户不得采取任何不正当或作弊的违规手段参与本活动,一经发现,活动平台有权限制或取
+						消用户参与活动的资格,有权取消奖励、追讨用户已领取的奖励(或同等价值的现金)。活动平
+						台有权对违规用户采取限制登录、封禁帐号、限制提现的措施,并保留追究用户其他法律责任的
+						权利。违规手段包括但不仅限于:
+					</div>
+					<div class="rule-point">2.1通过不正当手段参与活动。例如使用模拟器、插件、软件外挂、物理外挂等违规工具参与活动,与其他用户串通采取不正当手段谋取活动奖励等;</div>
+					<div class="rule-point">2.2扰乱本活动秩序。例如使用多个帐号参与活动,修改个人位置信息,篡改设备数据,买卖用户帐号,买卖活动权益,买卖领奖资格等;</div>
+					<div class="rule-point">2.3干扰活动平台正常运营。例如批量注册用户帐号,违规使用用户帐号,采用技术手段对活动平台进行干扰、破坏、修改或施加其他影响;</div>
+					<div class="rule-point">2.4利用本活动进行违法犯罪。例如利用本活动洗钱、套现、诈骗,或开展其他违反国家法律法规的活动;</div>
+					<div class="rule-point">2.5其他违反法律法规,违背诚实信用原则,违反活动规则,或活动平台认为的不正当手段。</div>
+					<div class="rule-point">
+						3.如因以下原因导致活动不能正常举办、用户无法参与或参与失败、活动奖励发放错误等,活
+						动平台/本活动有权暂停或取消活动,且不承担任何法律责任或不利后果:
+					</div>
+					<div class="rule-point">3.1不可抗力,包括但不仅限于自然灾害,有权机关的政策要求,政府机关指令,重大疫情影响等不能预见、不可避免、不能克服的情况;</div>
+					<div class="rule-point">3.2活动平台发生技术故障,本活动受到不正当技术手段干扰、破坏、篡改或被施加其他影响,第三方平台限制活动平台或本活动,或其他导致本活动的正常秩序受到干扰的情况;</div>
+					<div class="rule-point">3.3用户所在地区网络故障、支付平台故障、电信运营商故障等非活动平台所能控制的情况。</div>
+					<div class="rule-point">
+						4.活动平台不支持用户通过众包或类似方式参与活动。如用户因此遭受经济损失的,活动平台
+						不承担任何赔偿或补偿责任。
+					</div>
+					<div class="rule-point">
+						5.商品展示的划线价格为参考价,该价格可能是品牌专柜标价、商品吊牌价或品牌供应商提供
+						的指导价、建议零售价或该商品在电商平台及/或其他渠道曾展示过的销售价,并非原价;由于
+						地区等差异性和市场行情波动,品牌专柜标价、商品吊牌价等可能会与电商平台展示的不一致,
+						该价格仅供用户参考。
+					</div>
+					<div class="rule-point">
+						6.若由于用户自身原因(包括但不限于参与方式不符合活动规则、未按活动规则要求提供收件
+						地址、操作不当造成产品功能故障等)导致无法实际享有奖励的,视为用户自愿放弃奖励,活动
+						平台将不会也无义务给予任何形式的补偿。
+					</div>
+					<div class="rule-point">
+						7.任何第三方以活动平台名义从事欺诈行为造成用户损失的,活动平台无需为此承担法律责任。
+					</div>
+					<div class="rule-point">
+						8.活动平台和电商平台的《用户协议》《隐私政策》(以手机客户端对应名称为准)及其他规
+						范同样适用于本活动,本活动规则与活动平台和电商平台《用户协议》《隐私政策》及其他规范
+						相冲突的,以本活动规则为准。本活动规则未约定的内容,以活动平台和电商平台的《用户协议》
+						《隐私政策》及其他平台规范为准。
+					</div>
+					<div class="rule-point">
+						9.在法律法规允许的范围内,活动平台有权对本活动规则进行变动或调整,相关变动或调整将
+						公布在活动规则页面上,并于公布时即时生效,用户继续参与活动则视为同意并接受变动或者调
+						整后的活动规则。如果用户拒绝活动规则的变更或者调整,请放弃参与变更后的活动。
+					</div>
+				</div>
+				<img class="law-close" src="../static/img/anniversaryCelebrate/close.png" />
+			</div>
+		</div>
 		<div class="no-start-mask">
 			<div class="no-start-dialog">
 				<div>活动暂未开启</div>
@@ -136,6 +216,7 @@
 			receive = 0,
 			lighten = [],
 			notReceive = true,
+			phoneRemainQuantity = 0,
 			isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
 		// 初始化数据
 		init();
@@ -152,7 +233,14 @@
 				success: function (res) {
 					if(res.status === 0){
 						residueDegree = res.data.residueDegree;
-						lighten = res.data.lighten.split(','), str = '';
+						result = res.data.lighten;
+						lighten = result.split(','), str = '';
+						$('.rest-number').eq(0).text(residueDegree);
+						$('.light-number').eq(0).text(res.data.allTotal);
+						if(result == ''){
+							return
+						}
+						//更新点亮星星
 						$('.point-wrap').eq(0).empty();
 						for (let i = 0; i < lighten.length; i++) {
 							if([1, 3, 5, 7, 12].includes(lighten[i])){
@@ -162,8 +250,6 @@
 							}
 						}
 						$('.point-wrap').eq(0).append(str);
-						$('.rest-number').eq(0).text(residueDegree);
-						$('.light-number').eq(0).text(res.data.allTotal);
 					}else{
 						stopManyClick(() =>{
 							toastr.error(res.msg)
@@ -177,33 +263,29 @@
 		//点击抽奖
 		$('.once-btn')[0].addEventListener('click',() => {
 			if(!animationFlag) return;
-			operate('sf_2022_h5_抽奖1次');
-			if(anniversarySwitch === 1){
-				stopManyClick(() =>{
-					toastr.error('该活动暂未开启,请稍安勿躁');
-				})
-			}else if(anniversarySwitch === 2 && receiveSwitch === 0){
-				stopManyClick(() =>{
-					toastr.error('活动已结束,期待下次的见面');
-				})
-			}else{
-				handleAward(1)
+			if(lighten.length == 9){
+				$('.point-wrap').eq(0).empty();
+				$('.light-show').show();
+				setTimeout(() => {
+					$('.light-show').hide();
+					$('.award-success').show();
+				},800)
 			}
+			handleAward(1);
+			operate('sf_2022_h5_抽奖1次');
 		},false);
 		$('.five-btn')[0].addEventListener('click',() => {
 			if(!animationFlag) return;
-			operate('znq_2022_h5_抽奖5次');
-			if(anniversarySwitch === 1){
-				stopManyClick(() =>{
-					toastr.error('该活动暂未开启,请稍安勿躁');
-				})
-			}else if(anniversarySwitch === 2 && receiveSwitch === 0){
-				stopManyClick(() =>{
-					toastr.error('活动已结束,期待下次的见面');
-				})
-			}else{
-				handleAward(5)
+			if(lighten.length + 5 >= 10){
+				$('.point-wrap').eq(0).empty();
+				$('.light-show').show();
+				setTimeout(() => {
+					$('.light-show').hide();
+					$('.award-success').show();
+				},800)
 			}
+			handleAward(5);
+			operate('znq_2022_h5_抽奖5次');
 		},false);
 		//点击再抽
 		$('.continue-lighten')[0].addEventListener('click',() => {
@@ -231,21 +313,54 @@
 					if(res.status === 0){
 						let imgNumber = 0,
 							str = '',
+							otherData = [],
 							list = res.data.anniversaryAwards;
+						// 188 88放在最后
+						list.map(item => {
+							if(item.awardType != 0){
+								otherData.push(item)
+							}
+						});
+						if(otherData.length > 0) {
+							$('.line').show();
+						} else {
+							$('.line').hide();
+						}
+						let currData = list.filter(item => item.awardType == 0);
+						list = [...currData, ...otherData];
 						if(type !== 'report'){
 							$('.award-result-dialog-sure').animate({top: '1.86rem'},"fast");
 							$('.award-result-mask').show();
 							document.documentElement.style.overflow='hidden';
 						}
+						if(lighten.length != 10){
+							$('.award-success').hide();
+						}
 						$('.award-result-wrap').eq(0).text('');
 						if(times === 1){
 							$('.award-result-dialog-sure')[0].className = 'award-result-dialog-sure award-result-one-dialog';
 							$('.award-result-tip').eq(0).text('换个姿势,再抽一次');
 							$('.award-result-wrap')[0].className = 'card-wrap award-result-wrap one-result';
-							str = `<div class="card-item">
-										<img class="one-card" src="../static/img/anniversaryCelebrate/day-card.png" />
-										<div class="card-text">星曜${list[0].awardDurations}天卡</div>
-									</div> `
+							for (let i = 0; i < list.length; i++) {
+								if(list[i].awardType == 0){
+									str += `<div class="card-item one-card-item">
+												<img class="one-card" src="../static/img/anniversaryCelebrate/day-card.png" />
+												<div class="card-text">星曜${list[0].awardDurations}天卡</div>
+											</div>`
+								} else {
+									if(list[i].awardDurations == 88){
+										str += `<div class="card-item many-one-card">
+												<img class="many-card" src="../static/img/anniversaryCelebrate/first.png" />
+												<div class="card-text">星曜${list[1].awardDurations}天卡</div>
+											</div>`
+									} else {
+										str += `<div class="card-item many-two-card">
+												<img class="many-card" src="../static/img/anniversaryCelebrate/second.png" />
+												<div class="card-text">星曜${list[2].awardDurations}天卡</div>
+											</div>`
+									}
+								}
+							}
 							setTimeout(() => {
 								animationFlag = true;
 							},1000);
@@ -254,14 +369,28 @@
 							$('.award-result-tip').eq(0).text('善良的人,好运气最终是会眷顾你');
 							$('.award-result-wrap')[0].className = 'card-wrap award-result-wrap many-card-wrap'
 							for (let i = 0; i < list.length; i++) {
-								str += `<div class="card-item many-card-item">
-											<img class="many-card" src="../static/img/anniversaryCelebrate/day-card.png" />
-										    <div class="card-text">星曜${list[i].awardDurations}天卡</div>
-										</div>`
+								if(list[i].awardType == 0){
+									str += `<div class="card-item many-card-item">
+												<img class="many-card" src="../static/img/anniversaryCelebrate/day-card.png" />
+												<div class="card-text">星曜${list[i].awardDurations}天卡</div>
+											</div>`
+								} else {
+									if(list[i].awardDurations == 88){
+										str += `<div class="card-item many-card-item">
+												<img class="many-card" src="../static/img/anniversaryCelebrate/first.png" />
+												<div class="card-text">星曜${list[i].awardDurations}天卡</div>
+											</div>`
+									} else {
+										str += `<div class="card-item many-card-item">
+												<img class="many-card" src="../static/img/anniversaryCelebrate/second.png" />
+												<div class="card-text">星曜${list[i].awardDurations}天卡</div>
+											</div>`
+									}
+								}
 							}
 							var imgTimer2 = setInterval(() => {
 									$('.many-card-item').eq(imgNumber).css('display', 'block');
-									if(imgNumber >= 4){
+									if(imgNumber >= 6){
 										clearInterval(imgTimer2);
 										animationFlag = true;
 									}
@@ -334,16 +463,17 @@
 						let str = '',
 						    records = res.data.records;
 							pages = res.data.pages;
-							if(records.length === 0){
-				                $('.title-row').eq(0).css('display', 'none');
-								if(receive == 1 && parseInt(notReceive) > 0){
-									str = '<div class="no-award">暂无已分配云手机</div>'
-								}else{
-									str = `<div class="no-award">没有${receive === 1 ? '已使用' : '领取'}记录,我都替你着急</div>`
-								}
+						$('.light-content-list').eq(0).empty();
+						if(records.length === 0){
+							$('.title-row').eq(0).css('display', 'none');
+							if(receive == 1 && parseInt(notReceive) > 0){
+								str = '<div class="no-award">暂无已分配云手机</div>'
 							}else{
-				                $('.title-row').eq(0).css('display', 'flex');
+								str = `<div class="no-award">没有${receive === 1 ? '已使用' : '领取'}记录,我都替你着急</div>`
 							}
+						}else{
+							$('.title-row').eq(0).css('display', 'flex');
+						}
 						for (var i = 0; i < records.length; i++) {
 							str += `<div class="light-content-wrap">
 										<div class="light-content-text">获得星曜${records[i].awardDurations}天时长</div>
@@ -379,6 +509,82 @@
 			getAward();
 			$('.award-change-btn')[receive].className = 'award-change-btn active'
 		},false);
+		//点击规则
+		$('.rule-wrap')[0].addEventListener('click',(e) => {
+			$('.rule-result-dialog').animate({top: '1.86rem'},"fast");
+			$('.rule-mask').show();
+			document.documentElement.style.overflow='hidden';
+		},false);
+		//关闭规则
+		$('.rule-close')[0].addEventListener('click',() => {
+			$('.rule-result-dialog').animate({top: '-10.96rem'},"fast");
+			$('.rule-mask').hide();
+			document.documentElement.style.overflow='auto';
+		},false);
+		//点击法律声明
+		$('.law-statement')[0].addEventListener('click',(e) => {
+			$('.law-result-dialog').animate({top: '1.86rem'},"fast");
+			$('.law-mask').show();
+			document.documentElement.style.overflow='hidden';
+		},false);
+		//关闭法律声明
+		$('.law-close')[0].addEventListener('click',() => {
+			$('.law-result-dialog').animate({top: '-10.96rem'},"fast");
+			$('.law-mask').hide();
+			document.documentElement.style.overflow='auto';
+		},false);
+		//点击获取次数
+		$('.get-times')[0].addEventListener('click',() => {
+		    operate('sf_2022_h5_获取次数按钮');
+			stopManyClick(() =>{
+				if (isMiniprogram) { // 小程序
+					if(phoneRemainQuantity > 0){
+						wx.miniProgram.navigateTo({
+							url: '/packageA/order/buy/index?type=activity'
+						})
+					} else {
+						wx.miniProgram.navigateTo({
+							url: '/packageA/order/renew/index?type=activity'
+						})
+					}
+				} else if (isAndroid) { // 安卓
+					if(phoneRemainQuantity > 0){
+						window.native.startPurchase(1, 365);
+					} else {
+						window.native.startRenew();
+					}
+				} else if (isiOS) {
+					if(phoneRemainQuantity > 0){
+						window.webkit.messageHandlers.startPurchase.postMessage({ type: 1, day: 365 });
+					} else {
+						window.webkit.messageHandlers.startRenew.postMessage({ type: 1, day: 365 });
+					}
+				}
+			})
+		},false);
+		//获取云机数量
+		function getPhoneNumber(){
+			$.ajax({
+				url: baseUrl + '/api/user/v2/meal/info?phoneType=SVIP',
+				type: 'get',
+				headers: {
+					'Authorization': id //id
+				},
+				contentType: "application/json",
+				dataType: 'json',
+				cache: false,
+				success: function (res) {
+					if(res.status === 0){
+						phoneRemainQuantity = res.data.list[0].phoneRemainQuantity;
+					}else{
+						stopManyClick(() =>{
+							toastr.error(res.msg)
+						})
+					}
+					
+				},
+			})
+		}
 		//埋点
 		function operate(pointName){
 			$.ajax({