home.html 38 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
  7. <meta name="x5-orientation" content="portrait" />
  8. <meta name="screen-orientation" content="portrait" />
  9. <meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  10. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  11. <meta name="apple-mobile-web-app-capable" content="yes">
  12. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  13. <meta name="format-detection" content="telephone=no, email=no">
  14. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  15. <meta name="apple-mobile-web-app-capable" content="yes">
  16. <!-- 删除苹果默认的工具栏和菜单栏 -->
  17. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  18. <!-- 设置苹果工具栏颜��? -->
  19. <meta name="format-detection" content="telphone=no, email=no">
  20. <!-- 忽略页面中的数字识别为电话,忽略email识别 -->
  21. <!-- 启用360浏览器的极速模��?(webkit) -->
  22. <meta name="renderer" content="webkit">
  23. <!-- 避免IE使用兼容模式 -->
  24. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  25. <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑��? -->
  26. <meta name="HandheldFriendly" content="true">
  27. <!-- 微软的老式浏览��? -->
  28. <meta name="MobileOptimized" content="320">
  29. <!-- uc强制竖屏 -->
  30. <!-- <meta name="screen-orientation" content="portrait"> -->
  31. <!-- QQ强制竖屏 -->
  32. <!-- <meta name="x5-orientation" content="portrait"> -->
  33. <!-- 不能旋转,问题出在这 -->
  34. <!-- UC强制全屏 -->
  35. <meta name="full-screen" content="yes">
  36. <!-- QQ强制全屏 -->
  37. <meta name="x5-fullscreen" content="true">
  38. <!-- UC应用模式 -->
  39. <meta name="browsermode" content="application">
  40. <!-- QQ应用模式 -->
  41. <meta name="x5-page-mode" content="app">
  42. <!-- windows phone 点击无高��? -->
  43. <meta name="msapplication-tap-highlight" content="no">
  44. <title></title>
  45. <link rel="stylesheet" href="../static/css/homeNew.css?id=103">
  46. <link rel="stylesheet" type="text/css" href="../static/css/swiper-bundle.min.css" />
  47. <script src="../static/css/swiper-bundle.min.js"></script>
  48. <style>
  49. .swiper-button-next {
  50. width: 15px;
  51. height: 15px;
  52. background: url(../static/img/xia_icon.png);
  53. right: 15px;
  54. }
  55. .swiper-button-prev {
  56. width: 15px;
  57. height: 15px;
  58. background: url(../static/img/shang_icon.png);
  59. left: 15px;
  60. }
  61. .swiper-button-next:after,
  62. .swiper-container-rtl .swiper-button-prev:after {
  63. content: "" !important;
  64. }
  65. .swiper-button-prev:after,
  66. .swiper-container-rtl .swiper-button-next:after {
  67. content: "" !important;
  68. }
  69. .wxTips {
  70. text-align: center;
  71. position: absolute;
  72. top: 50%;
  73. left: 50%;
  74. transform: translate(-50%, -50%);
  75. z-index: 99999;
  76. height: 2.5rem;
  77. line-height: 2.5rem;
  78. border-radius: .2rem;
  79. padding: 0 .8rem;
  80. background-color: rgba(0, 0, 0, 0.5);
  81. margin-top: -5rem;
  82. color: #fff;
  83. font-size: .7rem;
  84. display: none;
  85. }
  86. .homebg {
  87. width: 100%;
  88. height: 100%;
  89. border-radius: 20px;
  90. }
  91. </style>
  92. </head>
  93. <body style="background: #F8F9FA;overflow:scroll;overflow-y: hidden;overflow-x: hidden;">
  94. <div style="width: 100%;height: 100%;" id="homeapp">
  95. <!-- Swiper -->
  96. <div class="newhelp" style="z-index: 50;">
  97. <div class="helpImg">
  98. <img src="../static/img/bangzu_icon.png" />
  99. </div>
  100. <div class="font helpfont">使用帮助?</div>
  101. </div>
  102. <div class="buyIcon" style="z-index: 50;">
  103. <img src="../static/img/goumai_icon.png" />
  104. </div>
  105. <div class="swiper-container">
  106. <div class="swiper-wrapper">
  107. <div class="swiper-slide" v-for="(item,index) in homeList" :key="item.id"
  108. :class="[index==0 ? 'swiper-slide-active' : '' , index==1 ? 'swiper-slide-next' : '']">
  109. <div class="canvas" style="z-index: 1;" >
  110. <!-- <div style="height: 100%;" class="wine" :id="'wine'+index"></div> -->
  111. <!-- <canvas :id="'playCanvas'+index" width="450" height="800"></canvas> -->
  112. <img src="img/homebg.png" class="homebg" @click="homeinfo(item)"/>
  113. <div class="camvas-head" style="z-index: 5555;">
  114. <div class="tophead">
  115. <div class="th_left">
  116. <!-- {{item.buyVipType}} -->
  117. <img src="../static/img/xingyao_icon.png" v-if="item.buyVipType==='SVIP'" />
  118. <img src="../static/img/xingdong_icon.png" v-else />
  119. </div>
  120. <div class="th_right">
  121. <div class="thl-font">{{item.diskName}}</div>
  122. <div class="thl-time">剩{{remainTime(item.ctime,item.exceptTime)}}</div>
  123. </div>
  124. </div>
  125. <div class="th_renew homeRenew" style="z-index: 5000;" @click="renew(item)">
  126. 续费
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. <div class="swiper-slide">
  132. <div class="canvas" style="display: none;">
  133. <div style="height: 100%;" class="kongWine">
  134. <div class="kphone">
  135. <div class="kp_img">
  136. <img src="../static/img/goumai_pic.png" />
  137. </div>
  138. <div class="kp_btn" style="z-index: 5000;">
  139. 购买云手机
  140. </div>
  141. </div>
  142. </div>
  143. </div>
  144. </div>
  145. </div>
  146. <!-- Add Arrows -->
  147. <div class="swiper-button-next" @click="swiperNext()"></div>
  148. <div class="swiper-button-prev" @click="swiperPrev()"></div>
  149. </div>
  150. <!-- 没登录状态 -->
  151. <div class="canvasfalse" style="display: none;">
  152. <div class="notLoggedin">
  153. <image src="../static/img/tianjiashouji_pic.png"></image>
  154. </div>
  155. <!-- 审核-->
  156. <div id="showsuss">
  157. <div class="notLoggedin-text">
  158. <div>下载云手机</div>
  159. <div>体验更多功能</div>
  160. </div>
  161. <div class="notLoggedin-bt">
  162. 立即下载
  163. </div>
  164. </div>
  165. </div>
  166. <div class="maxs" style="display: none;">
  167. <div class="mainbox" style="display: none;">
  168. <div class="boxTitle">提示</div>
  169. <div class="boxText">
  170. <div>由于小程序的功能限制,此功能暂时</div>
  171. <div>无法使用,请下载APP使用更多功能</div>
  172. </div>
  173. <!--<div class="boxbt" onclick="cp(document.getElementById('user_ref_id'));">立即前往下载</div>-->
  174. <div class="boxbt" onclick="cp(document.getElementById('user_ref_id'));">立即前往下载</div>
  175. <div class="boximg"><img src="../static/img/wx/guanbi_icon.png"></div>
  176. </div>
  177. </div>
  178. <div class="wxTips">
  179. 云手机数量不足,请稍后再试
  180. </div>
  181. </div>
  182. <div id="copy-txt" style="position: absolute;opacity: 0;">
  183. <span id="user_ref_id">www.androidsCloud.com</span>
  184. </div>
  185. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
  186. <!-- 视频-->
  187. <script src="../static/js/jquery-1.11.0.min.js"></script>
  188. <!-- <script type="text/javascript" src="../static/js/Decoder.js"></script>
  189. <script type="text/javascript" src="../static/js/YUVCanvas.js"></script>
  190. <script type="text/javascript" src="../static/js/Player.js"></script> -->
  191. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  192. <!-- <script type="text/javascript" src="helper.js"></script>
  193. <script type="text/javascript" src="pcm-player.js"></script>
  194. <script type="text/javascript" src="webgl.js"></script> -->
  195. <script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
  196. <script type="text/javascript">
  197. var u = navigator.userAgent;
  198. var html = document.querySelector("html");
  199. var clientWidth = html.getBoundingClientRect().width;
  200. var clientheight = window.innerHeight;
  201. html.style.fontSize = clientWidth / 23.4375 + "px";
  202. //Android终端
  203. var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
  204. //iOS终端
  205. var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  206. if (isAndroid) {
  207. //如果为Android
  208. const ch = (20 * clientWidth) / clientheight
  209. console.log("长和宽", clientWidth, clientheight)
  210. $('.swiper-slide').css("padding", `20% ${ch}%`)
  211. }
  212. if (isiOS) {
  213. //如果为iOS
  214. const ch = (20 * clientWidth) / clientheight
  215. console.log("长和宽", clientWidth, clientheight)
  216. $('.swiper-slide').css("padding", `20% ${ch}%`)
  217. }
  218. // $('.swiper-slide').css("padding", `20% ${ch}%`)
  219. // var player = new PCMPlayer({
  220. // encoding: '16bitInt',
  221. // channels: 2,
  222. // sampleRate: 44100,
  223. // flushingTime: 22,
  224. // debug: false
  225. // });
  226. // Module = {};
  227. // Module.onRuntimeInitialized = function() {
  228. // console.log("Wasm 加载成功!")
  229. // isFinish = true;
  230. // }
  231. // function closeDecoder() //关闭解码器
  232. // {
  233. // Module._destroyDecoder();
  234. // }
  235. // function decodeAAC(data) {
  236. // var retPtr = Module._malloc(4 * 5 * 1024); //接收的数据
  237. // var inputPtr = Module._malloc(4 * data.length); //输入数据
  238. // for (i = 0; i < data.length; i++) {
  239. // Module.HEAPU8[(inputPtr) + i] = data[i]; //转换为堆数据
  240. // }
  241. // var pcmLen = Module._feedData(retPtr, inputPtr, data.length);
  242. // if (pcmLen >= 0) {
  243. // //console.log("%d帧 aac 解码成功, %d", decodeCount, pcmLen);
  244. // var pcmData = new Uint8Array(pcmLen);
  245. // for (i = 0; i < pcmLen; i++) {
  246. // pcmData[i] = Module.HEAPU8[(retPtr) + i]
  247. // }
  248. // player.feed(pcmData);
  249. // } else {
  250. // console.log("%d帧 aac 解码失败, %d", decodeCount, pcmLen);
  251. // }
  252. // decodeCount++;
  253. // Module._free(inputPtr);
  254. // Module._free(retPtr);
  255. // }
  256. var app = new Vue({
  257. el: '#homeapp',
  258. data: {
  259. message: 'Hello Vue!',
  260. homeList: [],
  261. urlData: {},
  262. rbdData: {},
  263. activeIndexData: "",
  264. swipeDirection: "",
  265. },
  266. mounted() {
  267. // //初始化一下就可以了,
  268. let vConsole = new VConsole();
  269. // //你打印的数据 比如
  270. console.log('test');
  271. //就可像小程序一样的看了和调试了。
  272. this.$nextTick(function() {
  273. this.gethomeList();
  274. });
  275. var that = this;
  276. var swiper = new Swiper('.swiper-container', {
  277. observer: true, //修改swiper自己或子元素时,自动初始化swiper
  278. observeParents: true, //修改swiper的父元素时,自动初始化swiper
  279. navigation: {
  280. nextEl: '.swiper-button-next',
  281. prevEl: '.swiper-button-prev',
  282. },
  283. on: {
  284. touchEnd: function(event) {
  285. console.log('触摸停止');
  286. console.log(swiper.swipeDirection);
  287. this.swipeDirection = swiper.swipeDirection;
  288. },
  289. transitionStart: function() {
  290. console.log("transitionStart", this.activeIndex)
  291. this.activeIndexData = this.activeIndex;
  292. },
  293. slideChangeTransitionStart: function() {
  294. console.log("slideChangeTransitionStart", this.activeIndex)
  295. this.activeIndexData = this.activeIndex;
  296. },
  297. slideChangeTransitionEnd: function() {
  298. console.log("slideChangeTransitionEnd", this.activeIndex)
  299. this.activeIndexData = this.activeIndex;
  300. if (this.swipeDirection == "next") {
  301. that.getSwiperInfo("nextSlide");
  302. } else if (this.swipeDirection == "prev") {
  303. that.getSwiperInfo("prevSlide");
  304. }
  305. },
  306. // slideChangeStart: function() {
  307. // alert(this.activeIndext);
  308. // },
  309. // slideChangeEnd: function() {
  310. // console.log("下标啊", this)
  311. // },
  312. // ransitionStart: function(activeIndex) {
  313. // console.log("下标啊", this, activeIndex)
  314. // },
  315. // slideChangeEnd: function(swiperHere) {
  316. // var txt = $('.swiper-slide-active').html();
  317. // console.log("打印索引值", txt)
  318. // }
  319. }
  320. });
  321. },
  322. methods: {
  323. homeinfo(data) {
  324. console.log("打印数据", data, this.urlData)
  325. if (this.urlData.status === 0) {
  326. console.log("打印数据", data, this.urlData.data.sn)
  327. wx.miniProgram.navigateTo({
  328. url: '/pages/trialInterface/trialInterface?record=' + data.id + '&sn=' + this
  329. .urlData.data.sn,
  330. })
  331. } else {
  332. $(".wxTips").show()
  333. $('.wxTips').delay(2000).hide(0);
  334. // wx.miniProgram.showToast({
  335. // title: this.urlData.msg,
  336. // icon: "none",
  337. // duration: 500,
  338. // });
  339. }
  340. },
  341. renew(data) {
  342. console.log("续费啊", data);
  343. wx.miniProgram.navigateTo({
  344. url: '/pages/order/renew/index?record=' + data.id,
  345. })
  346. },
  347. remainTime(ctime, exceptTime) {
  348. var date1 = ctime;
  349. var date2 = exceptTime; //结束时间
  350. var date3 = new Date(date2.replace(/-/g, '/')).getTime() - new Date(date1.replace(/-/g, '/'))
  351. .getTime(); //时间差的毫秒数
  352. console.log("时间戳===========》", date3)
  353. //------------------------------
  354. var tmiss = ''
  355. //计算出相差天数
  356. var days = Math.floor(date3 / (24 * 3600 * 1000))
  357. // console.log(days + "天");
  358. //计算出小时数
  359. var leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
  360. var hours = Math.floor(leave1 / (3600 * 1000))
  361. //计算相差分钟数
  362. var leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
  363. var minutes = Math.floor(leave2 / (60 * 1000))
  364. //计算相差秒数
  365. var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
  366. var seconds = Math.round(leave3 / 1000)
  367. var times = ""
  368. if (Number(days) == 0) {
  369. // console.log(hours + "小时" + minutes + "分")
  370. tmiss = Number(hours) + "小时" + Number(minutes) + "分"
  371. } else {
  372. if (Number(hours) == 0 && Number(minutes) == 0) {
  373. // console.log(days + "天")
  374. tmiss = Number(days) + "天"
  375. } else {
  376. // console.log(days + "天" + hours + "小时 ")
  377. tmiss = Number(days) + "天" + Number(hours) + "小时 "
  378. }
  379. }
  380. // console.log("tmiss>>>>>>", tmiss);
  381. return tmiss
  382. },
  383. swiperNext(data) {
  384. this.getSwiperInfo("next");
  385. },
  386. swiperPrev() {
  387. this.getSwiperInfo("prev");
  388. },
  389. getSwiperInfo(data) {
  390. console.log("方向=======", data, $('.swiper-slide-active').index());
  391. // return
  392. if (data == "next") {
  393. var activeIndex = $('.swiper-slide-active').index() + 1;
  394. } else if (data == "prev") {
  395. var activeIndex = $('.swiper-slide-active').index() - 1;
  396. } else if (data == "prevSlide") {
  397. var activeIndex = $('.swiper-slide-active').index();
  398. } else if (data == "nextSlide") {
  399. var activeIndex = $('.swiper-slide-active').index();
  400. }
  401. var ids = "#wine" + $('.swiper-slide-active').index();
  402. var domprev = $(ids);
  403. console.log("下标id======", activeIndex);
  404. domprev.empty();
  405. let rbdData = {
  406. "userCardId": this.homeList[activeIndex].id,
  407. "deviceStatus": 1,
  408. };
  409. // var baseUrl = "http://192.168.31.20";
  410. var baseUrl = "http://192.168.199.243";
  411. var urlss = 'test.androidscloud.com'
  412. let that = this;
  413. // var player = new Player({
  414. // size: {
  415. // width: 768,
  416. // height: 1024
  417. // }
  418. // });
  419. // var id = 'wine' + activeIndex;
  420. // var secanv = document.getElementById(id);
  421. // secanv.appendChild(player.canvas);
  422. // setTimeout(() => {
  423. $.ajax({
  424. url: baseUrl + "/api/storage/v1/cardStatus/getRbd/restart",
  425. data: JSON.stringify(rbdData),
  426. type: 'post',
  427. dataType: 'json',
  428. // async: false,
  429. contentType: "application/json;charset=UTF-8",
  430. headers: {
  431. 'token': tokens.substring(6, tokens.length),
  432. "Authorization": tokens.substring(6, tokens.length)
  433. },
  434. success: function(data) {
  435. that.urlData = data;
  436. console.log("挂载安卓卡成功", that.urlData);
  437. //
  438. }
  439. })
  440. // var decodeWoker = new Worker('decoder.js');
  441. var id = 'playCanvas' + activeIndex;
  442. var myVideo = document.getElementById(id);
  443. var isDrag = false;
  444. console.log("首页=====", id);
  445. // var secanv = document.getElementById(id);
  446. decodeWoker.onmessage = function(event) {
  447. // console.log("decodeWoker.onmessage")
  448. var objData = event.data;
  449. switch (objData.cmd) {
  450. case 0:
  451. console.log(objData.data);
  452. break;
  453. case 1:
  454. var time = new Date().getTime();
  455. webglPlayer.renderFrame(objData.data, 720, 1280, 720 * 1280, (720 / 2) * (1280 /
  456. 2));
  457. //console.log("渲染耗时", new Date().getTime() - time + "ms");break;
  458. }
  459. }
  460. if (typeof(Worker) !== "undefined") {
  461. console.log("支持webworker");
  462. } else {
  463. alert("不支持webworker");
  464. }
  465. var isFinish = false;
  466. this.canvas = document.getElementById(id);
  467. // var webglPlayer = new WebGLPlayer(this.canvas, {
  468. // preserveDrawingBuffer: false
  469. // });
  470. // var webSocketWorker = new Worker('websocket.js');
  471. var startTime = new Date().getTime();
  472. // webSocketWorker.onmessage = function(event) {
  473. // // console.log("event.data", event.data)
  474. // decodeWoker.postMessage(event.data);
  475. // }
  476. document.addEventListener("visibilitychange", () => {
  477. if (document.visibilityState == "visible") {
  478. } else {
  479. console.log("页面不可见");
  480. }
  481. });
  482. function Close() //webworker 关闭,清理
  483. {
  484. var cmd = {
  485. cmd: 0
  486. };
  487. decodeWoker.postMessage(cmd);
  488. decodeWoker.terminate();
  489. webSocketWorker.postMessage(cmd);
  490. webSocketWorker.terminate();
  491. }
  492. // myVideo.onmousedown = function(event) {
  493. // console.log("22222")
  494. // //放在此处只是为了方便演示,实际使用中查找横竖屏只要刚连接上时调用一次就好。
  495. // //var checkBuffer = GetScreenState();
  496. // //ws.send(checkBuffer);
  497. // /*if(!isFeed)
  498. // {
  499. // console.log("重新申请I帧");
  500. // requestTime = new Date().getTime();
  501. // var buffer = RequestIFrame();
  502. // ws.send(buffer);
  503. // }*/
  504. // //console.log("报文 %s", PrintArry(buffer));
  505. // if (event.button == 0) {
  506. // var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
  507. // var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
  508. // var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
  509. // // ws.send(buffer);
  510. // // decodeWoker.postMessage(event.data);
  511. // // console.log("打印buffer", PrintArry(buffer))
  512. // decodeWoker.postMessage(buffer);
  513. // isDrag = true;
  514. // }
  515. // }
  516. // var strhost = "wss://" + urlss + "/videoWebSocket?clientType=1&cardIp=" +
  517. // that.urlData.exIp +
  518. // "&port=" + that.urlData.exPort + "&sn=" + that.urlData.sn;
  519. // var strhost = "ws://192.168.11.66:9101";
  520. // var strhost = "ws://" + that.urlData.exIp + ":" + that.urlData.exPort
  521. // var strhost="wss://www.ted2018.com:9101";
  522. // var strhost = "wss://test.androidscloud.com:9105";
  523. // // var strhost="wss://test.androidscloud.com/videoWebSocket?clientType=1&cardIp=14.215.128.96&port=2005&sn=RK3930C2301900005";
  524. // var client = new WebSocket(strhost);
  525. // console.log('wsssss==============', client)
  526. // client.binaryType = 'arraybuffer';
  527. // // debugger
  528. // client.onopen = function(evt) {
  529. // // onOpen(evt)
  530. // console.log("开始链接==============", evt);
  531. // };
  532. // client.onclose = function(evt) {
  533. // // onClose(evt)
  534. // };
  535. // client.onmessage = function(evt) {
  536. // // onMessage(evt)
  537. // // console.log("onMessage==============", evt);
  538. // var messageData = new Uint8Array(evt.data);
  539. // player.decode(messageData);
  540. // };
  541. // client.onerror = function(evt) {
  542. // // onError(evt)
  543. // };
  544. // }, 1)
  545. },
  546. gethomeList() {
  547. var baseUrl = 'http://192.168.199.243';
  548. // var baseUrl = "http://192.168.31.20";
  549. var query = window.location.search.substring(1);
  550. var vars = query.split("&");
  551. var tokens = vars.find(e => {
  552. return e.startsWith('token')
  553. }) || ''
  554. var data = {}
  555. var clientType = vars.find(e => {
  556. return e.startsWith('clientType')
  557. }) || ''
  558. var cardIp = vars.find(e => {
  559. return e.startsWith('cardIp')
  560. }) || ''
  561. var port = vars.find(e => {
  562. return e.startsWith('port')
  563. }) || ''
  564. var sn = vars.find(e => {
  565. return e.startsWith('sn')
  566. }) || ''
  567. var demoTime = vars.find(e => {
  568. return e.startsWith('demoTime')
  569. }) || ''
  570. var id = vars.find(e => {
  571. return e.startsWith('id')
  572. }) || ''
  573. var vip = vars.find(e => {
  574. return e.startsWith('vip')
  575. }) || ''
  576. var diskName = vars.find(e => {
  577. return e.startsWith('diskName')
  578. }) || ''
  579. var times = vars.find(e => {
  580. return e.startsWith('times')
  581. }) || ''
  582. var username = vars.find(e => {
  583. return e.startsWith('username')
  584. }) || ''
  585. var userCardId = vars.find(e => {
  586. return e.startsWith('userCardId')
  587. }) || ''
  588. var ip = vars.find(e => {
  589. return e.startsWith('ip')
  590. }) || ''
  591. var windowHeight = vars.find(e => {
  592. return e.startsWith('windowHeight')
  593. }) || ''
  594. var tokens = vars.find(e => {
  595. return e.startsWith('token')
  596. }) || ''
  597. data.clientType = clientType.substring(11, clientType.length)
  598. data.cardIp = cardIp.substring(7, cardIp.length)
  599. data.port = port.substring(5, port.length)
  600. data.sn = sn.substring(3, sn.length)
  601. data.demoTime = demoTime.substring(9, demoTime.length)
  602. data.id = id.substring(3, id.length)
  603. data.vip = vip.substring(4, vip.length)
  604. data.diskName = diskName.substring(9, diskName.length)
  605. data.times = times.substring(6, times.length)
  606. data.username = username.substring(9, username.length)
  607. data.userCardId = userCardId.substring(11, userCardId.length)
  608. data.ip = ip.substring(3, ip.length)
  609. console.log("data====", data);
  610. this.urlData = data;
  611. let that = this;
  612. $.ajax({
  613. url: baseUrl + "/api/user/v1/client/disk/info",
  614. data: {},
  615. type: 'get',
  616. dataType: 'json',
  617. headers: {
  618. 'token': tokens.substring(6, tokens.length),
  619. "Authorization": tokens.substring(6, tokens.length)
  620. },
  621. success: function(data) {
  622. console.log("云手机信息=======", data);
  623. if (data.data) {
  624. that.homeList = data.data.diskInfo;
  625. console.log("云手机this.homeListthis.homeListthis.homeList=======", that
  626. .homeList);
  627. var urlss = 'test.androidscloud.com'
  628. let rbdData = {
  629. "userCardId": that.homeList[0].id,
  630. "deviceStatus": 1,
  631. };
  632. let activeIndex = $('.swiper-slide-active').index();
  633. // let that = this;
  634. setTimeout(() => {
  635. $.ajax({
  636. url: baseUrl +
  637. "/api/storage/v1/cardStatus/getRbd/restart",
  638. data: JSON.stringify(rbdData),
  639. // data:rbdData,
  640. type: 'post',
  641. dataType: 'json',
  642. contentType: "application/json;charset=UTF-8",
  643. async: false,
  644. headers: {
  645. 'token': tokens.substring(6, tokens.length),
  646. "Authorization": tokens.substring(6, tokens
  647. .length)
  648. },
  649. success: function(data) {
  650. that.urlData = data.data;
  651. console.log("挂载安卓卡成功", that.urlData);
  652. //
  653. }
  654. })
  655. console.log(
  656. "that.urlDatathat.urlDatathat.urlDatathat.urlData",
  657. that.urlData);
  658. // var decodeWoker = new Worker('decoder.js');
  659. var id = 'playCanvas' + activeIndex;
  660. var myVideo = document.getElementById(id);
  661. // decodeWoker.postMessage(RequestIFrame(that.homeList[0].sn));
  662. var isDrag = false;
  663. console.log("首页=====", id);
  664. // var secanv = document.getElementById(id);
  665. // decodeWoker.onmessage = function(event) {
  666. // // console.log("decodeWoker.onmessage")
  667. // var objData = event.data;
  668. // switch (objData.cmd) {
  669. // case 0:
  670. // console.log(objData.data);
  671. // break;
  672. // case 1:
  673. // var time = new Date().getTime();
  674. // // webglPlayer.renderFrame(objData.data, 720,
  675. // // 1280, 720 * 1280, (720 / 2) * (1280 /
  676. // // 2));
  677. // //console.log("渲染耗时", new Date().getTime() - time + "ms");break;
  678. // }
  679. // }
  680. // if (typeof(Worker) !== "undefined") {
  681. // console.log("支持webworker");
  682. // } else {
  683. // alert("不支持webworker");
  684. // }
  685. // var isFinish = false;
  686. // this.canvas = document.getElementById(id);
  687. // // var webglPlayer = new WebGLPlayer(this.canvas, {
  688. // // preserveDrawingBuffer: false
  689. // // });
  690. // var webSocketWorker = new Worker('websocket.js');
  691. // var startTime = new Date().getTime();
  692. // webSocketWorker.onmessage = function(event) {
  693. // // console.log("event.data", event.data)
  694. // decodeWoker.postMessage(event.data);
  695. // }
  696. // document.addEventListener("visibilitychange", () => {
  697. // if (document.visibilityState == "visible") {
  698. // } else {
  699. // console.log("页面不可见");
  700. // }
  701. // });
  702. function Close() //webworker 关闭,清理
  703. {
  704. var cmd = {
  705. cmd: 0
  706. };
  707. decodeWoker.postMessage(cmd);
  708. decodeWoker.terminate();
  709. webSocketWorker.postMessage(cmd);
  710. webSocketWorker.terminate();
  711. }
  712. // myVideo.onmousedown = function(event) {
  713. // console.log("22222")
  714. // if (event.button == 0) {
  715. // var posX = event.offsetX * 1080 * 1.0 / myVideo.clientWidth;
  716. // var posY = event.offsetY * 1920 * 1.0 / myVideo.clientHeight;
  717. // var buffer = ExexuteMouseDown(posX.toString(), posY.toString());
  718. // // ws.send(buffer);
  719. // // decodeWoker.postMessage(event.data);
  720. // // console.log("打印buffer", PrintArry(buffer))
  721. // decodeWoker.postMessage(buffer);
  722. // isDrag = true;
  723. // }
  724. // }
  725. // myVideo.onmousedown = function(event) {
  726. // if (event.button == 0) {
  727. // var posX = event.offsetX * 720 * 1.0 / myVideo
  728. // .clientWidth;
  729. // var posY = event.offsetY * 1280 * 1.0 / myVideo
  730. // .clientHeight;
  731. // var buffer = ExexuteMouseDown(posX.toString(),
  732. // posY.toString());
  733. // // ws.send(buffer);
  734. // decodeWoker.postMessage(buffer);
  735. // isDrag = true;
  736. // }
  737. // }
  738. // myVideo.onmousemove = function(event) {
  739. // if (isDrag && event.button == 0) {
  740. // var posX = event.offsetX * 720 * 1.0 / myVideo
  741. // .clientWidth;
  742. // var posY = event.offsetY * 1280 * 1.0 / myVideo
  743. // .clientHeight;
  744. // var buffer = ExexuteMouseMove(posX.toString(),
  745. // posY.toString());
  746. // ws.send(buffer);
  747. // console.log("移动位置 %d, %d", posX, posY);
  748. // }
  749. // }
  750. // myVideo.onmouseup = function(event) {
  751. // isDrag = false;
  752. // var posX = event.offsetX * 720 * 1.0 / myVideo
  753. // .clientWidth;
  754. // var posY = event.offsetY * 1280 * 1.0 / myVideo
  755. // .clientHeight;
  756. // var buffer = ExexuteMouseUp(posX.toString(), posY
  757. // .toString());
  758. // ws.send(buffer);
  759. // }
  760. // myVideo.onkeydown = function(event) {
  761. // ExexuteKeyDown(e.keyCode);
  762. // }
  763. }, 1)
  764. } else {
  765. }
  766. //
  767. }
  768. })
  769. }
  770. }
  771. })
  772. var homeList = []; //云手机列表信息
  773. var url = window.location.href;
  774. url = url.split('/')
  775. console.log(url)
  776. // var baseUrl = 'https://' + url[2] //'http://192.168.31.159'//'http://' + url[2]
  777. // var baseUrl = 'http://192.168.31.20'
  778. var baseUrl = 'http://192.168.199.243';
  779. var query = window.location.search.substring(1);
  780. var vars = query.split("&");
  781. // var urls = "https://xcx.androidscloud.com"
  782. // 审核
  783. $.ajax({
  784. url: baseUrl + "/api/user/v1/config/download/isShow",
  785. data: {},
  786. type: 'get',
  787. dataType: 'json',
  788. contentType: "application/json;charset=UTF-8",
  789. success: function(data) {
  790. if (data.data) {
  791. $("#showsuss").show()
  792. } else {
  793. $("#showsuss").hide()
  794. }
  795. //
  796. }
  797. })
  798. // var baseUrl = window.location.href; //"http://192.168.31.20"
  799. document.body.addEventListener('touchmove', function(e) {
  800. e.preventDefault()
  801. }, {
  802. passive: false
  803. })
  804. var data = {}
  805. var clientType = vars.find(e => {
  806. return e.startsWith('clientType')
  807. }) || ''
  808. var cardIp = vars.find(e => {
  809. return e.startsWith('cardIp')
  810. }) || ''
  811. var port = vars.find(e => {
  812. return e.startsWith('port')
  813. }) || ''
  814. var sn = vars.find(e => {
  815. return e.startsWith('sn')
  816. }) || ''
  817. var demoTime = vars.find(e => {
  818. return e.startsWith('demoTime')
  819. }) || ''
  820. var id = vars.find(e => {
  821. return e.startsWith('id')
  822. }) || ''
  823. var vip = vars.find(e => {
  824. return e.startsWith('vip')
  825. }) || ''
  826. var diskName = vars.find(e => {
  827. return e.startsWith('diskName')
  828. }) || ''
  829. var times = vars.find(e => {
  830. return e.startsWith('times')
  831. }) || ''
  832. var username = vars.find(e => {
  833. return e.startsWith('username')
  834. }) || ''
  835. var userCardId = vars.find(e => {
  836. return e.startsWith('userCardId')
  837. }) || ''
  838. var ip = vars.find(e => {
  839. return e.startsWith('ip')
  840. }) || ''
  841. var windowHeight = vars.find(e => {
  842. return e.startsWith('windowHeight')
  843. }) || ''
  844. var tokens = vars.find(e => {
  845. return e.startsWith('token')
  846. }) || ''
  847. $(".swiper-container").css("height", windowHeight.substring(13, windowHeight.length));
  848. console.log("获取网页高度", windowHeight.substring(13, windowHeight.length));
  849. // $(".aaa").text(clientType.substring(11, clientType.length))
  850. // let cardIp = getUrlParam('cardIp');
  851. // console.log(cardIp)
  852. $.ajax({
  853. url: baseUrl + "/api/user/v1/client/disk/info",
  854. data: {},
  855. type: 'get',
  856. dataType: 'json',
  857. headers: {
  858. 'token': tokens.substring(6, tokens.length),
  859. "Authorization": tokens.substring(6, tokens.length)
  860. },
  861. success: function(data) {
  862. console.log("云手机信息=======", data);
  863. if (data.data) {
  864. homeList = data.data.diskInfo;
  865. } else {
  866. }
  867. //
  868. }
  869. })
  870. getQueryString: (name) => {
  871. let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  872. let r = window.location.search.substr(1).match(reg);
  873. console.log(name)
  874. if (r != null) {
  875. return unescape(decodeURI(r[2]));
  876. return null;
  877. }
  878. }
  879. data.clientType = clientType.substring(11, clientType.length)
  880. data.cardIp = cardIp.substring(7, cardIp.length)
  881. data.port = port.substring(5, port.length)
  882. data.sn = sn.substring(3, sn.length)
  883. data.demoTime = demoTime.substring(9, demoTime.length)
  884. data.id = id.substring(3, id.length)
  885. data.vip = vip.substring(4, vip.length)
  886. data.diskName = diskName.substring(9, diskName.length)
  887. data.times = times.substring(6, times.length)
  888. data.username = username.substring(9, username.length)
  889. data.userCardId = userCardId.substring(11, userCardId.length)
  890. data.ip = ip.substring(3, ip.length)
  891. let timestext = "剩" + decodeURI(data.times) || data.demoTime / 3600 + "小时"
  892. $(".diskName").text(decodeURI(data.diskName) || data.username)
  893. console.log("timestext>>>>>>", timestext);
  894. $(".canvastime").text(timestext)
  895. if (data.vip == "0") {
  896. $(".canvasfalse").css({
  897. "display": "block"
  898. })
  899. $(".canvas").css({
  900. "display": "none"
  901. })
  902. } else {
  903. $(".canvas").css({
  904. "display": "block"
  905. })
  906. $(".canvasfalse").css({
  907. "display": "none"
  908. })
  909. }
  910. // // 云手机相关逻辑
  911. // var player = new Player({
  912. // size: {
  913. // width: 768,
  914. // height: 1024
  915. // }
  916. // });
  917. // console.log("player====", player, player.canvas);
  918. // // document.body.appendChild(player.canvas);
  919. // // var urlss = url[2]
  920. // var urlss = 'test.androidscloud.com'
  921. // for (var i = 0; i <= homeList; i++) {
  922. // console.log("i=============",i,homeList);
  923. // }
  924. // var secanv = document.getElementById("wine");
  925. // secanv.appendChild(player.canvas);
  926. // // var strhost = Number(data.clientType) ===2? "wss://"+ urlss +"/shareWebSocket?clientType=2&username="+data.username+"&userCardId="+data.userCardId+"&ip="+data.ip : Number(data.clientType) ===3?"wss://"+ urlss +"/authVideoWebSocket?clientType=3&username="+data.username+"&userCardId="+data.userCardId :"wss://"+ urlss +"/videoWebSocket?clientType="+ data.clientType +"&cardIp="+data.cardIp +"&port="+ data.port +"&sn="+data.sn;
  927. // var strhost = "wss://" + urlss + "/videoWebSocket?clientType=" + data.clientType + "&cardIp=" + data.cardIp +
  928. // "&port=" + data.port + "&sn=" + data.sn;
  929. // var client = new WebSocket(strhost);
  930. // console.log('wsssss==============', client)
  931. // client.binaryType = 'arraybuffer';
  932. // // debugger
  933. // client.onopen = function(evt) {
  934. // // onOpen(evt)
  935. // };
  936. // client.onclose = function(evt) {
  937. // // onClose(evt)
  938. // };
  939. // client.onmessage = function(evt) {
  940. // onMessage(evt)
  941. // };
  942. // client.onerror = function(evt) {
  943. // // onError(evt)
  944. // };
  945. function onMessage(evt) {
  946. console.log("onMessage==============", evt);
  947. var messageData = new Uint8Array(evt.data);
  948. player.decode(messageData);
  949. }
  950. $("canvas").on("click", function() {
  951. client.close()
  952. // ?clientType=0&cardIp=30.30.30.42&port=9100&sn=RK3930C2301900042&demoTime=3600&id=3
  953. setTimeout(() => {
  954. wx.miniProgram.navigateTo({
  955. url: '/pages/trialInterface/trialInterface?clientType=' + data.clientType +
  956. "&cardIp=" + data.cardIp +
  957. "&port=" + data.port + "&sn=" + data.sn + "&username=" + data.username +
  958. "&userCardId=" + data.userCardId +
  959. "&demoTime=3600&id=" + data.id + "&diskName=" + decodeURI(data.diskName)
  960. })
  961. }, 100);
  962. })
  963. $(".helps").click(function() {
  964. // wx.miniProgram.navigateTo({
  965. // url: '/pages/viewurl/viewurl'
  966. // })
  967. //按点击处理
  968. var set = $('.helps').attr("data-id")
  969. if (set == '1') {
  970. $('.helps').attr({
  971. "data-id": "2"
  972. })
  973. $(".helps").hide();
  974. $(".help").css({
  975. "right": "0"
  976. })
  977. } else {
  978. $('.helps').attr({
  979. "data-id": "1"
  980. })
  981. $(".help").css({
  982. "right": "-4rem"
  983. })
  984. }
  985. });
  986. function stopPropagation(e) {
  987. if (e.stopPropagation)
  988. e.stopPropagation();
  989. else
  990. e.cancelBubble = true;
  991. }
  992. $(document).bind('click', function() {
  993. $(".help").css({
  994. "right": "-4rem"
  995. })
  996. $('.helps').attr({
  997. "data-id": "1"
  998. })
  999. $(".helps").show();
  1000. });
  1001. $('.helpfont').bind('click', function(e) {
  1002. console.log("帮助啊啊");
  1003. // stopPropagation(e);
  1004. wx.miniProgram.navigateTo({
  1005. url: '/pages/viewurl/viewurl'
  1006. })
  1007. });
  1008. $('.buyIcon,.kp_btn').bind('click', function(e) {
  1009. console.log("购买");
  1010. // stopPropagation(e);
  1011. wx.miniProgram.navigateTo({
  1012. url: '/pages/order/buy/index'
  1013. })
  1014. });
  1015. // $('.homeRenew').bind('click', function(e) {
  1016. // console.log("续费啊");
  1017. // // stopPropagation(e);
  1018. // wx.miniProgram.navigateTo({
  1019. // url: '/pages/order/buy/index'
  1020. // })
  1021. // });
  1022. $(".homeRenew").on("click", function() {
  1023. console.log("续费啊");
  1024. wx.miniProgram.navigateTo({
  1025. url: '/pages/order/renew/index'
  1026. })
  1027. });
  1028. $('.helps').bind('click', function(e) {
  1029. stopPropagation(e);
  1030. });
  1031. //
  1032. // var player = new Player({
  1033. // size: {
  1034. // width: 1280,
  1035. // height: 720
  1036. // }
  1037. // });
  1038. // var secanv = document.getElementById("wine");
  1039. // secanv.appendChild(player.canvas);
  1040. // var players = AV.Player.fromWebSocket("ws://" + urlss + '/videoWebSocket?' + "clientType=" + data.clientType +
  1041. // "&cardIp=" + data.cardIp + "&port=" + data.port + "&sn=" + data.sn);
  1042. // players.play();
  1043. $(".boximg").on("click", function() {
  1044. $(".mainbox").css({
  1045. "display": "none"
  1046. })
  1047. $(".maxs").css({
  1048. "display": "none"
  1049. })
  1050. })
  1051. $(".maxs").on("click", function() {
  1052. $(".mainbox").css({
  1053. "display": "none"
  1054. })
  1055. $(".maxs").css({
  1056. "display": "none"
  1057. })
  1058. })
  1059. $(".addto").on("click", function() {
  1060. $(".mainbox").css({
  1061. "display": "block"
  1062. })
  1063. $(".maxs").css({
  1064. "display": "block"
  1065. })
  1066. })
  1067. $(".notLoggedin-bt").on("click", function() {
  1068. // $(".mainbox").css({
  1069. // "display": "block"
  1070. // })
  1071. // $(".maxs").css({
  1072. // "display": "block"
  1073. // })
  1074. })
  1075. function selectText(x) {
  1076. if (document.selection) {
  1077. var range = document.body.createTextRange();
  1078. range.moveToElementText(x);
  1079. range.select();
  1080. } else if (window.getSelection) {
  1081. var selection = window.getSelection();
  1082. var range = document.createRange();
  1083. selection.removeAllRanges();
  1084. range.selectNodeContents(x);
  1085. selection.addRange(range);
  1086. }
  1087. }
  1088. function cp(x) {
  1089. $(".mainbox").css({
  1090. "display": "none"
  1091. })
  1092. $(".sbox").css({
  1093. "display": "block"
  1094. })
  1095. selectText(x);
  1096. document.execCommand("copy");
  1097. alert("复制成功")
  1098. }
  1099. </script>
  1100. </body>
  1101. </html>