xiuli.gao
/
qianduo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
							<!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;
			}
			body, div, button, h3, h6, span, ul, li, p, a,input{ 
				font-family: -apple-system,SF UI Text,Helvetica Neue,Helvetica,Arial,sans-serif;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				padding: 0; 
				margin: 0; 
				box-sizing: inherit; 
				font-weight: normal;
			}
			button{
				outline: none;
			}
			a, a:visited{
				text-decoration: none;
			}
			body{
				width: 100%;
			}
			.recordEmpty{
				padding-top: 1.13rem;
				display: none;
			}
			.recordEmpty img{
				width: 1.3rem;
				height: 1.14rem;
				display: block;
				margin: auto;
			}
			.recordEmpty p{
				color: #999999;
				font-size: 0.12rem;
				line-height: 0.17rem;
				margin-top: 0.41rem;
				text-align: center;
			}
			.integral{
				padding-top: 0.16rem;
				margin-left: 0.2rem;
				margin-right: 0.23rem;
			}
			.detail{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 0.13rem;
			}
			.detail .con{
				color:#333333;
				font-size: 0.15rem;
				line-height: 0.21rem;
			}
			.con text{
				margin-left: 0.14rem;
			}
			.conLeft{
				display: inline-block;
				background: #CCCCCC;
				width: 0.07rem;
				height: 0.07rem;
				border-radius: 50%;
				position: relative;
			}
			.detail .time{
				color: #999999;
				font-size: 0.12rem;
				line-height: 0.17rem;
				margin-top: 0.06rem;
				margin-left: 0.26rem;
			}
			.active::after{
				content: '';
	            display: block;
	            height: 0.5rem;
	            width: 0.01rem;
	            background-color:#D8D8D8;
	            position: absolute;
	            left: 0;
	            right: 0;
	            top:0.07rem;
	            margin: auto;
			}
			.gold{
				color: #FFC600;
				font-size: 0.2rem;
				line-height: 0.28rem;
			}
		</style>
	</head>
	<body>
		<div class="recordEmpty">
			<img src="../H5/noFriend.png" />
			<p>您目前还没有积分，赶紧做任务赚积分吧~</p>
		</div>
		<div class="integral"></div>
	</body>
</html>
<script type="text/javascript" src="../jquery-2.1.0.js"></script>
<script type="text/javascript">
	document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
	window.onresize = function(){
		document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
} 
	var userId = null;
	var arr = [];
	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
    	}
    } 
	
	
	//页面加载，显示数据
	window.onload = function () {
		detailIntegral();
		getScoreDetail();
	}
	
	function detailIntegral () {
		//有积分记录
		var html = ''
		for( var i = 0 ; i < arr.length ; i++){
			if(arr[i].score>0){
				arr[i].score = "+" + arr[i].score;
			}
			html+=`<div class="detail">
				  	<div class="con">
				  		<div class="conLeft active"></div>
				  		<text>${arr[i].name}</text>
				  		<div class="time">${arr[i].created_at}</div>
				  	</div>
				  	<div class="gold">${arr[i].score}</div>
				  </div>`;
		};
		$('.integral').html(html);
		$(".detail").eq(-1).find('.conLeft').removeClass('active')
	}
	
	function getScoreDetail () {
		$.ajax({
			type:"post",
			url:"/api/V1/getScoreDetail",
			data:{
				user_id:userId
			},
			success: function (res) {
				console.log(res)
				if(JSON.parse(res).res == null){
					$(".recordEmpty").css('display','block');
					$(".integral").css("display","none");
				}else{
					$(".recordEmpty").css('display','none');
					$(".integral").css("display","block");
					arr = JSON.parse(res).res;
					detailIntegral();
				}
			}
		});
	}
</script>