WXtrialInterface.html 42 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title></title>
  6. <meta name="x5-orientation" content="portrait" />
  7. <meta name="screen-orientation" content="portrait" />
  8. <meta name="apple-mobile-web-app-capable" content="yes" />
  9. <meta
  10. name="viewport"
  11. content="width=device-width, initial-scale=1, user-scalable=no"
  12. />
  13. <!-- 删除苹果默认的工具栏和菜单栏 -->
  14. <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  15. <!-- 设置苹果工具栏颜 -->
  16. <meta name="format-detection" content="telphone=no, email=no" />
  17. <!-- 忽略页面中的数字识别为电话,忽略email识别 -->
  18. <!-- 启用360浏览器的极速模(webkit) -->
  19. <meta name="renderer" content="webkit" />
  20. <!-- 避免IE使用兼容模式 -->
  21. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  22. <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑 -->
  23. <meta name="HandheldFriendly" content="true" />
  24. <!-- 微软的老式浏览 -->
  25. <meta name="MobileOptimized" content="320" />
  26. <!-- 不能旋转,问题出在这 -->
  27. <!-- UC强制全屏 -->
  28. <meta name="full-screen" content="yes" />
  29. <!-- QQ强制全屏 -->
  30. <meta name="x5-fullscreen" content="true" />
  31. <!-- UC应用模式 -->
  32. <meta name="browsermode" content="application" />
  33. <!-- QQ应用模式 -->
  34. <meta name="x5-page-mode" content="app" />
  35. <!-- windows phone 点击无高 -->
  36. <meta name="msapplication-tap-highlight" content="no" />
  37. <link rel="stylesheet" type="text/css" href="css/WXtrialInterface.css" />
  38. <link
  39. rel="stylesheet"
  40. href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css"
  41. />
  42. <link
  43. rel="stylesheet"
  44. href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css"
  45. />
  46. </head>
  47. <body class="scroll h-player" style="overscroll-behavior: contain">
  48. <div class="container" id="player">
  49. <div class="muted" id="btnMuted">
  50. <div class="control-right-img" data-id="1">
  51. <img src="../static/img/xuanfu_icon.png" />
  52. </div>
  53. </div>
  54. <div id="wine">
  55. <div id="box">
  56. <canvas id="playCanvas" width="450" height="800"></canvas>
  57. </div>
  58. </div>
  59. <div class="leftmains">
  60. <div class="PictureQualityMain">
  61. <div class="PictureQuality" data-id="4">高清</div>
  62. <div class="PictureQuality avit" data-id="3">标清</div>
  63. <div class="PictureQuality" data-id="2">极速</div>
  64. </div>
  65. <div class="operation">
  66. <div class="upload" id="showsuss" data-text="uploads">
  67. <img src="../static/img/wx/shangchuan_icon.png" />
  68. <div>上传</div>
  69. </div>
  70. <div class="upload" onclick="showShearPlate()" data-text="Shearplate">
  71. <img src="../static/img/wx/jianqieban_icon.png" />
  72. <div>剪贴板</div>
  73. </div>
  74. <div class="upload" id="upload" data-text="Signout">
  75. <img src="../static/img/wx/tuichu_icon.png" />
  76. <div>退出</div>
  77. </div>
  78. </div>
  79. </div>
  80. <div class="bottommains">
  81. <div class="botmat1">
  82. <div class="botmat1img" data-text="gengduo">
  83. <img src="../static/img/wx/gengduo_icon.png" />
  84. </div>
  85. </div>
  86. <div class="botmat1">
  87. <div class="botmat1img" data-text="home">
  88. <img src="../static/img/wx/home_icon.png" />
  89. </div>
  90. </div>
  91. <div class="botmat1">
  92. <div class="botmat1img" data-text="return">
  93. <img src="../static/img/wx/fanhui_icon.png" />
  94. </div>
  95. </div>
  96. </div>
  97. <img class="loading loading_sceen_pic" />
  98. </div>
  99. <div class="mask">
  100. <div class="box-shear-plate"></div>
  101. <img
  102. class="close"
  103. onclick="handleClose()"
  104. src="img/guanbi_icon@2x.png"
  105. alt=""
  106. />
  107. </div>
  108. <div class="weui-mask_transparent"></div>
  109. <div class="weui-toast weui_loading_toast weui-toast--visible">
  110. <div class="weui_loading">
  111. <i class="weui-loading weui-icon_toast"></i>
  112. </div>
  113. <p class="weui-toast_content">数据加载中</p>
  114. </div>
  115. <div class="try-use-wrap">
  116. <div class="try-use-container">
  117. <video
  118. width="100%"
  119. height="100%"
  120. id="source"
  121. autoplay="autoplay"
  122. loop="loop"
  123. webkit-playsinline="true"
  124. playsinline="true"
  125. x5-video-player-type="h5-page"
  126. >
  127. 您的浏览器不支持 video 标签。
  128. </video>
  129. <div class="time-close-wrap"><span class="time-node"></span> 关闭</div>
  130. </div>
  131. </div>
  132. <div class="buy-phone-wrap">
  133. <div class="bug-wrap">
  134. <div class="bug-title">获得极致体验服务请购买云手机</div>
  135. <div class="btn-list">
  136. <div class="btn cannel-btn">取消</div>
  137. <div class="btn go-bug">去购买</div>
  138. </div>
  139. </div>
  140. </div>
  141. <div class="look-wrap">
  142. <div class="bug-wrap">
  143. <div class="bug-title">关闭广告会退出云手机是否继续观看</div>
  144. <div class="btn-list">
  145. <div class="btn cannel-btn cannel-ad-btn">放弃</div>
  146. <div class="btn go-bug looking">继续观看</div>
  147. </div>
  148. </div>
  149. </div>
  150. <script
  151. type="text/javascript"
  152. src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"
  153. ></script>
  154. <script src="https://lf1-cdn-tos.bytegoofy.com/goofy/developer/jssdk/jssdk-1.0.3.js"></script>
  155. <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
  156. <!-- ffm软解 -->
  157. <script type="text/javascript" src="helper.js"></script>
  158. <script type="text/javascript" src="jquery-weui.min.js"></script>
  159. <script type="text/javascript" src="pcm-player.js"></script>
  160. <script type="text/javascript" src="webgl.js"></script>
  161. <script
  162. type="text/javascript"
  163. src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"
  164. ></script>
  165. <script
  166. type="text/javascript"
  167. src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"
  168. ></script>
  169. <script type="text/javascript">
  170. $(function () {
  171. //手指滑动多少距离就认为是滑成功
  172. //这个值不能太大,否则影响斜着滑动时,垂直滑动的流畅性,也不能太小,太灵敏也不好
  173. var diffXDistance = 50;
  174. //当前滑动的对象
  175. var currentObject;
  176. //上一次滑动的对象
  177. var lastObject;
  178. //是否可以左右滑动,在上下滑的时候禁止左右滑
  179. var canSlide = true;
  180. //用于记录按下的点
  181. var startPoint;
  182. $('.slide-content').css({
  183. width: $('.slide-wrapper').width(),
  184. });
  185. $('.slide-scroll')
  186. .css({
  187. width:
  188. $('.slide-wrapper').width() + $('.slide-content-button').width(),
  189. })
  190. .on('touchstart', function (e) {
  191. currentObject = this;
  192. startPoint = {
  193. x: e.originalEvent.changedTouches[0].pageX,
  194. y: e.originalEvent.changedTouches[0].pageY,
  195. };
  196. })
  197. .on('touchmove', function (e) {
  198. //如果是左右滑动,就禁止上下的滑动
  199. //如果是上下的滑动,就禁止左右滑动
  200. if (
  201. Math.abs(e.originalEvent.changedTouches[0].pageX - startPoint.x) >
  202. Math.abs(e.originalEvent.changedTouches[0].pageY - startPoint.y)
  203. ) {
  204. event.preventDefault();
  205. } else {
  206. canSlide = false;
  207. }
  208. })
  209. .on('touchend', function (e) {
  210. //如果是上下滑动,这里就直接返回了
  211. if (!canSlide) {
  212. canSlide = true;
  213. return true;
  214. }
  215. //点击除当前左滑对象之外的任意其他位置
  216. if (lastObject && currentObject != lastObject) {
  217. //右滑→
  218. $(lastObject).removeClass('animate-slide');
  219. //清空上一个左滑的对象
  220. lastObject = undefined;
  221. }
  222. var diffX = e.originalEvent.changedTouches[0].pageX - startPoint.x;
  223. if (diffX < -diffXDistance) {
  224. //左滑←
  225. $(currentObject).addClass('animate-slide');
  226. if (lastObject && lastObject != currentObject) {
  227. //右滑→
  228. $(lastObject).removeClass('animate-slide');
  229. }
  230. //记录上一个左滑的对象
  231. lastObject = currentObject;
  232. } else if (diffX >= diffXDistance) {
  233. if (currentObject == lastObject) {
  234. //右滑→
  235. $(currentObject).removeClass('animate-slide');
  236. //清空上一个左滑的对象
  237. lastObject = undefined;
  238. }
  239. }
  240. });
  241. });
  242. </script>
  243. <script>
  244. // 开发环境
  245. var isDev =
  246. /^192\.168\./.test(location.host) || /^localhost/.test(location.host);
  247. if (isDev) {
  248. baseUrl = 'http://gntest.phone.androidscloud.com:1280';
  249. sourceType = 2;
  250. }
  251. var topwinHeight = window.screen.height - window.innerHeight + 30; //计算title top 头部
  252. var url = window.location.href;
  253. url = url.split('/');
  254. var baseUrl = url[0] + '//' + url[2];
  255. console.log(baseUrl);
  256. var parameters = GetRequest();
  257. var token = parameters['token'];
  258. var mealType = parameters['mealType'];
  259. var userCardId = parameters['userCardId'];
  260. var videoTimer = null,
  261. videoTime = 0,
  262. adType = 0,
  263. sourceType = isNaN(parameters['sourceType'])
  264. ? sourceType
  265. : +parameters['sourceType'],
  266. disconnectionFlag = false,
  267. getDate = false;
  268. if (mealType === 'VIP') {
  269. $('.loading_sceen_pic').attr('src', '../static/img/home_bg_VIP.png');
  270. } else if (mealType === 'SVIP') {
  271. $('.loading_sceen_pic').attr('src', '../static/img/home_bg_SVIP.png');
  272. } else if (mealType === 'STAR') {
  273. $('.loading_sceen_pic').attr('src', '../static/img/home_bg_STAR.png');
  274. } else if (mealType === 'STARPRO') {
  275. $('.loading_sceen_pic').attr('src', '../static/img/home_bg_PRO.png');
  276. }
  277. $('#wine').css({
  278. width: window.screen.width,
  279. height: window.screen.height - topwinHeight - 20,
  280. position: 'absolute',
  281. });
  282. $('.loading').css({
  283. width: window.screen.width,
  284. height: window.screen.height - topwinHeight - 20,
  285. });
  286. var winese = document.createElement('wine');
  287. wine.style.top = '-' + winese + 'px';
  288. var isAudioPlay = false;
  289. let dbName = parameters['username'],
  290. version = 1,
  291. storeName = 'usercard';
  292. let indexedDB = window.indexedDB;
  293. let db;
  294. var socketURL;
  295. var cUrl;
  296. var cardToken;
  297. const request = indexedDB.open(dbName, version);
  298. request.onsuccess = function (event) {
  299. db = event.target.result; // 数据库对象
  300. console.log('数据库打开成功');
  301. };
  302. request.onerror = function (event) {
  303. console.log('数据库打开报错');
  304. };
  305. request.onupgradeneeded = function (event) {
  306. // 数据库创建或升级的时候会触发
  307. console.log('onupgradeneeded');
  308. db = event.target.result; // 数据库对象
  309. let objectStore;
  310. if (!db.objectStoreNames.contains(storeName)) {
  311. objectStore = db.createObjectStore(storeName, { keyPath: 'id' }); // 创建表
  312. }
  313. };
  314. // 添加数据
  315. function addData(db, storeName, data) {
  316. let request = db
  317. .transaction([storeName], 'readwrite') // 事务对象 指定表格名称和操作模式("只读"或"读写")
  318. .objectStore(storeName) // 仓库对象
  319. .add(data);
  320. request.onsuccess = function (event) {
  321. console.log('数据写入成功');
  322. };
  323. request.onerror = function (event) {
  324. console.log('数据写入失败');
  325. throw new Error(event.target.error);
  326. };
  327. }
  328. // 根据id获取数据
  329. function getDataByKey(db, storeName, key) {
  330. let transaction = db.transaction([storeName]); // 事务
  331. let objectStore = transaction.objectStore(storeName); // 仓库对象
  332. let request = objectStore.get(key);
  333. request.onerror = function (event) {
  334. connect('add');
  335. };
  336. request.onsuccess = function (event) {
  337. console.log('主键查询结果: ', request.result);
  338. if (request.result) {
  339. socketURL = request.result.socketURL;
  340. cUrl = request.result.cUrl;
  341. cardToken = request.result.cardToken;
  342. resolvingPower = request.result.resolvingPower;
  343. doConnectBusiness();
  344. doConnectDirectives();
  345. } else {
  346. connect('add');
  347. }
  348. };
  349. }
  350. // 根据id修改数
  351. function updateDB(db, storeName, data) {
  352. let request = db
  353. .transaction([storeName], 'readwrite') // 事务对象
  354. .objectStore(storeName) // 仓库对象
  355. .put(data);
  356. request.onsuccess = function () {
  357. console.log('数据更新成功');
  358. };
  359. request.onerror = function () {
  360. console.log('数据更新失败');
  361. };
  362. }
  363. // 由于打开indexDB是异步的加个定时器避免 db对象还没获取到值导致 报错
  364. setTimeout(() => {
  365. getDataByKey(db, storeName, userCardId);
  366. }, 1000);
  367. function connect(type) {
  368. $.ajax({
  369. url: baseUrl + '/api/resources/user/cloud/connect',
  370. type: 'post',
  371. data: JSON.stringify({
  372. userCardId: Number(userCardId),
  373. }),
  374. headers: {
  375. 'content-Type': 'application/json',
  376. Authorization: token,
  377. },
  378. dataType: 'json',
  379. async: false,
  380. success: function (res) {
  381. if (res.status === 0) {
  382. if (res.data.internetHttps) {
  383. socketURL =
  384. 'wss://' +
  385. res.data.internetHttps +
  386. '/plugflow?cardIp=' +
  387. res.data.localIp +
  388. '&token=' +
  389. res.data.cardToken +
  390. '&type=business';
  391. cUrl =
  392. 'wss://' +
  393. res.data.internetHttps +
  394. '/businessChannel?cardIp=' +
  395. res.data.localIp +
  396. '&token=' +
  397. res.data.cardToken +
  398. '&type=directives';
  399. cardToken = res.data.cardToken;
  400. resolvingPower = res.data.resolvingPower;
  401. doConnectBusiness();
  402. doConnectDirectives();
  403. if (type === 'add') {
  404. addData(db, storeName, {
  405. id: userCardId,
  406. socketURL: socketURL,
  407. cUrl: cUrl,
  408. cardToken: res.data.cardToken,
  409. resolvingPower: res.data.resolvingPower,
  410. });
  411. } else {
  412. updateDB(db, storeName, {
  413. id: userCardId,
  414. socketURL: socketURL,
  415. cUrl: cUrl,
  416. cardToken: res.data.cardToken,
  417. resolvingPower: res.data.resolvingPower,
  418. });
  419. }
  420. } else {
  421. $.toast('网络异常,请稍后重试', 'text');
  422. }
  423. } else {
  424. $.toast('画面异常,请重新进入', 'text');
  425. clearInterval(intervaler);
  426. quit();
  427. ws.close();
  428. wsss.close();
  429. }
  430. },
  431. });
  432. }
  433. initAD();
  434. $.alert({
  435. title: '提示',
  436. text: '开始使用云手机',
  437. onOK: function () {
  438. isAudioPlay = true;
  439. },
  440. });
  441. //云机倒计时
  442. let validTime = parameters['validTime'] || 10000;
  443. if (validTime > 32000) {
  444. validTime = 32000;
  445. }
  446. let detailTime = validTime * 60 * 1000;
  447. setTimeout(() => {
  448. $('.bug-title').eq(0).text('尊敬的用户您的云手机试用时间已到期');
  449. getDate = true;
  450. $('.buy-phone-wrap').eq(0).show();
  451. }, detailTime);
  452. var orientation = 0; //0 竖屏,1横屏
  453. function array_unique(arr) {
  454. return arr.filter(function (e, i) {
  455. return arr.indexOf(e) === i;
  456. });
  457. }
  458. var cutList = [];
  459. let timer,
  460. isFlag = true;
  461. function showShearPlate() {
  462. stopManyClick(() => {
  463. $('.box-shear-plate').empty();
  464. $.ajax({
  465. url: baseUrl + '/api/public/v5/shear/content',
  466. headers: {
  467. Authorization: token,
  468. },
  469. type: 'get',
  470. dataType: 'json',
  471. success: function (res) {
  472. if (res.status === 0) {
  473. if (res.data.length) {
  474. cutList = array_unique(res.data);
  475. var str =
  476. '<div class="title">剪贴板<div onclick="handleClear()" class="btn-clear">清空</div></div><div class="slide-wrapper-content">';
  477. cutList.forEach(function (item) {
  478. str +=
  479. "<div class='slide-wrapper'><div class='slide-scroll animate-slide-start'><div class='slide-content'><div onclick='handleCopy(\"" +
  480. item.content +
  481. '")\'>' +
  482. item.content +
  483. "</div></div><div class='slide-content-button'><button onclick='handleDelete(" +
  484. item.id +
  485. ")'>删除</button></div></div></div>";
  486. });
  487. str += '</div>';
  488. $('.box-shear-plate').append(str);
  489. } else {
  490. $('.box-shear-plate').append(
  491. '<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>',
  492. );
  493. }
  494. $('.mask').show();
  495. initSlider();
  496. } else {
  497. $('.box-shear-plate').append(
  498. '<img class="empty" src="img/jianqieban_pic@2x.png" alt="" /><div class="empty-txt">剪贴板为空</div>',
  499. );
  500. $('.mask').show();
  501. }
  502. },
  503. });
  504. });
  505. }
  506. //防止提示一秒内重复显示
  507. function stopManyClick(fn) {
  508. if (isFlag) {
  509. fn();
  510. }
  511. isFlag = false;
  512. if (timer) {
  513. clearTimeout(timer);
  514. }
  515. timer = setTimeout(() => {
  516. isFlag = true;
  517. }, 1500);
  518. }
  519. // 清空剪贴板
  520. function handleClear() {
  521. var ids = '';
  522. cutList.forEach(function (item) {
  523. ids += 'ids=' + item.id + '&';
  524. });
  525. ids = ids.substring(0, ids.lastIndexOf('&'));
  526. $.confirm('确定清空剪贴板?', function () {
  527. $.ajax({
  528. url: baseUrl + '/api/public/v5/shear/content?' + ids,
  529. headers: {
  530. Authorization: token,
  531. },
  532. type: 'DELETE',
  533. dataType: 'json',
  534. success: function (res) {
  535. if (res.status === 0) {
  536. showShearPlate();
  537. } else {
  538. $.toast(res.msg, 'text');
  539. }
  540. },
  541. });
  542. });
  543. }
  544. function handleCopy(content) {
  545. var cutting = {
  546. type: 'cutting',
  547. data: {
  548. str: content,
  549. },
  550. };
  551. wsss.send(JSON.stringify(cutting));
  552. }
  553. // 删除剪贴板
  554. function handleDelete(id) {
  555. $.ajax({
  556. url: baseUrl + '/api/public/v5/shear/content?ids=' + id,
  557. headers: {
  558. Authorization: token,
  559. },
  560. type: 'DELETE',
  561. dataType: 'json',
  562. success: function (res) {
  563. if (res.status === 0) {
  564. showShearPlate();
  565. } else {
  566. $.toast(res.msg, 'text');
  567. }
  568. },
  569. });
  570. }
  571. function initSlider() {
  572. //手指滑动多少距离就认为是滑成功
  573. //这个值不能太大,否则影响斜着滑动时,垂直滑动的流畅性,也不能太小,太灵敏也不好
  574. var diffXDistance = 50;
  575. //当前滑动的对象
  576. var currentObject;
  577. //上一次滑动的对象
  578. var lastObject;
  579. //是否可以左右滑动,在上下滑的时候禁止左右滑
  580. var canSlide = true;
  581. //用于记录按下的点
  582. var startPoint;
  583. $('.slide-content').css({
  584. width: $('.slide-wrapper').width(),
  585. });
  586. document.body.removeEventListener(
  587. 'touchmove',
  588. function (e) {
  589. e.preventDefault();
  590. },
  591. {
  592. passive: false,
  593. },
  594. );
  595. $('.slide-scroll')
  596. .css({
  597. width:
  598. $('.slide-wrapper').width() + $('.slide-content-button').width(),
  599. })
  600. .on('touchstart', function (e) {
  601. currentObject = this;
  602. startPoint = {
  603. x: e.originalEvent.changedTouches[0].pageX,
  604. y: e.originalEvent.changedTouches[0].pageY,
  605. };
  606. })
  607. .on('touchmove', function (e) {
  608. //如果是左右滑动,就禁止上下的滑动
  609. //如果是上下的滑动,就禁止左右滑动
  610. if (
  611. Math.abs(e.originalEvent.changedTouches[0].pageX - startPoint.x) >
  612. Math.abs(e.originalEvent.changedTouches[0].pageY - startPoint.y)
  613. ) {
  614. event.preventDefault();
  615. } else {
  616. canSlide = false;
  617. }
  618. })
  619. .on('touchend', function (e) {
  620. //如果是上下滑动,这里就直接返回了
  621. if (!canSlide) {
  622. canSlide = true;
  623. return true;
  624. }
  625. //点击除当前左滑对象之外的任意其他位置
  626. if (lastObject && currentObject != lastObject) {
  627. //右滑→
  628. $(lastObject).removeClass('animate-slide');
  629. //清空上一个左滑的对象
  630. lastObject = undefined;
  631. }
  632. var diffX = e.originalEvent.changedTouches[0].pageX - startPoint.x;
  633. if (diffX < -diffXDistance) {
  634. //左滑←
  635. $(currentObject).addClass('animate-slide');
  636. if (lastObject && lastObject != currentObject) {
  637. //右滑→
  638. $(lastObject).removeClass('animate-slide');
  639. }
  640. //记录上一个左滑的对象
  641. lastObject = currentObject;
  642. } else if (diffX >= diffXDistance) {
  643. if (currentObject == lastObject) {
  644. //右滑→
  645. $(currentObject).removeClass('animate-slide');
  646. //清空上一个左滑的对象
  647. lastObject = undefined;
  648. }
  649. }
  650. });
  651. }
  652. var btnMuted = document.querySelector('#btnMuted');
  653. btnMuted &&
  654. (function () {
  655. var setHistory = function (left, top) {
  656. try {
  657. localStorage.setItem(
  658. 'muted-btn-loc',
  659. JSON.stringify({
  660. left: left,
  661. top: top,
  662. }),
  663. );
  664. } catch (ex) {}
  665. };
  666. var getHistory = function () {
  667. try {
  668. var value = localStorage.getItem('muted-btn-loc');
  669. if (!value) return null;
  670. value = JSON.parse(value);
  671. if (!value) return null;
  672. return value;
  673. } catch (ex) {
  674. return null;
  675. }
  676. };
  677. var fixLoc = function (loc) {
  678. var rect = btnMuted.getBoundingClientRect();
  679. rect = {
  680. top: rect.top,
  681. left: rect.left,
  682. width: rect.width,
  683. height: rect.height,
  684. }; // 部分低版本浏览器,该属性为只读
  685. if (loc) {
  686. rect.left = loc.left;
  687. rect.top = loc.top;
  688. }
  689. var minX = 0;
  690. var minY = 0;
  691. var docRect = document.documentElement.getBoundingClientRect();
  692. var maxY = docRect.height - rect.height;
  693. var maxX = docRect.width - rect.width;
  694. var left = rect.left;
  695. var top = rect.top;
  696. left = Math.min(left, maxX);
  697. left = Math.max(left, minX);
  698. top = Math.min(top, maxY);
  699. top = Math.max(top, minY);
  700. if (loc || top !== rect.top || left !== rect.left) {
  701. btnMuted.style.cssText +=
  702. 'left:' + left + 'px;top:' + top + 'px;';
  703. }
  704. };
  705. window.addEventListener('resize', function () {
  706. fixLoc();
  707. });
  708. var touchPoint = {
  709. pageY: 0,
  710. pageX: 0,
  711. };
  712. var currentLoc = {
  713. top: 0,
  714. left: 0,
  715. curTop: 0,
  716. curLeft: 0,
  717. };
  718. var toMove = false;
  719. var touchmove = function (e) {
  720. e.preventDefault();
  721. var point = e.changedTouches[0];
  722. var top = -touchPoint.pageY + point.pageY;
  723. var left = -touchPoint.pageX + point.pageX;
  724. if (toMove) {
  725. top += currentLoc.top;
  726. left += currentLoc.left;
  727. currentLoc.curLeft = left;
  728. currentLoc.curTop = top;
  729. btnMuted.style.cssText +=
  730. 'left:' + left + 'px;top:' + top + 'px;';
  731. } else {
  732. if (Math.abs(top) >= 5 || Math.abs(left) >= 5) {
  733. toMove = true;
  734. }
  735. }
  736. };
  737. var touchend = function () {
  738. window.removeEventListener('touchmove', touchmove, {
  739. passive: false,
  740. });
  741. window.removeEventListener('touchend', touchend, {
  742. passive: false,
  743. });
  744. if (toMove) {
  745. setHistory(currentLoc.curLeft, currentLoc.curTop);
  746. fixLoc();
  747. } else {
  748. //按点击处理
  749. var set = $('.control-right-img').attr('data-id');
  750. if (set == '1') {
  751. $('.control-right-img').attr({
  752. 'data-id': '2',
  753. });
  754. $('.leftmains').css({
  755. right: '0rem',
  756. });
  757. } else {
  758. $('.control-right-img').attr({
  759. 'data-id': '1',
  760. });
  761. $('.leftmains').css({
  762. right: '-4rem',
  763. });
  764. }
  765. }
  766. };
  767. btnMuted.addEventListener(
  768. 'touchstart',
  769. function (e) {
  770. e.preventDefault();
  771. toMove = false;
  772. var point = e.changedTouches[0];
  773. touchPoint.pageX = point.pageX;
  774. touchPoint.pageY = point.pageY;
  775. var rect = e.target.getBoundingClientRect();
  776. currentLoc.top = rect.top;
  777. currentLoc.left = rect.left;
  778. window.addEventListener('touchmove', touchmove, {
  779. passive: false,
  780. });
  781. window.addEventListener('touchend', touchend, {
  782. passive: false,
  783. });
  784. },
  785. {
  786. passive: false,
  787. },
  788. );
  789. var history = getHistory();
  790. if (history) {
  791. fixLoc(history);
  792. }
  793. btnMuted.classList.remove('hide');
  794. })();
  795. $('#upload').on('click', function () {
  796. decodeWoker.postMessage('close');
  797. decodeWoker.terminate();
  798. webSocketWorker.terminate();
  799. quit();
  800. });
  801. function handleClose() {
  802. $('.mask').hide();
  803. }
  804. var decodeCount = 1;
  805. var isFinish = false;
  806. var player = new PCMPlayer({
  807. encoding: '16bitInt',
  808. channels: 2,
  809. sampleRate: 44100,
  810. flushingTime: 22,
  811. debug: false,
  812. });
  813. Module = {};
  814. Module.onRuntimeInitialized = function () {
  815. isFinish = true;
  816. };
  817. function decodeAAC(data) {
  818. var retPtr = Module._malloc(4 * 5 * 1024); //接收的数据
  819. var inputPtr = Module._malloc(4 * data.length); //输入数据
  820. for (var i = 0; i < data.length; i++) {
  821. Module.HEAPU8[inputPtr + i] = data[i]; //转换为堆数据
  822. }
  823. var pcmLen = Module._feedData(retPtr, inputPtr, data.length);
  824. if (pcmLen >= 0) {
  825. var pcmData = new Uint8Array(pcmLen);
  826. for (var i = 0; i < pcmLen; i++) {
  827. pcmData[i] = Module.HEAPU8[retPtr + i];
  828. }
  829. player.feed(pcmData);
  830. }
  831. decodeCount++;
  832. Module._free(inputPtr);
  833. Module._free(retPtr);
  834. }
  835. var decodeWoker = new Worker('decoder.js');
  836. var myVideo = document.getElementById('playCanvas');
  837. var logicWidth = 720;
  838. var logicHeight = 1280;
  839. decodeWoker.onmessage = function (event) {
  840. var objData = event.data;
  841. // console.log("🚀 ~ file: WXtrialInterface.html ~ line 806 ~ objData", objData)
  842. switch (objData.cmd) {
  843. case 0:
  844. break;
  845. case 1:
  846. if (logicWidth != objData.width || logicHeight != objData.height) {
  847. logicWidth = objData.width;
  848. logicHeight = objData.height;
  849. }
  850. webglPlayer.renderFrame(
  851. objData.data,
  852. logicWidth,
  853. logicHeight,
  854. logicWidth * logicHeight,
  855. (logicWidth / 2) * (logicHeight / 2),
  856. );
  857. $('.weui-mask_transparent').hide();
  858. $('.weui-toast').hide();
  859. $('.loading').hide();
  860. break;
  861. case 5:
  862. var buffer = RequestIFrame();
  863. webSocketWorker.postMessage(buffer);
  864. }
  865. };
  866. var isFinish = false;
  867. var webglPlayer = new WebGLPlayer(myVideo, {
  868. preserveDrawingBuffer: false,
  869. });
  870. function GetRequest() {
  871. var url = location.search; // 获取url中"?"符后的字串
  872. var obj = new Object();
  873. if (url.indexOf('?') != -1) {
  874. var str = url.substr(1);
  875. strs = str.split('&');
  876. for (var i = 0; i < strs.length; i++) {
  877. obj[strs[i].split('=')[0]] = strs[i].split('=')[1];
  878. }
  879. }
  880. return obj;
  881. }
  882. function doConnectBusiness() {
  883. var webSocketWorker = new Worker(
  884. 'websocket.js?socketURL=' +
  885. encodeURIComponent(socketURL) +
  886. '&cardToken=' +
  887. encodeURIComponent(cardToken),
  888. );
  889. webSocketWorker.onmessage = function (event) {
  890. var input = event.data;
  891. if (input[0] == 0xff && isAudioPlay) {
  892. decodeAAC(input);
  893. }
  894. if (
  895. input[0] == 0 &&
  896. input[1] == 0 &&
  897. input[2] == 0 &&
  898. input[3] == 1
  899. ) {
  900. var cmd = {
  901. type: 'rawData',
  902. data: event.data,
  903. };
  904. decodeWoker.postMessage(cmd);
  905. }
  906. if (input[0] == 0x68) {
  907. if (input[23] == 0x5c) {
  908. if (CheckVerifyCode(input)) {
  909. webSocketWorker.postMessage(ConfigChannel('RK3923C1201900139'));
  910. var checkBuffer = GetScreenState();
  911. webSocketWorker.postMessage(checkBuffer);
  912. } else {
  913. connect('update');
  914. }
  915. }
  916. if (input[23] == 0x05) {
  917. //横竖屏标识
  918. var state = CheckScreenDirection(input.slice(24, 24 + 8));
  919. if (state == 1) {
  920. console.log('安卓卡此时竖屏');
  921. //竖屏处理
  922. resolving = 1;
  923. } else {
  924. console.log('安卓卡此时横屏');
  925. //横屏处理
  926. resolving = 0;
  927. }
  928. }
  929. if (input[23] == 0x0b) {
  930. console.log('多端登陆');
  931. }
  932. }
  933. if (event.data === 'close') {
  934. $.toast('画面异常,请重新进入', 'text');
  935. decodeWoker.postMessage('close');
  936. decodeWoker.terminate();
  937. webSocketWorker.terminate();
  938. quit();
  939. }
  940. };
  941. }
  942. // 激活码广告相关配置
  943. function getConfigByPhoneType() {
  944. return new Promise((resolve, reject) => {
  945. $.ajax({
  946. url: baseUrl + '/api/pay/v5/trialCodeConfig/getConfigByPhoneType',
  947. headers: {
  948. Authorization: token,
  949. },
  950. data: {
  951. userCardId: userCardId,
  952. phoneType: mealType,
  953. },
  954. type: 'get',
  955. dataType: 'json',
  956. success: function (res) {
  957. console.log(res);
  958. let obj = res.data;
  959. if (res.status === 0) {
  960. resolve(obj);
  961. } else {
  962. $.toast(res.msg, 'text');
  963. }
  964. },
  965. });
  966. });
  967. }
  968. //列表
  969. function getSetmealList() {
  970. return new Promise((resolve, reject) => {
  971. $.ajax({
  972. url: baseUrl + '/api/resources/v4/freetrial/setmeal/list',
  973. headers: {
  974. Authorization: token,
  975. },
  976. type: 'get',
  977. dataType: 'json',
  978. success: function (res) {
  979. if (res.status === 0) {
  980. let list = res.data;
  981. list.map((item) => {
  982. if (item.phoneType === mealType) {
  983. resolve(item);
  984. }
  985. });
  986. } else {
  987. $.toast(res.msg, 'text');
  988. }
  989. },
  990. });
  991. });
  992. }
  993. //广告信息
  994. var adData = null; // 广告数据
  995. var adLastTime = 0; // 广告时间
  996. var intervalTime = 0; // 间隔时间
  997. // let adType = 0;
  998. console.log(
  999. '🚀 ~ file: WXtrialInterface.html ~ line 973 ~ sourceType',
  1000. sourceType,
  1001. );
  1002. // 拉取广告数据
  1003. function getAD() {
  1004. return $.ajax({
  1005. url: baseUrl + '/api/public/v5/advertising/getAdInfoByAdPlace',
  1006. headers: {
  1007. Authorization: token,
  1008. },
  1009. data: JSON.stringify({
  1010. adPlace: adType,
  1011. os: 0,
  1012. }),
  1013. type: 'POST',
  1014. dataType: 'json',
  1015. contentType: 'application/json;charset=UTF-8',
  1016. }).then(function (res) {
  1017. if (res.status === 0) {
  1018. var list = res.data.filter(
  1019. (v) => v.adType === 1 && !!v.adVideoBase.videoUrl,
  1020. );
  1021. adData = list[Math.floor(Math.random() * list.length)];
  1022. console.log(
  1023. '🚀 ~ file: WXtrialInterface.html ~ line 990 ~ getAD ~ adData',
  1024. adData,
  1025. );
  1026. return adData;
  1027. } else {
  1028. return Promise.reject(new Error(res.msg));
  1029. }
  1030. });
  1031. }
  1032. // 播放广告
  1033. function playAD() {
  1034. var nowTime = Date.now();
  1035. if (
  1036. adData &&
  1037. // [1, 2].includes(sourceType) &&
  1038. $('.try-use-wrap').eq(0).is(':hidden') &&
  1039. nowTime > adLastTime + intervalTime
  1040. ) {
  1041. $('#source').attr('src', adData.adVideoBase.videoUrl);
  1042. $('.try-use-wrap').eq(0).show();
  1043. $('#source')[0].play();
  1044. videoTime = adData.forcedTime;
  1045. adData = null;
  1046. adLastTime = nowTime;
  1047. videoTimer = setInterval(() => {
  1048. if (videoTime > 0) {
  1049. videoTime--;
  1050. $('.time-node')
  1051. .eq(0)
  1052. .text(videoTime + 's');
  1053. } else {
  1054. clearInterval(videoTimer);
  1055. $('.time-node').eq(0).text('');
  1056. }
  1057. }, 1000);
  1058. if (intervalTime > 0) {
  1059. // 间隔广告拉取下一次广告数据
  1060. adType = 16;
  1061. getAD();
  1062. }
  1063. if (adType === 16 && sourceType == 1) {
  1064. // 间隔广告和试用才上报
  1065. report(0);
  1066. }
  1067. }
  1068. }
  1069. /**
  1070. * 初始化广告
  1071. * 因移动端video无法自动播放,play()方法不能异步调用。
  1072. * 解决方案,初始化时预先请求广告数据,在用户对云手机touchmove事件中去播放广告并请求下一次广告数据。
  1073. */
  1074. function initAD() {
  1075. console.log(
  1076. '🚀 ~ file: WXtrialInterface.html ~ line 1052 ~ initAD ~ sourceType',
  1077. sourceType,
  1078. );
  1079. (function () {
  1080. switch (sourceType) {
  1081. case 1: {
  1082. return getSetmealList().then(function (res) {
  1083. intervalTime =
  1084. res.intervalSwitch === 1
  1085. ? res.intervalAdvertDuration * 1000 * 60
  1086. : 0;
  1087. if (res.pushFlowAdvert === 1) {
  1088. adType = 15;
  1089. adTime = 0;
  1090. } else if (intervalTime > 0) {
  1091. adType = 16;
  1092. adTime = date.now();
  1093. }
  1094. });
  1095. }
  1096. case 2: {
  1097. return getConfigByPhoneType().then(function (res) {
  1098. if (res.isDisconnectionTime === 1) {
  1099. var time = res.disconnectionTime * 60 * 1000;
  1100. setTimeout(() => {
  1101. disconnectionFlag = true;
  1102. $('.buy-phone-wrap').eq(0).show();
  1103. }, time);
  1104. }
  1105. intervalTime =
  1106. res.isIntervalPlayAd === 1
  1107. ? res.intervalPlayAdTime * 1000 * 60
  1108. : 0;
  1109. if (res.isShowAd === 1) {
  1110. adType = 15;
  1111. adTime = 0;
  1112. } else if (intervalTime > 0) {
  1113. adType = 16;
  1114. adTime = date.now();
  1115. }
  1116. });
  1117. }
  1118. default: {
  1119. return Promise.reject();
  1120. }
  1121. }
  1122. })().then(function () {
  1123. console.log(adType);
  1124. this.$('#playCanvas').on('touchstart', playAD);
  1125. // this.$('#playCanvas').on('touchmove', playAD);
  1126. getAD();
  1127. });
  1128. }
  1129. // 观看广告次数上报1
  1130. function reportFrequency() {
  1131. $.ajax({
  1132. url: baseUrl + '/api/resoures/v1/trial/reportFrequency/' + form.userCardId,
  1133. headers: {
  1134. Authorization: form.token
  1135. },
  1136. type: 'post',
  1137. contentType: 'application/json',
  1138. dataType: 'json',
  1139. success: function (res) {},
  1140. });
  1141. }
  1142. //间隔广告上报
  1143. function report(type) {
  1144. $.ajax({
  1145. url: baseUrl + '/api/resources/v1/trial/report',
  1146. headers: {
  1147. Authorization: token,
  1148. },
  1149. data: JSON.stringify({
  1150. userCardId: userCardId,
  1151. reportType: type,
  1152. }),
  1153. type: 'POST',
  1154. dataType: 'json',
  1155. contentType: 'application/json;charset=UTF-8',
  1156. success: function (res) {},
  1157. });
  1158. }
  1159. //关闭广告
  1160. $('.time-close-wrap')[0].addEventListener('click', () => {
  1161. if(videoTime == 0) {
  1162. reportFrequency()
  1163. }
  1164. $('.buy-phone-wrap').eq(0).show();
  1165. });
  1166. // 点击取消
  1167. $('.cannel-btn')[0].addEventListener('click', () => {
  1168. $('.buy-phone-wrap').eq(0).hide();
  1169. if (disconnectionFlag || getDate) {
  1170. //设置了断线时间,取消直接退出
  1171. systemBuriedPoint('激活码-断线-取消');
  1172. quit();
  1173. return;
  1174. }
  1175. let pointName = '';
  1176. if (sourceType == 1) {
  1177. pointName =
  1178. videoTime == 0 ? '免费试用-关闭-取消' : '免费试用-强制关闭-取消';
  1179. } else {
  1180. pointName =
  1181. videoTime == 0 ? '激活码-关闭-取消' : '激活码-强制关闭-取消';
  1182. }
  1183. systemBuriedPoint(pointName);
  1184. if (videoTime == 0) {
  1185. if (adType === 16 && sourceType == 1) {
  1186. report(1);
  1187. }
  1188. $('.try-use-wrap').eq(0).hide();
  1189. $('#source')[0].pause();
  1190. return;
  1191. }
  1192. $('.look-wrap').eq(0).show();
  1193. });
  1194. // 点击去购买
  1195. $('.go-bug')[0].addEventListener('click', () => {
  1196. let pointName = '';
  1197. if (disconnectionFlag) {
  1198. pointName = '激活码-断线-去购买';
  1199. } else if (sourceType == 1) {
  1200. pointName =
  1201. videoTime == 0
  1202. ? '免费试用-关闭-去购买'
  1203. : '免费试用-强制关闭-去购买';
  1204. } else {
  1205. pointName =
  1206. videoTime == 0 ? '激活码-关闭-去购买' : '激活码-强制关闭-去购买';
  1207. }
  1208. systemBuriedPoint(pointName);
  1209. if (getDate) {
  1210. if (window.__wxjs_environment === 'miniprogram') {
  1211. wx.miniProgram.navigateTo({
  1212. url: '/packageA/order/buy/index?buyType=试用界面购买',
  1213. });
  1214. } else {
  1215. uni.webView.navigateTo({
  1216. url: '/pages/order/order',
  1217. });
  1218. }
  1219. } else {
  1220. if (window.__wxjs_environment === 'miniprogram') {
  1221. wx.miniProgram.navigateTo({
  1222. url:
  1223. `/packageA/order/renew/index?buyType=${
  1224. sourceType == 1
  1225. ? '试用弹窗购买按钮进入-普通试用'
  1226. : '试用弹窗购买按钮进入-激活码试用'
  1227. }&record=` + userCardId,
  1228. });
  1229. } else {
  1230. uni.webView.navigateTo({
  1231. url: '/pages/order/order',
  1232. });
  1233. }
  1234. }
  1235. });
  1236. window.onbeforeunload = function () {
  1237. wsss.close();
  1238. decodeWoker.postMessage('close');
  1239. decodeWoker.terminate();
  1240. webSocketWorker.terminate();
  1241. };
  1242. </script>
  1243. <script type="text/javascript" src="WXdraw.js"></script>
  1244. <script type="text/javascript" src="aac.js"></script>
  1245. </body>
  1246. </html>