analysisModal.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323
  1. <template>
  2. <a-modal
  3. :title="title"
  4. :width="1300"
  5. :visible="visible"
  6. @cancel="handleCancel"
  7. cancelText="关闭"
  8. class="ad_cover_container"
  9. >
  10. <div>
  11. <a-row>
  12. <a-col :span="8" class="addetail_left">
  13. <a-tabs :defaultActiveKey="defaultActiveKey">
  14. <a-tab-pane tab="视频" key="1">
  15. <div class="item">
  16. <div class="player">
  17. <video-player
  18. class="vjs-custom-skin"
  19. ref="videoPlayer"
  20. :options="playerOptions"
  21. :playsinline="true"
  22. @play="onPlayerPlay($event)"
  23. @pause="onPlayerPause($event)"
  24. @ended="onPlayerEnded($event)"
  25. @loadeddata="onPlayerLoadeddata($event)"
  26. @waiting="onPlayerWaiting($event)"
  27. @playing="onPlayerPlaying($event)"
  28. @timeupdate="onPlayerTimeupdate($event)"
  29. @canplay="onPlayerCanplay($event)"
  30. @canplaythrough="onPlayerCanplaythrough($event)"
  31. @ready="playerReadied"
  32. @statechanged="playerStateChanged($event)"
  33. ></video-player>
  34. </div>
  35. </div>
  36. </a-tab-pane>
  37. </a-tabs>
  38. </a-col>
  39. <a-col :span="16" class="addetail_right">
  40. <div v-if="videoModel != null">
  41. <detail-list :col="1">
  42. <detail-list-item term="简介">{{ videoModel.caption }}</detail-list-item>
  43. </detail-list>
  44. <!-- <detail-list :col="1">
  45. <detail-list-item term="播放数">{{ videoModel.playingTime }}</detail-list-item>
  46. </detail-list>
  47. <detail-list :col="1">
  48. <detail-list-item term="点赞数">{{ videoModel.likeTime }}</detail-list-item>
  49. </detail-list>
  50. <detail-list :col="1">
  51. <detail-list-item term="评论数">{{ videoModel.commentTime }}</detail-list-item>
  52. </detail-list> -->
  53. </div>
  54. </a-col>
  55. </a-row>
  56. </div>
  57. </a-modal>
  58. </template>
  59. <script>
  60. // custom skin css
  61. // import '../src/custom-theme.css'
  62. import 'video.js/dist/video-js.css'
  63. import { videoPlayer } from 'vue-video-player'
  64. import DetailList from '@/components/tools/DetailList'
  65. import PageLayout from '@/components/page/PageLayout'
  66. import STable from '@/components/table/'
  67. import { getAction, deleteAction, putAction, postAction } from '@/api/manage'
  68. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl'
  69. const DetailListItem = DetailList.Item
  70. export default {
  71. components: {
  72. videoPlayer,
  73. PageLayout,
  74. DetailList,
  75. DetailListItem,
  76. STable
  77. },
  78. data() {
  79. return {
  80. goodsColumns: [
  81. {
  82. title: '封面ID',
  83. dataIndex: 'coverId',
  84. key: 'coverId'
  85. },
  86. {
  87. title: '封面预览',
  88. // dataIndex: 'coverUrl',
  89. // key: 'coverUrl',
  90. dataIndex: 'ADcoverImagePreview',
  91. scopedSlots: { customRender: 'ADcoverImagePreview' }
  92. },
  93. {
  94. title: '创意ID',
  95. dataIndex: 'creativeId',
  96. key: 'creativeId'
  97. },
  98. {
  99. title: '展示数',
  100. dataIndex: 'viewCount',
  101. key: 'viewCount'
  102. },
  103. {
  104. title: '喜欢数',
  105. dataIndex: 'likeCount',
  106. key: 'likeCount'
  107. },
  108. {
  109. title: '评论数',
  110. dataIndex: 'commentCount',
  111. key: 'commentCount'
  112. },
  113. {
  114. title: '质量分',
  115. dataIndex: 'score',
  116. key: 'score'
  117. },
  118. {
  119. title: 'App名称',
  120. dataIndex: 'appName',
  121. key: 'appName'
  122. },
  123. {
  124. title: '发布时间',
  125. dataIndex: 'time',
  126. key: 'time'
  127. }
  128. ],
  129. userId: 0,
  130. photoId: 0,
  131. title: '操作',
  132. visible: false,
  133. model: [],
  134. userModel: {},
  135. videoModel: {},
  136. labelCol: {
  137. xs: { span: 24 },
  138. sm: { span: 5 }
  139. },
  140. wrapperCol: {
  141. xs: { span: 24 },
  142. sm: { span: 16 }
  143. },
  144. // videojs options
  145. playerOptions: {
  146. height: '640',
  147. width: '360',
  148. autoplay: false,
  149. muted: true,
  150. language: 'en',
  151. playbackRates: [0.7, 1.0, 1.5, 2.0],
  152. sources: [
  153. {
  154. type: 'video/mp4',
  155. // mp4
  156. src: ''
  157. // webm
  158. // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
  159. }
  160. ],
  161. poster: ''
  162. },
  163. defaultActiveKey: '1',
  164. // 封面预览弹窗
  165. coverPreviewVisible: false,
  166. coverPreviewMaskStyle: {
  167. background: 'rgba(0,0,0,.08)'
  168. },
  169. coverPreviewUrl: ''
  170. }
  171. },
  172. mounted() {
  173. // console.log('this is current player instance object', this.player)
  174. setTimeout(() => {
  175. // console.log('dynamic change options', this.player)
  176. // change src
  177. // this.playerOptions.sources[0].src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm';
  178. // change item
  179. // this.$set(this.playerOptions.sources, 0, {
  180. // type: "video/mp4",
  181. // src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
  182. // })
  183. // change array
  184. // this.playerOptions.sources = [{
  185. // type: "video/mp4",
  186. // src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
  187. // }]
  188. // this.player.muted(false)
  189. }, 5000)
  190. },
  191. computed: {
  192. // player() {
  193. // return this.$refs.videoPlayer.player
  194. // }
  195. },
  196. methods: {
  197. // listen event
  198. onPlayerPlay(player) {
  199. // console.log('player play!', player)
  200. },
  201. onPlayerPause(player) {
  202. // console.log('player pause!', player)
  203. },
  204. onPlayerEnded(player) {
  205. // console.log('player ended!', player)
  206. },
  207. onPlayerLoadeddata(player) {
  208. // console.log('player Loadeddata!', player)
  209. },
  210. onPlayerWaiting(player) {
  211. // console.log('player Waiting!', player)
  212. },
  213. onPlayerPlaying(player) {
  214. // console.log('player Playing!', player)
  215. },
  216. onPlayerTimeupdate(player) {
  217. // console.log('player Timeupdate!', player.currentTime())
  218. },
  219. onPlayerCanplay(player) {
  220. // console.log('player Canplay!', player)
  221. },
  222. onPlayerCanplaythrough(player) {
  223. // console.log('player Canplaythrough!', player)
  224. },
  225. // or listen state event
  226. playerStateChanged(playerCurrentState) {
  227. // console.log('player current update state', playerCurrentState)
  228. },
  229. // player is ready
  230. playerReadied(player) {
  231. // seek to 10s
  232. console.log('example player 1 readied', player)
  233. // player.currentTime(10)
  234. // console.log('example 01: the player is readied', player)
  235. },
  236. show(value) {
  237. this.model = []
  238. this.userModel = {}
  239. this.videoModel = value
  240. this.playerOptions.sources[0].src = value.mainMvUrl
  241. this.visible = true
  242. this.defaultActiveKey = '1'
  243. },
  244. close() {
  245. this.$emit('close')
  246. this.visible = false
  247. this.defaultActiveKey = '1'
  248. closeAllVideoFun()
  249. },
  250. handleCancel() {
  251. this.close()
  252. this.defaultActiveKey = '1'
  253. },
  254. // 封面预览弹窗
  255. coverPreviewShowModal(record) {
  256. this.coverPreviewVisible = true
  257. this.coverPreviewUrl = record.coverUrl
  258. this.coverPreviewMaskStyle.background = 'rgba(0,0,0,.08)'
  259. },
  260. coverPreviewHandleOk() {
  261. this.coverPreviewVisible = false
  262. this.coverPreviewMaskStyle.background = 'rgba(0,0,0,0)'
  263. },
  264. coverPreviewHandleCancel() {
  265. this.coverPreviewVisible = false
  266. this.coverPreviewUrl = ''
  267. this.coverPreviewMaskStyle.background = 'rgba(0,0,0,0)'
  268. }
  269. }
  270. }
  271. </script>
  272. <style lang="scss">
  273. .ant-carousel >>> .slick-slide {
  274. text-align: center;
  275. // height: 160px;
  276. // line-height: 160px;
  277. background: #364d79;
  278. overflow: hidden;
  279. }
  280. .ad_cover_container .ant-card-body {
  281. padding: 0;
  282. }
  283. .ant-carousel >>> .slick-slide h3 {
  284. color: #fff;
  285. }
  286. .ant-carousel >>> .custom-slick-arrow {
  287. width: 25px;
  288. height: 25px;
  289. font-size: 25px;
  290. color: #fff;
  291. background-color: rgba(31, 45, 61, 0.11);
  292. opacity: 0.3;
  293. }
  294. .ant-carousel >>> .custom-slick-arrow:before {
  295. display: none;
  296. }
  297. .ant-carousel >>> .custom-slick-arrow:hover {
  298. opacity: 0.5;
  299. }
  300. .addetail_left {
  301. padding-right: 56px;
  302. .custom-slick-arrow {
  303. width: 40px;
  304. height: 40px;
  305. }
  306. .slick_arrow_left {
  307. background: url(../images/arrow_left.png);
  308. }
  309. .slick_arrow_right {
  310. background: url(../images/arrow_right.png);
  311. }
  312. .slick_arrow_left:hover {
  313. background: url(../images/arrow_left.png) !important;
  314. }
  315. .slick_arrow_right:hover {
  316. background: url(../images/arrow_right.png) !important;
  317. }
  318. }
  319. </style>