app.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656
  1. $.fn.extend({
  2. animateCss: function (animationName, callback) {
  3. var animationEnd = (function (el) {
  4. var animations = {
  5. animation: 'animationend',
  6. OAnimation: 'oAnimationEnd',
  7. MozAnimation: 'mozAnimationEnd',
  8. WebkitAnimation: 'webkitAnimationEnd',
  9. };
  10. for (var t in animations) {
  11. if (el.style[t] !== undefined) {
  12. return animations[t];
  13. }
  14. }
  15. })(document.createElement('div'));
  16. this.addClass('animated ' + animationName).one(animationEnd, function () {
  17. //$(this).removeClass('animated ' + animationName);
  18. callback && callback.call(this, $(this), animationName);
  19. });
  20. return this;
  21. },
  22. });
  23. var app = {
  24. /**
  25. * 请求id
  26. */
  27. id: location.search.substring(1).replace(/ID=|\&pic=1/gi, ''),
  28. /**
  29. * 切换画风id
  30. */
  31. switchId: 0,
  32. /**
  33. * 切换风景id
  34. */
  35. bgId: 0,
  36. /**
  37. * 切换风格类型
  38. */
  39. type: 1,
  40. /**
  41. * 我的相片列表
  42. */
  43. imgList: [],
  44. /**
  45. * 广告切换
  46. */
  47. adsSwiper: function () {
  48. var html = [];
  49. var $elem = $('.ads-swiper')
  50. __config.adsPath && __config.adsPath.forEach(function (item) {
  51. html.push('<div class="swiper-slide"><a href="' + (item.link || '#') + '"><img src="' + (item.image || 'static/images/adds/4dart.jpg') + '"><a></div>')
  52. })
  53. if (!html.length) {
  54. html.push('<div class="swiper-slide"><a href="#"><img src="static/images/adds/4dart.jpg"><a></div>')
  55. }
  56. $elem.find('.swiper-wrapper').html(html.join(''))
  57. new Swiper($elem[0], {
  58. autoplay: {
  59. delay: 3000,
  60. stopOnLastSlide: false,
  61. disableOnInteraction: true,
  62. },
  63. pagination: {
  64. el: $elem.find('.swiper-pagination')[0],
  65. bulletClass: 'my-bullet'
  66. }
  67. });
  68. },
  69. /**
  70. * 画风切换
  71. */
  72. stlSwiper: function () {
  73. var $elem = $('.stl-swiper')
  74. if (this.stlSwiper.swiper) {
  75. this.stlSwiper.swiper.destroy()
  76. }
  77. let html = ''
  78. if (this.type == 2) {
  79. html = `<div class="swiper-wrapper">
  80. <div data-msg="1" class="swiper-slide style-1"></div>
  81. <div data-msg="2" class="swiper-slide style-2"></div>
  82. <div data-msg="3" class="swiper-slide style-3"></div>
  83. <div data-msg="4" class="swiper-slide style-4"></div>
  84. <div data-msg="5" class="swiper-slide style-5"></div>
  85. <div data-msg="6" class="swiper-slide style-6"></div>
  86. </div>`
  87. } else {
  88. html = `<div class="swiper-wrapper">
  89. <div data-msg="1" class="swiper-slide style-1"></div>
  90. <div data-msg="2" class="swiper-slide style-2"></div>
  91. <div data-msg="3" class="swiper-slide style-3"></div>
  92. <div data-msg="4" class="swiper-slide style-4"></div>
  93. <div data-msg="5" class="swiper-slide style-5"></div>
  94. <div data-msg="6" class="swiper-slide style-6"></div>
  95. </div>`
  96. }
  97. $elem.html(html)
  98. this.stlSwiper.swiper = new Swiper($elem[0], {
  99. //speed: 300,
  100. freeMode: true,
  101. slidesPerView: 3.5,
  102. });
  103. var time;
  104. $elem.find('.swiper-slide').on('click', function () {
  105. var $this = $(this);
  106. var msg = $this.data('msg')
  107. app.checkOperationTimeout()
  108. let tmp = ''
  109. if (app.type == 2) {
  110. if (app.bgId == msg) {
  111. // 已选择的不再执行
  112. return;
  113. }
  114. tmp = 'bg '
  115. app.bgId = msg
  116. } else {
  117. if (app.switchId == msg) {
  118. // 已选择的不再执行
  119. return;
  120. }
  121. tmp = 'switch '
  122. app.switchId = msg
  123. }
  124. if (!app.sendCheck()) {
  125. return;
  126. }
  127. if (time && (Date.now() - time < __config.switchInterval * 1000)) {
  128. app.showLoadingSwitch(function () {
  129. $elem.find('.swiper-slide').removeClass('active');
  130. $this.addClass('active');
  131. })
  132. } else {
  133. $elem.find('.swiper-slide').removeClass('active')
  134. $this.addClass('active')
  135. }
  136. time = Date.now();
  137. app.send(tmp + msg)
  138. });
  139. $elem.find('.swiper-slide').each(function () {
  140. var style = $(this).data('msg');
  141. if (style) {
  142. var img = new Image()
  143. img.src = (__config.staticUrl || 'static') + `/images/styles${app.type == 2 ? '1' : ''}/` + style + '-active.png';
  144. }
  145. })
  146. },
  147. /**
  148. * 我的相片滚动
  149. */
  150. picSwiper: function () {
  151. if (this.picSwiper.swiper) {
  152. this.picSwiper.swiper.destroy()
  153. }
  154. this.picSwiper.swiper = new Swiper($('.pic-swiper')[0], {
  155. speed: 300,
  156. slidesPerView: 'auto',
  157. freeMode: true,
  158. direction: 'vertical',
  159. setWrapperSize: true,
  160. scrollbar: {
  161. el: '.swiper-scrollbar',
  162. },
  163. });
  164. },
  165. events: function () {
  166. var self = this,
  167. $picList = $('.my-pic-list');
  168. if (__config.link) {
  169. $('.logo').attr('href', __config.link)
  170. }
  171. $picList.find('header').on('touchstart', function (event) {
  172. event.preventDefault();
  173. });
  174. $picList.find('.btn-back').on('touchend', function (event) {
  175. event.preventDefault();
  176. $picList.hide()
  177. });
  178. $('.swt-style').on('click', 'a', function (event) {
  179. self.type = $(event.currentTarget).data('id')
  180. $(event.currentTarget).addClass("active").siblings().removeClass("active");
  181. self.stlSwiper()
  182. if (self.type == 2) {
  183. $('.stl-swiper').addClass('stl-swiper1')
  184. } else {
  185. $('.stl-swiper').removeClass('stl-swiper1')
  186. }
  187. $('.swiper-wrapper').find('.swiper-slide').removeClass('active');
  188. $(`.swiper-slide[data-msg=${self.type == 2 ? self.bgId : self.switchId}]`).addClass('active');
  189. });
  190. $('.btn-pic-list').on('click', function (event) {
  191. app.send('close')
  192. $picList.show()
  193. self.renderPictures()
  194. });
  195. $('.btn-pic-take').on('click', function (event) {
  196. //显示图片拖拉功能
  197. $('.arrows').css('display', 'block')
  198. app.checkOperationTimeout()
  199. if (!app.sendCheck()) {
  200. return;
  201. }
  202. self.send('photo empty')
  203. });
  204. $('.app-view .close').on('click', function (event) {
  205. self.hideView()
  206. });
  207. $('.app-alert .btn-use').on('click', function () {
  208. var $alert = $('.app-alert')
  209. app.hideMask()
  210. $alert.removeClass($alert.data('class') + ' animated zoomIn')
  211. var text = $(this).text();
  212. if (text == '尝试使用' || text == '再次使用') {
  213. app.send('request')
  214. }
  215. })
  216. //点击刷新页面
  217. $('.btn-link').on('click', function () {
  218. window.location.reload()
  219. })
  220. $('.app-alert .btn-link').on('click', function () {
  221. if ($(this).text() == '重新拍照') {
  222. var $alert = $('.app-alert')
  223. app.hideMask()
  224. $alert.removeClass($alert.data('class') + ' animated zoomIn')
  225. $('.btn-pic-take').click()
  226. }
  227. })
  228. },
  229. showMask: function (clazz) {
  230. var $elem = $('.app-mask');
  231. if (clazz) {
  232. $elem.addClass(this.showMask._clazz = clazz)
  233. }
  234. // $elem.css('display', 'block')
  235. $elem.css('display', 'none')
  236. },
  237. hideMask: function () {
  238. var $elem = $('.app-mask');
  239. if (this.showMask._clazz) {
  240. $elem.removeClass(this.showMask._clazz)
  241. this.showMask._clazz = null
  242. }
  243. $elem.css('display', 'none')
  244. },
  245. showAlert: function (msg, icon) {
  246. this.showMask();
  247. var $alert = $('.app-alert');
  248. var $btns = $alert.find('.btns a');
  249. $alert.data('class', icon).addClass(icon).animateCss('zoomIn')
  250. $alert.find('.tips').html(msg)
  251. if (/error|used/.test(icon)) {
  252. $btns.eq(0).text('尝试使用')
  253. } else if (/timeout|stop/.test(icon)) {
  254. $btns.eq(0).text('再次使用')
  255. } else if (/fail/.test(icon)) {
  256. $btns.eq(0).text('重选画风')
  257. }
  258. if (/used|timeout|stop|error/.test(icon)) {
  259. $btns.eq(1).text('刷新页面').attr('href', $btns.eq(1).data('href'))
  260. } else if (/fail/.test(icon)) {
  261. $btns.eq(1).text('重新拍照').attr('href', 'javascript:;')
  262. }
  263. },
  264. showActionTips: function (delay, done) {
  265. var $elem = $('.app-action-tips');
  266. var flag = flag || 1;
  267. delay = delay || 1000;
  268. app.showMask('white')
  269. $elem.find('.content').hide()
  270. $elem.find('.content.face-' + flag).show()
  271. $elem.animateCss('zoomIn', function () {
  272. var timer = setInterval(() => {
  273. if (++flag > 6) {
  274. $elem.removeClass('animated zoomIn');
  275. clearInterval(timer)
  276. if (!app.is_action) {
  277. app.hideMask('white')
  278. done && done()
  279. }
  280. return;
  281. }
  282. $elem.find('.content').hide()
  283. $elem.find('.content.face-' + flag).show()
  284. }, delay);
  285. })
  286. },
  287. showLoading: function (msg) {
  288. msg = msg || '相片正在生成中,请耐心等候'
  289. this.showMask();
  290. $('.app-action-tips .content').css('display', 'none');
  291. $('.app-action-tips .content.loading').css('display', 'block').find('.tips').html(msg);
  292. $('.app-action-tips').addClass('animated zoomIn') //.animateCss('zoomIn')
  293. },
  294. hideLoading: function () {
  295. this.hideMask();
  296. $('.app-action-tips .content.loading').css('display', 'none');
  297. $('.app-action-tips').removeClass('animated zoomIn')
  298. },
  299. showLoadingSwitch: function (done) {
  300. this.showMask();
  301. $('.app-action-tips .content').css('display', 'none');
  302. $('.app-action-tips .content.loading-switch').css('display', 'block')
  303. $('.app-action-tips .content.loading-switch .tips').html('正在切换' + (app.type == 2 ? '风景' : '画风'))
  304. $('.app-action-tips').animateCss('zoomIn', function ($elem, aname) {
  305. setTimeout(function () {
  306. app.hideMask();
  307. $elem.removeClass('animated ' + aname);
  308. done && done()
  309. }, 1000);
  310. })
  311. },
  312. renderPictures() {
  313. var html = [];
  314. console.log('====================================');
  315. console.log(this.imgList);
  316. console.log('====================================');
  317. this.imgList.forEach(function (item) {
  318. html.push('<div class="swiper-slide">');
  319. html.push(' <div class="img' + (item.vertical ? ' vertical' : '') + '">');
  320. html.push(' <img src="' + item.url + '?v=' + Date.now() + '">');
  321. html.push(' </div>');
  322. html.push(' <div class="info">');
  323. html.push(' <div class="time">');
  324. html.push(' ' + item.datetime);
  325. html.push(' </div>');
  326. html.push(' <div class="style style-' + item.id + '"></div>');
  327. html.push(' </div>');
  328. html.push('</div>');
  329. })
  330. if (!html.length) {
  331. html.push('<div class="swiper-slide" style="color:#999;border-bottom:none">暂无相片</div>');
  332. }
  333. $('.pic-swiper .swiper-wrapper').html(html.join(''));
  334. $('.pic-swiper .swiper-wrapper img').click(function (e) {
  335. wx.previewImage({
  336. current: e.currentTarget.src.split('?v=')[0],
  337. urls: app.imgList.map(function (item) {
  338. return item.url
  339. })
  340. });
  341. });
  342. this.picSwiper();
  343. },
  344. showView: function (json) {
  345. this.hideLoading()
  346. setTimeout(function () {
  347. // app.showMask();
  348. // $('.app-view').animateCss('zoomIn', function () {
  349. // app.send('close')
  350. // }).find('.img').html('<img src="' + json.url + '?v=' + Date.now() + '">')
  351. var img = new Image()
  352. img.src = json.url + '?v=' + Date.now()
  353. img.onload = img.onerror = function () {
  354. app.showMask();
  355. var $view = $('.app-view')
  356. if (img.width < img.height) {
  357. json.vertical = true
  358. $view.addClass('vertical')
  359. }
  360. app.imgList.unshift(json);
  361. $view.animateCss('zoomIn', function () {
  362. app.send('close')
  363. }).find('.img').html('<img src="' + json.url + '?v=' + Date.now() + '">')
  364. }
  365. }, 300);
  366. },
  367. hideView: function () {
  368. this.hideMask();
  369. $('.app-view').removeClass('animated zoomIn')
  370. },
  371. connection: function () {
  372. console.log('正在尝试连接')
  373. try {
  374. var timer
  375. this.websocket = new WebSocket(__config.ws);
  376. this.websocket.onclose = function (e) {
  377. app.is_connect = false
  378. app.checkTimeout(true)
  379. app.checkOperationTimeout(true)
  380. console.error('连接失败', e)
  381. setTimeout(function () {
  382. app.connection()
  383. }, 5000)
  384. }.bind(this);
  385. this.websocket.onopen = function (msg) {
  386. this.is_connect = true
  387. this.is_connect_ok = null
  388. this.send('request')
  389. }.bind(this);
  390. this.websocket.onmessage = function (msg) {
  391. console.log(msg.data)
  392. if (typeof msg.data == "string") {
  393. switch (msg.data) {
  394. case 'error 101':
  395. console.log('发送的消息有误');
  396. break;
  397. case 'error 102':
  398. //pop_tip('连接打印机失败<br/>请重新刷新页面');
  399. break;
  400. case 'error 302':
  401. app.hideLoading()
  402. app.showAlert('网络异常,生成失败', 'fail')
  403. break;
  404. case 'error 404':
  405. app.switchId = 0;
  406. app.showAlert('切换图片失败', 'error');
  407. break;
  408. case 'error 500':
  409. app.is_connect_ok = false
  410. if (app.is_send_msg) {
  411. app.hideLoading()
  412. app.showAlert('网络异常,请稍后再试', 'error');
  413. }
  414. break;
  415. case 'error 600':
  416. //console.log('未定义的消息');
  417. break;
  418. case 'error 707':
  419. app.showAlert('二维码不正确', 'error')
  420. break;
  421. case 'error 808':
  422. app.is_lose_used = true
  423. if (app.is_send_msg) {
  424. app.showAlert('当前画屏正在被使用,请稍后', 'used');
  425. }
  426. break;
  427. case 'error 202':
  428. break;
  429. case 'error 909':
  430. app.is_other_used = true;
  431. if (app.is_send_msg) {
  432. app.showAlert('当前画屏正在被使用,请稍后', 'used');
  433. }
  434. break;
  435. case 'ok 200':
  436. console.log('切换图片成功')
  437. break;
  438. case 'ok 201':
  439. console.log('操作成功')
  440. app.is_connect_ok = null
  441. app.checkTimeout(true)
  442. app.checkOperationTimeout(true)
  443. break;
  444. case 'ok 300':
  445. app.hideLoading();
  446. app.is_lose_used = false;
  447. app.is_other_used = false;
  448. app.is_connect_ok = true;
  449. app.checkTimeout()
  450. app.checkOperationTimeout()
  451. break;
  452. case 'ok 301':
  453. console.log('拍照成功,开始等待照片')
  454. app.is_action = false;
  455. app.checkTimeout(true)
  456. app.checkOperationTimeout(true)
  457. app.showActionTips(1000, function () {
  458. app.showLoading()
  459. });
  460. timer = setTimeout(function () {
  461. app.send('close')
  462. setTimeout(() => {
  463. app.hideLoading()
  464. app.showAlert('网络异常,生成失败', 'fail')
  465. }, 500);
  466. }, 20000);
  467. break;
  468. case 'ok 1000':
  469. app.is_lose_used = false;
  470. app.is_other_used = false;
  471. break;
  472. default:
  473. try {
  474. app.is_action = true;
  475. timer && clearTimeout(timer)
  476. var json = JSON.parse(msg.data)
  477. if (json.url) {
  478. console.log('获取图片成功');
  479. // 新增内容
  480. $('.myImg').attr('src', json.url)
  481. $('.BAC').css('display', 'block')
  482. $('.but').css('display', 'block')
  483. app.showView(json)
  484. }
  485. } catch (error) {
  486. console.error(error)
  487. }
  488. break;
  489. }
  490. app.is_send_msg = false
  491. } else {
  492. console.log("error 600");
  493. }
  494. }.bind(this);
  495. } catch (error) {
  496. console.error(error)
  497. setTimeout(function () {
  498. app.connection()
  499. }, 5000)
  500. }
  501. },
  502. send: function (msg) {
  503. if (msg === 'request') {
  504. this.websocket.send(msg + ' ' + this.id)
  505. } else if (msg === 'close') {
  506. this.websocket.send(msg + ' 0')
  507. } else {
  508. if (app.is_connect_ok == null && !app.is_other_used) {
  509. app.websocket.send('request ' + this.id)
  510. }
  511. setTimeout(function () {
  512. app.websocket.send(msg)
  513. }, 300);
  514. }
  515. },
  516. sendCheck() {
  517. if (!this.is_connect) {
  518. app.showAlert('网络异常,请稍后再试', 'error');
  519. return false;
  520. } else if (this.is_other_used) {
  521. app.showAlert('当前画屏正在被使用,请稍后', 'used');
  522. return false;
  523. } else if (this.is_lose_used) {
  524. app.showAlert('当前画屏正在被使用,请稍后', 'used');
  525. return false;
  526. } else if (this.is_connect_ok === false) {
  527. app.showAlert('网络异常,请稍后再试', 'error');
  528. return false;
  529. }
  530. this.is_send_msg = true;
  531. return true;
  532. },
  533. checkOperationTimeout(stop) {
  534. this.operationTimer && clearTimeout(this.operationTimer)
  535. if (stop) {
  536. // 暂停检测
  537. return
  538. }
  539. this.operationTimer = setTimeout(function () {
  540. if (app.is_connect_ok) {
  541. app.send('close')
  542. app.showAlert('因您长时间未使用<br>已无法操作艺术照一体机', 'timeout')
  543. }
  544. }, (__config.noOperationTimeout || 30) * 1000);
  545. },
  546. checkTimeout(stop) {
  547. this.timeoutTimer && clearTimeout(this.timeoutTimer)
  548. if (stop) {
  549. // 暂停检测
  550. return
  551. }
  552. // 强制超时结束控制 180s
  553. this.timeoutTimer = setTimeout(function () {
  554. if (app.is_connect_ok) {
  555. app.send('close')
  556. app.showAlert('抱歉,因您长时间使用<br>让下一位小伙伴体验吧', 'timeout')
  557. }
  558. }, (__config.timeout || 180) * 1000);
  559. },
  560. render: function () {
  561. this.connection()
  562. this.events()
  563. this.adsSwiper()
  564. this.stlSwiper()
  565. this.picSwiper()
  566. // this.imgList.push({
  567. // "id": 7,
  568. // "url": "http://ost.4dage.com/4dart/img/31913592.jpg",
  569. // "datetime": "2018年10月29日 16:27:26"
  570. // })
  571. }
  572. }
  573. app.render()
  574. window.onbeforeunload = function () {
  575. try {
  576. app.websocket.close();
  577. app.websocket = null;
  578. } catch (ex) { }
  579. };
  580. //app.showAlert('抱歉,因您长时间使用<br>让下一位小伙伴体验吧', 'timeout')
  581. //app.showAlert('因您长时间未使用<br>已无法操作艺术照一体机', 'stop')
  582. //app.showAlert('当前画屏正在被使用,请稍后', 'used')
  583. //app.showAlert('网络异常,请稍后再试', 'error')
  584. //app.showAlert('网络异常,生成失败', 'fail')
  585. //app.showAlert('您已丢失使用权', 'used');