tangdehang
/
android-cloud-H5


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
							<!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/doubleChristmasActivity.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>
	<style>
		
	</style>
</head>

<body>
	<div class="container">
		<div class="header-container">
			<img class="top-banner" src="../static/img/doubleChristmasActivity/top-banner.png" />
			<div class="activity-meal">活动参与套餐：星耀套餐</div>
		</div>
		<div class="middle-container">
			<div class="step-container">
			    <img class="tips" src="../static/img/doubleElevenActivity/tip.png" />
			    <div class="main-step-content">
					<div class="top-step">
						<div class="step-item">
							<img class="buyphone" src="../static/img/doubleElevenActivity/buyphone.png" />
							<span class="step-text">购买云机</span>
						</div>
						<img class="step" src="../static/img/doubleElevenActivity/step.png" />
						<div class="step-item">
							<img class="hongbao" src="../static/img/doubleElevenActivity/hongbao.png" />
							<span class="step-text">分享好友红包</span>
							<span class="step-text">并购买</span>
						</div>
						<img class="step" src="../static/img/doubleElevenActivity/step.png" />
						<div class="step-item">
							<img class="buyphone" src="../static/img/doubleElevenActivity/buyphone.png" />
							<span class="step-text">获得云机</span>
						</div>
					</div>
					<div class="red-packet"></div>
				</div>
				<div class="join-activity-btn">
					<img class="join-activity" src="../static/img/doubleElevenActivity/button-join-activity.png" />
					<div class="activity-btn-content">
						<span class="activity-btn-text">快来参加双十一活动</span>
					    <img class="icon-left" src="../static/img/doubleElevenActivity/icon-left.png" />
					</div>
				</div>
			</div>
			<div class="invite-text">*邀请好友即得厚礼，红包购机买一赠一</div>
			<div class="packet-container">
			    <img class="rule-tips" src="../static/img/doubleElevenActivity/packet-tip.png" />
				<div class="packet-block">
					<div class="red-packet-next"></div>
				</div>
			</div>
			<div class="rule-container">
			    <img class="rule-tips" src="../static/img/doubleElevenActivity/rule.png" />
				<div class="rule-content">
					<div class="rule-point">红包规则：</div>
					<div class="rule-point">1.红包可以自用或者分享给好友（好友可以是双子星新/老用户）</div>
					<div class="rule-point">2.同一个红包一人限领一次，共计6个红包</div>
					<div class="rule-point">3.红包可以无门槛抵押任何套餐，但是一个订单只能使用一个</div>
					<div class="rule-point">4. 分享者分享的红包被领取后，如果领取红包的人使用红包购买了任意套餐，分享者都可领取一份相同的套餐</div>
					<div class="rule-point">5. 若分享者自己领取自己的红包后使用红包购买套餐，自己可获得两份相同的套餐</div>
					<div class="rule-point">6.本次活动仅限人民币购买套餐，星币支付不参与本次活动</div>
				</div>
			</div>
		</div>
	</div>
	<script>
		toastr.options.positionClass = 'toast-center-center';
		toastr.options.timeOut = '1500';
	</script>
	<script type="text/javascript">
	    let timer,flag = true;
		var url = window.location.href;
		url = url.split('/');
		var topVal = -0.5;
		let obj = {};
		// 上线分享环境改为0,图片路径改为正式站路径
		// var baseUrl = 'https://test.androidscloud.com'
		var loc = window.location.search,
			u = navigator.userAgent,
			ua = navigator.userAgent.toLowerCase(),
			isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
			isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
		let s = loc.substr(1,loc.length-1);//取得=号的位置
		let parms = s.split('&');
		parms.map((item) =>{
			let arr = item.split('=');
			let key = arr[0];
			obj[key] = arr[1];
		})
		// 双十一活动
		function receiveRedEnvelope(){
			$.ajax({
				url: baseUrl + `/api/user/v1/activity/receiveRedEnvelope`,
				type: 'post',
				headers: {
					'Authorization': obj.token //id
				},
				data:JSON.stringify({
					couponRandomId: obj.couponRandomId,
					goodId: obj.goodId,
					originalOrder: obj.originalOrder,
					shareUser: obj.shareUser
				}),
				contentType:"application/json",
				dataType: 'json',
				cache: false,
				success: function (res) {
					if (res.status == 0 || res.status == 4106) {
						operate('dt_双11_mp_领取红包');
						phoneNumber = res.data;
						let node = `<div class="packet">
							<img class="fxhb" src="../static/img/doubleElevenActivity/fxhb.png" />
							<div class="money"><span class="money-mark">¥</span><span class="money-val">${parseInt(obj.money)}</span></div>
							<div class="packet-title">云手机无门槛抵扣券</div>
							<div class="packet-time">${obj.startTime.substring(5,7)}月${obj.startTime.substring(8,10)}-${obj.endTime.substring(5,7)}月${obj.endTime.substring(8,10)}日有效</div>
						</div>
						<div class="account">优惠券已放入您的账户${getPhoneNumber(phoneNumber)}</div>`
						$('.red-packet').eq(0).append(node);
						$('.activity-btn-text').eq(0).text('在双子星APP使用红包');
						$('.icon-left').eq(0).hide();
					} else {
						stopManyClick(() => {
							toastr.error(res.msg);
						})
					}
					
				},
			})
		}
		//调用获取数据列表接口
		function getList(){
			$.ajax({
				url: baseUrl + '/api/user/v1/activity/orderRedEnvelopeSharing',
				type: 'post',
				headers: {
					'Authorization': obj.token //id
				},
				contentType: "application/json",
				dataType: 'json',
				cache: false,
				success: function (res) {
					if(res.status === 0){
						if(res.data && res.data.length > 0){
							$('.invite-text').eq(0).show();
							$('.packet-container').eq(0).show();
							var str = '',
							    list = '',
							    len = res.data.length;
							for (var i = 0; i < len; i++) {
								var totalMoney = res.data[i].totalMoney,
								    shareCount = res.data[i].shareCount,
								    couponRandomId = res.data[i].couponRandomId,
								    goodId = res.data[i].goodId,
								    shareOrder = res.data[i].shareOrder,
								    shareUser = res.data[i].shareUser,
									dataList = res.data[i].list,
								    quantity = res.data[i].quantity;
									function getReceivePhoneDuration(item){
										let res = item.receivePhoneDuration===30?'月卡':item.receivePhoneDuration===90?'季卡':item.receivePhoneDuration===365?'年卡':item.receivePhoneDuration+'天卡';
										return dataObj[item.receivePhoneType] + res
									}
									dataList.map((item,index) => {
										let numberImg = Math.floor(getRandom()/2) + 1;
										list += `<div class="user-item">
											<div class="user-left">
												<img class="head-img" src="../static/img/doubleElevenActivity/head-img-0${numberImg}.png" />
												<div class="user-info">
													<div class="user-name">${getPhoneNumber(item.receiveUserPhone)}</div>
													<div class="user-time">${item.createTime.substring(5,7)}月${item.createTime.substring(8,11)}日${item.createTime.substring(11,19)}</div>
												</div>
											</div>
											<div class="meal">${item.state === 0?totalMoney/quantity+'元红包':getReceivePhoneDuration(item)}</div>
											<div class="${['receive no-user','receive',' receive usered'][item.state]}" data-type=${item.receivePhoneType} data-state=${item.state} data-id=${item.id}>${['未使用','领取','已领取'][item.state]}</div>
										</div>`
									})
								    str += `<div class="packet">
											<img class="fxhb" data-index=${i} data-dataList=${JSON.stringify(dataList)} src="../static/img/doubleElevenActivity/fxhb.png" />
											<div class="money" data-index=${i} data-dataList=${JSON.stringify(dataList)}><span class="money-mark">¥</span><span class="money-val">${parseInt(totalMoney)}</span></div>
											<div class="packet-titles" data-index=${i} data-dataList=${JSON.stringify(dataList)}>无门槛</div>
											<div class="packet-times" data-index=${i} data-dataList=${JSON.stringify(dataList)}>${startTime.substring(5,7)}月${startTime.substring(8,10)}-${endTime.substring(5,7)}月${endTime.substring(8,10)}日有效</div>
											<div class="share-btn">
												<img class="share" data-obj=${
													JSON.stringify({
														totalMoney: totalMoney,
														couponRandomId: couponRandomId,
														goodId: goodId,
														shareOrder: shareOrder,
														shareUser: shareUser,
														shareCount: shareCount,
														quantity: quantity
													})
												} src="../static/img/doubleElevenActivity/${shareCount === quantity?'no-share':'share'}.png" />
												<div class="share-num ${shareCount === quantity?'gray':''}" data-obj=${
													JSON.stringify({
														totalMoney: totalMoney,
														couponRandomId: couponRandomId,
														goodId: goodId,
														shareOrder: shareOrder,
														shareUser: shareUser,
														shareCount: shareCount,
														quantity: quantity
													})
												}>${shareCount}/${quantity}</div>
											</div>
											<div class="packet-info">${dataList.length !== 0?'':'尚未有用户领取红包购买云机'}</div>
											<img class="icon" src="../static/img/doubleElevenActivity/icon_up.png" />
										</div>
										<div class="list ${dataList.length !== 0?'user-list':''}" flag="2">
											${dataList.length !== 0?list:''}
									    </div>`
										list = ''
							}
							$('.red-packet-next').eq(0).append(str);
							$('.user-list').eq(0).css('display','block');
-							$('.icon').eq(0).attr('src','../static/img/doubleElevenActivity/icon_down.png');
-					        $('.user-list').eq(0).attr('flag','1');
						}
					}else{
						stopManyClick(() => {
							toastr.error(res.msg);
						})
					}
				}
			})
		}
		//埋点
		operate('dt_双11_h5_活动页面');
		function operate(pointName,type){
			$.ajax({
				url: baseUrl + '/api/public/v1/systemBuriedPoint/stat',
				type: 'post',
				data:JSON.stringify({
					pointName: pointName
				}),
				contentType:"application/json",
				dataType: 'json',
				cache: false,
				success: function (res) {
					
				},
			})
		}
		//点击红包
		$('.red-packet-next')[0].addEventListener('click',(e) => {
			if(['fxhb','packet-titles','money','packet-times'].includes(e.target.className)){
				let index = e.target.dataset.index;
				$('.list').eq(index).toggle();
				const flag = $('.user-list').eq(index).attr('flag');
				if(flag === '1'){
					$('.icon').eq(index).attr('src','../static/img/doubleElevenActivity/icon_up.png');
					$('.user-list').eq(index).attr('flag','2');
				}else{
					$('.icon').eq(index).attr('src','../static/img/doubleElevenActivity/icon_down.png');
					$('.user-list').eq(index).attr('flag','1');
				}
			}
		})
		//点击参加按钮
		$('.join-activity-btn')[0].addEventListener('click',()=>{
			if(obj.money){ // 小程序
				window.location.href = `${baseUrl}/h5/microserviceUserH5/vcloud/downApp.html`
			}else{
				if (isAndroid) {
					window.native.startPurchase();
					operate('dt_双11_h5_快来参加双11');
				}
			}
		});
		//点击领取
		$('.red-packet-next')[0].addEventListener('click',(e)=>{
			var state = e.target.dataset.state;
			let id = e.target.dataset.id;
			let type = e.target.dataset.type;
			if(state == 0){
				if(obj.money){
					return
				}
				stopManyClick(() => {
					toastr.error('赶紧让你的好友使用红包购买云机吧！');
				})
			}else if(state == 1){
				if(e.target.className === 'receive'){
					e.stopPropagation();
					if (isAndroid) {
						window.native.activatePhone(id, type);
					}
				}
			}
		});
		//防止提示一秒内重复显示
		function stopManyClick(fn) {
		if (flag) {
				fn();
			}
			flag = false;
			if(timer){clearTimeout(timer);}
			timer = setTimeout(() => {flag = true}, 1500);
		}
		// 获取一个随机数
		function getRandom(){
			return Math.floor(Math.random()*10);
		}
		function getPhoneNumber(phoneNumber){
			return `${phoneNumber.substring(0,3)}****${phoneNumber.substring(7,11)}`
		}
	</script>
</body>

</html>