229 lines
7.9 KiB
PHP
229 lines
7.9 KiB
PHP
@extends('layouts.app')
|
||
|
||
@section('content')
|
||
<section class="padding_btm" >
|
||
<!--抽奖-->
|
||
<div class="draw_top">
|
||
<div class="draw" id="lottery">
|
||
<table>
|
||
<tr>
|
||
<td class="item lottery-unit lottery-unit-0">
|
||
<div class="draw_loop" style="background-image:url(/assets/home/img/draw001.png);"></div>
|
||
</td>
|
||
<td class="item lottery-unit lottery-unit-1">
|
||
<div class="draw_loop" style="background-image:url(/assets/home/img/draw002.png);"></div>
|
||
</td>
|
||
<td class="item lottery-unit lottery-unit-2">
|
||
<div class="draw_loop" style="background-image:url(/assets/home/img/draw003.png);"></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="item lottery-unit lottery-unit-7">
|
||
<div class="draw_loop" style="background-image:url(/assets/home/img/draw004.png);"></div>
|
||
</td>
|
||
<td class="">
|
||
<a class="draw-btn @if(Auth::guest() || Auth::user()->lottery_num===0) alert_message @else lottery @endif" href="javascript:" style="background-image:url(/assets/home/img/draw000.png);"></a>
|
||
</td>
|
||
<td class="item lottery-unit lottery-unit-3">
|
||
<div class="draw_loop" style="background-image:url(/assets/home/img/draw005.png);"></div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="item lottery-unit lottery-unit-6">
|
||
<div class="draw_loop" style="background-image:url(/assets/home/img/draw00q.png);"></div>
|
||
</td>
|
||
<td class="item lottery-unit lottery-unit-5">
|
||
<div class="draw_loop" style="background-image:url(/assets/home/img/draw006.png);"></div>
|
||
</td>
|
||
<td class="item lottery-unit lottery-unit-4">
|
||
<div class="draw_loop" style="background-image:url(/assets/home/img/draw007.png);"></div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
<div class="new_num">您有<span>{{ Auth::user()->lottery_num??'0' }}</span>次抽奖机会 </div>
|
||
</div>
|
||
<!--end 抽奖-->
|
||
|
||
|
||
<div id='info' style = "display : none">
|
||
<!--中奖提示-->
|
||
<div class="prize_black">
|
||
<div class="prize_0415">
|
||
<div class="prize_0415_text "></div>
|
||
<i class="icon-remove-circle prize_0415_close" onclick="javascript:window.location.reload()"></i>
|
||
<!-- <span class="ccccc" >.</span> -->
|
||
</div>
|
||
</div>
|
||
<!--end 中奖提示-->
|
||
</div>
|
||
<div class="draw_bg"></div>
|
||
|
||
<div class="other1" ></div>
|
||
</section>
|
||
@endsection
|
||
|
||
@section('layer')
|
||
@endsection
|
||
|
||
@section('js')
|
||
<script src="/assets/home/js/main.js"></script>
|
||
<script src="/assets/home/js/layer.js"></script>
|
||
<!--抽奖layer.js-->
|
||
@endsection
|
||
|
||
@section('script')
|
||
<script type="text/javascript">
|
||
|
||
/*抽奖*/
|
||
|
||
var lottery = {
|
||
index: -1, //当前转动到哪个位置，起点位置
|
||
count: 7, //总共有多少个位置
|
||
timer: 0, //setTimeout的ID，用clearTimeout清除
|
||
speed: 20, //初始转动速度
|
||
times: 0, //转动次数
|
||
cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
|
||
prize: -1, //中奖位置
|
||
init: function(id) {
|
||
if($('#' + id).find('.lottery-unit').length > 0) {
|
||
$lottery = $('#' + id);
|
||
$units = $lottery.find('.lottery-unit');
|
||
this.obj = $lottery;
|
||
this.count = $units.length;
|
||
$lottery.find('.lottery-unit.lottery-unit-' + this.index).addClass('active');
|
||
};
|
||
},
|
||
roll: function() {
|
||
var index = this.index;
|
||
var count = this.count;
|
||
var lottery = this.obj;
|
||
|
||
$(lottery).find('.lottery-unit.lottery-unit-' + index).removeClass('active');
|
||
index += 1;
|
||
if(index > count - 1) {
|
||
index = 0;
|
||
};
|
||
$(lottery).find('.lottery-unit.lottery-unit-' + index).addClass('active');
|
||
this.index = index;
|
||
return false;
|
||
},
|
||
stop: function(index) {
|
||
this.prize = index;
|
||
return false;
|
||
}
|
||
};
|
||
|
||
function roll() {
|
||
lottery.times += 1;
|
||
lottery.roll(); //转动过程调用的是lottery的roll方法，这里是第一次调用初始化
|
||
|
||
if(lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
|
||
clearTimeout(lottery.timer);
|
||
console.log(lottery);
|
||
if (lottery.index!=6 && lottery.index>0) {
|
||
layer.open({
|
||
type: 1,
|
||
shadeClose: true,
|
||
shade: false,
|
||
maxmin: true,
|
||
area: ['893px', '600px'],
|
||
content: $("#info").html()
|
||
});
|
||
}else{
|
||
$(".other1").show();
|
||
timer = setInterval(function(){
|
||
$(".other1").hide();
|
||
}, 2500);
|
||
}
|
||
|
||
|
||
lottery.prize = -1;
|
||
lottery.times = 0;
|
||
click = false;
|
||
} else {
|
||
if(lottery.times < lottery.cycle) {
|
||
lottery.speed -= 10;
|
||
} else {
|
||
if(lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
|
||
lottery.speed += 110;
|
||
} else {
|
||
lottery.speed += 20;
|
||
}
|
||
}
|
||
if(lottery.speed < 40) {
|
||
lottery.speed = 40;
|
||
};
|
||
lottery.timer = setTimeout(roll, lottery.speed); //循环调用
|
||
}
|
||
return false;
|
||
}
|
||
|
||
|
||
var click = false;
|
||
|
||
window.onload = function() {
|
||
lottery.init('lottery');
|
||
$('.lottery').click(function() {
|
||
|
||
if(click) { //click控制一次抽奖过程中不能重复点击抽奖按钮，后面的点击不响应
|
||
return false;
|
||
|
||
} else {
|
||
$.get("{{ route('lottery.draw') }}",function(res){
|
||
if (res.statusCode==200) {
|
||
lottery.prize = res.message.site;
|
||
$('.prize_0415_text').html(res.message.title);
|
||
}else{
|
||
if (res.message.site) {
|
||
lottery.prize = res.message.site;
|
||
$('.other1').html(res.message.title);
|
||
}else{
|
||
lottery.prize = 0;
|
||
$('.other1').html(res.message);
|
||
lottery.stop(6);
|
||
}
|
||
|
||
}
|
||
|
||
if (res.message.lottery_num) {
|
||
$('#lottery_num').html(res.message.lottery_num);
|
||
}
|
||
});
|
||
|
||
lottery.speed = 100;
|
||
roll(); //转圈过程不响应click事件，会将click置为false
|
||
click = true; //一次抽奖完成后，设置click为true，可继续抽奖
|
||
return false;
|
||
}
|
||
});
|
||
|
||
|
||
function alert_message($message) {
|
||
if ($message.length>0) {
|
||
$('.other1').html($message);
|
||
}
|
||
$(".other1").show();
|
||
timer = setInterval(function(){
|
||
$(".other1").hide();
|
||
}, 2500);
|
||
}
|
||
|
||
$('.alert_message').click(function(){
|
||
@if(Auth::guest())
|
||
alert_message('请先登录在进行抽奖');
|
||
setTimeout(function(){
|
||
window.location.href="{{ route('login') }}";
|
||
},3000);
|
||
@endif
|
||
|
||
@if(!Auth::guest() && Auth::user()->lottery_num===0 )
|
||
alert_message('你没有抽奖次数了');
|
||
@endif
|
||
|
||
});
|
||
};
|
||
|
||
</script>
|
||
@endsection
|