lookShipin.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513
  1. <template>
  2. <view class="ezy-course-page" :style="{backgroundImage: 'url(' + courseBjFun() + ')'}">
  3. <view class="icon-title-navBar-box">
  4. <view @click="goUpPage" class="nav-bar-icon"></view>
  5. <text class="nav-bar-title">{{shipinTitle}}</text>
  6. </view>
  7. <view class="ezy-video-box course-video-box">
  8. <view ref="videoContent" id="wgy-player-test" :playAuth="playAuth"
  9. :change:playAuth="renderScript.receiveMsg" :videoId="videoId" :change:videoId="renderScript.videoIdFun"
  10. :hideFlag="hideFlag" :change:hideFlag="renderScript.hideFlagFun" :progressMarkers="progressMarkers"
  11. :change:progressMarkers="renderScript.progressMarkersMsg" :seekTime="seekTime"
  12. :change:seekTime="renderScript.seekTimeFun" class="ezy-video">
  13. </view>
  14. </view>
  15. <view class="course-content-border">
  16. <view class="course-content-box">
  17. <!-- <view class="course-title">{{jieName}}</view> -->
  18. <view v-for="(item,index) in progressMarkers" :key="index" @click="markersClick(item)">
  19. <view class="title-play-box">
  20. <icon class="course-icon" :style="{backgroundImage: 'url(' + courseIconFun() + ')'}"></icon>
  21. <view class="course-title">{{item.title}}</view>
  22. <view class="course-play-btn" @click="markersClick(item)">视频讲解</view>
  23. </view>
  24. <rich-text :nodes="item.describe" class="course-content-item"></rich-text>
  25. </view>
  26. </view>
  27. </view>
  28. <uni-popup ref="popupRef" :animation="false" :is-mask-click="false"
  29. mask-background-color="rgba(51, 137, 217, 0.65);">
  30. <view :class="courseClass">
  31. <view class="text-score">{{credit}}</view>
  32. <view class="course-btn-box">
  33. <view @click="goBack" class="return-btn"></view>
  34. <view @click="goNext" class="continue-btn"></view>
  35. </view>
  36. </view>
  37. </uni-popup>
  38. <tip-middle-dialog ref="youkeDialogRef" @confirm-btn="ykConfirm" :content="YouKeContent"></tip-middle-dialog>
  39. <svip-dialog ref="svipDialogRef" @confirm-btn="svipConfirm"></svip-dialog>
  40. </view>
  41. </template>
  42. <script>
  43. import {
  44. ref
  45. } from 'vue';
  46. import {
  47. onLoad,
  48. onReady
  49. } from '@dcloudio/uni-app';
  50. import {
  51. getVideoAuth,
  52. getVideoAuthYk,
  53. videoWancheng
  54. } from "@/api/shipin.js"
  55. import tipMiddleDialog from '@/components/dialog/tipMiddleDialog.vue';
  56. import svipDialog from './svipDialog.vue';
  57. import {
  58. toast,
  59. getUserIdentity
  60. } from "@/utils/common";
  61. import {
  62. userZhangNextInfo,
  63. } from "@/api/learnPlan.js"
  64. import cacheManager from "@/utils/cacheManager.js";
  65. export default {
  66. data() {
  67. return {
  68. pageData: null, //上个页面获取的视频参数(视频id)
  69. playAuth: "", //播放凭证
  70. progressMarkers: [],
  71. jieName: '',
  72. hideFlag: 'show',
  73. videoId: "", //阿里云视频id
  74. cardId: '',
  75. credit: '',
  76. nianji: '',
  77. zhangId: '',
  78. seekTime: '',
  79. jieId: '',
  80. courseClass: '',
  81. shipinTitle: '',
  82. cacheZhangInfo: {},
  83. cacheCurrentZhangIndex: '',
  84. YouKeContent: '您当前的身份是游客,想要体验完整内容需注册成用户!'
  85. }
  86. },
  87. components: {
  88. tipMiddleDialog,
  89. svipDialog
  90. },
  91. onLoad(options) {
  92. if (!cacheManager.get('auth')) {
  93. const youkeData = JSON.parse(options.youkePageData)
  94. // 游客
  95. this.videoId = youkeData.jieList.videoId
  96. this.nianji = youkeData.nianji
  97. this.zhangId = youkeData.zhangId
  98. this.cardId = youkeData.cardId
  99. this.tipFlag=youkeData.tipFlag
  100. this.shipinTitle = youkeData.jieName
  101. this.progressMarkers = youkeData.jieList.jiedianList || []
  102. this.getLiveYk(); //获取播放凭证
  103. } else {
  104. this.init(options)
  105. }
  106. },
  107. onHide() {
  108. console.log('onHideonHideonHideonHide');
  109. this.hideFlag = 'hide'
  110. },
  111. onUnload() {
  112. console.log('onUnloadonUnloadonUnloadonUnloadonUnload');
  113. this.hideFlag = 'hide'
  114. },
  115. methods: {
  116. courseBjFun() {
  117. switch (Number(cacheManager.get('auth').cardId)) {
  118. case 1:
  119. return 'static/images/course/couse-shuxue-bj.png'
  120. break;
  121. case 2:
  122. return 'static/images/course/course-yingyu-bj.png'
  123. break;
  124. default:
  125. break;
  126. }
  127. },
  128. courseIconFun() {
  129. switch (Number(cacheManager.get('auth').cardId)) {
  130. case 1:
  131. return 'static/images/course/shuxue-icon.png'
  132. break;
  133. case 2:
  134. return 'static/images/course/yingyu-icon.png'
  135. break;
  136. default:
  137. break;
  138. }
  139. },
  140. init(options) {
  141. this.jieId = options.jieId
  142. if (!(cacheManager.get('zhangInfo') && options.jieId)) {
  143. toast('数据错误,缓存丢失/ jieId丢失')
  144. return false
  145. }
  146. this.cacheCurrentZhangIndex = cacheManager.get('auth').currentZhang
  147. this.cacheZhangInfo = cacheManager.get('zhangInfo')
  148. // let zhang = this.cacheZhangInfo.zhangList.find(zhang => zhang.zhangId == this.zhangId);
  149. // if (!zhang) {
  150. // return
  151. // }
  152. let zhang = this.cacheZhangInfo.zhangList[this.cacheCurrentZhangIndex]
  153. let currentObject = zhang.jieList.find(item => item.jieId == options.jieId);
  154. console.log(currentObject);
  155. this.shipinTitle = currentObject.jieName
  156. this.pageData = {
  157. ...currentObject
  158. }
  159. console.log(this.pageData);
  160. this.videoId = this.pageData.videoId
  161. this.jieName = this.pageData.jieName
  162. this.credit = this.pageData.credit
  163. this.progressMarkers = this.pageData.jiedianList || []
  164. this.getLive(); //获取播放凭证
  165. },
  166. goNextZhang() {
  167. let that = this
  168. cacheManager.updateObject('auth', {
  169. currentZhang: this.cacheCurrentZhangIndex + 1
  170. })
  171. this.cacheZhangInfo = cacheManager.get('zhangInfo')
  172. let zhang = this.cacheZhangInfo.zhangList[this.cacheCurrentZhangIndex + 1]
  173. uni.redirectTo({
  174. url: '/pages/study/lookShipin?jieId=' + zhang.jieList[0].jieId
  175. })
  176. },
  177. playEnd(data) {
  178. const AuthCode = getUserIdentity();
  179. console.log(AuthCode);
  180. if (AuthCode == 'Visitor') {
  181. return false
  182. } else {
  183. let currentJieData = cacheManager.getCurrentJieData('zhangInfo', this.cacheCurrentZhangIndex, this
  184. .jieId)
  185. if (currentJieData.studyFlag == 1) {
  186. // 学完一遍
  187. this.courseClass = 'course-finish-dialog'
  188. this.$refs.popupRef.open();
  189. } else {
  190. cacheManager.updateJieStatus('zhangInfo', this.cacheCurrentZhangIndex, this.jieId)
  191. this.courseClass = 'course-score-dialog'
  192. this.$refs.popupRef.open();
  193. let req = {
  194. credit: this.credit,
  195. jieId: this.jieId,
  196. }
  197. videoWancheng(req).then(res => {
  198. })
  199. }
  200. }
  201. },
  202. goBack() {
  203. this.$refs.popupRef.close();
  204. this.goUpPage()
  205. },
  206. goNext() {
  207. debugger
  208. this.$refs.popupRef.close();
  209. if (!cacheManager.get('auth')) {
  210. console.log(this);
  211. this.$refs.youkeDialogRef.handleShow();
  212. } else {
  213. const AuthCode = getUserIdentity();
  214. console.log(AuthCode);
  215. // if (AuthCode == 'Not-Vip') {
  216. // this.$refs.svipDialogRef.handleShow();
  217. // return false
  218. // }
  219. // debugger
  220. Number(this.jieId++)
  221. console.log('this.pageData',this.pageData);
  222. let currentObject = this.cacheZhangInfo.zhangList[this.cacheCurrentZhangIndex].jieList.find(item =>
  223. item.jieId == this.jieId);
  224. if(currentObject){
  225. this.pageData = {
  226. ...currentObject
  227. }
  228. }
  229. // lastFlag是否是本章最后一节,0否1是 type,1视频,2试题
  230. if (this.pageData.lastFlag == 1 && this.pageData.type == 2) {
  231. uni.redirectTo({
  232. url: `/pages/unitTest/index?jieId=` + this.pageData.jieId
  233. })
  234. } else if (this.pageData.lastFlag == 1 && this.pageData.type == 1) {
  235. // 当前是本章最后一节,并且是 视频 切换下一章
  236. this.goNextZhang()
  237. } else {
  238. uni.redirectTo({
  239. //url: '/pages/study/lookShipin?studyData=' + JSON.stringify(pageData)
  240. url: '/pages/study/lookShipin?jieId=' + this.jieId
  241. })
  242. }
  243. }
  244. },
  245. getLiveYk() {
  246. let req = {
  247. videoId: this.videoId
  248. }
  249. getVideoAuthYk(req).then(res => {
  250. this.playAuth = res.data
  251. })
  252. },
  253. getLive() {
  254. let req = {
  255. videoId: this.videoId
  256. }
  257. getVideoAuth(req).then(res => {
  258. this.playAuth = res.data
  259. })
  260. },
  261. markersClick(data) {
  262. this.seekTime = ""
  263. this.$nextTick(() => {
  264. this.seekTime = data.offset
  265. });
  266. },
  267. goUpPage() {
  268. if (!cacheManager.get('auth')) {
  269. uni.redirectTo({
  270. url: '/pages/study/index?cardId=' + this.cardId + '&nianji=' + this.nianji + '&zhangId=' +
  271. this.zhangId+ '&tipFlag=' + this.tipFlag
  272. })
  273. } else {
  274. uni.redirectTo({
  275. url: `/pages/study/index`
  276. })
  277. }
  278. },
  279. svipConfirm() {
  280. uni.redirectTo({
  281. url: '/pages/pay/svip?cardId=' + cacheManager.get('auth').cardId
  282. })
  283. },
  284. ykConfirm() {
  285. uni.redirectTo({
  286. url: '/pages/login/index'
  287. });
  288. }
  289. },
  290. created() {
  291. // console.log("getLive")
  292. // this.getLive(); //获取播放凭证
  293. },
  294. }
  295. </script>
  296. <script module="renderScript" lang="renderjs">
  297. export default {
  298. mounted() {
  299. console.log("renderScript1")
  300. // 在适合的生命周期,通过script和link标签引入播放器sdk、css
  301. // this.loadWebPlayerSDK()
  302. },
  303. data() {
  304. return {
  305. player: null,
  306. playAuth: '',
  307. videoId: '',
  308. progressMarkers: [],
  309. seekTime: ''
  310. }
  311. },
  312. methods: {
  313. receiveMsg(newValue, oldValue, ownerInstance, instance) {
  314. // console.log('service层中的options发生变化')
  315. // console.log('新值', newValue)
  316. // console.log('旧值', oldValue)
  317. // ownerInstance和this.$ownerInstance一样,可用来向service层通信
  318. // instance和ownerInstance的区别是:
  319. // instance.$el指向的是触发事件的那个节点;ownerInstance.$el指向当前vue文件中的根节点;
  320. // instance的作用目前尚不明确,官方没有给出用法
  321. if (newValue) {
  322. this.playAuth = ''
  323. this.playAuth = newValue
  324. this.loadWebPlayerSDK()
  325. }
  326. },
  327. videoIdFun(newValue, oldValue, ownerInstance, instance) {
  328. if (newValue) {
  329. this.videoId = ''
  330. this.videoId = newValue
  331. }
  332. },
  333. hideFlagFun(newValue, oldValue, ownerInstance, instance) {
  334. if (this.player) {
  335. this.player.pause()
  336. }
  337. },
  338. progressMarkersMsg(newValue, oldValue, ownerInstance, instance) {
  339. if (newValue) {
  340. this.progressMarkers = newValue
  341. }
  342. },
  343. seekTimeFun(newValue, oldValue, ownerInstance, instance) {
  344. if (newValue) {
  345. this.player.play()
  346. this.player.seek(newValue)
  347. // switch (this.player.getStatus()) {
  348. // case 'init':
  349. // break;
  350. // case 'ready':
  351. // break;
  352. // case 'loading':
  353. // this.player.play()
  354. // this.player.seek(newValue)
  355. // break;
  356. // case 'play':
  357. // this.player.seek(newValue)
  358. // break;
  359. // case 'pause':
  360. // this.player.play()
  361. // this.player.seek(newValue)
  362. // break;
  363. // case 'playing':
  364. // this.player.seek(newValue)
  365. // break;
  366. // case 'waiting':
  367. // break;
  368. // case 'error':
  369. // break;
  370. // case 'ended':
  371. // break;
  372. // default:
  373. // break;
  374. // }
  375. // this.player.seek(newValue)
  376. }
  377. },
  378. playAli() {
  379. let that = this
  380. // console.log(this.videoId);
  381. // console.log(this.playAuth);
  382. //配置播放器
  383. if (!this.playAuth) {
  384. return false;
  385. }
  386. var player = new Aliplayer({
  387. id: "wgy-player-test",
  388. "vid": this.videoId,
  389. "playauth": this.playAuth,
  390. extraInfo: {
  391. poster: 'noposter'
  392. },
  393. //cover: 'https://img.alicdn.com/tps/TB1EXIhOFXXXXcIaXXXXXXXXXXX-760-340.jpg',
  394. // "vid": '',
  395. // "playauth": '',
  396. // "playConfig": {
  397. // "EncryptType": 'AliyunVoDEncryption'
  398. // },
  399. "skinLayout": [{
  400. "name": "bigPlayButton",
  401. "align": "blabs",
  402. "x": 30,
  403. "y": 80
  404. },
  405. {
  406. "name": "H5Loading",
  407. "align": "cc"
  408. },
  409. {
  410. "name": "controlBar",
  411. "align": "blabs",
  412. "x": 0,
  413. "y": 0,
  414. "children": [{
  415. "name": "progress",
  416. "align": "blabs",
  417. "x": 0,
  418. "y": 44
  419. },
  420. {
  421. "name": "playButton",
  422. "align": "tl",
  423. "x": 15,
  424. "y": 12
  425. },
  426. {
  427. "name": "fullScreenButton",
  428. "align": "tr",
  429. "x": 10,
  430. "y": 12
  431. },
  432. {
  433. "name": "timeDisplay",
  434. "align": "tr",
  435. "x": 10,
  436. "y": 5
  437. }
  438. ]
  439. }
  440. ],
  441. "qualitySort": "asc",
  442. "format": "mp4",
  443. "mediaType": "video",
  444. "encryptType": 1,
  445. "progressMarkers": this.progressMarkers,
  446. "autoplay": false,
  447. "isLive": false,
  448. "rePlay": false,
  449. "playsinline": true,
  450. "preload": false,
  451. "controlBarVisibility": "hover",
  452. "useH5Prism": true
  453. }, function(player) {});
  454. this.player = player;
  455. player.on('canplay', function() {
  456. console.log('canplay', this.player.tag);
  457. player.tag.play();
  458. });
  459. player.on('ended', function() {
  460. that.$ownerInstance.callMethod('playEnd', {
  461. data: 'end'
  462. })
  463. // uni.$emit('playEnd', {
  464. // data: 'end'
  465. // });
  466. });
  467. },
  468. loadWebPlayerSDK() {
  469. return new Promise((resolve, reject) => {
  470. const s_tag = document.createElement('script'); // 引入播放器js
  471. s_tag.type = 'text/javascript';
  472. s_tag.src = 'https://g.alicdn.com/de/prismplayer/2.9.6/aliplayer-min.js';
  473. s_tag.charset = 'utf-8';
  474. s_tag.onload = () => {
  475. // console.log(this.playAuth);
  476. this.playAli()
  477. resolve();
  478. }
  479. document.body.appendChild(s_tag);
  480. const l_tag = document.createElement('link'); // 引入播放器css
  481. l_tag.rel = 'stylesheet';
  482. l_tag.href =
  483. 'https://g.alicdn.com/de/prismplayer/2.9.6/skins/default/aliplayer-min.css';
  484. document.body.appendChild(l_tag);
  485. });
  486. },
  487. }
  488. }
  489. </script>