xiuli.gao
/
qianduo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
    	<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
		<title>积分兑换</title>
		<style type="text/css">
			body,html{
				font-size: 0.16rem;
				height: 100vh;
			}
			body, div, button, h3, h6, span, ul, li, p, a,input{ 
				font-family: -apple-system,SF UI Text,Helvetica Neue,Helvetica,Arial,sans-serif;
				padding: 0; 
				margin: 0; 
				box-sizing: inherit; 
				font-weight: normal;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			}
			a, a:visited{
				text-decoration: none;
			}
			button{
				outline: none;
			}
			body{
				width: 100%;
				height: 100%;
				background: #FFFFFF;
			}
			#body{
				margin:0 0.2rem;
			}
			.myExchange{
				color: #535353;
				font-size: 0.16rem;
				line-height: 0.22rem;
				padding-top: 0.2rem;
				margin-bottom: 0.07rem;
			}
			.myExchange text{
				color: #E2252F;
				font-weight: bold;
			}
			#teleNumber{
				font-size: 0.24rem;
				line-height: 0.33rem;
				color: #333333;
				border: none;
				outline: none;
				background: #FFFFFF;
			}
			.teleNumber{
				padding-top: 0.06rem;
				padding-bottom: 0.06rem;
				border-bottom: 0.005rem solid #D8D8D8;
			}
			.flowList{
				width: 100vw;
				display: -webkit-flex;
			    display: -webkit-box;
			    display: -moz-box;
			    display: -ms-flexbox;
				display: flex;
				margin: 0.25rem 0.05rem 0 -0.2rem;
				flex-flow: wrap;
			}
			.flowList div{
				margin: 0 0.15rem;
				width: 0.92rem;
				border: 0.01rem solid #FFC600;
				border-radius: 0.04rem;
				margin-bottom: 0.12rem;
				text-align: center;
				line-height: 0.42rem;
				color: #333333;
				font-size: 0.16rem;
			}
			.flowList .active{
				background-color:#FFEFB7;
				border-color: #FFEFB7;
				color: #EA3D3D;
			}
			.needExchange{
				color: #535353;
				font-size: 0.14rem;
				line-height: 0.2rem;
				margin-top: 0.41rem;
			}
			.needExchange text{
				color: #E2252F;
				font-size: 0.2rem;
				font-weight: bold;
			}
			.needExchange span{
				color: #E2252F;
				font-weight: normal;
				font-size: 0.12rem;
				display: none;
			}
			button{
				width: 3.35rem;
				height: 0.44rem;
				background: #FFC600;
				border-radius: 0.04rem;
				text-align: center;
				line-height: 0.44rem;
				color: #FFFFFF;
				font-size: 0.16rem;
			    margin-top: 0.14rem;
			    margin-bottom: 0.2rem;
			    border: none;
			    outline: none;
			}
			.describe{
				font-size: 0.12rem;
				line-height: 0.17rem;
				color: #999999;
			}
			input::-webkit-input-placeholder { /* WebKit browsers */ 
				font-size:0.14rem;
			}
			
			.registerMask{
				display: none;
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				left: 0;
				background: rgba(0,0,0,0.5);
			}
			.registerTost{
				width: 3rem;
				background: #FFFFFF;
				position: absolute;
				top: 30%;
				left: 0;
				right: 0;
				margin: auto;
				border-radius: 0.04rem;
			}
			.registerTost p{
				padding: 0 0.18rem;
				padding-top: 0.44rem;
				padding-bottom: 0.33rem;
				text-align: center;
				color: #000000;
				font-size: 0.16rem;
			}
			.registerTost div{
				color: #16B80A;
				font-size: 0.18rem;
				line-height: 0.55rem;
				text-align: center;
				border-top: 0.01rem solid #D8D8D8;
			}
			
		</style>
		<script>
			document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
			window.onresize = function(){
				document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
		} 
		</script>
	</head>
	<body>
		<div id="body">
			<div class="myExchange">积分: <text></text></div>
			<div class="teleNumber">
				<input  type="tel" name="" id="teleNumber" placeholder="请输入手机号码" value="" oninput=""/>
			</div>
			<div class="flowList">
				<div>0M</div>
				<div>0M</div>
				<div>0M</div>
				<div>0M</div>
				<div>0M</div>
				<div>0M</div>
				
			</div>
			<div class="needExchange">所需积分: <text>3000</text><span>（您的积分不足）</span></div>
			<button onclick="goExchange()">马上兑换</button>
			<p class="describe">兑换流量：全国可用，当月有效。流量预计24小时到账，双休日及节假日不处理流量兑换业务</p>
		</div>
		
		<div class="registerMask">
			<div class="registerTost">
				<p>手机号不能为空</p>
				<div class="yes" onclick="yesClickEvent()">我知道了</div>
			</div>
		</div>
		
	</body>
</html>
<script type="text/javascript" src="../jquery-2.1.0.js"></script>
<script type="text/javascript">
	

	var flag = false;
	var userId = null;
	var html = "";
	var time = '';
	var id = '';
	var sign = "";
	var myScore = '';
	var arr = [];
	var cid = '';
	var str=location.href;  //取得整个地址栏
    var num=str.indexOf("?"); 
    str=str.substr(num+1); //str得到?之后的字符串
    var brr=str.split("&");
    for(var i = 0 ; i<brr.length; i++){
    	if(brr[i].indexOf('userId') != -1){
    		userId = brr[i].split('=')[1];//用户id
    	}
    	if(brr[i].indexOf('cid') != -1){
    		cid = brr[i].split('=')[1];//cid
    	}
    	if(brr[i].indexOf('sign') != -1){
    		sign = brr[i].split('=')[1];//sign
    	}
    	if(brr[i].indexOf('time') != -1){
    		time = brr[i].split('=')[1];//time
    	}
    } 
	
	window.onload = function (){
		getAwards();
	}
	
	$("#teleNumber").blur(function(){
		var teleNumber = $("#teleNumber").val();
		var myreg=/^[0-9]{11}$/; 
　　		if (!myreg.test(teleNumber)) { 
			//手机号码未填写及填写不正确
			$(".registerMask").css('display','block');
			$(".registerTost").find('p').html("请正确填写手机号码");
			localStorage.setItem('numberFlag',0);
		}else{
			localStorage.setItem('numberFlag',1);
		}
	});
	
	function exchangeActive (dataList) {
		arr = dataList.res.data;
		id = arr[0].id;
		myScore = dataList.res.all_score;
		for(var i = 0; i<arr.length; i++){
			html+=`<div>${arr[i].data_flow}</div>`
		}
		$(".flowList").html(html);
		$(".flowList").find('div').eq(0).addClass('active');
		$(".myExchange").find('text').html(myScore);//用户所有积分
		$(".needExchange").find('text').html(arr[0].score);//兑换所需积分
		
		$("#teleNumber").val(dataList.res.mobile);//用户手机号
		
		if(dataList.res.mobile == undefined || !dataList.res.mobile || dataList.res.mobile == null || dataList.res.mobile == ""){
			//用户没有手机号
			$("#teleNumber").val("");//用户手机号
		}
		
		
		if(myScore<arr[0].score){
			$(".needExchange").find("span").css('display','inline-block');
		}else{
			$(".needExchange").find("span").css('display','none');
		}
		
		$(".flowList div").click(function () {
			$(".flowList div").removeClass('active');
			$(this).addClass('active')
			for(var i = 0;i<arr.length;i++){
				if(arr[i].data_flow == $(this).html()){
					$(".needExchange").find('text').html(arr[i].score);//兑换所需积分
					id = arr[i].id;
				}
			}
			if(parseFloat(myScore) < parseFloat($(".needExchange").find('text').html())){
				$(".needExchange").find("span").css('display','inline-block');
			}else{
				$(".needExchange").find("span").css('display','none');
			}
		})
		
	}
	
	
	
	function getAwards () {
		$.ajax({
			type:"post",
			url:"/api/V1/getAwards",
			data:{
				userId:userId
			},
			headers: {
	            'time':time,
	            "sign":sign
	        },
			success: function (res) {
				console.log(!JSON.parse(res).res.mobile)
				if(JSON.parse(res).res.mobile == undefined || !JSON.parse(res).res.mobile || JSON.parse(res).res.mobile == null || JSON.parse(res).res.mobile == ""){
					//用户没有手机号
					console.log("nohave")
					$("#teleNumber").removeAttr("disabled");
					$("#teleNumber").val("");
				}else{
					$("#teleNumber").attr('disabled','disabled');
				}
				exchangeActive(JSON.parse(res));
			}
		});
	}

	function exchangeAward(){
		var teleNumber = $("#teleNumber").val();
		$.ajax({
			type:"post",
			url:"/api/V1/exchangeAward",
			headers: {
	              'cid':cid,
	              'time':time,
            	  'sign':sign
	          },
			data:{
				user_id:userId,
				award_id:id,
				mobile:teleNumber
			},
			success: function (res) {
				console.log(JSON.parse(res))
				$(".registerMask").css('display','block');
				$(".registerTost").find('p').html(JSON.parse(res).message);
				if(JSON.parse(res).code == 0){
					flag = true
				}
			}
		});
	}
	
	function goExchange () {
		if(localStorage.getItem('numberFlag') == 0){
			//手机号填写有误
			$(".registerMask").css('display','block');
			$(".registerTost").find('p').html("请正确填写手机号码");
		}else{
			exchangeAward();
		}
		
	}
	
	function yesClickEvent () {
		$(".registerMask").css('display','none');
		if(flag){
			window.location.reload();
		}
	}
</script>