share

share/Invitation.html

@@ -102,7 +102,7 @@
 		<p class="tit">获取更多大额红包，下载猎豆优选</p>
 		<div class="leidou">
 			<img src="images/liedou.png" class="liedouImg"/>
-			<p class="introduce"><img src="images/logo.png" alt="" /><span>购物先领券，下单赚佣</span></p>
+			<p class="introduce"><img src="images/logo.png" alt="" /><span>购物先领券，下单赚佣金</span></p>
 			<a class="down" href="http://a.app.qq.com/o/simple.jsp?pkgname=com.kuxuan.coupon_liedou">下载APP</a>
 		</div>
 	</div>
@@ -127,7 +127,6 @@
 </html>
 <script type="text/javascript" src="public/jquery-2.1.0.js"></script>
 <script type="text/javascript">
-	
 	var userId = null;
 	var activity_id = null;
 	var share_code = null;
@@ -184,9 +183,29 @@
 	
 	$("#share").click(function () {
 		$(".shareMask").css('display','block')
+		share();
 	})
 	$(".cancel").click(function () {
 		$(".shareMask").css('display','none')
 	})
+	
+	window.onload = function () {
+		
+	}
+	//分享
+	function share() {
+		$.ajax({
+			type:"post",
+			url:"/api/V2/share",
+			data:{
+				type:1,
+				count:0
+			},
+			success: function (res) {
+				var data =JSON.parse(res)
+//				console.log(data)
+			}
+		})
+	}
 
 </script>

share/index.html

@@ -18,8 +18,8 @@
 		.already .num{font-size:0.15rem;color:#FB3D38;padding-bottom: 0.175rem;}
 		.already ul{height: 1.305rem;overflow-y: scroll;}
 		.already ul li{float: left;padding-bottom: 0.08rem;color: #666666;line-height: 0.355rem;}
-		.already ul li img{float: left;display: block;width: 0.355rem;}
-		.already ul li .username{padding-left: 0.075rem;padding-right: 0.55rem;	}
+		.already ul li img{float: left;display: block;width: 0.355rem;height: 0.355rem;border:0;}
+		.already ul li .username{ display: inline-block; float: left;padding-left: 0.075rem;width: 1.1rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
 		.already ul li .ed{padding-right: 0.48rem;}
 		.already ul li .username,.already ul li .ed{font-size: 0.14rem;}
 		.already ul li .day,.already ul li .time{font-size: 0.12rem;}
@@ -30,24 +30,9 @@
 		.bottom{margin: auto;color: #FB3D38;text-align: center;font-size: 0.14rem;}
 		.bottom p:nth-child(1){padding-top: 0.185rem;padding-bottom: 0.205rem;font-size: 0.15rem;} 
 		#copy_1,#copy_2,#taokouling{position: absolute;left: -1000rem;}
-			.alert-info {
-			    position: absolute;
-			    top: 1.74rem;
-			    right: 0;
-			    left: 0;
-			    bottom: 0;
-			    text-align: center;
-			}
-			.alert-info p {
-			    display: inline-block;
-			    /*height: 0.38rem;*/
-			    color: #fff;
-			    font-size: 0.14rem;
-			    line-height: 0.38rem;
-			    padding: 0 0.10rem;
-			    background-color: rgba(0, 0, 0, 0.7);
-			    border-radius: 5px;
-			}
+		.alert-info {position: absolute;top: 1.74rem;right: 0;left: 0;bottom: 0;text-align: center;}
+		.alert-info p {display: inline-block;color: #fff;font-size: 0.14rem;line-height: 0.38rem;padding: 0 0.10rem;background-color: rgba(0, 0, 0, 0.7);border-radius: 5px;}
+		.roll-wrap{height:1.305rem;overflow:hidden;}
 	</style>
 	<script type="text/javascript">
 		document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
@@ -62,20 +47,18 @@
 	</div>
 	<div class="red_packet">
 		<p class="click">点我领红包</p>
-		<p class="copy" onclick="copyPassword()">领取红包</p>
+		<p class="copy" onclick="collarRed()">领取红包</p>
 		<p class="con">自动生成淘口令，打开手机淘宝领取红包</p>
 	</div>
 	<div class="already">
-		<p class="num">已有999位用户领取红包</p>
+		<p class="num"></p>
+		<div class="roll-wrap" id="roll-wrap">
 		<ul>
-			<li><img src="images/001.png" /><span class="username">小豆***</span><span class="ed">领取了红包</span><span class="day">05-30</span><span class="time">14:36</span></li>
-			<li><img src="images/001.png" /><span class="username">小豆***</span><span class="ed">领取了红包</span><span class="day">05-30</span><span class="time">14:36</span></li>
-			<li><img src="images/001.png" /><span class="username">小豆***</span><span class="ed">领取了红包</span><span class="day">05-30</span><span class="time">14:36</span></li>
-			<li><img src="images/001.png" /><span class="username">小豆***</span><span class="ed">领取了红包</span><span class="day">05-30</span><span class="time">14:36</span></li>
-			<li><img src="images/001.png" /><span class="username">小豆***</span><span class="ed">领取了红包</span><span class="day">05-30</span><span class="time">14:36</span></li>
-			<li><img src="images/001.png" /><span class="username">小豆***</span><span class="ed">领取了红包</span><span class="day">05-30</span><span class="time">14:36</span></li>
-			<li><img src="images/001.png" /><span class="username">小豆***</span><span class="ed">领取了红包</span><span class="day">05-30</span><span class="time">14:36</span></li>
+			<!--<li><img src="images/001.png" /><span class="username">小豆***</span><span class="ed">领取了红包</span><span class="day">05-30</span><span class="time">14:36</span></li>
+			<li><img src="images/001.png" /><span class="username">小兰***</span><span class="ed">领取了红包</span><span class="day">05-30</span><span class="time">14:37</span></li>
+			<li><img src="images/001.png" /><span class="username">小豆紫***</span><span class="ed">领取了红包</span><span class="day">05-30</span><span class="time">15:36</span></li>-->
 		</ul>
+		</div>
 	</div>
 	<div class="cooperation">
 		<img src="images/jinniu.png" alt="" />
@@ -100,7 +83,61 @@
 </html>
 <script type="text/javascript" src="public/jquery-2.1.0.js"></script>
 <script type="text/javascript">
-	
+	var user_id = 1;
+		//页面加载，显示数据
+	window.onload = function () {
+		Lead() ;
+	}
+	//领红包
+	function collarRed() {
+		$.ajax({
+			type:"post",
+			url:"/api/V2/receiveRedPacket",
+			data:{
+				user_id:user_id
+			},
+			success: function (res) {
+				var data =JSON.parse(res)
+				console.log(data)
+				if(data.code == 0){
+					copyPassword();
+				}else if(data.code == 4003){
+					console.log("领取失败")
+				}
+			}
+		})
+	}
+	//已领红包
+	function Lead() {
+		$.ajax({
+			type:"post",
+			url:"/api/V2/returnRedPacket",
+			success: function (res) {
+				var data =JSON.parse(res)
+//				console.log(data)
+				if(data.code == 0){
+					var dataArr = data.res.list,html = '',numHtml = '', name = '' , img = '';
+					numHtml +='已有'+ data.res.count +'位用户领取红包';
+					dataArr.forEach(function (item, index) {
+						if(item.user_name){
+							name = item.user_name;
+						}else{
+							name = '匿名';
+						}
+						if(item.user_img){
+							img = item.user_img;
+						}else{
+							img = 'images/moren.png'
+						}
+						html += '<li><img src='+ img +' /><span class="username">'+ name +'</span><span class="ed">领取了红包</span><span class="day">'+ item.received_time +'</span></li>'
+					})
+					$('.num').html(numHtml);
+					$('.roll-wrap ul').html(html)
+				}
+				new scrollTxt().init();
+			}
+		})
+	}
 	
 	function copyPassword() {
 		var data=document.getElementById("taokouling").innerHTML;
@@ -127,4 +164,52 @@
 	    }
 	    window.location.href="Invitation.html"
 	}
+	
+	
+	function scrollTxt(){
+	    var controls={},
+	        values={},
+	        t1=200, /*播放动画的时间*/
+	        t2=1500, /*播放时间间隔*/
+	        si;
+	    controls.rollWrap=$("#roll-wrap");
+	    controls.rollWrapUl=controls.rollWrap.children();
+	    controls.rollWrapLIs=controls.rollWrapUl.children();
+	    values.liNums=controls.rollWrapLIs.length;
+	    values.liHeight=controls.rollWrapLIs.eq(0).height();
+	    values.ulHeight=controls.rollWrap.height();
+	    this.init=function(){
+	        autoPlay();
+	        // pausePlay();
+	    }
+	    /*滚动*/
+	    function play(){
+	        controls.rollWrapUl.animate({"margin-top" : "-"+values.liHeight}, t1, function(){
+	            $(this).css("margin-top" , "0").children().eq(0).appendTo($(this));
+	        });
+	    }
+	    /*自动滚动*/
+	    function autoPlay(){
+	        /*如果所有li标签的高度和大于.roll-wrap的高度则滚动*/
+	        if(values.liHeight*values.liNums > values.ulHeight){
+	            si=setInterval(function(){
+	                play();
+	            },t2);
+	        }
+	    }
+	    /*鼠标经过ul时暂停滚动*/
+	    function pausePlay(){
+	        controls.rollWrapUl.on({
+	            "mouseenter":function(){
+	                clearInterval(si);
+	            }
+	            ,
+	            "mouseleave":function(){
+	                autoPlay();
+	            }
+	        });
+	    }
+	}
+	
+	
 </script>