Non puoi selezionare più di 25 argomenti Gli argomenti devono iniziare con una lettera o un numero, possono includere trattini ('-') e possono essere lunghi fino a 35 caratteri.
 
 
 

607 righe
27 KiB

  1. $(function () {
  2. var $canvas = $("#canvas"),//canvas
  3. clientWidth = document.documentElement.clientWidth,
  4. canvasWidth = Math.floor(clientWidth * 562 / 750),//canvas宽 = 屏幕宽 * 设计稿里canvas宽 / 750
  5. canvasHeight = Math.floor(clientWidth * 308 / 750),//canvas高 = 屏幕宽 * 设计稿里canvas高 / 750
  6. ctx = $canvas[0].getContext("2d"),//获取canvas的2d绘制对象
  7. $canvasMask = $("#canvas-mask"),//canvas遮罩层
  8. wcancel = $('#w-cancel'),//弹出消耗积分取消按钮
  9. $btn = $("#btn"),//刮奖按钮
  10. explain = $("#explain"),//积分说明框
  11. $change = $("#change"),//剩余次数
  12. data = { count: 0 },//次数
  13. playCreditLimit = '',//是否展示 积分说明框
  14. consumeTotal = '',//消耗积分
  15. empty = false,
  16. dataList = [],
  17. couponId = null,
  18. falglimitType = '',
  19. timer,//轮流提示定时器
  20. errorMessge = '',
  21. playAble = true,
  22. radomData = [],
  23. numFalg = false,//有次数=false
  24. bool = false;//判断是否按下去,true为按下,false未按下
  25. let baseUrl = 'https://ctest.malls.iformall.com/C';
  26. if (window.location.origin == 'https://gametest.malls.iformall.com') {
  27. baseUrl = 'https://ctest.malls.iformall.com/C'
  28. } else if (window.location.origin == 'https://game.malls.iformall.com') {
  29. baseUrl = 'https://c.malls.iformall.com/C'
  30. } else if (window.location.origin == 'https://game.youlane.cn') {
  31. baseUrl = 'https://ciformall.youlane.cn/C'
  32. }
  33. //canvas初始化
  34. init();
  35. function init() {
  36. $.ajax({
  37. url: baseUrl + "/api/game/getOneGame",//json文件位置
  38. type: "GET",//请求方式为get
  39. dataType: "json", //返回数据格式为json
  40. headers: {
  41. 'content-type': 'application/json',
  42. "token": getQueryString('token')
  43. },
  44. data: {
  45. id: getQueryString('id'),
  46. // id:"215366414771421184"
  47. },
  48. success: function (res) {//请求成功完成后要执行的方法
  49. // alert(JSON.stringify(res))
  50. var strHtml = "";
  51. dataList = res.data.couponIdsList;
  52. playCreditLimit = res.data.playCreditLimit
  53. falglimitType = res.data.limitType
  54. if (playCreditLimit >= '0') {
  55. explain.show()
  56. }
  57. id = res.data.id
  58. let totalWeight = 0;
  59. dataList.forEach((item, index) => {
  60. strHtml += '<li class="swiper-slide">';
  61. strHtml += '<img src="' + item.coverImg + '">';
  62. strHtml += '</li>';
  63. totalWeight += Number(item.gameWeight)
  64. for (var i = 0; i < item.gameWeight; i++) {
  65. radomData.push(item)
  66. }
  67. })
  68. let notWinweight = 100 - totalWeight;
  69. let b = {
  70. id: null
  71. }
  72. for (var i = 0; i < notWinweight; i++) {
  73. radomData.push(b)
  74. }
  75. $('.swiper-wrapper').html(strHtml);
  76. //奖品展示
  77. var show = new Swiper(".swiper-container", {
  78. direction: "horizontal",//水平方向滑动。 vertical为垂直方向滑动
  79. loop: false,//是否循环
  80. slidesPerView: 'auto' //自动根据slides的宽度来设定数量
  81. });
  82. getCount();
  83. }
  84. })
  85. $canvasMask.show();
  86. // $change.html(data.count);//显示剩余次数
  87. //设置canvas宽高
  88. $canvas.attr('width', canvasWidth);
  89. $canvas.attr('height', canvasHeight);
  90. //canvas绘图
  91. ctx.beginPath();
  92. ctx.fillStyle = '#999';//刮刮乐图层的填充色
  93. ctx.lineCap = "round";//绘制的线结束时为圆形
  94. ctx.lineJoin = "round";//当两条线交汇时创建圆形边角
  95. ctx.lineWidth = 20;//单次刮开面积
  96. ctx.fillRect(0, 0, canvasWidth, canvasHeight);
  97. ctx.closePath();
  98. ctx.globalCompositeOperation = 'destination-out';//新图像和原图像重合部分变透明
  99. //下面3行代码是为了修复部分手机浏览器不支持destination-out
  100. $canvas.css("display", "none");
  101. $canvas.outerHeight();
  102. $canvas.css("display", "inherit");
  103. }
  104. /**
  105. * 获取剩余中奖次数
  106. */
  107. function getCount() {
  108. $.ajax({
  109. url: baseUrl + "/api/game/getCount",//json文件位置
  110. type: "GET",//请求方式为get
  111. dataType: "json", //返回数据格式为json
  112. headers: {
  113. 'content-type': 'application/json',
  114. // "token":"b49fa2c4-a074-4147-afbe-6913c66705d6",
  115. "token": getQueryString('token')
  116. },
  117. data: {
  118. gameId: getQueryString('id'),
  119. // id:"213206254531641344"
  120. },
  121. success: function (res) {//请求成功完成后要执行的方法
  122. if (res.code == 200) {
  123. if (res.data.playAble) {
  124. playAble = true;
  125. data.count = res.data.playLimit - res.data.playCount;
  126. $('#change').html(data.count);
  127. consumeTotal = res.data.playCredit;
  128. if (data.count <= '0') {
  129. $(integration).html(`${consumeTotal}积分/每次`);
  130. } else {
  131. $(integration).html(`当前游戏免费次数耗尽后${consumeTotal}积分/次`);
  132. }
  133. if (falglimitType == '0') {
  134. if (data.count == -1) {
  135. $('#change-box').hide();
  136. } else {
  137. $('#change-box').html('您总共还有' + data.count + '免费刮奖机会')
  138. }
  139. } else if (falglimitType == '1') {
  140. if (data.count == -1) {
  141. $('#change-box').hide()
  142. } else {
  143. $('#change-box').html('您今天还有' + data.count + '免费刮奖机会')
  144. }
  145. }
  146. if (res.data.playLimit < '0' && playCreditLimit >= "0") {
  147. return// 不设置能免费次数且设置每次消耗积分
  148. }
  149. if (res.data.playLimit < '0') {
  150. data.count = 1000000;
  151. $('#change-box').hide();
  152. } else {
  153. $('#change-box').show();
  154. }
  155. } else {
  156. playAble = false;
  157. if (res.data.playLimit <= '0') {
  158. errorMessge = '您的中奖次数已经达到上限!无法继续参加游戏!'
  159. data.count = 1000000;
  160. $('#change-box').hide();
  161. return;
  162. } else {
  163. if (res.data.AwardLimit == res.data.AwardCount && res.data.AwardLimit != 0) {
  164. errorMessge = '您的中奖次数已经达到上限!无法继续参加游戏!'
  165. data.count = res.data.playLimit - res.data.playCount;
  166. $('#change').html(data.count);
  167. $('#change-box').html('您的中奖次数已经达到上限!无法继续参加游戏!');
  168. $('#change-box').show();
  169. return;
  170. } else if (res.data.playLimit == res.data.playCount) {
  171. errorMessge = '您的剩余次数为0!无法继续参加游戏!'
  172. data.count = 0;
  173. $('#change').html(0);
  174. $('#change-box').html('您的剩余次数为0!无法继续参加游戏!');
  175. $('#change-box').show();
  176. return;
  177. }
  178. }
  179. }
  180. } else {
  181. errorMessge = res.message;
  182. playAble = false;
  183. $('#change').html(0);
  184. $('#change-box').hide();
  185. }
  186. }
  187. })
  188. }
  189. /**
  190. * 记录游戏次数
  191. */
  192. function reduceCount(paramData) {
  193. $.ajax({
  194. url: baseUrl + "/api/game/addActionLog",//json文件位置
  195. type: "POST",//请求方式为get
  196. dataType: "json", //返回数据格式为json
  197. async: true,
  198. headers: {
  199. 'content-type': 'application/json;charset=UTF-8',
  200. "token": getQueryString('token')
  201. },
  202. data: JSON.stringify(paramData),
  203. success: function (res) {//请求成功完成后要执行的方法
  204. // alert('成功了!')
  205. getCount()
  206. }
  207. })
  208. }
  209. wcancel.click(function () {
  210. $("#warnning-box").hide()
  211. $("#warnning-box-bg").hide()
  212. numFalg = false;
  213. })
  214. $("#w-button").click(function () {
  215. $("#warnning-box").hide()
  216. $("#warnning-box-bg").hide()
  217. numFalg = true;
  218. let b = Math.floor(Math.random() * radomData.length)
  219. console.log(radomData[b])
  220. // couponId = radomData[b].couponId
  221. let params = {
  222. // couponId:couponId,
  223. // couponChannelId:radomData[b].id
  224. gameId: getQueryString('id')
  225. }
  226. //查询中奖结果
  227. $.ajax({
  228. url: baseUrl + "/api/game/freeCridetGameGo",//json文件位置
  229. type: "POST",//请求方式为get
  230. dataType: "json", //返回数据格式为json
  231. async: true,
  232. headers: {
  233. 'content-type': 'application/json;charset=UTF-8', "token": getQueryString('token')
  234. },
  235. data: JSON.stringify(params),
  236. success: function (res) {//请求成功完成后要执行的方法
  237. if (res.code == 200) {
  238. getCount()
  239. $canvasMask.hide();
  240. if (res.data) {
  241. var toemdata = res.data
  242. if (res.data.prizeType == 1) {
  243. $('#card .win').html('积分增加+' + toemdata.credit);
  244. $('.winning .red-body p').html('')
  245. $('#card .win').css({
  246. 'font-size': ' 20px',
  247. 'text-align': 'center',
  248. 'color': '#FF6600',
  249. 'line-height': '50px',
  250. 'line-height': '50px',
  251. "background": 'url(../common/image/prize/prize2.png) no-repeat',
  252. 'background-size': '6rem'
  253. })
  254. } else {
  255. $('#card .win').html('')
  256. $canvas.css("background-image", 'url(' + toemdata.coverImg + ')');
  257. $('#card .win').css({
  258. "background": 'url(' + toemdata.coverImg + ') no-repeat',
  259. "background-size": "cover"
  260. });
  261. $('.winning .red-body p').html(toemdata.title + "(点击“我的”查看奖券)");
  262. }
  263. $(".btn").html('再玩一把')
  264. } else {
  265. $('#card .win').html('')
  266. $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)');
  267. $('#card .win').css({
  268. "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat',
  269. "background-size": "cover"
  270. });
  271. $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)');
  272. $(".btn").html('再玩一把')
  273. }
  274. } else if (res.code == 13101) {
  275. $canvasMask.hide();
  276. // $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)');
  277. $('#card .win').css({
  278. // "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat',
  279. "background-size": "cover"
  280. });
  281. $('.winning .red-body p').css({
  282. "line-height": "1.5rem",
  283. "font-size": "0.64rem"
  284. })
  285. $('.winning .red-body p').html('积分不足!');
  286. $(".btn").hide()
  287. }
  288. }
  289. })
  290. })
  291. //点击开始刮奖按钮
  292. $btn.click(function () {
  293. // data.count--;//设定中奖的图片
  294. let b = Math.floor(Math.random() * radomData.length)
  295. console.log(radomData[b])
  296. // couponId = radomData[b].couponId
  297. let params = {
  298. gameId: getQueryString('id')
  299. }
  300. if (playAble) {
  301. if (data.count > 0) {
  302. if (true) {
  303. //查询中奖结果
  304. $.ajax({
  305. url: baseUrl + "/api/game/freeGameGo",//json文件位置
  306. type: "POST",//请求方式为get
  307. dataType: "json", //返回数据格式为json
  308. async: true,
  309. headers: {
  310. 'content-type': 'application/json;charset=UTF-8',
  311. "token": getQueryString('token')
  312. },
  313. data: JSON.stringify(params),
  314. success: function (res) {//请求成功完成后要执行的方法
  315. if (res.code == 200) {
  316. getCount()
  317. $canvasMask.hide();
  318. if (res.data) {
  319. var toemdata = res.data
  320. if (res.data.prizeType == 1) {
  321. $('#card .win').html('积分增加+' + toemdata.credit);
  322. $('.winning .red-body p').html('')
  323. $('#card .win').css({
  324. 'font-size': ' 20px',
  325. 'text-align': 'center',
  326. 'color': '#FF6600',
  327. 'line-height': '50px',
  328. "background": 'url(../common/image/prize/prize2.png) no-repeat',
  329. 'background-size': '6rem'
  330. })
  331. $(".btn").html('再玩一把')
  332. } else {
  333. $('#card .win').html('')
  334. $canvas.css("background-image", 'url(' + toemdata.coverImg + ')');
  335. $('#card .win').css({
  336. "background": 'url(' + toemdata.coverImg + ') no-repeat',
  337. "background-size": "cover"
  338. });
  339. $('.winning .red-body p').html(toemdata.title + "(点击“我的”查看奖券)");
  340. $(".btn").html('再玩一把')
  341. }
  342. } else {
  343. // reduceCount(paramContData);
  344. $('#card .win').html('')
  345. $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)');
  346. $('#card .win').css({
  347. "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat',
  348. "background-size": "cover"
  349. });
  350. $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)');
  351. $(".btn").html('再玩一把')
  352. }
  353. } else {
  354. // reduceCount(paramContData);
  355. $('#card .win').html('')
  356. $canvasMask.hide();
  357. $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)');
  358. $('#card .win').css({
  359. "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat',
  360. "background-size": "cover"
  361. });
  362. $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)');
  363. $(".btn").html('再玩一把')
  364. }
  365. }
  366. })
  367. } else {
  368. // reduceCount(paramContData);
  369. $canvasMask.hide();
  370. $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)');
  371. $('#card .win').css({
  372. "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat',
  373. "background-size": "cover"
  374. });
  375. $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)');
  376. $(".btn").html('再玩一把')
  377. }
  378. } else {
  379. console.log(numFalg, "??");
  380. if (playCreditLimit >= '0') {
  381. //可以使用积分玩
  382. if (!numFalg) {//消耗积分提示框只会弹出一次
  383. $('#warnning-box-bg').show();
  384. $('#warnning-box').show();
  385. if (data.count == -1) {
  386. $('#w-title').html("将消耗" + consumeTotal + '积分');
  387. } else {
  388. $('#w-title').html("免费次数已耗尽,将消耗" + consumeTotal + '积分');
  389. }
  390. } else {
  391. numFalg = true;
  392. let b = Math.floor(Math.random() * radomData.length)
  393. console.log(radomData[b])
  394. // couponId = radomData[b].couponId
  395. let params = {
  396. // couponId:couponId,
  397. // couponChannelId:radomData[b].id
  398. gameId: getQueryString('id')
  399. }
  400. //查询中奖结果
  401. $.ajax({
  402. url: baseUrl + "/api/game/freeCridetGameGo",//json文件位置
  403. type: "POST",//请求方式为get
  404. dataType: "json", //返回数据格式为json
  405. async: true,
  406. headers: {
  407. 'content-type': 'application/json;charset=UTF-8',
  408. "token": getQueryString('token')
  409. },
  410. data: JSON.stringify(params),
  411. success: function (res) {//请求成功完成后要执行的方法
  412. if (res.code == 200) {
  413. getCount()
  414. $canvasMask.hide();
  415. if (res.data) {
  416. var toemdata = res.data
  417. if (res.data.prizeType == 1) {
  418. $('#card .win').html('积分增加+' + toemdata.credit);
  419. $('.winning .red-body p').html('')
  420. $('#card .win').css({
  421. 'font-size': ' 20px',
  422. 'text-align': 'center',
  423. 'color': '#FF6600',
  424. 'line-height': '50px',
  425. "background": 'url(../common/image/prize/prize2.png) no-repeat',
  426. 'background-size': '6rem'
  427. })
  428. } else {
  429. $('#card .win').html('')
  430. $canvas.css("background-image", 'url(' + toemdata.coverImg + ')');
  431. $('#card .win').css({
  432. "background": 'url(' + toemdata.coverImg + ') no-repeat',
  433. "background-size": "cover"
  434. });
  435. $('.winning .red-body p').html(toemdata.title + "(点击“我的”查看奖券)");
  436. }
  437. $(".btn").html('再玩一把')
  438. } else {
  439. $('#card .win').html('')
  440. $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)');
  441. $('#card .win').css({
  442. "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat',
  443. "background-size": "cover"
  444. });
  445. $('.winning .red-body p').html('未中奖!(点击“我的”查看奖券)');
  446. $(".btn").html('再玩一把')
  447. }
  448. } else if (res.code == 13101) {
  449. $canvasMask.hide();
  450. // $canvas.css("background-image", 'url(../common/image/redPack/weizhongjiang.png)');
  451. $('#card .win').css({
  452. // "background": 'url(../common/image/redPack/weizhongjiang.png) no-repeat',
  453. "background-size": "cover"
  454. });
  455. $('.winning .red-body p').css({
  456. "line-height": "1.5rem",
  457. "font-size": "0.64rem"
  458. })
  459. $('.winning .red-body p').html('积分不足!');
  460. $(".btn").hide()
  461. }
  462. }
  463. })
  464. }
  465. } else {
  466. $('#warnning-box-bg').show();
  467. $('#warnning-box').show();
  468. $('#w-title').html("当前可用次数已耗尽");
  469. return
  470. }
  471. }
  472. } else {
  473. $('#warnning-box-bg').show();
  474. $('#warnning-box').show();
  475. $('#w-title').html(errorMessge);
  476. }
  477. });
  478. /*canvas事件*/
  479. //pc端
  480. $canvas.on({
  481. //鼠标按下
  482. mousedown: function (e) {
  483. e = e || window.event;
  484. e.preventDefault();
  485. bool = true;
  486. var x = e.pageX - $(this).offset().left,//鼠标距离该页面left的值 - 元素左侧距离文档的left
  487. y = e.pageY - $(this).offset().top;
  488. ctx.moveTo(x, y);
  489. //鼠标移动
  490. $canvas.on('mousemove', function (e) {
  491. if (bool) {
  492. var x = e.pageX - $(this).offset().left;
  493. var y = e.pageY - $(this).offset().top;
  494. ctx.lineTo(x, y);
  495. ctx.stroke();
  496. clear();
  497. }
  498. });
  499. },
  500. //鼠标按键抬起
  501. mouseup: function () {
  502. bool = false;
  503. }
  504. });
  505. //移动端
  506. $canvas.on("touchstart", function (e) {
  507. e = e || window.event;
  508. e.preventDefault();
  509. if (typeof e.touches !== 'undefined') {
  510. e = e.touches[0];//获取触点
  511. }
  512. var x = e.pageX - $(this).offset().left,
  513. y = e.pageY - $(this).offset().top;
  514. ctx.moveTo(x, y);
  515. //touchmove事件
  516. $canvas.on('touchmove', eventMove);
  517. });
  518. //移动事件
  519. function eventMove(e) {
  520. e = e || window.event;
  521. e.preventDefault();
  522. if (typeof e.touches !== 'undefined') {
  523. e = e.touches[0];
  524. }
  525. var x = e.pageX - $(this).offset().left,
  526. y = e.pageY - $(this).offset().top;
  527. ctx.lineTo(x, y);
  528. ctx.stroke();
  529. clear();
  530. }
  531. //清除画布
  532. function clear() {
  533. if (empty) return;
  534. var data = ctx.getImageData(0, 0, canvasWidth, canvasHeight).data,//得到canvas的全部数据
  535. half = 0;
  536. //length = canvasWidth * canvasHeight * 4,一个像素块是一个对象rgba四个值,a范围为0~255
  537. for (var i = 3, length = data.length; i < length; i += 4) {//因为有rgba四个值,下标0开始,所以初始i=3
  538. data[i] === 0 && half++;//存在imageData对象时half加1 PS:该像素区域透明即为不存在该对象
  539. }
  540. //当刮开的区域大于等于20%时,则可以开始处理结果
  541. if (half >= canvasWidth * canvasHeight * 0.2) {
  542. ctx.clearRect(0, 0, canvasWidth, canvasHeight);//清空画布
  543. empty = true;
  544. win();//调用中奖信息
  545. //随机生成一个优惠券
  546. }
  547. }
  548. //点击跳回小程序奖券列表
  549. $('#myWin').click(function () {
  550. wx.miniProgram.redirectTo({
  551. url: '/pages/couponorder/index/index' + "?token=" + getQueryString('token') + "&gameId=" + getQueryString('gameId') + "&id=" + getQueryString('id') + '&from=h5'
  552. })
  553. })
  554. //中奖信息提示
  555. $("#close,.win,.btn").click(function () {
  556. empty = false;
  557. init();
  558. });
  559. //奖品展示
  560. var show = new Swiper(".swiper-container", {
  561. direction: "horizontal",//水平方向滑动。 vertical为垂直方向滑动
  562. loop: false,//是否循环
  563. slidesPerView: "auto"//自动根据slides的宽度来设定数量
  564. });
  565. //返回首页
  566. $("#gotoindex").click(function () {
  567. wx.miniProgram.redirectTo({
  568. url: '/pages/index/index'
  569. })
  570. });
  571. });