WXtrialInterface.html 49 KB

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