调整周年庆活动

microserviceUserH5/static/css/anniversaryCelebrate.css

@@ -189,9 +189,12 @@ ul, li {
   height: 2.02rem;
   display: flex;
   justify-content: space-between;
-  background: #25244B;
   border-radius: 0.11rem;
   margin: auto;
+  background-image: url('../img/anniversaryCelebrate/award-bg.png');
+  background-repeat: repeat-y;
+  background-size: cover;
+  position: relative;
 }
 
 .number-wrap{
@@ -207,7 +210,13 @@ ul, li {
 }
 
 .rest-number{
+  font-size: 0.36rem;
   color: rgba(253, 255, 65, 1);
+  margin: 0 0.1rem;
+}
+
+.select-page-numbers{
+  color: #333333;
 }
 
 .small-star{
@@ -218,7 +227,16 @@ ul, li {
 .process-wrap{
   display: flex;
   align-items: center;
-  margin-top: 0.24rem;
+  margin-top: 0.14rem;
+}
+
+.line-out-wrap{
+  width: 5.46rem;
+  height: 0.13rem;
+  margin-left: 0.18rem;
+  background-image: url('../img/anniversaryCelebrate/process-bg.png');
+  background-repeat: repeat-y;
+  background-size: cover;
 }
 
 .line-wrap{
@@ -227,7 +245,6 @@ ul, li {
   background: #DFE9F8;
   border-radius: 0.06rem;
   position: relative;
-  margin-left: 0.18rem;
 }
 
 .line-wrap-one{
@@ -261,6 +278,25 @@ ul, li {
   width: 1.21rem;
   height: 1.01rem;
   padding: 0.69rem 0.24rem 0 0;
+  position: absolute;
+  top: 0.2rem;
+  right: -0.1rem;
+}
+
+.icon-once{
+  position: absolute;
+  top: 0.24rem;
+  left: 0.86rem;
+  font-size: 0.24rem;
+  color: #E6E6E6;
+}
+
+.icon-five-times{
+  position: absolute;
+  top: 0.24rem;
+  left: 1.86rem;
+  font-size: 0.24rem;
+  color: #E6E6E6;
 }
 
 .no-join-activity{
@@ -577,7 +613,7 @@ ul, li {
 }
 
 .distribution-time-dialog{
-  width: 5.48rem;
+  width: 6.48rem;
   height: 6.56rem;
   background: #FFFFFF;
   border-radius: 0.2rem;
@@ -799,9 +835,17 @@ ul, li {
   color: #333333;
 }
 
+.distribution-content-name{
+  width: 1.8rem;
+}
+
+.distribution-content-names{
+  width: 1.2rem;
+  text-align: right;
+}
+
 .distribution-content-wrap{
   display: flex;
-  justify-content: space-between;
   margin: 0 0.34rem;
   margin-top: 0.08rem;
   font-size: 0.26rem;
@@ -809,6 +853,8 @@ ul, li {
 }
 
 .distribution-time-text{
+  flex: 1;
+  text-align: center;
   color: #B3B3B3;
 }
 

microserviceUserH5/vcloud/anniversaryCelebrate.html

@@ -89,8 +89,8 @@
 		<div class="station-wrap">
 			<img class="station" src="../static/img/anniversaryCelebrate/station.png" />
 			<div class="station-text-wrap">
-				<div class="once-text">购买/续费星曜月卡，获得 1次 点亮资格</div>
-				<div class="ten-text">购买/续费星曜年卡，获得 10次 点亮资格</div>
+				<div class="once-text">购买/续费星曜月卡，获得 <span class="time-color">1次</span> 点亮资格</div>
+				<div class="ten-text">购买/续费星曜年卡，获得 <span class="time-color">10次</span> 点亮资格</div>
 			</div>
 			<div class="btn-list">
 				<img class="once-btn btn" src="../static/img/anniversaryCelebrate/once.png" />
@@ -104,15 +104,19 @@
 					<div class="small-star-wrap">
 						<img class="small-star" src="../static/img/anniversaryCelebrate/small-star.png" />
 					</div>
-					<div class="line-wrap">
-						<img class="icon icon1" src="../static/img/anniversaryCelebrate/icon1.png" />
-						<img class="icon icon2" src="../static/img/anniversaryCelebrate/icon2.png" />
+					<div class="line-out-wrap">
+						<div class="line-wrap">
+							<img class="icon icon1" src="../static/img/anniversaryCelebrate/icon1.png" />
+							<div class="icon-once">1</div>
+							<img class="icon icon2" src="../static/img/anniversaryCelebrate/icon2.png" />
+							<div class="icon-five-times">5</div>
+						</div>
 					</div>
 				</div>
 			</div>
 			<img class="get-times" src="../static/img/anniversaryCelebrate/get-times.png" />
 		</div>
-		<div class="no-join-activity">激活码、优惠券、星币购买的订单不参与本次活动</div>
+		<div class="no-join-activity">激活码、优惠券、星币购买的订单及PC端不参与本次活动</div>
 		<div class="light-record-wrap">
 			<div class="record-title-wrap">
 				<img class="record-title" src="../static/img/anniversaryCelebrate/record-title.png" />
@@ -333,6 +337,8 @@
 		    distributionPages = 0,
 			pageIndexs = 0,
 			code = '',
+			hasNextPage = false,
+			navigatepageNums = [],
 		    sliderNumber = 0,//滑块是数量，控制溢出不能滑动
 			isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
 		if (ua.match(/MicroMessenger/i) == "micromessenger") {
@@ -778,7 +784,7 @@
 			}
 		});
 		// 活动获取用户云机列表，分页
-		function getLists(){
+		function getLists(type){
 			const sliderLen = Array.from($('.slider-item')).length;
 			// if(sliderLen != 0 && sliderLen >= sliderNumber){
 			// 	return
@@ -802,6 +808,7 @@
 					if (res.status === 0) {
 						let records = res.data.pageInfo.list;
 						totalRecords = [...totalRecords, ...records];
+						$('.page-number').eq(0).empty();
 						$('#slider-list').empty();
 						if(records.length === 0){
 							$('.page-row').eq(0).css('display','none');
@@ -811,6 +818,8 @@
 						}
 						if(res.data && records.length > 0){
 							sliderNumber = res.data.pageInfo.pages;
+							hasNextPage = res.data.pageInfo.hasNextPage;
+							navigatepageNums = res.data.pageInfo.navigatepageNums;
 						    let sliderItemText = $('.slider-item').eq(pageNums).text();
 							let str = '',
 								strs = '',
@@ -862,12 +871,19 @@
 								return
 							}
 							let currPages = sliderNumber >= 5 ? 5 : sliderNumber, currStr = '';
+							let currPageNums = Math.floor(pageNums/6) * 5 + 1;
 							for (var i = 0; i < currPages; i++) {
-								currStr += `<div class="page-number-text" data-index="${i}" data-num="${pageNums + i}">${pageNums + i}</div>`
+								if(navigatepageNums.includes(currPageNums + i)){
+									currStr += `<div class="page-number-text" data-index="${i}" data-num="${currPageNums + i}">${currPageNums + i}</div>`
+								}
 							}
 							$('.page-number').eq(0).append(currStr);
-							$('.page-number-text')[0].className = 'page-number-text select-page-number';
-							if(pageNums <= 5) {
+							if(type != 'page'){
+								$('.page-number-text')[0].className = 'page-number-text select-page-number';
+							} else {
+								$('.page-number-text')[pageIndex].className = 'page-number-text select-page-number';
+							}
+							if(sliderNumber <= 5) {
 								$('.left-head')[0].className = 'left-head';
 								$('.right-head')[0].className = 'right-head';
 							}
@@ -1026,12 +1042,12 @@
 				pageIndex = parseInt(e.target.dataset.index);
 				$('.page-number-text')[pageIndex].className = 'page-number-text select-page-number';
 				pageNums = parseInt(e.target.dataset.num);
-				getLists();
+				getLists('page');
 			}
 		});
 		//点击左边
 		$('.left-head')[0].addEventListener('click',(e) => {
-			if(pageNums <= 5) {
+			if(sliderNumber <= 5) {
 				return
 			}
 			$('.right-head')[0].className = 'right-head right-head-show';
@@ -1044,13 +1060,7 @@
 			$('.page-number').eq(0).empty();
 			pageNums -= 5;
 			pageIndex = 0;
-			let str = '';
 			pageNums = Math.floor(pageNums/6) * 5 + 1;
-			for (var i = 0; i < 5; i++) {
-				str += `<div class="page-number-text" data-index="${i}" data-num="${pageNums + i}">${pageNums + i}</div>`
-			}
-			$('.page-number').eq(0).append(str);
-			$('.page-number-text')[0].className = 'page-number-text select-page-number';
 			if(pageNums <= 1) {
 				$('.left-head')[0].className = 'left-head';
 			}
@@ -1058,11 +1068,11 @@
 		});
 		//点击右边
 		$('.right-head')[0].addEventListener('click',(e) => {
-			if(pageNums <= 5) {
+			if(sliderNumber <= 5) {
 				return
 			}
 			$('.left-head')[0].className = 'left-head left-head-show';
-			if(pageNums + 5 >= sliderNumber) {
+			if(!hasNextPage) {
 				$('.right-head')[0].className = 'right-head';
 				return
 			} else {
@@ -1071,13 +1081,7 @@
 			$('.page-number').eq(0).empty();
 			pageNums += 5;
 			pageIndex = 0;
-			let str = '';
 			pageNums = Math.floor(pageNums/6) * 5 + 1;
-			for (var i = 0; i < 5; i++) {
-				str += `<div class="page-number-text" data-index="${i}" data-num="${pageNums + i}">${pageNums + i}</div>`
-			}
-			$('.page-number').eq(0).append(str);
-			$('.page-number-text')[0].className = 'page-number-text select-page-number';
 			if(pageNums + 5 >= sliderNumber) {
 				$('.right-head')[0].className = 'right-head';
 			}
@@ -1085,12 +1089,13 @@
 		});
 		//点击页码
 		$('.page-numbers')[0].addEventListener('click',(e) => {
+			console.log(e.target.className)
 			if(e.target.className == 'page-number-texts'){
 				$('.page-number-texts')[pageIndexs].className = 'page-number-texts';
 				pageIndexs = parseInt(e.target.dataset.index);
 				$('.page-number-texts')[pageIndexs].className = 'page-number-texts select-page-numbers';
 				distributionPageNum = parseInt(e.target.dataset.num);
-				getTimeRecord();
+				getTimeRecord('pages');
 			}
 		});
 		//点击左边
@@ -1108,13 +1113,7 @@
 			$('.page-numbers').eq(0).empty();
 			distributionPageNum -= 5;
 			pageIndexs = 0;
-			let str = '';
 			distributionPageNum = Math.floor(distributionPageNum/6) * 5 + 1;
-			for (var i = 0; i < 5; i++) {
-				str += `<div class="page-number-texts" data-index="${i}" data-num="${distributionPageNum + i}">${distributionPageNum + i}</div>`
-			}
-			$('.page-numbers').eq(0).append(str);
-			$('.page-number-texts')[0].className = 'page-number-texts select-page-numbers';
 			if(distributionPageNum <= 1) {
 				$('.left-heads')[0].className = 'left-heads';
 			}
@@ -1126,7 +1125,7 @@
 				return
 			}
 			$('.left-heads')[0].className = 'left-heads left-head-shows';
-			if(distributionPageNum + 5 >= sliderNumber) {
+			if(distributionPageNum * 10 >= sliderNumber) {
 				$('.right-heads')[0].className = 'right-heads';
 				return
 			} else {
@@ -1135,13 +1134,7 @@
 			$('.page-numbers').eq(0).empty();
 			distributionPageNum += 5;
 			pageIndexs = 0;
-			let str = '';
 			distributionPageNum = Math.floor(distributionPageNum/6) * 5 + 1;
-			for (var i = 0; i < 5; i++) {
-				str += `<div class="page-number-texts" data-index="${i}" data-num="${distributionPageNum + i}">${distributionPageNum + i}</div>`
-			}
-			$('.page-numbers').eq(0).append(str);
-			$('.page-number-texts')[0].className = 'page-number-texts select-page-numbers';
 			if(distributionPageNum + 5 >= sliderNumber) {
 				$('.right-heads')[0].className = 'right-heads';
 			}
@@ -1168,45 +1161,47 @@
 		});
 		//点击分配时长确定按钮
 		$('.sure-distribution-sure')[0].addEventListener('click', (e) => {
-			$.ajax({
-				url: baseUrl + '/api/activity/v1/anniversary/receive',
-				type: 'post',
-				data: JSON.stringify({
-					userCards: distributionList
-				}),
-				headers: {
-					'Authorization': id //id
-				},
-				contentType: "application/json",
-				dataType: 'json',
-				cache: false,
-				success: function (res) {
-					if(res.status === 0){
-						operate('znq_2022_h5_分配奖励_确定');
-						$('.sure-distribution-wrap').eq(0).css('display', 'none');
-						$('.slider-list').eq(0).text('');
-						$('.page-number').eq(0).text('');
-						init();
-						getLists();
-						distributionPageNum = 1;
-						$('.time-row-data').eq(0).text('');
-						distributionList.map((val) => {
-							totalRecords.map((item, indexs) => {
-								if(val.userCardId == item.id){
-									$('.ipt').eq(indexs).val(0);
-								}
+			stopManyClick(() => {
+				$.ajax({
+					url: baseUrl + '/api/activity/v1/anniversary/receive',
+					type: 'post',
+					data: JSON.stringify({
+						userCards: distributionList
+					}),
+					headers: {
+						'Authorization': id //id
+					},
+					contentType: "application/json",
+					dataType: 'json',
+					cache: false,
+					success: function (res) {
+						if(res.status === 0){
+							operate('znq_2022_h5_分配奖励_确定');
+							$('.sure-distribution-wrap').eq(0).css('display', 'none');
+							$('.slider-list').eq(0).text('');
+							$('.page-number').eq(0).text('');
+							init();
+							getLists();
+							distributionPageNum = 1;
+							$('.time-row-data').eq(0).text('');
+							distributionList.map((val) => {
+								totalRecords.map((item, indexs) => {
+									if(val.userCardId == item.id){
+										$('.ipt').eq(indexs).val(0);
+									}
+								})
 							})
-						})
-						distributionList = [];
-						stopManyClick(() => {
-							toastr.error('分配成功，请前往云机列表查看');
-						})
-					} else {
-						stopManyClick(() => {
-							toastr.error(res.msg);
-						})
-					}
-				},
+							distributionList = [];
+							stopManyClick(() => {
+								toastr.error('分配成功，请前往云机列表查看');
+							})
+						} else {
+							stopManyClick(() => {
+								toastr.error(res.msg);
+							})
+						}
+					},
+				})
 			})
 		});
 		//点击分配时长记录
@@ -1218,7 +1213,7 @@
 			getTimeRecord();
 		});
 		//分配时长记录
-		function getTimeRecord(){
+		function getTimeRecord(type){
 			$.ajax({
 				url: baseUrl + '/api/activity/v1/anniversary/receiveData',
 				type: 'get',
@@ -1238,22 +1233,27 @@
 						let records = res.data.records, str = '', strs = '';
 						let pages = res.data.pages;
 						let currPages = pages >= 5 ? 5 : pages;
+						let currPageNums = Math.floor(distributionPageNum/6) * 5 + 1;
 						$('.distribution-list').eq(0).empty();
 						$('.page-numbers').eq(0).empty();
 						for (var i = 0; i < records.length; i++) {
 							str += `<div class="distribution-content-wrap">
 										<div class="distribution-content-name">${records[i].diskName}</div>
-										<div class="distribution-content-name distribution-time-text">${records[i].createTime}</div>
-										<div class="distribution-content-name">${records[i].receiveDurations}天</div>
+										<div class="distribution-time-text">${records[i].createTime}</div>
+										<div class="distribution-content-names">${records[i].receiveDurations}天</div>
 									</div>`
 						}
 						$('.distribution-list').eq(0).append(str)
 						for (var i = 0; i < currPages; i++) {
-							strs += `<div class="page-number-texts" data-index="${i}" data-num="${distributionPageNum + i}">${distributionPageNum + i}</div>`
+							strs += `<div class="page-number-texts" data-index="${i}" data-num="${currPageNums + i}">${currPageNums + i}</div>`
 						}
 						$('.page-numbers').eq(0).append(strs)
-						$('.page-number-texts')[0].className = 'page-number-texts select-page-numbers';
-						if(pageNums <= 5) {
+						if(type != 'pages'){
+							$('.page-number-texts')[0].className = 'page-number-texts select-page-numbers';
+						} else {
+							$('.page-number-texts')[pageIndexs].className = 'page-number-texts select-page-numbers';
+						}
+						if(pages <= 5) {
 							$('.left-heads')[0].className = 'left-heads';
 							$('.right-heads')[0].className = 'right-heads';
 						}