HotMaterialModal.vue 9.4 KB

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