|
@@ -0,0 +1,362 @@
|
|
|
+<template>
|
|
|
+ <a-modal
|
|
|
+ :title="title"
|
|
|
+ :width="1300"
|
|
|
+ :visible="visible"
|
|
|
+ @cancel="handleCancel"
|
|
|
+ cancelText="关闭"
|
|
|
+ class="ad_cover_container"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <a-row>
|
|
|
+ <a-col :span="8" class="addetail_left">
|
|
|
+ <a-tabs :defaultActiveKey="defaultActiveKey">
|
|
|
+ <a-tab-pane tab="视频" key="1">
|
|
|
+ <div class="item">
|
|
|
+ <div class="player">
|
|
|
+ <video-player
|
|
|
+ class="vjs-custom-skin"
|
|
|
+ ref="videoPlayer"
|
|
|
+ :options="playerOptions"
|
|
|
+ :playsinline="true"
|
|
|
+ @play="onPlayerPlay($event)"
|
|
|
+ @pause="onPlayerPause($event)"
|
|
|
+ @ended="onPlayerEnded($event)"
|
|
|
+ @loadeddata="onPlayerLoadeddata($event)"
|
|
|
+ @waiting="onPlayerWaiting($event)"
|
|
|
+ @playing="onPlayerPlaying($event)"
|
|
|
+ @timeupdate="onPlayerTimeupdate($event)"
|
|
|
+ @canplay="onPlayerCanplay($event)"
|
|
|
+ @canplaythrough="onPlayerCanplaythrough($event)"
|
|
|
+ @ready="playerReadied"
|
|
|
+ @statechanged="playerStateChanged($event)"
|
|
|
+ ></video-player>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ </a-col>
|
|
|
+ <a-col :span="16" class="addetail_right">
|
|
|
+ <div v-if="videoModel != null">
|
|
|
+ <detail-list :col="1">
|
|
|
+ <detail-list-item term="创意标题">{{videoModel.creative_title}}</detail-list-item>
|
|
|
+ </detail-list>
|
|
|
+ <detail-list :col="1">
|
|
|
+ <detail-list-item term="创意内容">{{videoModel.creative_info}}</detail-list-item>
|
|
|
+ </detail-list>
|
|
|
+ <detail-list :col="1">
|
|
|
+ <detail-list-item term="创意标签">{{videoModel.creativeLabel}}</detail-list-item>
|
|
|
+ </detail-list>
|
|
|
+ <detail-list :col="1">
|
|
|
+ <detail-list-item term="创意分数">{{videoModel.creative_score}}</detail-list-item>
|
|
|
+ </detail-list>
|
|
|
+ <detail-list :col="1">
|
|
|
+ <detail-list-item term="视频ID">
|
|
|
+ <a :href="[videoModel.video_url]" target="_blank">{{videoModel.vid}}</a>
|
|
|
+ </detail-list-item>
|
|
|
+ </detail-list>
|
|
|
+ <!--<detail-list-item term="发布时间">{{videoModel.time}}</detail-list-item>-->
|
|
|
+ <detail-list :col="1">
|
|
|
+ <detail-list-item term="发布人">{{videoModel.author}}</detail-list-item>
|
|
|
+ </detail-list>
|
|
|
+ <detail-list :col="1">
|
|
|
+ <detail-list-item term="发布时间">{{videoModel.create_date}}</detail-list-item>
|
|
|
+ </detail-list>
|
|
|
+ <detail-list :col="1">
|
|
|
+ <detail-list-item term="效果">{{videoModel.effect}}</detail-list-item>
|
|
|
+ </detail-list>
|
|
|
+ <detail-list :col="1">
|
|
|
+ <detail-list-item term="转化类型">{{videoModel.conversion_type}}</detail-list-item>
|
|
|
+ </detail-list>
|
|
|
+ <detail-list :col="1">
|
|
|
+ <detail-list-item term="行业标签">{{videoModel.industry_tag}}</detail-list-item>
|
|
|
+ </detail-list>
|
|
|
+ <detail-list :col="1">
|
|
|
+ <detail-list-item term="抓取时间">{{videoModel.createTime}}</detail-list-item>
|
|
|
+ </detail-list>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ </a-modal>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+// custom skin css
|
|
|
+// import '../src/custom-theme.css'
|
|
|
+import 'video.js/dist/video-js.css'
|
|
|
+import { videoPlayer } from 'vue-video-player'
|
|
|
+import DetailList from '@/components/tools/DetailList'
|
|
|
+import PageLayout from '@/components/page/PageLayout'
|
|
|
+import STable from '@/components/table/'
|
|
|
+import { getAction, deleteAction, putAction, postAction } from '@/api/manage'
|
|
|
+
|
|
|
+const DetailListItem = DetailList.Item;
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ videoPlayer,
|
|
|
+ PageLayout,
|
|
|
+ DetailList,
|
|
|
+ DetailListItem,
|
|
|
+ STable
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ goodsColumns: [
|
|
|
+ {
|
|
|
+ title: '封面ID',
|
|
|
+ dataIndex: 'coverId',
|
|
|
+ key: 'coverId'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '封面预览',
|
|
|
+ // dataIndex: 'coverUrl',
|
|
|
+ // key: 'coverUrl',
|
|
|
+ dataIndex: 'ADcoverImagePreview',
|
|
|
+ scopedSlots: { customRender: 'ADcoverImagePreview' }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创意ID',
|
|
|
+ dataIndex: 'creativeId',
|
|
|
+ key: 'creativeId'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '展示数',
|
|
|
+ dataIndex: 'viewCount',
|
|
|
+ key: 'viewCount'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '喜欢数',
|
|
|
+ dataIndex: 'likeCount',
|
|
|
+ key: 'likeCount'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '评论数',
|
|
|
+ dataIndex: 'commentCount',
|
|
|
+ key: 'commentCount'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '质量分',
|
|
|
+ dataIndex: 'score',
|
|
|
+ key: 'score'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'App名称',
|
|
|
+ dataIndex: 'appName',
|
|
|
+ key: 'appName'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '发布时间',
|
|
|
+ dataIndex: 'time',
|
|
|
+ key: 'time'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ userId: 0,
|
|
|
+ photoId: 0,
|
|
|
+ title: '操作',
|
|
|
+ visible: false,
|
|
|
+ model: [],
|
|
|
+ userModel: {},
|
|
|
+ videoModel: {},
|
|
|
+ labelCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 5 }
|
|
|
+ },
|
|
|
+ wrapperCol: {
|
|
|
+ xs: { span: 24 },
|
|
|
+ sm: { span: 16 }
|
|
|
+ },
|
|
|
+ // videojs options
|
|
|
+ playerOptions: {
|
|
|
+ height: '640',
|
|
|
+ width: '360',
|
|
|
+ autoplay: false,
|
|
|
+ muted: true,
|
|
|
+ language: 'en',
|
|
|
+ playbackRates: [0.7, 1.0, 1.5, 2.0],
|
|
|
+ sources: [
|
|
|
+ {
|
|
|
+ type: 'video/mp4',
|
|
|
+ // mp4
|
|
|
+ src: ''
|
|
|
+ // webm
|
|
|
+ // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ poster: ''
|
|
|
+ },
|
|
|
+ loadGoodsData: () => {
|
|
|
+ var params = {
|
|
|
+ photoId: this.photoId,
|
|
|
+ userId: this.userId
|
|
|
+ }
|
|
|
+ return getAction('/ctop/adcover/adlist', params).then(res => {
|
|
|
+ this.model = res.result
|
|
|
+ console.log(res.result)
|
|
|
+ return res.result
|
|
|
+ })
|
|
|
+ },
|
|
|
+ defaultActiveKey: '1',
|
|
|
+
|
|
|
+ // 封面预览弹窗
|
|
|
+ coverPreviewVisible: false,
|
|
|
+ coverPreviewMaskStyle: {
|
|
|
+ background: 'rgba(0,0,0,.08)'
|
|
|
+ },
|
|
|
+ coverPreviewUrl: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // console.log('this is current player instance object', this.player)
|
|
|
+ setTimeout(() => {
|
|
|
+ console.log('dynamic change options', this.player)
|
|
|
+ // change src
|
|
|
+ // this.playerOptions.sources[0].src = 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm';
|
|
|
+ // change item
|
|
|
+ // this.$set(this.playerOptions.sources, 0, {
|
|
|
+ // type: "video/mp4",
|
|
|
+ // src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
|
|
|
+ // })
|
|
|
+ // change array
|
|
|
+ // this.playerOptions.sources = [{
|
|
|
+ // type: "video/mp4",
|
|
|
+ // src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
|
|
|
+ // }]
|
|
|
+ this.player.muted(false)
|
|
|
+ }, 5000)
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // player() {
|
|
|
+ // return this.$refs.videoPlayer.player
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // listen event
|
|
|
+ onPlayerPlay(player) {
|
|
|
+ // console.log('player play!', player)
|
|
|
+ },
|
|
|
+ onPlayerPause(player) {
|
|
|
+ // console.log('player pause!', player)
|
|
|
+ },
|
|
|
+ onPlayerEnded(player) {
|
|
|
+ // console.log('player ended!', player)
|
|
|
+ },
|
|
|
+ onPlayerLoadeddata(player) {
|
|
|
+ // console.log('player Loadeddata!', player)
|
|
|
+ },
|
|
|
+ onPlayerWaiting(player) {
|
|
|
+ // console.log('player Waiting!', player)
|
|
|
+ },
|
|
|
+ onPlayerPlaying(player) {
|
|
|
+ // console.log('player Playing!', player)
|
|
|
+ },
|
|
|
+ onPlayerTimeupdate(player) {
|
|
|
+ // console.log('player Timeupdate!', player.currentTime())
|
|
|
+ },
|
|
|
+ onPlayerCanplay(player) {
|
|
|
+ // console.log('player Canplay!', player)
|
|
|
+ },
|
|
|
+ onPlayerCanplaythrough(player) {
|
|
|
+ // console.log('player Canplaythrough!', player)
|
|
|
+ },
|
|
|
+ // or listen state event
|
|
|
+ playerStateChanged(playerCurrentState) {
|
|
|
+ // console.log('player current update state', playerCurrentState)
|
|
|
+ },
|
|
|
+ // player is ready
|
|
|
+ playerReadied(player) {
|
|
|
+ // seek to 10s
|
|
|
+ console.log('example player 1 readied', player)
|
|
|
+ // player.currentTime(10)
|
|
|
+ // console.log('example 01: the player is readied', player)
|
|
|
+ },
|
|
|
+ show(value) {
|
|
|
+ this.model = []
|
|
|
+ this.userModel = {}
|
|
|
+ this.videoModel = {}
|
|
|
+ this.playerOptions.sources[0].src = ''
|
|
|
+ this.loadDetail(value)
|
|
|
+ this.visible = true
|
|
|
+ this.defaultActiveKey = '1'
|
|
|
+ },
|
|
|
+ loadDetail(value) {
|
|
|
+ this.videoModel = value
|
|
|
+ this.playerOptions.sources[0].src = value.video_url;
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.$emit('close')
|
|
|
+ this.visible = false
|
|
|
+ this.defaultActiveKey = '1'
|
|
|
+ },
|
|
|
+ handleCancel() {
|
|
|
+ this.close()
|
|
|
+ this.defaultActiveKey = '1'
|
|
|
+ },
|
|
|
+
|
|
|
+ // 封面预览弹窗
|
|
|
+ coverPreviewShowModal(record) {
|
|
|
+ this.coverPreviewVisible = true
|
|
|
+ this.coverPreviewUrl = record.coverUrl
|
|
|
+ this.coverPreviewMaskStyle.background = 'rgba(0,0,0,.08)'
|
|
|
+ },
|
|
|
+ coverPreviewHandleOk() {
|
|
|
+ this.coverPreviewVisible = false
|
|
|
+ this.coverPreviewMaskStyle.background = 'rgba(0,0,0,0)'
|
|
|
+ },
|
|
|
+ coverPreviewHandleCancel() {
|
|
|
+ this.coverPreviewVisible = false
|
|
|
+ this.coverPreviewUrl = ''
|
|
|
+ this.coverPreviewMaskStyle.background = 'rgba(0,0,0,0)'
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+.ant-carousel >>> .slick-slide {
|
|
|
+ text-align: center;
|
|
|
+ // height: 160px;
|
|
|
+ // line-height: 160px;
|
|
|
+ background: #364d79;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.ad_cover_container .ant-card-body {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.ant-carousel >>> .slick-slide h3 {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+.ant-carousel >>> .custom-slick-arrow {
|
|
|
+ width: 25px;
|
|
|
+ height: 25px;
|
|
|
+ font-size: 25px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: rgba(31, 45, 61, 0.11);
|
|
|
+ opacity: 0.3;
|
|
|
+}
|
|
|
+.ant-carousel >>> .custom-slick-arrow:before {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.ant-carousel >>> .custom-slick-arrow:hover {
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+.addetail_left {
|
|
|
+ padding-right: 56px;
|
|
|
+ .custom-slick-arrow {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ .slick_arrow_left {
|
|
|
+ background: url(../images/arrow_left.png);
|
|
|
+ }
|
|
|
+ .slick_arrow_right {
|
|
|
+ background: url(../images/arrow_right.png);
|
|
|
+ }
|
|
|
+ .slick_arrow_left:hover {
|
|
|
+ background: url(../images/arrow_left.png)!important;
|
|
|
+ }
|
|
|
+ .slick_arrow_right:hover {
|
|
|
+ background: url(../images/arrow_right.png)!important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|