source.php 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. {extend name="public/container" /}
  2. {block name="title"}{/block}
  3. {block name="head_top"}
  4. <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.9.21/skins/default/aliplayer-min.css">
  5. <script src="//g.alicdn.com/de/prismplayer/2.9.21/aliplayer-min.js"></script>
  6. <style>
  7. .xl-chrome-ext-bar {
  8. display: none;
  9. }
  10. .prism-player .prism-cc-btn,
  11. .prism-player .prism-setting-list .prism-setting-cc,
  12. .prism-player .prism-setting-list .prism-setting-audio,
  13. .prism-player .prism-setting-list .prism-setting-quality {
  14. display: none;
  15. }
  16. .layui-col-content:after {
  17. content: '\20';
  18. clear: both;
  19. *zoom: 1;
  20. display: block;
  21. height: 0;
  22. }
  23. .layui-col-label {
  24. float: left;
  25. width: 5em;
  26. }
  27. .layui-col-block {
  28. margin-left: 5em;
  29. }
  30. </style>
  31. {/block}
  32. {block name="content"}
  33. <div v-cloak id="app" class="layui-fluid">
  34. <div class="layui-card">
  35. <div class="layui-card-body">
  36. <div class="layui-tab layui-tab-brief" lay-filter="tab">
  37. <ul class="layui-tab-title">
  38. <li v-for="(item, index) in tabTitle" :key="item.value" :class="{ 'layui-this': !index }">{{ item.title }}</li>
  39. </ul>
  40. <div class="layui-tab-content">
  41. <div class="layui-tab-item layui-show">
  42. <div class="layui-row layui-col-space10">
  43. <div class="layui-col-md4">素材名称:{{ special.title }}</div>
  44. </div>
  45. <div class="layui-row layui-col-space10">
  46. <div class="layui-col-md4">素材类型:{{ special.type }}</div>
  47. </div>
  48. <div class="layui-row layui-col-space10">
  49. <div class="layui-col-md4">素材排序:{{ special.sort }}</div>
  50. </div>
  51. <div class="layui-row layui-col-space10">
  52. <div class="layui-col-md4">素材封面:<img width="60" height="60" :src="special.image.pic" @click="look(special.image.pic)"></div>
  53. </div>
  54. <div class="layui-row layui-col-space10">
  55. <div class="layui-col-md12">试听状态:{{ special.is_try ? '开启' : '关闭' }}</div>
  56. </div>
  57. <div class="layui-row layui-col-space10">
  58. <div class="layui-col-md12">试听时长:{{ special.try_time }}分钟</div>
  59. </div>
  60. <div class="layui-row layui-col-space10">
  61. <div class="layui-col-md12">
  62. <div class="layui-col-content">
  63. <div class="layui-col-label">素材简介:</div>
  64. <div class="layui-col-block" v-html="special.detail"></div>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="layui-tab-item">
  70. <div v-if="special.type === 1" class="layui-row layui-col-space10">
  71. <div v-if="special.is_try" class="layui-col-md12">
  72. <div class="layui-col-content">
  73. <div class="layui-col-label">试看内容:</div>
  74. <div class="layui-col-block" v-html="special.try_content"></div>
  75. </div>
  76. </div>
  77. <div class="layui-col-md12">
  78. <div class="layui-col-label">素材内容:</div>
  79. <div class="layui-col-block" v-html="special.content"></div>
  80. </div>
  81. </div>
  82. <div v-else class="layui-row layui-col-space10">
  83. <div class="layui-col-md12">
  84. <div id="J_prismPlayer"></div>
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. </div>
  92. </div>
  93. {/block}
  94. {block name="foot"}
  95. <script src="{__ADMIN_PATH}js/layuiList.js"></script>
  96. <script>
  97. require(['vue'], function (Vue) {
  98. var special = {$special},
  99. element = layui.element;
  100. new Vue({
  101. el: '#app',
  102. data: {
  103. special: special,
  104. tabTitle: [
  105. {
  106. title: '素材信息',
  107. value: 1
  108. },
  109. {
  110. title: '素材内容',
  111. value: 2
  112. }
  113. ]
  114. },
  115. mounted: function () {
  116. this.$nextTick(function () {
  117. var vm = this;
  118. if (this.special.type !== 1) {
  119. if (this.special.videoId) {
  120. layList.basePost(layList.U({
  121. a: 'video_upload_address_voucher'
  122. }), {
  123. FileName: '',
  124. type: 3,
  125. image: '',
  126. videoId: this.special.videoId
  127. }, function (res) {
  128. $.getJSON(res.msg, function (data) {
  129. vm.createPlayer(data.PlayInfoList.PlayInfo[0].PlayURL);
  130. });
  131. });
  132. } else {
  133. this.createPlayer();
  134. }
  135. }
  136. element.on('tab(tab)', function (data) {
  137. if (!data.index) {
  138. if (vm.player && vm.player.getStatus() === 'playing') {
  139. vm.player.pause();
  140. }
  141. }
  142. });
  143. });
  144. },
  145. methods: {
  146. createPlayer: function (source) {
  147. if (this.player) {
  148. this.player.dispose();
  149. }
  150. this.player = new Aliplayer({
  151. id: 'J_prismPlayer',
  152. height: '500px',
  153. autoplay: false,
  154. source: source || this.special.link
  155. }, function (player) {
  156. console.log('The player is created.');
  157. });
  158. },
  159. look: function () {
  160. var data = [];
  161. if (arguments.length === 1) {
  162. data.push({
  163. src: arguments[0]
  164. });
  165. } else {
  166. arguments[0].forEach(function (item) {
  167. data.push({
  168. src: item.pic
  169. });
  170. });
  171. }
  172. layer.photos({
  173. photos: {
  174. start: arguments[1] || 0,
  175. data: data
  176. },
  177. anim: 5
  178. });
  179. }
  180. }
  181. });
  182. });
  183. </script>
  184. {/block}