|
- $(function () {
- var WIDTH = Math.floor(document.documentElement.clientWidth * 0.45),//屏幕宽度*0.45来设置li的宽度
- $behindList = $(".behind ul li"),//福袋父级
- $frontList = $(".front ul li"),
- $behindBag = $(".moveing-left"),//后方运动盒子
- $frontBag = $(".moveing-right"),//前方运动盒子
- $topBag = $(".behind img"),//后方每个福袋
- $bottomBag = $(".front img"),//前方每个福袋
- $btn = $("#btn"),//游戏按钮
- $hook = $("#hook"),//钩子
- data = {count: 0},//次数
- bool = true,//点击开关,ture为可点击
- rem = 75,
- left, right, index,//福袋运动值,福袋下标
- times, timer,
- dataList = [],
- couponId=null,
- errorMessge='',
- playAble=true,
- timer,//轮流提示定时器
- radomData=[];
-
- $(".behind li,.front li").css("width", WIDTH + "px");//设置li的宽度
- init();
- getCount()
- let baseUrl='https://ciformall.youlane.cn/C';
- if(window.location.origin=='https://gametest.malls.iformall.com'){
- baseUrl='https://ctest.malls.iformall.com/C'
- }else if(window.location.origin=='https://game.malls.iformall.com'){
- baseUrl='https://c.malls.iformall.com/C'
- }else if(window.location.origin=='https://game.youlane.cn'){
- baseUrl='https://ciformall.youlane.cn/C'
- }
- $.ajax({
- url: baseUrl+"/api/game/getOneGame",//json文件位置
- type: "GET",//请求方式为get
- dataType: "json", //返回数据格式为json
- headers: {
- 'content-type':'application/json',
- // "token":"6ded7930-5293-4e59-a207-73e1e78ce7cc",
- "token":getQueryString('token')
- },
- data:{
- id:getQueryString('id'),
- // id:"214268965667471360"
- },
- success: function(res) {//请求成功完成后要执行的方法
- // alert(JSON.stringify(res))
- // console.log(res)
- var strHtml = "";
- dataList=res.data.couponIdsList;
- id=res.data.id
- let totalWeight=0;
- dataList.forEach((item,index)=>{
- strHtml += '<li class="swiper-slide">';
- strHtml += '<img src="'+item.coverImg+'">';
- strHtml += '</li>';
- totalWeight+=Number(item.gameWeight)
- for(var i=0;i<item.gameWeight;i++){
- radomData.push(item)
- }
- })
- let notWinweight=100-totalWeight;
- let b={
- id:null
- }
- for(var i=0;i<notWinweight;i++){
- radomData.push(b)
- }
- $('.swiper-wrapper').html(strHtml);
- //奖品展示
- var show = new Swiper(".swiper-container", {
- direction: "horizontal",//水平方向滑动。 vertical为垂直方向滑动
- loop: false,//是否循环
- slidesPerView: "auto"//自动根据slides的宽度来设定数量
- });
- }
- })
- function init() {
- window.requestAnimationFrame = window.requestAnimationFrame || function (fn) {
- return setTimeout(fn, 1000 / 60);//1000 / 60意思是一秒钟60帧
- };
- //cancelAnimationFrame是清除requestAnimationFrame
- window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
- (function move() {
- //后方福袋的运动
- left = parseFloat($behindBag.css("margin-left"));//获取margin-left并去掉单位
- left = left - 1.5;//改变margin-left值
- $behindBag.css("margin-left", left + "px");
- left <= -WIDTH && $behindBag.css("margin-left", "0");//如果margin-left值到达屏幕宽度则归零
-
- //前方福袋的运动
- right = parseFloat($frontBag.css("margin-right"));//获取margin-right并去掉单位
- right = right - 1.5;//改变margin-right值
- $frontBag.css("margin-right", right + "px");
- right <= -WIDTH && $frontBag.css("margin-right", "0");//如果margin-right值到达屏幕宽度则归零
-
- timer = requestAnimationFrame(move);
- })();
- }
- /**
- * 获取剩余中奖次数
- */
- function getCount(){
- $.ajax({
- url: baseUrl+"/api/game/getCount",//json文件位置
- type: "GET",//请求方式为get
- dataType: "json", //返回数据格式为json
- headers: {
- 'content-type':'application/json',
- // "token":"b49fa2c4-a074-4147-afbe-6913c66705d6",
- "token":getQueryString('token')
- },
- data:{
- gameId:getQueryString('id'),
- // id:"213206254531641344"
- },
- success: function(res) {//请求成功完成后要执行的方法
- if(res.code==200){
- if(res.data.playAble){
- playAble=true;
- data.count=res.data.playLimit-res.data.playCount;
- $('#change').html(data.count);
- if(res.data.playLimit==0){
- data.count=1000000;
- $('#change').hide();
- }
- }else{
- playAble=false;
- if(res.data.AwardLimit==res.data.AwardCount){
- errorMessge='您的中奖次数已经达到上限!无法继续参加游戏!'
- data.count=res.data.playLimit-res.data.playCount;
- $('#change').html(data.count);
- return;
- }else if(res.data.playLimit==res.data.playCount){
- errorMessge='您的剩余次数为0!无法继续参加游戏!'
- data.count=0;
- $('#change').html(0);
- return;
- }
- }
- }else{
- errorMessge=res.message;
- playAble=false;
- $('#change').html(0);
- }
- }
- })
- }
- /**
- * 记录游戏次数
- */
- function reduceCount(paramData){
- $.ajax({
- url: baseUrl+"/api/game/addActionLog",//json文件位置
- type: "POST",//请求方式为get
- dataType: "json", //返回数据格式为json
- async:true,
- headers: {
- 'content-type':'application/json;charset=UTF-8',
- // "token":"025e5017-a268-4c21-98b3-d47b77b3ca54"
- "token":getQueryString('token')
- },
- data:JSON.stringify(paramData),
- success: function(res) {//请求成功完成后要执行的方法
- // alert('成功了!')
- getCount()
- }
- })
- }
- //开始游戏
- $btn.click(function () {
- if (!bool) return;
- // if (data.count <= 0) {
- // alert("没有次数了");
- // return;
- // }
- bool = false;
- // data.count--;
- // $("#change").html(data.count);
-
- var random = Math.floor(Math.random() * 490 + 130);//130 - 620之间随机,因为这两个值是左右边界
- $(".left,.right").addClass("up");//张开钩子
-
- $hook.animate({left: random / rem + "rem"}, 1000);//左右值
- clearTimeout(times);
- //上下值
- if (random > 380) {//上面
- $hook.animate({top: -100 / rem + "rem"}, 1000);
- times = setTimeout(function () {
- reback1();
- }, 2000);
- } else {//下面
- $hook.animate({top: 50 / rem + "rem"}, 1000);
- times = setTimeout(function () {
- reback2();
- }, 2000);
- }
- });
-
- //判断钩子和福袋的距离
- function reback1() {
- for (var i = 0; i < $behindList.length; i++) {
- if ($hook.find("img").length) break;//如果钩子上已经有福袋跳出循环
- if ($hook.position().left - 130 <= $behindList.eq(i).position().left && $behindList.eq(i).position().left <= $hook.position().left - 50) {
- //获取福袋
- !$hook.find("img").length && $hook.append($topBag.eq(i));//如果未抓取到福袋才抓取
- $topBag.eq(i).css({//重设福袋大小
- width: 91 / rem + "rem",
- height: 102 / rem + "rem"
- });
- saveData()
- //钩子返回,弹出红包
- index = i;
- $hook.animate({top: -220 / rem + "rem"}, 1000, function () {
- win();
- $behindList.eq(index).append($topBag.eq(index));//把福袋放回原位
- index = undefined;
- });
- } else {
- setTimeout(function () {
- return reback1();
- });
- }
- }
- }
-
- function saveData(){
- let b = Math.floor(Math.random() * radomData.length)
- console.log(radomData[b],radomData.length)
- couponId=radomData[b].couponId
- let params={
- couponId:couponId,
- couponChannelId:radomData[b].id
- }
- if(playAble){
- if (data.count > 0) {
- if(radomData[b].id!=null){
- let paramContData={
- gameId:getQueryString('id'),
- orderId:'0'
- }
- //保存中奖信息
- $.ajax({
- url: baseUrl+"/api/order/save",//json文件位置
- type: "POST",//请求方式为get
- dataType: "json", //返回数据格式为json
- async:true,
- headers: {
- 'content-type':'application/json;charset=UTF-8',
- // "token":"6ded7930-5293-4e59-a207-73e1e78ce7cc"
- "token":getQueryString('token')
- },
- data:JSON.stringify(params),
- success: function(res) {//请求成功完成后要执行的方法
- console.log(res)
- if(res.code==200){
- let postData={
- payOrderId: "0",
- orderId: res.data.id,
- status: 1,
- reason: ""
- }
- var orderId=res.data.id;
- //保存中奖信息
- $.ajax({
- url: baseUrl+"/api/pay/updatePayOrder",//json文件位置
- type: "POST",//请求方式为get
- dataType: "json", //返回数据格式为json
- async:true,
- headers: {
- 'content-type':'application/json;charset=UTF-8',
- // "token":"6ded7930-5293-4e59-a207-73e1e78ce7cc"
- "token":getQueryString('token')
- },
- data:JSON.stringify(postData),
- success: function(res) {//请求成功完成后要执行的方法
- // alert(JSON.stringify(res))
- // console.log(res)
- if(res.code==200){
- var postData02={
- gameId:getQueryString('id'),
- orderId:orderId
- }
- reduceCount(postData02);
- $('#card .win').css({
- "background":'url('+radomData[b].coverImg+') no-repeat',
- "background-size":"cover"
- });
- $('.winning .red-body p').html(radomData[b].title+"(点击“我的”查看奖券)");
- $(".btn").html('再玩一把')
- }else{
- reduceCount(paramContData);
- $('#card .win').css({
- "background":'url(../common/image/redPack/weizhongjiang.png) no-repeat',
- "background-size":"cover"
- });
- $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)');
- $(".btn").html('再玩一把')
- }
- }
- })
- }else{
- reduceCount(paramContData);
- $('#card .win').css({
- "background":'url(../common/image/redPack/weizhongjiang.png) no-repeat',
- "background-size":"cover"
- });
- $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)');
- $(".btn").html('再玩一把')
- }
- }
- })
- }else{
- reduceCount(paramContData);
- $('#card .win').css({
- "background":'url(../common/image/redPack/weizhongjiang.png) no-repeat',
- "background-size":"cover"
- });
- $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)');
- $(".btn").html('再玩一把')
- }
- } else {
- alert(errorMessge);
- }
- }else{
- alert(errorMessge);
- }
- }
- function reback2() {
- for (var i = 0; i < $frontList.length; i++) {
- if ($hook.find("img").length) break;//如果钩子上已经有福袋跳出循环
- var l = $frontList.eq(i).position().left - 200;
- if ($hook.position().left - 130 <= l && l <= $hook.position().left) {
- //获取福袋
- !$hook.find("img").length && $hook.append($bottomBag.eq(i));//如果未抓取到福袋才抓取
- $bottomBag.eq(i).css({//重设福袋大小
- width: 139 / rem + "rem",
- height: 156 / rem + "rem"
- });
- saveData()
-
- //钩子返回,弹出红包
- index = i;
- $hook.animate({top: -220 / rem + "rem"}, 1000, function () {
- win();
- $frontList.eq(index).append($bottomBag.eq(index));
- index = undefined;
- });
- } else {
- setTimeout(function () {
- return reback2();
- });
- }
- }
- }
-
- //中奖信息提示
- $("#close,.win,.btn").click(function () {
- bool = true;
- $(".left,.right").removeClass("up");
- cancelAnimationFrame(timer);
- init();
- });
-
- //点击跳回小程序奖券列表
- $('#myWin').click(function(){
- // alert(555)
- wx.miniProgram.redirectTo({
- url:'/pages/couponorder/index/index' + "?token=" +getQueryString('token') + "&gameId=" + getQueryString('gameId') + "&id=" + getQueryString('id')+'&from=h5'
- })
- })
- });
-
-
-
-
-
-
-
-
-
|