WXtrialInterface.js 30 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806
  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. console.log(event.val)
  208. if (event.type !== 'StreamStates') {
  209. // console.log("链接的状态", event, event.val);
  210. }
  211. switch (event.type) {
  212. case "screenChange":
  213. // 0:横屏 1:竖屏
  214. console.log("屏幕方向变化事件:" + event.val);
  215. this.isLandscape = event.val === 0;
  216. break;
  217. case "wsState":
  218. // “TIMEOUT”:nats链接超时
  219. // success 链接成功
  220. const status = ["TIMEOUT", "failed"]
  221. if (status.includes(event.val)) {
  222. Dialog.alert({
  223. title: '提示',
  224. message: '链接超时',
  225. confirmButtonText: '确定',
  226. confirmButtonColor: '#3cc51f',
  227. beforeClose: (action, done) => {
  228. this.exit()
  229. done()
  230. }
  231. })
  232. }
  233. break;
  234. case "rtcState":
  235. // “connected”:rtc链接成功 “failed”:rtc链接失败 “closed”:rtc链接关闭 “disconnected”:rtc链接超时
  236. console.log(event.val, 'rtc链接成功状态')
  237. if (event.val === "connected") {
  238. Toast.clear();
  239. this.doConnectDirectives()
  240. this.isShowVideo = true
  241. this.$refs.rtcMediaPlayer.muted = true
  242. this.$refs.rtcMediaPlayer.play()
  243. let ms = +new Date - this.plugFlowStartTime
  244. console.timeEnd('获取推流响应消耗时间:')
  245. console.log(`获取推流响应消耗时间:${ms / 1000}秒`)
  246. this.definitionFun(this.definitionValue)
  247. this.pushflowPopup()
  248. this.getResidueTime()
  249. return
  250. }
  251. if (event.val === "connecting") return
  252. this.exit()
  253. break;
  254. case "AuthenticationStatus":
  255. console.log(`鉴权${event.val === "success" ? '成功' : '失败'}`);
  256. break;
  257. case "StreamStates":
  258. // “currentRoundTripTime”:延迟 “lostRate”:丢包率 “seconds_KBytes”:带宽 “framesPerSecond”:帧率
  259. // ballPosition.value = event.val
  260. // console.log(event.val)
  261. break;
  262. case 'videoResolution': // 云机视频分辨率
  263. // console.log(event.val, '分辨率')
  264. break
  265. case 'networkService': // 获取三网信息
  266. console.log("三网信息:", event.val);
  267. break
  268. case 'networkServiceURL': // 获取三网信息
  269. console.log("三网IP地址:", event.val);
  270. break
  271. }
  272. },
  273. // 悬浮球移动
  274. touchmoveLevitatedSphere(e) {
  275. let { pageX, pageY } = e.targetTouches[0]
  276. let min = 20
  277. let MaxPageX = this.width - 20
  278. let MaxPageY = this.height - 20
  279. pageX = pageX <= min ? min : (pageX >= MaxPageX ? MaxPageX : pageX)
  280. pageY = pageY <= min ? min : (pageY >= MaxPageY ? MaxPageY : pageY)
  281. this.levitatedSpherePositionData = {
  282. left: `${pageX}px`,
  283. top: `${pageY}px`,
  284. transform: 'translate(-50%, -50%)'
  285. }
  286. },
  287. touchendLevitatedSphere(e) {
  288. localStorage.setItem('levitatedSpherePositionData', JSON.stringify(this.levitatedSpherePositionData))
  289. },
  290. // 清晰度
  291. definitionFun(value) {
  292. this.definitionValue = value
  293. this.engine.makeBitrate && this.engine.makeBitrate(value)
  294. localStorage.setItem('definitionValue', value)
  295. this.levitatedSphereVisible = false
  296. },
  297. // 修改分辨率
  298. resolutionRatio() {
  299. request.get('/api/resources/v5/machine/resolution/getResolvingPower', { params: { userCardId: this.parametersData.userCardId } }).then(res => {
  300. if (res.success) {
  301. this.resolutionRatioList = res.data.map(item => {
  302. item.height = item.high
  303. return item
  304. })
  305. this.levitatedSphereVisible = false
  306. this.resolutionRatioVisible = true
  307. }
  308. })
  309. },
  310. // 确定修改分辨率
  311. confirmResolution() {
  312. let { width, height, dpi: density } = this.phoneSize
  313. this.engine.makeResolution && this.engine.makeResolution({ width, height, density })
  314. this.resolutionRatioVisible = false
  315. },
  316. // 退出相关按钮操作
  317. exitFun(key) {
  318. switch (key) {
  319. case 'dormant':
  320. Dialog.alert({
  321. title: '提示',
  322. message: '确定退出云手机并下机',
  323. confirmButtonText: '确定',
  324. confirmButtonColor: '#3cc51f',
  325. showCancelButton: true,
  326. beforeClose: (action, done) => {
  327. if (action === 'cancel') done()
  328. if (action === 'confirm') {
  329. this.downline(done)
  330. }
  331. }
  332. })
  333. break;
  334. case 'shearplate':
  335. this.copyTextValue = ''
  336. pasteText().then(content => {
  337. typeof content !== 'boolean' ? this.openPasteboard(content) : this.copyTextVisible = true
  338. }, err => {
  339. this.copyTextVisible = true
  340. })
  341. break;
  342. case 'signout':
  343. this.exit()
  344. break;
  345. }
  346. },
  347. // 业务指令
  348. doConnectDirectives() {
  349. let { internetHttps, localIp, cardToken } = this.userCardInfoData
  350. let cUrl = `wss://${internetHttps}/businessChannel?cardIp=${localIp}&token=${cardToken}&type=directives`
  351. this.doConnectDirectivesWs = new WebSocket(cUrl);
  352. this.doConnectDirectivesWs.binaryType = 'arraybuffer'
  353. clearInterval(doConnectDirectivesIntervalerPing)
  354. // 链接成功
  355. this.doConnectDirectivesWs.onopen = (e) => {
  356. doConnectDirectivesIntervalerPing = setInterval(() => {
  357. if (this.doConnectDirectivesWs.readyState === 1) {
  358. this.doConnectDirectivesWs.send(JSON.stringify({ type: 'ping' }));
  359. } else {
  360. clearInterval(doConnectDirectivesIntervalerPing);
  361. }
  362. }, 3000)
  363. this.doConnectDirectivesWs.send(JSON.stringify({ type: 'getVsStatus' }))
  364. this.doConnectDirectivesWs.send(JSON.stringify({ type: 'bitRate', data: { bitRate: 1243000 } }))
  365. this.doConnectDirectivesWs.send(JSON.stringify({ type: 'InputMethod', data: { type: 2 } }))
  366. this.doConnectDirectivesWs.send(JSON.stringify({ type: 'getPhoneSize' }))
  367. }
  368. // 接受到的消息
  369. this.doConnectDirectivesWs.onmessage = res => {
  370. const result = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
  371. switch (result.type) {
  372. // 分辨率
  373. case 'getPhoneSize':
  374. case 'setPhoneSize':
  375. let data = JSON.parse(JSON.stringify(result.data))
  376. let { width, height } = data
  377. if (width > height) {
  378. data.width = height
  379. data.height = width
  380. }
  381. this.phoneSize = data
  382. break
  383. // 云机复制过来的文本
  384. case 'reProduceText':
  385. if (navigator.clipboard) {
  386. navigator.clipboard.writeText(result.data.text);
  387. }
  388. break
  389. case 'downAdnInstallRep':
  390. Toast(result.data.msg)
  391. break
  392. }
  393. }
  394. // 链接报错的回调
  395. this.doConnectDirectivesWs.onerror = res => {
  396. clearInterval(doConnectDirectivesTimerInterval)
  397. if (doConnectDirectivesRequestNum > 6) {
  398. this.exit()
  399. return
  400. }
  401. doConnectDirectivesRequestNum++
  402. this.doConnectDirectives()
  403. }
  404. },
  405. // 粘贴版相关接口
  406. shearContent({ type, params, queryStr }) {
  407. let url = '/api/public/v5/shear/content'
  408. if (queryStr) url += queryStr
  409. return request[type](url, params)
  410. },
  411. // 清空全部、清除某条
  412. deletePasteVersion(ids) {
  413. if (!ids) {
  414. Dialog.alert({
  415. title: '提示',
  416. message: '确定清空剪贴板?',
  417. confirmButtonText: '确定',
  418. confirmButtonColor: '#3cc51f',
  419. showCancelButton: true,
  420. beforeClose: (action, done) => {
  421. if (action === 'cancel') done()
  422. if (action === 'confirm') {
  423. fun.bind(this)(done)
  424. }
  425. }
  426. })
  427. return
  428. }
  429. fun.bind(this)()
  430. function fun(callBack = () => { }) {
  431. this.shearContent({
  432. type: 'delete', queryStr: Qs.stringify(
  433. {
  434. ids: ids ? [ids] : this.pasteVersionList.map((v) => v.id),
  435. },
  436. { arrayFormat: 'repeat', addQueryPrefix: true },
  437. )
  438. }).then(res => {
  439. if (res.status === 0) {
  440. this.getPasteVersion()
  441. callBack(true)
  442. } else {
  443. callBack(false)
  444. Toast(res.msg)
  445. }
  446. }).catch(() => {
  447. callBack(false)
  448. })
  449. }
  450. },
  451. // 获取粘贴版数据
  452. getPasteVersion(callBack = () => { }) {
  453. this.shearContent({ type: 'get' }).then(res => {
  454. this.pasteVersionList = res.data
  455. callBack(true)
  456. }).catch(() => {
  457. callBack(false)
  458. }).finally(() => { })
  459. },
  460. // 复制弹窗是否关闭
  461. beforeCloseCopy(action, done) {
  462. if (action !== 'confirm') {
  463. // 获取剪切板
  464. this.getPasteVersion(() => {
  465. this.pasteVersionVisible = true
  466. this.levitatedSphereVisible = false
  467. done()
  468. })
  469. return
  470. }
  471. if (!this.copyTextValue) {
  472. Toast('请输入复制到剪切板的内容')
  473. done(false)
  474. return
  475. }
  476. this.openPasteboard(this.copyTextValue, done)
  477. },
  478. // 打开粘贴板
  479. async openPasteboard(content, callBack = () => { }) {
  480. this.shearContent({ type: 'post', params: { content } }).then().finally(() => {
  481. callBack()
  482. // 获取剪切板
  483. this.getPasteVersion(() => {
  484. this.pasteVersionVisible = true
  485. this.levitatedSphereVisible = false
  486. })
  487. })
  488. },
  489. // 复制粘贴某条数据
  490. copyPasteVersiontext(e) {
  491. clickCopyText(e, (event) => {
  492. this.doConnectDirectivesWs.send(JSON.stringify({
  493. type: 'cutting',
  494. data: {
  495. str: event.text,
  496. },
  497. }))
  498. Toast('复制成功')
  499. }, () => {
  500. Toast('复制失败')
  501. })
  502. },
  503. // 获取卡信息
  504. getUserCardInfo() {
  505. Toast.loading({
  506. duration: 0, // 持续展示 toast
  507. message: '数据加载中...',
  508. });
  509. this.obtainCardInfoStartTime = + new Date()
  510. console.time('获取卡信息响应消耗时间:')
  511. let { userCardId } = this.parametersData
  512. userCardId = +userCardId
  513. const statusTips = {
  514. 5200: '网络异常,请稍后重试',
  515. 5220: '云手机正在一键修复中',
  516. 5203: '正在排队中,请稍等',
  517. 5204: '云机异常,正在为你重新分配云机'
  518. }
  519. request.post('/api/resources/user/cloud/connect', { userCardId }).then(async res => {
  520. const { isWeixin } = this.parametersData;
  521. switch (res.status) {
  522. case 0:
  523. getUserCardInfoRequestNum = 1
  524. // 不支持webRTC跳转到指定的页面
  525. if (!res.data.isWebrtc) {
  526. location.replace(`${location.origin}/h5/webRtcYJ/WXtrialInterface.html${location.search}`)
  527. return
  528. }
  529. if (!this.isSupportRtc) {
  530. Dialog.alert({
  531. title: '提示',
  532. message: `${+isWeixin ? '微信小程序' : ''}当前版本暂不支持使用,可下载谷歌浏览器或双子星客户端进行使用`,
  533. confirmButtonText: '确定',
  534. confirmButtonColor: '#3cc51f',
  535. beforeClose: (action, done) => {
  536. this.exit()
  537. done()
  538. }
  539. })
  540. return
  541. }
  542. this.userCardInfoData = res.data
  543. let ms = + new Date() - this.obtainCardInfoStartTime
  544. console.timeEnd('获取卡信息响应消耗时间:')
  545. console.log(`获取卡信息响应消耗时间:${ms / 1000}秒`)
  546. this.connectWebRtc()
  547. return
  548. case 5200:
  549. case 5220:
  550. case 5203:
  551. case 5204:
  552. if (res.status === 5200) {
  553. reconnect.bind(this)()
  554. return
  555. }
  556. Toast(statusTips[res.status])
  557. break
  558. default:
  559. Toast('画面异常,请重新进入')
  560. break
  561. }
  562. setTimeout(() => {
  563. this.exit()
  564. }, 3000)
  565. })
  566. function reconnect() {
  567. if (getUserCardInfoRequestNum > 6) {
  568. Toast('网络异常,请稍后重试')
  569. clearTimeout(getUserCardInfoTimerInterval)
  570. setTimeout(() => {
  571. this.exit()
  572. }, 3000)
  573. return
  574. }
  575. getUserCardInfoTimerInterval = setTimeout(() => {
  576. this.getUserCardInfo()
  577. getUserCardInfoRequestNum++
  578. }, 3000)
  579. }
  580. },
  581. // 超过指定触碰时间是否提示关闭链接
  582. pushflowPopup() {
  583. request.get('/api/public/v5/pushflow/popup').then(res => {
  584. if (res.success) {
  585. this.isFiringNoOperationSetTimeout = res.data
  586. this.noOperationSetTimeout()
  587. }
  588. })
  589. },
  590. // 退出功能
  591. exit() {
  592. this.engine.disconnect && this.engine.disconnect();
  593. this.doConnectDirectivesWs && this.doConnectDirectivesWs.close()
  594. uni.reLaunch({
  595. url: '/pages/index/index'
  596. });
  597. },
  598. // 不触碰屏幕显示退出链接弹窗
  599. noOperationSetTimeout(key) {
  600. if (!this.isFiringNoOperationSetTimeout) return
  601. clearTimeout(noOperationSetTimeoutTimeInterval)
  602. if (key === 'cancel') {
  603. clearInterval(noOperationSetIntervalTimeInterval)
  604. this.noOperationSetTimeoutTimeVisible = false
  605. this.noOperationSetTimeout()
  606. return
  607. }
  608. noOperationSetTimeoutTimeInterval = setTimeout(() => {
  609. let index = 9
  610. this.confirmButtonText = '退出(10秒)'
  611. this.noOperationSetTimeoutTimeVisible = true
  612. noOperationSetIntervalTimeInterval = setInterval(() => {
  613. this.confirmButtonText = `退出${index ? `(${index}秒)` : ''}`
  614. index--
  615. if (index < 0) {
  616. this.noOperationSetTimeout('cancel')
  617. this.exit()
  618. }
  619. }, 1000)
  620. }, 300000)
  621. },
  622. // 获取云机剩余时长
  623. async getResidueTime() {
  624. clearInterval(countdownTimeInterval)
  625. const { userCardType, isShowCountdown, isShowRule } = this.parametersData
  626. const { userCardId } = this.userCardInfoData
  627. if (![1, 2, 3].includes(+userCardType)) return
  628. const res = await request.get(`/api/resources/yearMember/getResidueTime?userCardId=${userCardId}`)
  629. let time = res.data;
  630. if (!res.status) {
  631. this.countdownTime = residueTimeStamp(time)
  632. await request.get(`/api/resources/yearMember/startTime?userCardId=${userCardId}`)
  633. if (+isShowCountdown) this.timingVisible = true
  634. if (+isShowRule) this.billingRulesVisible = true
  635. countdownTimeInterval = setInterval(() => {
  636. if (time <= 0) {
  637. clearInterval(countdownTimeInterval)
  638. this.downline()
  639. return
  640. }
  641. time--
  642. this.countdownTime = residueTimeStamp(time)
  643. }, 1000)
  644. }
  645. },
  646. // 关闭倒计时弹窗
  647. handlecountdownTimeClose() {
  648. const { userCardId } = this.userCardInfoData
  649. request.get(`/api/resources/yearMember/closeRemind?userCardId=${userCardId}`).then(res => {
  650. if (!res.status) {
  651. clearInterval(countdownTimeInterval)
  652. this.timingVisible = false
  653. return
  654. }
  655. Toast(res.msg);
  656. })
  657. },
  658. // 退出并下机
  659. downline(fun = () => { }) {
  660. const { userCardId } = this.userCardInfoData
  661. request.get(`/api/resources/yearMember/downline?userCardId=${userCardId}`).then(res => {
  662. if (!res.status) {
  663. fun(true)
  664. // 通信给h5项目告知是退出并下机
  665. parent.postMessage(
  666. {
  667. type: 'exit',
  668. },
  669. '*',
  670. );
  671. uni.postMessage({
  672. data: {
  673. type: 'exit'
  674. }
  675. });
  676. this.exit()
  677. return
  678. }
  679. fun(false)
  680. Toast(res.msg);
  681. })
  682. },
  683. // 获取推荐列表
  684. getRecommend() {
  685. const { userCardId } = this.userCardInfoData
  686. request.get(`/api/public/v1/market/get/recommend?userCardId=${userCardId}`).then(res => {
  687. if (!res.status) {
  688. this.billingRulesVisible = false
  689. this.recommendList = res.data
  690. this.recommendList.length && (this.applyRecommendVisible = true)
  691. }
  692. })
  693. },
  694. // 下载apk
  695. downAndInstallApk({ downloadUrl: apkUrl, id: taskUid }) {
  696. this.doConnectDirectivesWs.send(JSON.stringify({
  697. type: 'downAndInstallApk',
  698. data: {
  699. apkUrl,
  700. taskUid
  701. },
  702. }))
  703. },
  704. // 移开手指时会发生的回调
  705. touchendRtcMediaPlayer(event) {
  706. this.engine.touchClick && this.engine.touchClick(event, 1, true)
  707. this.noOperationSetTimeout()
  708. },
  709. // 返回、主页、任务器
  710. footerBtnFun(key) {
  711. this.engine[key] && this.engine[key]()
  712. this.noOperationSetTimeout()
  713. },
  714. // 获取初始化尺寸
  715. getInitSize() {
  716. // 高度、悬浮球相关配置
  717. this.height = window.innerHeight
  718. this.width = window.innerWidth
  719. this.$nextTick(() => {
  720. // 云机画面宽高
  721. let layoutView = document.querySelector('.layout-view')
  722. this.layoutViewWidth = layoutView.offsetWidth
  723. this.layoutViewHeight = layoutView.offsetHeight
  724. })
  725. },
  726. // 音量
  727. volumeControl(value) {
  728. this.engine.ExexuteKeyBoard && this.engine.ExexuteKeyBoard(value)
  729. this.$refs.rtcMediaPlayer && (this.$refs.rtcMediaPlayer.muted = false)
  730. }
  731. }
  732. })
  733. // 获取URL参数
  734. function getParameters() {
  735. let arr = location.search.split('?')
  736. let obj = {}
  737. if (arr[1]) {
  738. arr = arr[1].split('&')
  739. arr.forEach(item => {
  740. let [key, value = ''] = item.split('=')
  741. obj[key] = value
  742. })
  743. }
  744. return obj
  745. }
  746. // 倒计时处理的时间
  747. function residueTimeStamp(value) {
  748. let theTime = value;//秒
  749. let middle = 0;//分
  750. let hour = 0;//小时
  751. if (theTime > 59) {
  752. middle = parseInt(theTime / 60);
  753. theTime = parseInt(theTime % 60);
  754. }
  755. if (middle > 59) {
  756. hour = parseInt(middle / 60);
  757. middle = parseInt(middle % 60);
  758. }
  759. theTime < 10 ? theTime = '0' + theTime : theTime = theTime
  760. middle < 10 ? middle = '0' + middle : middle = middle
  761. hour < 10 ? hour = '0' + hour : hour = hour
  762. return hour + ':' + middle + ':' + theTime
  763. }