task_info.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601
  1. <!-- +---------------------------------------------------------------------- -->
  2. <!-- | CRMEB [ CRMEB赋能开发者,助力企业发展 ] -->
  3. <!-- +---------------------------------------------------------------------- -->
  4. <!-- | Copyright (c) 2016~2022 https://www.crmeb.com All rights reserved. -->
  5. <!-- +---------------------------------------------------------------------- -->
  6. <!-- | Licensed CRMEB并不是自由软件,未经许可不能去掉CRMEB相关版权 -->
  7. <!-- +---------------------------------------------------------------------- -->
  8. <!-- | Author: CRMEB Team <admin@crmeb.com> -->
  9. <!-- +---------------------------------------------------------------------- -->
  10. {extend name="public/container"}
  11. {block name="title"}课程详情{/block}
  12. {block name="head_top"}
  13. <style>
  14. .prism-player .prism-info-display {
  15. box-sizing: border-box;
  16. }
  17. .prism-player .prism-big-play-btn {
  18. bottom: 50% !important;
  19. left: 50% !important;
  20. z-index: 54 !important;
  21. transform: translate(-50%, 50%);
  22. }
  23. </style>
  24. {/block}
  25. {block name="content"}
  26. <div v-cloak id="app">
  27. <div class="taskinfo">
  28. <!-- 视频窗口 -->
  29. <div :style="{ height: playerHeight + 'px' }" class="player">
  30. <div :hidden="taskInfo.type == 2" id="J_prismPlayer"></div>
  31. <img v-if="taskInfo.type == 2 || (!taskInfo.videoId && !taskInfo.link)" :src="taskInfo.image">
  32. </div>
  33. <div class="title">
  34. <div>{{ taskInfo.title }}</div>
  35. <div>已播放{{ taskInfo.play_count }}次</div>
  36. </div>
  37. <!-- 音频播放 -->
  38. <div v-if="taskInfo.type == 2 && !(!taskInfo.videoId && !taskInfo.link)" class="audio">
  39. <div class="progress">
  40. <div class="time">{{ currentTime | format(duration) }}</div>
  41. <div class="bar" @click="audioSeek">
  42. <div :style="{ width: audioRange + '%' }" class="range">
  43. <div class="dot" @touchmove="audioMove" @touchend="audioMoveEnd"></div>
  44. </div>
  45. </div>
  46. <div class="time">{{ duration | format }}</div>
  47. </div>
  48. <div class="control">
  49. <button class="iconfont iconleft" type="button" @click="audioTab(0)"></button>
  50. <button type="button" @click="audioPlay">
  51. <svg class="icon" aria-hidden="true">
  52. <use :xlink:href="audioPaused ? '#iconbofang1' : '#iconzanting'"></use>
  53. </svg>
  54. </button>
  55. <button class="iconfont iconright" type="button" @click="audioTab(1)"></button>
  56. </div>
  57. </div>
  58. <!-- 目录、详情 -->
  59. <div class="tabbar">
  60. <div :class="{ on: tabIndex == 0 }" @click="tabIndex = 0">目录</div>
  61. <div :class="{ on: tabIndex == 1 }" @click="tabIndex = 1">详情</div>
  62. </div>
  63. <div v-show="tabIndex == 0">
  64. <ul class="catalogue">
  65. <li v-for="(item, index) in taskList" :key="item.id" :class="{ on: item.id == taskId }" @click="playTask(item)">
  66. <div>
  67. <img v-if="item.type == 1" class="img" src="{__WAP_PATH}zsff/images/media1.png">
  68. <img v-else-if="item.type == 2" class="img" src="{__WAP_PATH}zsff/images/media2.png">
  69. <img v-else-if="item.type == 3" class="img" src="{__WAP_PATH}zsff/images/media3.png">
  70. </div>
  71. <div class="text">
  72. <div class="title">{{ index >= 9 ? index + 1 : '0' + (index + 1) }} | {{ item.title }}</div>
  73. <div class="try-progress">
  74. <div v-if="item.watch && item.watch.percentage" class="progress">已学习{{ item.watch.percentage }}%</div>
  75. <div v-else class="progress no">未学习</div>
  76. </div>
  77. </div>
  78. <div class="status">
  79. <i v-if="item.is_free" :class="[item.pay_status ? 'iconsuozi' : 'iconziyuan2', 'iconfont']"></i>
  80. <span v-else class="free">免费</span>
  81. </div>
  82. </li>
  83. </ul>
  84. </div>
  85. <div v-show="tabIndex == 1" class="content" v-html="taskInfo.content"></div>
  86. </div>
  87. <pay-dialog :open.sync="payDialogOpen" :money="isMember ? specialInfo.member_money : specialInfo.money" :now_money="now_money" :special_id="specialId" :pay_type_num="2"
  88. :is-wechat="isWechat" :is-alipay="is_alipay" :is-balance="is_yue" :template-id="templateIds" :wxpay-h5="wxpayH5" :is-member="isMember"
  89. :member-money="specialInfo.member_money" :member-link="memberLink" @change="changeVal"></pay-dialog>
  90. </div>
  91. {/block}
  92. {block name="foot"}
  93. <script>
  94. window.overallShare = false;
  95. require([
  96. 'vue',
  97. 'helper',
  98. 'store',
  99. 'moment',
  100. 'components/pay-dialog/index',
  101. 'layer',
  102. 'aliplayer'
  103. ], function (Vue, $h, store, moment, PayDialog) {
  104. var specialId = {$specialId};
  105. var taskId = {$task_id};
  106. var now_money = {$now_money};
  107. var isWechat = {$isWechat? 'true': 'false'};
  108. var is_alipay = {$is_alipay? 'true': 'false'};
  109. var is_yue = {$is_yue? 'true': 'false'};
  110. var wxpayH5 = {$is_h5_wechat_payment_switch? 'true': 'false'};
  111. var memberLink = "{:url('special/member_recharge')}";
  112. new Vue({
  113. el: '#app',
  114. filters: {
  115. format: function (time, sibling) {
  116. var duration = moment.duration(time * 1000);
  117. var hours = duration.hours();
  118. var siblingHours = sibling ? moment.duration(sibling * 1000).hours() : 0;
  119. return moment({
  120. h: hours,
  121. m: duration.minutes(),
  122. s: duration.seconds()
  123. }).format((hours || siblingHours ? 'HH:' : '') + 'mm:ss');
  124. }
  125. },
  126. components: {
  127. 'pay-dialog': PayDialog
  128. },
  129. data: {
  130. specialId: specialId,
  131. taskId: taskId,
  132. now_money: now_money,
  133. isWechat: isWechat,
  134. is_alipay: is_alipay,
  135. is_yue: is_yue,
  136. templateIds: '',
  137. wxpayH5: wxpayH5,
  138. memberLink: memberLink,
  139. playerHeight: 0,
  140. isPay: false,
  141. isSourcePay: false,
  142. isMember: 0,
  143. linkUrl: '',
  144. specialInfo: {},
  145. taskInfo: {
  146. play_count: 0
  147. },
  148. taskList: [],
  149. tabIndex: 0,
  150. duration: 0,
  151. currentTime: 0,
  152. audioRange: 0,
  153. audioPaused: true,
  154. page: 1,
  155. limit: 10,
  156. loading: false,
  157. finished: false,
  158. player: null,
  159. viewing_time: 0,
  160. player: null,
  161. payDialogOpen: false
  162. },
  163. computed: {
  164. },
  165. created: function () {
  166. this.viewing_time = $h.getParmas('viewing_time') / 1e3;
  167. this.currentTime = Math.floor(this.viewing_time);
  168. this.playerHeight = Math.floor(window.innerWidth * 9 / 16);
  169. this.getTaskList();
  170. },
  171. mounted: function () {
  172. this.$nextTick(function () {
  173. var vm = this;
  174. this.getTaskInfo();
  175. $h.EventUtil.listenTouchDirection(document, function () {
  176. vm.getTaskList();
  177. });
  178. });
  179. if (window.WeixinJSBridge) {
  180. window.WeixinJSBridge.invoke('getNetworkType', {}, (res) => {
  181. vm.player.load()
  182. setTimeout(() => {
  183. vm.player.play()
  184. }, 300)
  185. })
  186. } else {
  187. document.addEventListener('WeixinJSBridgeReady',() => {
  188. vm.player.load()
  189. setTimeout(() => {
  190. vm.player.play()
  191. }, 300)
  192. //if (vm.player) vm.player.play();
  193. })
  194. }
  195. },
  196. methods: {
  197. // 获取播放信息
  198. getTaskInfo: function () {
  199. var vm = this;
  200. store.basePost($h.U({
  201. c: 'special',
  202. a: 'getTaskInfo'
  203. }), {
  204. special_id: specialId,
  205. task_id: this.taskId
  206. }, function (res) {
  207. var data = res.data.data;
  208. vm.isPay = data.isPay;
  209. vm.isSourcePay = data.isSourcePay;
  210. vm.isSourcePay = data.isSourcePay;
  211. vm.isMember = data.is_member;
  212. vm.linkUrl = data.link_url;
  213. vm.specialInfo = data.specialInfo;
  214. vm.taskInfo = data.taskInfo;
  215. if (vm.taskInfo.videoId) {
  216. vm.getPlayAuth();
  217. } else if (vm.taskInfo.link) {
  218. vm.createPlayer();
  219. }
  220. if (isWechat) {
  221. mapleWx($jssdk(), function () {
  222. this.onMenuShareAll({
  223. title: vm.taskInfo.title,
  224. desc: vm.taskInfo.title,
  225. imgUrl: vm.taskInfo.image,
  226. link: data.link_url
  227. });
  228. });
  229. }
  230. });
  231. },
  232. // 获取palyauth
  233. getPlayAuth: function () {
  234. var vm = this;
  235. store.baseGet($h.U({
  236. c: 'special',
  237. a: 'get_video_playback_credentials',
  238. q: {
  239. videoId: vm.taskInfo.videoId,
  240. type: 2
  241. }
  242. }), function (res) {
  243. var request = new XMLHttpRequest();
  244. request.onreadystatechange = function () {
  245. if (request.readyState === 4) {
  246. try {
  247. var data = JSON.parse(request.responseText);
  248. if (request.status === 200) {
  249. vm.duration = data.VideoMeta.Duration;
  250. vm.createPlayer(data.PlayAuth);
  251. } else {
  252. layer.msg(data.Message);
  253. }
  254. } catch (error) {
  255. layer.msg(error);
  256. }
  257. }
  258. };
  259. request.open('GET', res.data.msg);
  260. request.send();
  261. }, undefined);
  262. },
  263. // 创建播放器
  264. createPlayer: function (playauth) {
  265. var vm = this;
  266. if (this.player) {
  267. this.player.dispose();
  268. this.player = null;
  269. this.audioPaused = true;
  270. }
  271. this.player = new Aliplayer({
  272. id: 'J_prismPlayer',
  273. height: '100%',
  274. source: vm.taskInfo.link,
  275. vid: vm.taskInfo.videoId,
  276. playauth: playauth || '',
  277. cover: vm.taskInfo.type == 3 ? vm.taskInfo.image : '',
  278. autoplay: true,
  279. // isLive:true,
  280. format: vm.taskInfo.type == 2 ? 'mp3' : '',
  281. controlBarVisibility: 'click', //never
  282. showBarTime: 3e3
  283. });
  284. vm.player.on('ready', vm.handleReady);
  285. vm.player.on('canplaythrough', vm.onPlayerCanplaythrough);
  286. vm.player.on('ended', vm.handleEnded);
  287. vm.player.on('timeupdate', vm.handleTimeupdate);
  288. // 进度条拖拽开始,不可以前进,可以后退
  289. let start = true;
  290. let startProgress = 0;
  291. let endProgress = 0;
  292. vm.player.on('startSeek', (e) => {
  293. if(start){
  294. start = false;
  295. startProgress = vm.player.getCurrentTime();
  296. //console.log('startSeek', startProgress);
  297. }
  298. vm.player.pause();
  299. });
  300. //阿里播放器拖动【结束】拖动时,不可以前进,可以后退
  301. vm.player.on('completeSeek', (e) => {
  302. start = true;
  303. endProgress = vm.player.getCurrentTime();
  304. //console.log('endProgress', endProgress);
  305. if (endProgress < startProgress) {
  306. //console.log('endProgress1', endProgress);
  307. vm.player.seek(endProgress);
  308. } else {
  309. //console.log('endProgress2', endProgress);
  310. vm.player.seek(startProgress);
  311. }
  312. vm.player.play();
  313. });
  314. },
  315. handleReady: function () {
  316. var vm = this;
  317. if (this.taskInfo.link) {
  318. this.duration = this.player.getDuration();
  319. }
  320. if (!this.isPay && !this.isSourcePay) {
  321. this.player.setPreviewTime(this.taskInfo.try_time * 60);
  322. }
  323. },
  324. // 初始播放位置
  325. onPlayerCanplaythrough: function () {
  326. var vm = this;
  327. if (!this.isPay && !this.isSourcePay) {
  328. return;
  329. }
  330. if (!vm.seeked) {
  331. vm.seeked = true;
  332. vm.player.seek(vm.viewing_time);
  333. }
  334. },
  335. handleTimeupdate: function () {
  336. this.currentTime = this.player.getCurrentTime();
  337. if (this.taskInfo.type === 2) {
  338. this.setAudioRange();
  339. }
  340. if (!this.isPay && !this.isSourcePay) {
  341. return;
  342. }
  343. var floorTime = Math.floor(this.currentTime);
  344. if (floorTime && floorTime !== this.floorTime && !(floorTime % 10)) {
  345. this.floorTime = floorTime;
  346. this.setViewing();
  347. }
  348. },
  349. // 播放结束
  350. handleEnded: function () {
  351. var vm = this;
  352. if (vm.taskInfo.type == 2) {
  353. vm.audioPaused = !vm.audioPaused;
  354. }
  355. if (!this.isPay && !this.isSourcePay) {
  356. layer.confirm('购买后可' + (this.taskInfo.type === 2 ? '听' : '看') + '全部内容,是否购买?', {
  357. title: false,
  358. closeBtn: false,
  359. btn: ['购买', '取消']
  360. }, function (index) {
  361. vm.payDialogOpen = true;
  362. layer.close(index);
  363. });
  364. }
  365. },
  366. // 获取专栏列表
  367. getTaskList: function () {
  368. var vm = this;
  369. if (vm.finished) {
  370. return;
  371. }
  372. store.baseGet($h.U({
  373. c: 'special',
  374. a: 'get_course_list',
  375. q: {
  376. special_id: specialId,
  377. page: vm.page,
  378. limit: vm.limit
  379. }
  380. }), function (res) {
  381. var data = res.data.data;
  382. var list = Array.isArray(data) ? [] : data.list;
  383. vm.taskList = vm.taskList.concat(list);
  384. vm.finished = vm.limit > list.length;
  385. if (!vm.finished) {
  386. vm.page++;
  387. }
  388. }, function () {
  389. });
  390. },
  391. // 点击目录
  392. playTask: function (item) {
  393. var vm = this;
  394. if (item.id == vm.taskId) {
  395. return;
  396. }
  397. if (!this.isPay && item.pay_status && !item.is_try) {
  398. layer.confirm('购买后可' + (item.type === 2 ? '听' : '看') + '全部内容,是否购买?', {
  399. title: false,
  400. closeBtn: false,
  401. btn: ['购买', '取消']
  402. }, function (index) {
  403. vm.payDialogOpen = true;
  404. layer.close(index);
  405. });
  406. return;
  407. }
  408. vm.taskId = item.id;
  409. vm.viewing_time = item.watch && item.watch.viewing_time / 1e3 || 0;
  410. vm.currentTime = Math.floor(vm.viewing_time);
  411. vm.seeked = false;
  412. vm.getTaskInfo();
  413. },
  414. // 更新播放进度
  415. setViewing: function () {
  416. store.basePost($h.U({
  417. c: 'special',
  418. a: 'viewing'
  419. }), {
  420. special_id: specialId,
  421. task_id: this.taskId,
  422. total: this.duration * 1000,
  423. viewing_time: this.currentTime * 1000,
  424. percentage: Math.floor(this.currentTime / this.duration * 100)
  425. }, false, false, true);
  426. },
  427. // 播放/暂停音频
  428. audioPlay: function () {
  429. this.audioPaused = !this.audioPaused;
  430. this.audioPaused ? this.player.pause() : this.player.play();
  431. },
  432. // 设置音频进度
  433. setAudioRange: function () {
  434. this.audioRange = Math.floor(this.currentTime / this.duration * 100);
  435. },
  436. // 跳到音频的新位置
  437. audioSeek: function (event) {
  438. var target = event.target;
  439. var classList = target.classList;
  440. var range;
  441. if (classList.contains('dot')) {
  442. return;
  443. } else if (classList.contains('range')) {
  444. range = event.offsetX / target.parentNode.clientWidth;
  445. } else {
  446. range = event.offsetX / target.clientWidth;
  447. }
  448. this.audioRange = range * 100;
  449. this.currentTime = this.duration * range;
  450. this.player.seek(this.currentTime);
  451. },
  452. // 上一个音频/下一个音频
  453. audioTab: function (state) {
  454. if (this.player.getStatus() === 'playing') {
  455. this.audioPaused = true;
  456. this.player.pause();
  457. }
  458. var index = 0;
  459. for (var i = this.taskList.length; i--;) {
  460. if (this.taskList[i].id === this.taskId) {
  461. index = i;
  462. break;
  463. }
  464. }
  465. if (index === this.taskList.length - 1 && state) {
  466. return $h.pushMsg('已经是最后一个');
  467. }
  468. if (!index && !state) {
  469. return $h.pushMsg('已经是第一个');
  470. }
  471. var task = state ? this.taskList[index + 1] : this.taskList[index - 1];
  472. if (task.pay_status) {
  473. return $h.pushMsg('请先去购买');
  474. }
  475. this.playTask(task);
  476. },
  477. // 滑动音频
  478. audioMove: function (event) {
  479. if (this.player.getStatus() === 'playing') {
  480. this.audioPaused = true;
  481. this.player.pause();
  482. }
  483. var parentNode = event.target.parentNode.parentNode;
  484. var range = Math.floor((event.touches[0].pageX - parentNode.offsetLeft) / parentNode.clientWidth * 100);
  485. if (range > 100) {
  486. range = 100;
  487. }
  488. this.audioRange = range;
  489. },
  490. // 滑动音频停止
  491. audioMoveEnd: function () {
  492. this.player.seek(this.duration * this.audioRange / 100);
  493. if (this.player.getStatus() === 'pause') {
  494. this.audioPaused = false;
  495. this.player.play();
  496. }
  497. },
  498. changeVal: function (opt) {
  499. if (typeof opt !== 'object') {
  500. opt = {};
  501. }
  502. var action = opt.action || '';
  503. var value = opt.value || '';
  504. this[action] && this[action](value);
  505. },
  506. // 支付方式回调
  507. pay_order: function (data) {
  508. this.orderId = data.data.result.orderId || '';
  509. switch (data.data.status) {
  510. case "PAY_ERROR":
  511. case 'ORDER_EXIST':
  512. case 'ORDER_ERROR':
  513. this.extendOrder(data.msg);
  514. break;
  515. case 'WECHAT_PAY':
  516. this.wechatPay(data.data.result.jsConfig);
  517. break;
  518. case 'WECHAT_H5_PAY':
  519. this.payDialogOpen = false;
  520. var callbackUrl = callback_url + '?type=7&id=' + this.special.id;
  521. var mwebUrl = data.data.result.jsConfig.mweb_url + '&redirect_url=' + encodeURIComponent(callbackUrl);
  522. window.location.assign(mwebUrl);
  523. break;
  524. case 'SUCCESS':
  525. this.successOrder(data.msg);
  526. break;
  527. case 'ZHIFUBAO_PAY':
  528. window.location.assign($h.U({
  529. c: 'alipay',
  530. a: 'index',
  531. q: {
  532. info: data.data.result,
  533. params: 'special'
  534. }
  535. }));
  536. break;
  537. }
  538. },
  539. // 微信支付
  540. wechatPay: function (config) {
  541. var vm = this;
  542. mapleWx($jssdk(), function () {
  543. this.chooseWXPay(config, function () {
  544. vm.successOrder();
  545. }, {
  546. fail: vm.extendOrder,
  547. cancel: vm.extendOrder
  548. });
  549. });
  550. },
  551. // 支付成功
  552. successOrder: function (msg) {
  553. var that = this;
  554. $h.showMsg({
  555. title: msg || '支付成功',
  556. icon: 'success',
  557. success: function () {
  558. window.location.reload();
  559. that.payDialogOpen = false;
  560. that.getTaskInfo();
  561. that.finished = false;
  562. that.page = 1;
  563. that.taskList = [];
  564. that.getTaskList();
  565. }
  566. });
  567. },
  568. // 支付未完成
  569. extendOrder: function (msg) {
  570. var that = this;
  571. if (typeof msg === 'object') {
  572. if (msg.errMsg === 'chooseWXPay:cancel') {
  573. msg = '微信支付取消';
  574. } else {
  575. msg = '支付失败';
  576. }
  577. } else {
  578. msg = '支付失败';
  579. }
  580. $h.pushMsg(msg, function () {
  581. that.payDialogOpen = false;
  582. if (that.orderId) {
  583. store.baseGet($h.U({
  584. c: 'special',
  585. a: 'del_order',
  586. q: {
  587. orderId: that.orderId
  588. }
  589. }));
  590. }
  591. });
  592. },
  593. }
  594. });
  595. });
  596. </script>
  597. {/block}