WXtrialInterface.js 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825
  1. import request from './request.js'
  2. import { clickCopyText, pasteText } from './common.js'
  3. // 禁止双击缩放
  4. document.addEventListener('dblclick', function (e) {
  5. e.preventDefault();
  6. });
  7. const { Dialog, Toast } = vant
  8. Toast.setDefaultOptions({ duration: 2000 });
  9. // 从 CLOUD_GAME_SDK 结构中解构必要的函数和常量
  10. const RtcEngineSDK = window.rtc_sdk.CloudGameSdk
  11. // 业务通道定时标识
  12. let doConnectDirectivesIntervalerPing = null
  13. // 获取云机数据定时标识
  14. let getUserCardInfoTimerInterval = null
  15. let getUserCardInfoRequestNum = 1
  16. let doConnectDirectivesRequestNum = 1
  17. let doConnectDirectivesTimerInterval = null
  18. // 触碰间隔定时标识
  19. let noOperationSetTimeoutTimeInterval = null
  20. let noOperationSetIntervalTimeInterval = null
  21. // 倒计时定时标识
  22. let countdownTimeInterval = null
  23. // let vc = new VConsole()
  24. const app = new Vue({
  25. el: '#app',
  26. data: {
  27. // 底部按钮
  28. footerBtn: [{
  29. key: 'task',
  30. img: '../static/img/wx/gengduo_icon.png'
  31. }, {
  32. key: 'home',
  33. img: '../static/img/wx/home_icon.png'
  34. }, {
  35. key: 'onBack',
  36. img: '../static/img/wx/fanhui_icon.png'
  37. }],
  38. // 宽高
  39. width: 0,
  40. height: 0,
  41. // webRtc实例
  42. engine: {},
  43. // 横竖屏幕 false是竖
  44. isLandscape: false,
  45. // 悬浮球位置
  46. levitatedSpherePositionData: {},
  47. // 右侧弹窗
  48. levitatedSphereVisible: false,
  49. // 清晰度数据
  50. definitionList: [{
  51. name: '高清',
  52. value: 2800
  53. }, {
  54. name: '标清',
  55. value: 2200,
  56. }, {
  57. name: '极速',
  58. value: 1800,
  59. }],
  60. // 选中的清晰度
  61. definitionValue: '',
  62. // 分辨率
  63. resolutionRatioVisible: false,
  64. resolutionRatioList: [],
  65. // 需要用到的参数
  66. parametersData: {},
  67. // 屏幕分辨率
  68. phoneSize: {},
  69. // 业务指令通道实例
  70. doConnectDirectivesWs: null,
  71. // 粘贴版
  72. pasteVersionVisible: false,
  73. pasteVersionList: [],
  74. // 复制内容
  75. copyTextValue: '',
  76. copyTextVisible: false,
  77. // 卡数据
  78. userCardInfoData: {},
  79. // 是否显示计时
  80. timingVisible: false,
  81. // 计费规则
  82. billingRulesVisible: false,
  83. applyRecommendVisible: false,
  84. // 是否是启动不操作自动退出云机功能
  85. isFiringNoOperationSetTimeout: false,
  86. // 超过指定触碰时间的弹窗
  87. noOperationSetTimeoutTimeVisible: false,
  88. // 超过指定触碰时间的弹窗文案
  89. confirmButtonText: '',
  90. // 云机剩余时长
  91. countdownTime: 0,
  92. // 是否支持webRTC
  93. isSupportRtc: !!(
  94. typeof RTCPeerConnection !== 'undefined' &&
  95. typeof RTCIceCandidate !== 'undefined' &&
  96. typeof RTCSessionDescription !== 'undefined'
  97. ),
  98. // 推荐列表
  99. recommendList: [],
  100. layoutViewWidth: null,
  101. layoutViewHeight: null,
  102. // 是否显示video
  103. isShowVideo: false,
  104. plugFlowStartTime: null,
  105. obtainCardInfoStartTime: null
  106. },
  107. created() {
  108. this.initConfig()
  109. },
  110. mounted() {
  111. this.getUserCardInfo()
  112. },
  113. computed: {
  114. // 右侧弹框退出相关按钮
  115. exitList() {
  116. let arr = [{
  117. name: '剪贴版',
  118. key: "shearplate",
  119. img: '../static/img/wx/jianqieban_icon.png'
  120. }, {
  121. name: '退出',
  122. key: 'signout',
  123. img: '../static/img/wx/tuichu_icon.png'
  124. }]
  125. if ([1, 2, 3].includes(+this.parametersData.userCardType)) {
  126. arr.push({
  127. name: '退出并下机',
  128. key: 'dormant',
  129. img: '../static/img/wx/tuichu_icon.png'
  130. })
  131. }
  132. return arr
  133. },
  134. rtcMediaPlayerStyle() {
  135. let obj = {
  136. objectFit: "fill"
  137. }
  138. if (this.isLandscape) {
  139. obj = {
  140. width: `${this.layoutViewHeight}px`,
  141. height: `${this.layoutViewWidth}px`,
  142. left: '50%',
  143. top: '50%',
  144. transform: 'translate(-50%, -50%) rotate(90deg)'
  145. }
  146. }
  147. return obj
  148. }
  149. },
  150. methods: {
  151. // 初始化
  152. initConfig() {
  153. // 获取窗口尺寸
  154. this.getInitSize()
  155. let levitatedSpherePositionData = localStorage.getItem('levitatedSpherePositionData')
  156. let definitionValue = localStorage.getItem('definitionValue')
  157. // 悬浮球位置
  158. this.levitatedSpherePositionData = levitatedSpherePositionData ? JSON.parse(levitatedSpherePositionData) : { right: '15px', top: '15px' }
  159. // 清晰度
  160. this.definitionValue = definitionValue ? +definitionValue : 2200
  161. // 获取参数
  162. this.parametersData = getParameters()
  163. let { token, validTime } = this.parametersData
  164. // 给api增加需要的参数
  165. request.defaults.headers.Authorization = token
  166. request.defaults.headers.versionname = '5.8.7'
  167. window.onresize = () => {
  168. this.getInitSize()
  169. }
  170. },
  171. // 连接webRTC
  172. connectWebRtc() {
  173. // console.time('获取推流响应消耗时间:')
  174. this.plugFlowStartTime = +new Date()
  175. const { sn: topic, cardToken: authToken, internetHttps, internetHttp, webrtcTransferCmnet, webrtcTransferTelecom, webrtcTransferUnicom } = this.userCardInfoData;
  176. const isWss = location.protocol === 'https:'
  177. const url = `${isWss ? 'wss://' : 'ws://'}${isWss ? internetHttps : internetHttp}/nats`;
  178. const ICEServerUrl = [
  179. { "CMNET": webrtcTransferCmnet || '' }, // 移动
  180. { 'CHINANET-GD': webrtcTransferTelecom || '' }, // 电信
  181. { 'UNICOM-GD': webrtcTransferUnicom || '' }, // 联通
  182. ];
  183. const connection = {
  184. name: "猪猪令是猪",
  185. topic, // 云机ID 必填
  186. url, //信令服务地址 必填
  187. ICEServerUrl,
  188. width: 720, // 推流视频宽度 必填
  189. height: 1280, // 推流视频高度 必填
  190. // cardWidth: this.phoneSize.width || 1080, // 云机系统分辨率 宽 必填
  191. // cardHeight: this.phoneSize.height || 1920, // 云机系统分辨率 高 必填
  192. // cardDensity: this.phoneSize.dpi || 480, // 云机系统显示 密度 必填
  193. cardWidth: 0, // 云机系统分辨率 宽 必填
  194. cardHeight: 0, // 云机系统分辨率 高 必填
  195. cardDensity: 0, // 云机系统显示 密度 必填
  196. authToken, //拉流鉴权 token 必填
  197. bitrate: 6000, //码率 必填
  198. fps: 30, //必填
  199. callback: this.statusCallBack,//回调函数 必填
  200. };
  201. // 初始化 SDK
  202. this.engine = new RtcEngineSDK(connection);
  203. this.engine.RtcEngine()
  204. },
  205. // webRTC状态回调
  206. statusCallBack(event) {
  207. if (event.type !== 'StreamStates') {
  208. // console.log("链接的状态", event, event.val);
  209. }
  210. switch (event.type) {
  211. case "screenChange":
  212. // 0:横屏 1:竖屏
  213. // console.log("屏幕方向变化事件:" + event.val);
  214. this.isLandscape = event.val === 0;
  215. break;
  216. case "wsState":
  217. // “TIMEOUT”:nats链接超时
  218. // success 链接成功
  219. const status = ["TIMEOUT", "failed"]
  220. if (status.includes(event.val)) {
  221. Dialog.alert({
  222. title: '提示',
  223. message: '链接超时',
  224. confirmButtonText: '确定',
  225. confirmButtonColor: '#3cc51f',
  226. beforeClose: (action, done) => {
  227. this.exit()
  228. done()
  229. }
  230. })
  231. }
  232. break;
  233. case "rtcState":
  234. // “connected”:rtc链接成功 “failed”:rtc链接失败 “closed”:rtc链接关闭 “disconnected”:rtc链接超时
  235. // console.log(event.val, 'rtc链接成功状态')
  236. if (event.val === "connected") {
  237. // Toast.clear();
  238. // this.doConnectDirectives()
  239. // this.isShowVideo = true
  240. // this.$refs.rtcMediaPlayer.play()
  241. // let ms = +new Date - this.plugFlowStartTime
  242. // console.timeEnd('获取推流响应消耗时间:')
  243. // console.log(`获取推流响应消耗时间:${ms / 1000}秒`)
  244. // this.definitionFun(this.definitionValue)
  245. // this.pushflowPopup()
  246. // this.getResidueTime()
  247. playOnBtn.bind(this)()
  248. return
  249. }
  250. if (event.val === "connecting") return
  251. this.exit()
  252. break;
  253. case "AuthenticationStatus":
  254. // console.log(`鉴权${event.val === "success" ? '成功' : '失败'}`);
  255. break;
  256. case "StreamStates":
  257. // “currentRoundTripTime”:延迟 “lostRate”:丢包率 “seconds_KBytes”:带宽 “framesPerSecond”:帧率
  258. // ballPosition.value = event.val
  259. // console.log(event.val)
  260. break;
  261. case 'videoResolution': // 云机视频分辨率
  262. // console.log(event.val, '分辨率')
  263. break
  264. case 'networkService': // 获取三网信息
  265. // console.log("三网信息:", event.val);
  266. break
  267. case 'networkServiceURL': // 获取三网信息
  268. // console.log("三网IP地址:", event.val);
  269. break
  270. }
  271. },
  272. // 悬浮球移动
  273. touchmoveLevitatedSphere(e) {
  274. let { pageX, pageY } = e.targetTouches[0]
  275. let min = 20
  276. let MaxPageX = this.width - 20
  277. let MaxPageY = this.height - 20
  278. pageX = pageX <= min ? min : (pageX >= MaxPageX ? MaxPageX : pageX)
  279. pageY = pageY <= min ? min : (pageY >= MaxPageY ? MaxPageY : pageY)
  280. this.levitatedSpherePositionData = {
  281. left: `${pageX}px`,
  282. top: `${pageY}px`,
  283. transform: 'translate(-50%, -50%)'
  284. }
  285. },
  286. touchendLevitatedSphere(e) {
  287. localStorage.setItem('levitatedSpherePositionData', JSON.stringify(this.levitatedSpherePositionData))
  288. },
  289. // 清晰度
  290. definitionFun(value) {
  291. this.definitionValue = value
  292. this.engine.makeBitrate && this.engine.makeBitrate(value)
  293. localStorage.setItem('definitionValue', value)
  294. this.levitatedSphereVisible = false
  295. },
  296. // 修改分辨率
  297. resolutionRatio() {
  298. request.get('/api/resources/v5/machine/resolution/getResolvingPower', { params: { userCardId: this.parametersData.userCardId } }).then(res => {
  299. if (res.success) {
  300. this.resolutionRatioList = res.data.map(item => {
  301. item.height = item.high
  302. return item
  303. })
  304. this.levitatedSphereVisible = false
  305. this.resolutionRatioVisible = true
  306. }
  307. })
  308. },
  309. // 确定修改分辨率
  310. confirmResolution() {
  311. let { width, height, dpi: density } = this.phoneSize
  312. this.engine.makeResolution && this.engine.makeResolution({ width, height, density })
  313. this.resolutionRatioVisible = false
  314. },
  315. // 退出相关按钮操作
  316. exitFun(key) {
  317. switch (key) {
  318. case 'dormant':
  319. Dialog.alert({
  320. title: '提示',
  321. message: '确定退出云手机并下机',
  322. confirmButtonText: '确定',
  323. confirmButtonColor: '#3cc51f',
  324. showCancelButton: true,
  325. beforeClose: (action, done) => {
  326. if (action === 'cancel') done()
  327. if (action === 'confirm') {
  328. this.downline(done)
  329. }
  330. }
  331. })
  332. break;
  333. case 'shearplate':
  334. this.copyTextValue = ''
  335. pasteText().then(content => {
  336. typeof content !== 'boolean' ? this.openPasteboard(content) : this.copyTextVisible = true
  337. }, err => {
  338. this.copyTextVisible = true
  339. })
  340. break;
  341. case 'signout':
  342. this.exit()
  343. break;
  344. }
  345. },
  346. // 业务指令
  347. doConnectDirectives() {
  348. let { internetHttps, localIp, cardToken } = this.userCardInfoData
  349. let cUrl = `wss://${internetHttps}/businessChannel?cardIp=${localIp}&token=${cardToken}&type=directives`
  350. this.doConnectDirectivesWs = new WebSocket(cUrl);
  351. this.doConnectDirectivesWs.binaryType = 'arraybuffer'
  352. clearInterval(doConnectDirectivesIntervalerPing)
  353. // 链接成功
  354. this.doConnectDirectivesWs.onopen = (e) => {
  355. doConnectDirectivesIntervalerPing = setInterval(() => {
  356. if (this.doConnectDirectivesWs.readyState === 1) {
  357. this.doConnectDirectivesWs.send(JSON.stringify({ type: 'ping' }));
  358. } else {
  359. clearInterval(doConnectDirectivesIntervalerPing);
  360. }
  361. }, 3000)
  362. this.doConnectDirectivesWs.send(JSON.stringify({ type: 'getVsStatus' }))
  363. this.doConnectDirectivesWs.send(JSON.stringify({ type: 'bitRate', data: { bitRate: 1243000 } }))
  364. this.doConnectDirectivesWs.send(JSON.stringify({ type: 'InputMethod', data: { type: 2 } }))
  365. this.doConnectDirectivesWs.send(JSON.stringify({ type: 'getPhoneSize' }))
  366. }
  367. // 接受到的消息
  368. this.doConnectDirectivesWs.onmessage = res => {
  369. const result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
  370. switch (result.type) {
  371. // 分辨率
  372. case 'getPhoneSize':
  373. case 'setPhoneSize':
  374. let data = JSON.parse(JSON.stringify(result.data))
  375. let { width, height } = data
  376. if (width > height) {
  377. data.width = height
  378. data.height = width
  379. }
  380. this.phoneSize = data
  381. break
  382. // 云机复制过来的文本
  383. case 'reProduceText':
  384. if (navigator.clipboard) {
  385. navigator.clipboard.writeText(result.data.text);
  386. }
  387. break
  388. case 'downAdnInstallRep':
  389. Toast(result.data.msg)
  390. break
  391. }
  392. }
  393. // 链接报错的回调
  394. this.doConnectDirectivesWs.onerror = res => {
  395. clearInterval(doConnectDirectivesTimerInterval)
  396. if (doConnectDirectivesRequestNum > 6) {
  397. this.exit()
  398. return
  399. }
  400. doConnectDirectivesRequestNum++
  401. this.doConnectDirectives()
  402. }
  403. },
  404. // 粘贴版相关接口
  405. shearContent({ type, params, queryStr }) {
  406. let url = '/api/public/v5/shear/content'
  407. if (queryStr) url += queryStr
  408. return request[type](url, params)
  409. },
  410. // 清空全部、清除某条
  411. deletePasteVersion(ids) {
  412. if (!ids) {
  413. Dialog.alert({
  414. title: '提示',
  415. message: '确定清空剪贴板?',
  416. confirmButtonText: '确定',
  417. confirmButtonColor: '#3cc51f',
  418. showCancelButton: true,
  419. beforeClose: (action, done) => {
  420. if (action === 'cancel') done()
  421. if (action === 'confirm') {
  422. fun.bind(this)(done)
  423. }
  424. }
  425. })
  426. return
  427. }
  428. fun.bind(this)()
  429. function fun(callBack = () => { }) {
  430. this.shearContent({
  431. type: 'delete', queryStr: Qs.stringify(
  432. {
  433. ids: ids ? [ids] : this.pasteVersionList.map((v) => v.id),
  434. },
  435. { arrayFormat: 'repeat', addQueryPrefix: true },
  436. )
  437. }).then(res => {
  438. if (res.status === 0) {
  439. this.getPasteVersion()
  440. callBack(true)
  441. } else {
  442. callBack(false)
  443. Toast(res.msg)
  444. }
  445. }).catch(() => {
  446. callBack(false)
  447. })
  448. }
  449. },
  450. // 获取粘贴版数据
  451. getPasteVersion(callBack = () => { }) {
  452. this.shearContent({ type: 'get' }).then(res => {
  453. this.pasteVersionList = res.data
  454. callBack(true)
  455. }).catch(() => {
  456. callBack(false)
  457. }).finally(() => { })
  458. },
  459. // 复制弹窗是否关闭
  460. beforeCloseCopy(action, done) {
  461. if (action !== 'confirm') {
  462. // 获取剪切板
  463. this.getPasteVersion(() => {
  464. this.pasteVersionVisible = true
  465. this.levitatedSphereVisible = false
  466. done()
  467. })
  468. return
  469. }
  470. if (!this.copyTextValue) {
  471. Toast('请输入复制到剪切板的内容')
  472. done(false)
  473. return
  474. }
  475. this.openPasteboard(this.copyTextValue, done)
  476. },
  477. // 打开粘贴板
  478. async openPasteboard(content, callBack = () => { }) {
  479. this.shearContent({ type: 'post', params: { content } }).then().finally(() => {
  480. callBack()
  481. // 获取剪切板
  482. this.getPasteVersion(() => {
  483. this.pasteVersionVisible = true
  484. this.levitatedSphereVisible = false
  485. })
  486. })
  487. },
  488. // 复制粘贴某条数据
  489. copyPasteVersiontext(e) {
  490. clickCopyText(e, (event) => {
  491. this.doConnectDirectivesWs.send(JSON.stringify({
  492. type: 'cutting',
  493. data: {
  494. str: event.text,
  495. },
  496. }))
  497. Toast('复制成功')
  498. }, () => {
  499. Toast('复制失败')
  500. })
  501. },
  502. // 获取卡信息
  503. getUserCardInfo() {
  504. Toast.loading({
  505. duration: 0, // 持续展示 toast
  506. message: '数据加载中...',
  507. });
  508. this.obtainCardInfoStartTime = + new Date()
  509. let { userCardId } = this.parametersData
  510. userCardId = +userCardId
  511. const statusTips = {
  512. 5200: '网络异常,请稍后重试',
  513. 5220: '云手机正在一键修复中',
  514. 5203: '正在排队中,请稍等',
  515. 5204: '云机异常,正在为你重新分配云机'
  516. }
  517. request.post('/api/resources/user/cloud/connect', { userCardId }).then(async res => {
  518. const { isWeixin } = this.parametersData;
  519. switch (res.status) {
  520. case 0:
  521. getUserCardInfoRequestNum = 1
  522. // 不支持webRTC跳转到指定的页面
  523. if (!res.data.isWebrtc) {
  524. location.replace(`${location.origin}/h5/webRtcYJ/WXtrialInterface.html${location.search}`)
  525. return
  526. }
  527. if (!this.isSupportRtc) {
  528. Dialog.alert({
  529. title: '提示',
  530. message: `${+isWeixin ? '微信小程序' : ''}当前版本暂不支持使用,可下载谷歌浏览器或双子星客户端进行使用`,
  531. confirmButtonText: '确定',
  532. confirmButtonColor: '#3cc51f',
  533. beforeClose: (action, done) => {
  534. this.exit()
  535. done()
  536. }
  537. })
  538. return
  539. }
  540. this.userCardInfoData = res.data
  541. let ms = + new Date() - this.obtainCardInfoStartTime
  542. this.connectWebRtc()
  543. return
  544. case 5200:
  545. case 5220:
  546. case 5203:
  547. case 5204:
  548. if (res.status === 5200) {
  549. reconnect.bind(this)()
  550. return
  551. }
  552. Toast(statusTips[res.status])
  553. break
  554. default:
  555. Toast('画面异常,请重新进入')
  556. break
  557. }
  558. setTimeout(() => {
  559. this.exit()
  560. }, 3000)
  561. })
  562. function reconnect() {
  563. if (getUserCardInfoRequestNum > 6) {
  564. Toast('网络异常,请稍后重试')
  565. clearTimeout(getUserCardInfoTimerInterval)
  566. setTimeout(() => {
  567. this.exit()
  568. }, 3000)
  569. return
  570. }
  571. getUserCardInfoTimerInterval = setTimeout(() => {
  572. this.getUserCardInfo()
  573. getUserCardInfoRequestNum++
  574. }, 3000)
  575. }
  576. },
  577. // 超过指定触碰时间是否提示关闭链接
  578. pushflowPopup() {
  579. request.get('/api/public/v5/pushflow/popup').then(res => {
  580. if (res.success) {
  581. this.isFiringNoOperationSetTimeout = res.data
  582. this.noOperationSetTimeout()
  583. }
  584. })
  585. },
  586. // 退出功能
  587. exit() {
  588. this.engine.disconnect && this.engine.disconnect();
  589. this.doConnectDirectivesWs && this.doConnectDirectivesWs.close()
  590. uni.reLaunch({
  591. url: '/pages/index/index'
  592. });
  593. },
  594. // 不触碰屏幕显示退出链接弹窗
  595. noOperationSetTimeout(key) {
  596. if (!this.isFiringNoOperationSetTimeout) return
  597. clearTimeout(noOperationSetTimeoutTimeInterval)
  598. if (key === 'cancel') {
  599. clearInterval(noOperationSetIntervalTimeInterval)
  600. this.noOperationSetTimeoutTimeVisible = false
  601. this.noOperationSetTimeout()
  602. return
  603. }
  604. noOperationSetTimeoutTimeInterval = setTimeout(() => {
  605. let index = 9
  606. this.confirmButtonText = '退出(10秒)'
  607. this.noOperationSetTimeoutTimeVisible = true
  608. noOperationSetIntervalTimeInterval = setInterval(() => {
  609. this.confirmButtonText = `退出${index ? `(${index}秒)` : ''}`
  610. index--
  611. if (index < 0) {
  612. this.noOperationSetTimeout('cancel')
  613. this.exit()
  614. }
  615. }, 1000)
  616. }, 300000)
  617. },
  618. // 获取云机剩余时长
  619. async getResidueTime() {
  620. clearInterval(countdownTimeInterval)
  621. const { userCardType, isShowCountdown, isShowRule } = this.parametersData
  622. const { userCardId } = this.userCardInfoData
  623. if (![1, 2, 3].includes(+userCardType)) return
  624. const res = await request.get(`/api/resources/yearMember/getResidueTime?userCardId=${userCardId}`)
  625. let time = res.data;
  626. if (!res.status) {
  627. this.countdownTime = residueTimeStamp(time)
  628. await request.get(`/api/resources/yearMember/startTime?userCardId=${userCardId}`)
  629. if (+isShowCountdown) this.timingVisible = true
  630. if (+isShowRule) this.billingRulesVisible = true
  631. countdownTimeInterval = setInterval(() => {
  632. if (time <= 0) {
  633. clearInterval(countdownTimeInterval)
  634. this.downline()
  635. return
  636. }
  637. time--
  638. this.countdownTime = residueTimeStamp(time)
  639. }, 1000)
  640. }
  641. },
  642. // 关闭倒计时弹窗
  643. handlecountdownTimeClose() {
  644. const { userCardId } = this.userCardInfoData
  645. request.get(`/api/resources/yearMember/closeRemind?userCardId=${userCardId}`).then(res => {
  646. if (!res.status) {
  647. clearInterval(countdownTimeInterval)
  648. this.timingVisible = false
  649. return
  650. }
  651. Toast(res.msg);
  652. })
  653. },
  654. // 退出并下机
  655. downline(fun = () => { }) {
  656. const { userCardId } = this.userCardInfoData
  657. request.get(`/api/resources/yearMember/downline?userCardId=${userCardId}`).then(res => {
  658. if (!res.status) {
  659. fun(true)
  660. // 通信给h5项目告知是退出并下机
  661. parent.postMessage(
  662. {
  663. type: 'exit',
  664. },
  665. '*',
  666. );
  667. uni.postMessage({
  668. data: {
  669. type: 'exit'
  670. }
  671. });
  672. this.exit()
  673. return
  674. }
  675. fun(false)
  676. Toast(res.msg);
  677. })
  678. },
  679. // 获取推荐列表
  680. getRecommend() {
  681. const { userCardId } = this.userCardInfoData
  682. request.get(`/api/public/v1/market/get/recommend?userCardId=${userCardId}`).then(res => {
  683. if (!res.status) {
  684. this.billingRulesVisible = false
  685. this.recommendList = res.data
  686. this.recommendList.length && (this.applyRecommendVisible = true)
  687. }
  688. })
  689. },
  690. // 下载apk
  691. downAndInstallApk({ downloadUrl: apkUrl, id: taskUid }) {
  692. this.doConnectDirectivesWs.send(JSON.stringify({
  693. type: 'downAndInstallApk',
  694. data: {
  695. apkUrl,
  696. taskUid
  697. },
  698. }))
  699. },
  700. // 移开手指时会发生的回调
  701. touchendRtcMediaPlayer(event) {
  702. this.engine.touchClick && this.engine.touchClick(event, 1, true)
  703. this.noOperationSetTimeout()
  704. },
  705. // 返回、主页、任务器
  706. footerBtnFun(key) {
  707. this.engine[key] && this.engine[key]()
  708. this.noOperationSetTimeout()
  709. },
  710. // 获取初始化尺寸
  711. getInitSize() {
  712. // 高度、悬浮球相关配置
  713. this.height = window.innerHeight
  714. this.width = window.innerWidth
  715. this.$nextTick(() => {
  716. // 云机画面宽高
  717. let layoutView = document.querySelector('.layout-view')
  718. this.layoutViewWidth = layoutView.offsetWidth
  719. this.layoutViewHeight = layoutView.offsetHeight
  720. })
  721. },
  722. // 音量
  723. volumeControl(value) {
  724. this.engine.ExexuteKeyBoard && this.engine.ExexuteKeyBoard(value)
  725. this.$refs.rtcMediaPlayer && (this.$refs.rtcMediaPlayer.muted = false)
  726. }
  727. }
  728. })
  729. function playOnBtn() {
  730. const { isTips } = this.parametersData;
  731. Dialog.alert({
  732. title: '提示',
  733. message: `${+isTips ? '开始' : '继续'}使用云手机`,
  734. confirmButtonText: '确定',
  735. confirmButtonColor: '#3cc51f',
  736. beforeClose: (action, done) => {
  737. if (action === 'confirm') {
  738. this.isShowVideo = true
  739. this.$refs.rtcMediaPlayer.play()
  740. setTimeout(() => {
  741. this.definitionFun(this.definitionValue)
  742. this.pushflowPopup()
  743. this.getResidueTime()
  744. done()
  745. })
  746. }
  747. }
  748. });
  749. }
  750. // 获取URL参数
  751. function getParameters() {
  752. let arr = location.search.split('?')
  753. let obj = {}
  754. if (arr[1]) {
  755. arr = arr[1].split('&')
  756. arr.forEach(item => {
  757. let [key, value = ''] = item.split('=')
  758. obj[key] = value
  759. })
  760. }
  761. return obj
  762. }
  763. // 倒计时处理的时间
  764. function residueTimeStamp(value) {
  765. let theTime = value;//秒
  766. let middle = 0;//分
  767. let hour = 0;//小时
  768. if (theTime > 59) {
  769. middle = parseInt(theTime / 60);
  770. theTime = parseInt(theTime % 60);
  771. }
  772. if (middle > 59) {
  773. hour = parseInt(middle / 60);
  774. middle = parseInt(middle % 60);
  775. }
  776. theTime < 10 ? theTime = '0' + theTime : theTime = theTime
  777. middle < 10 ? middle = '0' + middle : middle = middle
  778. hour < 10 ? hour = '0' + hour : hour = hour
  779. return hour + ':' + middle + ':' + theTime
  780. }