调整

microserviceUserH5/static/css/anniversaryCelebrate.css

@@ -442,6 +442,13 @@ ul, li {
   height: 0.15rem;
 }
 
+.left-head,.right-head{
+  opacity: 0.2;
+}
+.left-head-show,.right-head-show{
+  opacity: 1;
+}
+
 .light-content-text{
   margin-top: 0.27rem;
   text-align: center;
@@ -621,6 +628,7 @@ ul, li {
   left: 50%;
   transform: translateX(-50%);
   bottom: 0.28rem;
+  /* animation: mymoves 0.8s; */
 }
 
 .many-card{
@@ -742,7 +750,7 @@ ul, li {
   position: absolute;
   top: -0.8rem;
   left: 1.2rem;
-  animation: mymove 0.8s;
+  animation: mymoves 0.8s;
   display: none;
 }
 

microserviceUserH5/vcloud/anniversaryCelebrate.html

@@ -148,8 +148,14 @@
 					<div class="btn-wrap">
 						<div class="page-row-wrap">
 							<img class="left-head" src="../static/img/anniversaryCelebrate/left-head.png" />
-							<div class="page-number"></div>
-							<img class="right-head" src="../static/img/anniversaryCelebrate/right-head.png" />
+							<div class="page-number">
+								<div class="page-number-text select-page-number" data-index="0" data-num="1">1</div>
+								<div class="page-number-text" data-index="1" data-num="2">2</div>
+								<div class="page-number-text" data-index="2" data-num="3">3</div>
+								<div class="page-number-text" data-index="3" data-num="4">4</div>
+								<div class="page-number-text" data-index="4" data-num="5">5</div>
+							</div>
+							<img class="right-head right-head-show" src="../static/img/anniversaryCelebrate/right-head.png" />
 						</div>
 						<div class="distribution-reward-btn">
 							<img class="reward-btn-img" src="../static/img/anniversaryCelebrate/distribution-reward-btn.png" />
@@ -515,16 +521,25 @@
 												<div class="card-text">星曜${list[0].awardDurations}天卡</div>
 											</div>`
 								} else {
-									if(list[i].awardDurations == 88){
+									if(list.length == 3) {
 										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 {
+													<img class="many-card" src="../static/img/anniversaryCelebrate/first.png" />
+													<div class="card-text">星曜${list[1].awardDurations}天卡</div>
+												</div>
+												<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>`
+									}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 if(list[i].awardDurations == 188) {
 										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>`
+													<img class="many-card" src="../static/img/anniversaryCelebrate/second.png" />
+													<div class="card-text">星曜${list[1].awardDurations}天卡</div>
+												</div>`
 									}
 								}
 							}
@@ -753,6 +768,7 @@
 			if(sliderLen != 0 && sliderLen >= sliderNumber){
 				return
 			}
+			console.log('pageNums', pageNums)
 			$.ajax({
 				url: baseUrl + '/api/resources/v5/client/disk/info/anniversary/usercard',
 				type: 'get',
@@ -768,7 +784,7 @@
 				dataType: 'json',
 				cache: false,
 				success: function (res) {
-					// res = {"status":0,"success":true,"data":{"currentTime":"2022-06-01 14:22:34","pageInfo":{"total":1,"list":[{"id":211329,"diskName":"安卓7","exceptTime":"2022-10-25 20:15:55"}],"pageNum":1,"pageSize":4,"size":1,"startRow":1,"endRow":1,"pages":1,"prePage":0,"nextPage":0,"isFirstPage":true,"isLastPage":true,"hasPreviousPage":false,"hasNextPage":false,"navigatePages":8,"navigatepageNums":[1],"navigateFirstPage":1,"navigateLastPage":1}},"msg":"操作成功"};
+					res = {"status":0,"success":true,"data":{"currentTime":"2022-06-01 14:22:34","pageInfo":{"total":1,"list":[{"id":211329,"diskName":"安卓7","exceptTime":"2022-10-25 20:15:55"}],"pageNum":1,"pageSize":4,"size":1,"startRow":1,"endRow":1,"pages":1,"prePage":0,"nextPage":0,"isFirstPage":true,"isLastPage":true,"hasPreviousPage":false,"hasNextPage":false,"navigatePages":8,"navigatepageNums":[1],"navigateFirstPage":1,"navigateLastPage":1}},"msg":"操作成功"};
 					if (res.status === 0) {
 						let records = res.data.pageInfo.list;
 						totalRecords = [...totalRecords, ...records];
@@ -780,8 +796,8 @@
 							return
 						}
 						if(res.data && records.length > 0){
-							sliderNumber = res.data.pageInfo.pages;
-							// sliderNumber = 10;
+							// sliderNumber = res.data.pageInfo.pages;
+							sliderNumber = 10;
 						    let sliderItemText = $('.slider-item').eq(pageNums).text();
 							let str = '',
 								strs = '',
@@ -833,36 +849,6 @@
 								return
 							}
 							$('.distribution-reward-btn').eq(0).css('display','block');
-							$('.page-number').eq(0).empty();
-							for (var i = 0; i < sliderNumber; i++) {
-								if(sliderNumber <= 4) {
-									strs += `<div class="page-number-text" data-index="${i}">${i + 1}</div>`
-								} else if(sliderNumber > 4) {//大于四个
-									if(pageNums <= 2){//点击前两个
-										if(i < 3) {
-											strs += `<div class="page-number-text" data-index="${i}">${i + 1}</div>`
-										} else if(i == sliderNumber - 1) {
-											strs += `<div class="page-number-text">...</div>`
-											strs += `<div class="page-number-text" data-index="${i}">${i + 1}</div>`
-										}
-									} else {// 点击超过两个
-										if (i == pageNums) {//当前值大于3
-											strs += `<div class="page-number-text">...</div>`
-											strs += `<div class="page-number-text" data-index="${i}">${i + 1}</div>`
-										}else if (i < pageNums + 1) {//当前值小于选中多一个
-											strs += `<div class="page-number-text" data-index="${i}">${i + 1}</div>`
-										} else if(i == sliderNumber - 1) {//最后第二个
-											strs += `<div class="page-number-text">...</div>`
-											strs += `<div class="page-number-text" data-index="${i+1}">${i + 1}</div>`
-										}
-									}
-								}
-							}
-							$('.page-number').eq(0).append(strs);
-							for(let i = 0; i < sliderNumber - 1; i++){
-								$('.page-number-text')[i].className = 'page-number-text';
-							}
-							$('.page-number-text')[pageIndex].className = 'page-number-text select-page-number';
 							for (var i = 0; i < len; i++) {
 								$('.ipt')[i].oninput = function (e) {
 									const id = e.target.dataset.id;
@@ -1015,15 +1001,69 @@
 		});
 		//点击页码
 		$('.page-number')[0].addEventListener('click',(e) => {
-			if(e.target.className == 'page-number-text' && e.target.innerText != '...'){
-				pageNums = parseInt(e.target.innerText);
-				pageIndex = e.target.dataset.index;
-				console.log(pageIndex)
+			console.log(pageIndex)
+			if(e.target.className == 'page-number-text'){
+				$('.page-number-text')[pageIndex].className = 'page-number-text';
+				pageIndex = parseInt(e.target.dataset.index);
+				$('.page-number-text')[pageIndex].className = 'page-number-text select-page-number';
+				pageNums = parseInt(e.target.dataset.num);
 				getLists();
 			}
+			
+		});
+		//点击左边
+		$('.left-head')[0].addEventListener('click',(e) => {
+			$('.right-head')[0].className = 'right-head right-head-show';
+			if(pageNums <= 1) {
+				$('.left-head')[0].className = 'left-head';
+				return
+			} else {
+				$('.left-head')[0].className = 'left-head left-head-show';
+			}
+			$('.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';
+			}
+			getLists();
+		});
+		//点击右边
+		$('.right-head')[0].addEventListener('click',(e) => {
+			$('.left-head')[0].className = 'left-head left-head-show';
+			if(pageNums + 5 >= sliderNumber) {
+				$('.right-head')[0].className = 'right-head';
+				return
+			} else {
+				$('.right-head')[0].className = 'right-head right-head-show';
+			}
+			$('.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';
+			}
+			getLists();
 		});
 		//点击分配时长按钮
 		$('.distribution-reward-btn')[0].addEventListener('click', (e) => {
+			if(e.target.className != 'reward-btn-img'){
+				return
+			}
 			distributionList = distributionList.filter(item => item.duration != 0);
 			if (distributionList.length === 0) {
 				stopManyClick(() => {
@@ -1112,7 +1152,6 @@
 						for (var i = 0; i < 4; i++) {
 							strs += `<div class="page-number-text">${i}</div>`
 						}
-						console.log(strs)
 						$('.page-number').eq(1).append(strs)
 					}else{
 						stopManyClick(() =>{