noseCloud
/
Starboth-Cloud-H5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<title>周年庆活动</title>
	<link rel="icon" href="../static/img/favicon2.ico" type="img/x-ico">
	<link rel="stylesheet" href="../static/js/vender/toastr/toastr.min.css">
	<link rel="stylesheet" href="../static/css/anniversaryCelebrate.css">
	<script src="../static/js/vender/jquery-3.4.1.min.js"></script>
	<script src="../static/js/vender/toastr/toastr.min.js"></script>
	<script src="../static/js/vender/config.js"></script>
</head>

<body>
	<div class="container">
		<div class="rule-wrap">
			<img class="rule" src="../static/img/anniversaryCelebrate/rule.png" />
		</div>
		<div class="activity-text-wrap">
			<img class="activity-text" src="../static/img/anniversaryCelebrate/activity-text.png" />
		</div>
		<div class="activity-tips-wrap">
			<img class="activity-tips" src="../static/img/anniversaryCelebrate/activity-tips.png" />
		</div>
		<div class="star-wrap">
			<img class="star" src="../static/img/anniversaryCelebrate/star.png" />
			<img class="out-point out-point1" src="../static/img/anniversaryCelebrate/out-point.png" />
			<img class="out-point out-point2" src="../static/img/anniversaryCelebrate/out-point.png" />
			<img class="out-point out-point3" src="../static/img/anniversaryCelebrate/out-point.png" />
			<img class="out-point out-point4" src="../static/img/anniversaryCelebrate/out-point.png" />
			<img class="out-point out-point5" src="../static/img/anniversaryCelebrate/out-point.png" />
			<img class="in-point in-point1" src="../static/img/anniversaryCelebrate/in-point.png" />
			<img class="in-point in-point2" src="../static/img/anniversaryCelebrate/in-point.png" />
			<img class="in-point in-point3" src="../static/img/anniversaryCelebrate/in-point.png" />
			<img class="in-point in-point4" src="../static/img/anniversaryCelebrate/in-point.png" />
			<img class="in-point in-point5" src="../static/img/anniversaryCelebrate/in-point.png" />
		</div>
		<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>
			<div class="btn-list">
				<img class="once-btn btn" src="../static/img/anniversaryCelebrate/once.png" />
				<img class="five-btn btn" src="../static/img/anniversaryCelebrate/fifce.png" />
			</div>
		</div>
		<div class="award-get-wrap">
			<div class="number-wrap">
				<div class="rest-times">剩余次数<span class="rest-number">1000</span>次</div>
				<div class="process-wrap">
					<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/icon3.png" />
					</div>
				</div>
			</div>
			<img class="get-times" src="../static/img/anniversaryCelebrate/get-times.png" />
		</div>
		<div class="no-join-activity">激活码、优惠券、星币购买的订单不参与本次活动</div>
		<div class="light-record-wrap">
			<div class="record-title-wrap">标题</div>
			<div class="record-main-wrap">
				<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-success-show.png" />
						<div class="get-award-text">领取</div>
					</div>
					<div class="get-award-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>
				</div>
				<div class="light-title-wrap">
					<div class="light-title-text award-text">奖品</div>
					<div class="light-title-text">时间</div>
					<div class="light-title-text active-text">操作</div>
				</div>
				<div class="light-content-container">
					<div class="light-content-list">
						
					</div>
					<div class="all-light">已全部点亮1次</div>
				</div>
			</div>
			<div class="activity-intrduction-wrap">
				<div>活动时间：2022年6月10日-2022年6月19日</div>
				<div>活动参与套餐：星曜套餐月卡年卡（自动续费除外）</div>
			</div>
			<div class="law-statement">请阅读相关《法律声明》文件</div>
		</div>
	</div>
	<script>
		toastr.options.positionClass = 'toast-center-center';
		toastr.options.timeOut = '1500';
	</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'
	    let timer,flag = true;
		var url = window.location.href;
		url = url.split('/')
		var loc = window.location.search,
		    n1 = loc.length,//地址的总长度 
		    n2 = loc.indexOf("="),//取得=号的位置
		    id = loc.substr(n2 + 1, n1 - n2),//从=号后面的内容
			u = navigator.userAgent,
			ua = navigator.userAgent.toLowerCase(),
			isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
			isMiniprogram = false,
			pages = 1,
			isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
		// 初始化数据
		init();
		function init(type) {
			$.ajax({
				url: baseUrl + '/api/user/v1/anniversary/getAnniversary',
				type: 'get',
				headers: {
					'Authorization': id //id
				},
				contentType: "application/json",
				dataType: 'json',
				cache: false,
				success: function (res) {
					console.log(res)
					if(res.status === 0){
			            
					}else{
						stopManyClick(() =>{
							toastr.error(res.msg)
						})
					}
					
				},
			})
		}
		getAward();/v1/anniversary/luckDraw
		//点击抽奖
		$('.once')[0].addEventListener('click',() => {
			if(!animationFlag) return;
			operate('sf_2022_h5_抽奖1次');
			if(activityState === 0){
				stopManyClick(() =>{
					toastr.error('该活动暂未开启，请稍安勿躁');
				})
			}else if(activityState === 2 && luckDraw === 0){
				stopManyClick(() =>{
					toastr.error('活动已结束，期待下次的见面');
				})
			}else{
				handleAward(1)
			}
		},false);
		$('.five-times')[0].addEventListener('click',() => {
			if(!animationFlag) return;
			operate('sf_2022_h5_抽奖5次');
			if(activityState === 0){
				stopManyClick(() =>{
					toastr.error('该活动暂未开启，请稍安勿躁');
				})
			}else if(activityState === 2 && luckDraw === 0){
				stopManyClick(() =>{
					toastr.error('活动已结束，期待下次的见面');
				})
			}else{
				handleAward(5)
			}
		},false);
		//点击再抽
		$('.left-btn')[0].addEventListener('click',() => {
			if(!animationFlag) return;
			let val = $('.report-times').eq(0).text();
			let pams = `sf_2022_h5_抽奖${val}次`;
			operate(pams);
			handleAward(val,'report')
		},false);
		function handleAward(times,type) {
			animationFlag = false;
			if(surplus === 0 || (times == 5 && surplus < 5)){
				$('.have-times-wrap').eq(0).css('display', 'none');
				$('.no-times-wrap').eq(0).css('display', 'block');
				$('.award-result-dialog').animate({top: '1.86rem'},"fast");
				$('.award-result-mask').show();
				document.documentElement.style.overflow='hidden';
				return
			}
			$.ajax({
				url: baseUrl + '/api/user/v1/activity/obtainRewards',
				type: 'post',
				headers: {
					'Authorization': id //id
				},
				data:JSON.stringify({
					frequency: times
				}),
				contentType: "application/json",
				dataType: 'json',
				cache: false,
				success: function (res) {
					if(res.status === 0){
						$('.have-times-wrap').eq(0).css('display', 'block');
						$('.no-times-wrap').eq(0).css('display', 'none');
						if(type !== 'report'){
							$('.award-result-dialog').animate({top: '1.86rem'},"fast");
							$('.award-result-mask').show();
							document.documentElement.style.overflow='hidden';
						}
						$('.award-result-wrap').eq(0).text('');
						let str = '',
							cardObj = {
								'天': 'day',
								'周': 'week',
								'月': 'mouth',
								'季': 'season',
								'年': 'year'
							},
							imgNumber = 0,
							list = res.data.list;
						if(list.length === 1){
							$('.award-result-wrap')[0].className = 'card-wrap award-result-wrap one-result';
							str = `<div class="card-item">
										<img class="one-card" src="../static/img/springFestivalActivity/${cardObj[list[0].duration]}.png" />
										<div class="card-text">星曜${list[0].duration}卡</div>
									</div> `
							setTimeout(() => {
								animationFlag = true;
							},1000);
						}else{
							$('.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="card many-card" src="../static/img/springFestivalActivity/${cardObj[list[i].duration]}.png" />
										    <div class="card-text">星曜${list[i].duration}卡</div>
										</div>`
							}
							var imgTimer2 = setInterval(() => {
									$('.many-card-item').eq(imgNumber).css('display', 'block');
									if(imgNumber >= 4){
										clearInterval(imgTimer2);
										animationFlag = true;
									}
									// <img class="light" src="../static/img/springFestivalActivity/light.gif?time=${new Date().getTime()}" />
									// <img class="many-light" src="../static/img/springFestivalActivity/light.gif?time=${new Date().getTime()}" />
									// $('.many-light')[imgNumber].src = `../static/img/springFestivalActivity/light.gif?time=${new Date().getTime()}`;
									imgNumber++;
								},400)
						}
						$('.report-times').eq(0).text(times);
						if(parseInt(notReceive) > 0){
				            $('.join-result-tip').eq(0).css('opacity', '0');
				            $('.many-card-wrap').eq(0).css('marginTop', '0');
						}
						let text = parseInt(notReceive) > 0?'确定':'查看';
						$('.look-btn').eq(0).text(text);
						$('.award-result-wrap').eq(0).append(str);
						init();
						getPhoneNumber();
					}else{
						stopManyClick(() =>{
							toastr.error(res.msg)
						})
					}
				},
			})
		}
		//点击抽奖关闭按钮
		$('.award-result-close')[0].addEventListener('click',() => {
			animationFlag = true;
			$('.award-result-dialog').animate({top: '-10.96rem'},"fast");
			$('.award-result-mask').hide();
			document.documentElement.style.overflow='auto';
		},false);
		// 点击领取tab切换
		$('.get-award-wrap')[0].addEventListener('click',(e) => {
			// $('.data-list').eq(0).text('');
			// pageNum = 1;
			// pages = 0;
			// recordFlag = true;
			// getAward();
			$('.award-img').eq(1).css('display', 'none');
			$('.award-img').eq(0).css('display', 'block');
			$('.record-main-wrap')[0].className = 'record-main-wrap';
			$('.get-award-text')[1].className = 'get-award-text used-text';
			$('.get-award-text')[0].className = 'get-award-text';
		},false);
		$('.get-award-wrap')[1].addEventListener('click',(e) => {
			// $('.data-list').eq(0).text('');
			// pageNum = 1;
			// pages = 0;
			// recordFlag = true;
			// getAward();
			$('.award-img').eq(0).css('display', 'none');
			$('.award-img').eq(1).css('display', 'block');
			$('.record-main-wrap')[0].className = 'record-main-wrap record-main-active-wrap';
			$('.get-award-text')[0].className = 'get-award-text used-text';
			$('.get-award-text')[1].className = 'get-award-text';
		},false);
		//获取抽奖记录
		function getAward(){
			// $.ajax({
			// 	url: baseUrl + '/api/user/v1/activity/platformGetRewardsH5',
			// 	type: 'post',
			// 	headers: {
			// 		'Authorization': id //id
			// 	},
			// 	data:JSON.stringify({
			// 		pageNum: pageNum,
			// 		pageSize: 10,
			// 		receive: receive
			// 	}),
			// 	contentType: "application/json",
			// 	dataType: 'json',
			// 	cache: false,
			// 	success: function (res) {
			// 		if(res.status === 0){
						recordFlag = true;
						let str = '',
						    // records = res.data.records;
							// pages = res.data.pages;
						    records = [1,2,3,4];
							// 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">没有抽奖记录，我都替你着急</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">获得星曜7天时长</div>
										<div class="light-content-time">6月10日  14:25:30</div>
										<div class="get-btn btn-active">领取</div>
									</div>`
						}
						$('.light-content-list').eq(0).append(str)
			// 		}else{
			// 			stopManyClick(() =>{
			// 				toastr.error(res.msg)
			// 			})
			// 		}
					
			// 	},
			// })
		}
		//点击领取按钮
		$('.light-content-list')[0].addEventListener('click',(e) => {
			if(e.target.className === 'light-content-list'){
				return
			}
			receive = e.target.dataset.index;
			if(receive == 1){
				$('.award-change-btn')[0].className = 'award-change-btn'
			}else{
				$('.award-change-btn')[1].className = 'award-change-btn'
			}
			$('.data-list').eq(0).text('');
			pageNum = 1;
			pages = 0;
			recordFlag = true;
			getAward();
			$('.award-change-btn')[receive].className = 'award-change-btn active'
		},false);
		//防止提示一秒内重复显示
		function stopManyClick(fn) {
			if (flag) {
				fn();
			}
			flag = false;
			if(timer){clearTimeout(timer);}
			timer = setTimeout(() => {flag = true}, 1500);
		}
	</script>
</body>

</html>