调整

microserviceUserH5/static/css/anniversaryCelebrate.css

@@ -24,6 +24,9 @@ ul, li {
   min-height: 100vh;
   background-color: rgba(22, 12, 31, 1);
   padding-bottom: 0.34rem;
+  background-image: url('../img/anniversaryCelebrate/all-bg.png');
+  background-repeat: repeat-y;
+  background-size: cover;
 }
 
 .rule-wrap{
@@ -221,12 +224,20 @@ ul, li {
 .line-wrap{
   width: 3.81rem;
   height: 0.12rem;
-  background: linear-gradient(89deg, #58A9F5 0%, #DFE9F8 51%, #FFB5F5 99%);
+  background: #DFE9F8;
   border-radius: 0.06rem;
   position: relative;
   margin-left: 0.18rem;
 }
 
+.line-wrap-one{
+  background: linear-gradient(89deg, #58A9F5 0%, #DFE9F8 51%);
+}
+
+.line-wrap-two{
+    background: linear-gradient(89deg, #58A9F5 0%, #DFE9F8 51%, #FFB5F5 99%);
+}
+
 .icon{
   width: 0.3rem;
   height: 0.3rem;
@@ -283,13 +294,25 @@ ul, li {
   background-repeat: repeat-y;
   background-size: cover;
 }
+
 .record-main-active-wrap{
   background-image: url('../img/anniversaryCelebrate/left-selected.png');
 }
+
 .change-wrap{
   display: flex;
 }
 
+.no-distribution-award{
+  background: #D59355;
+  opacity: 0.6;
+  border-radius: 0.16rem;
+  font-size: 0.24rem;
+  color: #FFFFFF;
+  padding: 0.02rem 0.06rem;
+  margin-left: 0.1rem;
+}
+
 .get-award-wrap{
   width: 3.11rem;
   height: 0.62rem;
@@ -300,6 +323,11 @@ ul, li {
   position: relative;
 }
 
+.get-award-right-wrap{
+  justify-content: flex-end;
+  padding-left: 0.08rem;
+}
+
 .award-img{
   width: 3.11rem;
   height: 0.62rem;
@@ -309,8 +337,8 @@ ul, li {
 
 .right-bg{
   display: none;
-  width: 2.88rem;
   margin-left: 0.5rem;
+  right: -0.2rem;
 }
 
 .get-award-img{
@@ -362,11 +390,16 @@ ul, li {
   margin-left: 0.8rem;
 }
 
+.light-content-container{
+  padding-top: 0.3rem;
+}
+
 .light-content-list{
   border-bottom: 0.01rem solid rgba(213, 227, 253, 0.5);
   margin: 0 0.23rem;
   height: 4.88rem;
   overflow-y: scroll;
+  padding-bottom: 0.3rem;
 }
 
 .light-content-wrap{
@@ -376,7 +409,8 @@ ul, li {
 }
 
 .light-content-text{
-  width: 2.16rem;
+  margin-top: 0.27rem;
+  text-align: center;
   font-size: 0.24rem;
   color: #FFFFFF;
 }

microserviceUserH5/vcloud/anniversaryCelebrate.html

@@ -50,7 +50,7 @@
 					</div>
 					<div class="line-wrap">
 						<img class="icon icon1" src="../static/img/anniversaryCelebrate/icon1.png" />
-						<img class="icon icon2" src="../static/img/anniversaryCelebrate/icon3.png" />
+						<img class="icon icon2" src="../static/img/anniversaryCelebrate/icon2.png" />
 					</div>
 				</div>
 			</div>
@@ -66,26 +66,24 @@
 					<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-show.png" />
-						<div class="get-award-text">领取</div>
+						<div class="get-award-text">充值奖励</div>
 					</div>
-					<div class="get-award-wrap">
+					<div class="get-award-wrap get-award-right-wrap">
 						<img class="award-img right-bg" src="../static/img/anniversaryCelebrate/right-bg.png" />
 						<img class="get-award-img" src="../static/img/anniversaryCelebrate/get-award-success-hidden.png" />
-						<div class="get-award-text used-text">已使用</div>
+						<div class="get-award-text used-text">分配奖励</div>
+						<div class="no-distribution-award">999+</div>
 					</div>
 				</div>
-				<div class="light-title-wrap">
-					<div class="light-title-text award-text">奖品</div>
-					<div class="light-title-text light-title-time">时间</div>
-					<div class="light-title-text active-text">操作</div>
-				</div>
 				<div class="light-content-container">
-					<div class="light-content-list"></div>
+					<div class="light-content-list">
+						<div class="light-content-text">点亮一颗星获得星曜7天时长奖励</div>
+					</div>
 					<div class="all-light">已全部点亮<text class="light-number"></text>次</div>
 				</div>
 			</div>
 			<div class="activity-intrduction-wrap">
-				<div>活动时间：2022年6月10日-2022年6月19日</div>
+				<div>活动时间：2022年6月18日-2022年6月27日</div>
 				<div>活动参与套餐：星曜套餐月卡年卡（自动续费除外）</div>
 			</div>
 			<div class="law-statement">请阅读相关《法律声明》文件</div>
@@ -192,7 +190,7 @@
 	</script>
 	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
 	<script type="text/javascript">
-        // var baseUrl = 'http://192.168.31.198'
+        var baseUrl = 'http://14.18.190.141:1280'
 	    let timer,flag = true;
 		var url = window.location.href;
 		url = url.split('/')
@@ -242,9 +240,22 @@
 						residueDegree = res.data.residueDegree;
 						anniversarySwitch = res.data.anniversarySwitch;
 						result = res.data.lighten;
-						lighten = result.split(','), str = '';
+						lighten = result && result.split(',') || [], str = '';
 						$('.rest-number').eq(0).text(residueDegree);
 						$('.light-number').eq(0).text(res.data.allTotal);
+						if(residueDegree == 0){
+							$('.line-wrap')[0].className = 'line-wrap';
+							$('.icon1')[0].src = '../static/img/anniversaryCelebrate/icon1.png';
+							$('.icon2')[0].src = '../static/img/anniversaryCelebrate/icon2.png';
+						}else if(residueDegree >=1 && residueDegree < 5){
+							$('.line-wrap')[0].className = 'line-wrap line-wrap-one';
+							$('.icon1')[0].src = '../static/img/anniversaryCelebrate/icon4.png';
+							$('.icon2')[0].src = '../static/img/anniversaryCelebrate/icon2.png';
+						} else if(residueDegree >= 5){
+							$('.line-wrap')[0].className = 'line-wrap line-wrap-two';
+							$('.icon1')[0].src = '../static/img/anniversaryCelebrate/icon4.png';
+							$('.icon2')[0].src = '../static/img/anniversaryCelebrate/icon3.png';
+						}
 						if(anniversarySwitch !== 0){
 							let awardText = anniversarySwitch == 1 ? '<div>活动暂未开启</div>请稍安勿躁' : '<div>活动已结束</div>期待下次的见面'
 							$('.no-start-dialog').eq(0).append(awardText);
@@ -252,7 +263,7 @@
 							$('.no-start-mask').show();
 							document.documentElement.style.overflow='hidden';
 						}
-						if(result == ''){
+						if(result == '' || !lighten){
 							return
 						}
 						//更新点亮星星
@@ -274,7 +285,7 @@
 				},
 			})
 		};
-		getAward();
+		// getAward();
 		//点击抽奖
 		$('.once-btn')[0].addEventListener('click',() => {
 			if(!animationFlag) return;
@@ -345,6 +356,7 @@
 						}
 						let currData = list.filter(item => item.awardType == 0);
 						list = [...currData, ...otherData];
+						getAward();
 						if(type !== 'report'){
 							$('.award-result-dialog-sure').animate({top: '1.86rem'},"fast");
 							$('.award-result-mask').show();
@@ -414,7 +426,7 @@
 									imgNumber++;
 								},400)
 						}
-						$('.times-text-number').eq(0).text(residueDegree - 1);
+						$('.times-text-number').eq(0).text(residueDegree - times);
 						$('.award-result-wrap').eq(0).append(str);
 						init();
 					}else{
@@ -425,6 +437,13 @@
 				},
 			})
 		}
+		//点击确定
+		$('.distribution-award')[0].addEventListener('click',() => {
+			animationFlag = true;
+			$('.award-result-dialog').animate({top: '-10.96rem'},"fast");
+			$('.award-result-mask').hide();
+			document.documentElement.style.overflow='auto';
+		},false);
 		//点击抽奖关闭按钮
 		$('.award-result-close')[0].addEventListener('click',() => {
 			animationFlag = true;