HotMaterialModal.vue 9.4 KB

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