WXtrialInterface.html 41 KB

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