|
@@ -1,59 +1,73 @@
|
|
<template>
|
|
<template>
|
|
- <a-modal
|
|
|
|
- :title="title"
|
|
|
|
- :width="1300"
|
|
|
|
- :visible="visible"
|
|
|
|
- @cancel="handleCancel"
|
|
|
|
- cancelText="关闭">
|
|
|
|
|
|
+ <a-modal :title="title" :width="1300" :visible="visible" @cancel="handleCancel" cancelText="关闭">
|
|
<div>
|
|
<div>
|
|
<a-row>
|
|
<a-row>
|
|
- <a-col :span="8">
|
|
|
|
- <a-tabs defaultActiveKey="1">
|
|
|
|
|
|
+ <a-col :span="8" class="addetail_left">
|
|
|
|
+ <a-tabs :defaultActiveKey="defaultActiveKey">
|
|
<a-tab-pane tab="视频" key="1">
|
|
<a-tab-pane tab="视频" key="1">
|
|
<div class="item">
|
|
<div class="item">
|
|
<div class="player">
|
|
<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>
|
|
|
|
|
|
+ <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>
|
|
</div>
|
|
</div>
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
<a-tab-pane tab="视频封面" key="2">
|
|
<a-tab-pane tab="视频封面" key="2">
|
|
<a-carousel>
|
|
<a-carousel>
|
|
- <div v-if="videoModel != null"><img :src="videoModel.coverUrl" :width="360"></div>
|
|
|
|
|
|
+ <div v-if="videoModel != null">
|
|
|
|
+ <img :src="videoModel.coverUrl" :width="360" />
|
|
|
|
+ </div>
|
|
</a-carousel>
|
|
</a-carousel>
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
<a-tab-pane tab="广告封面" key="3">
|
|
<a-tab-pane tab="广告封面" key="3">
|
|
- <a-carousel>
|
|
|
|
- <div v-for="item in model">
|
|
|
|
- <img :src="item.coverUrl" :width="360">
|
|
|
|
|
|
+ <a-carousel arrows>
|
|
|
|
+ <div v-for="(item,index) in model" :key="index">
|
|
|
|
+ <img :src="item.coverUrl" :width="360" />
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ slot="prevArrow"
|
|
|
|
+ slot-scope
|
|
|
|
+ class="custom-slick-arrow slick_arrow_left"
|
|
|
|
+ style="left: 10px;zIndex: 1"
|
|
|
|
+ >
|
|
|
|
+ <a-icon type="left-circle" />
|
|
|
|
+ </div>
|
|
|
|
+ <div
|
|
|
|
+ slot="nextArrow"
|
|
|
|
+ slot-scope
|
|
|
|
+ class="custom-slick-arrow slick_arrow_right"
|
|
|
|
+ style="right: 10px;zIndex: 9"
|
|
|
|
+ >
|
|
|
|
+ <a-icon type="right-circle" />
|
|
</div>
|
|
</div>
|
|
</a-carousel>
|
|
</a-carousel>
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
</a-tabs>
|
|
</a-tabs>
|
|
-
|
|
|
|
</a-col>
|
|
</a-col>
|
|
- <a-col :span="16">
|
|
|
|
|
|
+ <a-col :span="16" class="addetail_right">
|
|
<div v-if="videoModel != null">
|
|
<div v-if="videoModel != null">
|
|
<detail-list :col="1">
|
|
<detail-list :col="1">
|
|
<detail-list-item term="标题">{{videoModel.caption}}</detail-list-item>
|
|
<detail-list-item term="标题">{{videoModel.caption}}</detail-list-item>
|
|
</detail-list>
|
|
</detail-list>
|
|
<detail-list :col="3">
|
|
<detail-list :col="3">
|
|
- <detail-list-item term="快手视频ID"><a :href="[videoModel.share_info]"
|
|
|
|
- target="_blank">{{videoModel.photo_id}}</a></detail-list-item>
|
|
|
|
|
|
+ <detail-list-item term="快手视频ID">
|
|
|
|
+ <a :href="[videoModel.share_info]" target="_blank">{{videoModel.photo_id}}</a>
|
|
|
|
+ </detail-list-item>
|
|
<detail-list-item term="发布时间">{{videoModel.time}}</detail-list-item>
|
|
<detail-list-item term="发布时间">{{videoModel.time}}</detail-list-item>
|
|
<detail-list-item term="抓取时间">{{videoModel.createTime}}</detail-list-item>
|
|
<detail-list-item term="抓取时间">{{videoModel.createTime}}</detail-list-item>
|
|
</detail-list>
|
|
</detail-list>
|
|
@@ -65,7 +79,8 @@
|
|
</div>
|
|
</div>
|
|
<div v-if="userModel != null">
|
|
<div v-if="userModel != null">
|
|
<detail-list :col="3">
|
|
<detail-list :col="3">
|
|
- <detail-list-item term="发布人"><a :href="[userModel.url]" target="_blank">{{userModel.name}}</a>
|
|
|
|
|
|
+ <detail-list-item term="发布人">
|
|
|
|
+ <a :href="[userModel.url]" target="_blank">{{userModel.name}}</a>
|
|
</detail-list-item>
|
|
</detail-list-item>
|
|
<detail-list-item term="广告主">{{userModel.company}}</detail-list-item>
|
|
<detail-list-item term="广告主">{{userModel.company}}</detail-list-item>
|
|
<detail-list-item term="推广产品">{{userModel.product}}</detail-list-item>
|
|
<detail-list-item term="推广产品">{{userModel.product}}</detail-list-item>
|
|
@@ -76,248 +91,271 @@
|
|
<detail-list-item term="二级行业">{{userModel.secondIndustry}}</detail-list-item>
|
|
<detail-list-item term="二级行业">{{userModel.secondIndustry}}</detail-list-item>
|
|
</detail-list>
|
|
</detail-list>
|
|
</div>
|
|
</div>
|
|
- <a-table
|
|
|
|
- :columns="goodsColumns"
|
|
|
|
- :dataSource="model"
|
|
|
|
- :pagination="false">
|
|
|
|
-
|
|
|
|
- </a-table>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ <a-table :columns="goodsColumns" :dataSource="model" :pagination="false"></a-table>
|
|
</a-col>
|
|
</a-col>
|
|
</a-row>
|
|
</a-row>
|
|
-
|
|
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
</a-modal>
|
|
</a-modal>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<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'
|
|
|
|
|
|
+// 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: '创意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},
|
|
|
|
|
|
+const DetailListItem = DetailList.Item
|
|
|
|
+export default {
|
|
|
|
+ components: {
|
|
|
|
+ videoPlayer,
|
|
|
|
+ PageLayout,
|
|
|
|
+ DetailList,
|
|
|
|
+ DetailListItem,
|
|
|
|
+ STable
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ goodsColumns: [
|
|
|
|
+ {
|
|
|
|
+ title: '封面ID',
|
|
|
|
+ dataIndex: 'coverId',
|
|
|
|
+ key: 'coverId'
|
|
},
|
|
},
|
|
- wrapperCol: {
|
|
|
|
- xs: {span: 24},
|
|
|
|
- sm: {span: 16},
|
|
|
|
|
|
+ {
|
|
|
|
+ title: '创意ID',
|
|
|
|
+ dataIndex: 'creativeId',
|
|
|
|
+ key: 'creativeId'
|
|
},
|
|
},
|
|
- // videojs options
|
|
|
|
- playerOptions: {
|
|
|
|
- height: '640',
|
|
|
|
- width: '360',
|
|
|
|
- autoplay: true,
|
|
|
|
- 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: "",
|
|
|
|
|
|
+ {
|
|
|
|
+ title: '展示数',
|
|
|
|
+ dataIndex: 'viewCount',
|
|
|
|
+ key: 'viewCount'
|
|
},
|
|
},
|
|
- 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
|
|
|
|
- })
|
|
|
|
|
|
+ {
|
|
|
|
+ title: '喜欢数',
|
|
|
|
+ dataIndex: 'likeCount',
|
|
|
|
+ key: 'likeCount'
|
|
},
|
|
},
|
|
- }
|
|
|
|
- },
|
|
|
|
- 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)
|
|
|
|
|
|
+ {
|
|
|
|
+ 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 }
|
|
},
|
|
},
|
|
- // 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)
|
|
|
|
|
|
+ wrapperCol: {
|
|
|
|
+ xs: { span: 24 },
|
|
|
|
+ sm: { span: 16 }
|
|
},
|
|
},
|
|
- show(photoId, userId) {
|
|
|
|
- this.model = []
|
|
|
|
- this.userModel = {}
|
|
|
|
- this.videoModel = {}
|
|
|
|
- this.playerOptions.sources[0].src = ""
|
|
|
|
- this.photoId = photoId
|
|
|
|
- this.userId = userId
|
|
|
|
- this.loadDetail(photoId, userId)
|
|
|
|
- this.visible = true;
|
|
|
|
|
|
+ // 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: ''
|
|
},
|
|
},
|
|
- loadDetail(photoId, userId) {
|
|
|
|
|
|
+ loadGoodsData: () => {
|
|
var params = {
|
|
var params = {
|
|
- "photoId": photoId,
|
|
|
|
- "userId": userId
|
|
|
|
|
|
+ photoId: this.photoId,
|
|
|
|
+ userId: this.userId
|
|
}
|
|
}
|
|
- console.log(params)
|
|
|
|
- getAction("/ctop/adcover/detail", params).then((res) => {
|
|
|
|
- if (res.success) {
|
|
|
|
- console.log(res.result)
|
|
|
|
- this.userModel = res.result.user
|
|
|
|
- this.videoModel = res.result.video
|
|
|
|
- this.model = res.result.adlist
|
|
|
|
- if (res.result.video != null) {
|
|
|
|
- this.playerOptions.sources[0].src = res.result.video.mvUrl
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- // this.dataSource = res.result.records;
|
|
|
|
- }
|
|
|
|
|
|
+ return getAction('/ctop/adcover/adlist', params).then(res => {
|
|
|
|
+ this.model = res.result
|
|
|
|
+ console.log(res.result)
|
|
|
|
+ return res.result
|
|
})
|
|
})
|
|
-
|
|
|
|
- },
|
|
|
|
- close() {
|
|
|
|
- this.$emit('close');
|
|
|
|
- this.visible = false;
|
|
|
|
- },
|
|
|
|
- handleCancel() {
|
|
|
|
- this.close()
|
|
|
|
},
|
|
},
|
|
|
|
+ defaultActiveKey:"1"
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 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(photoId, userId) {
|
|
|
|
+ this.model = []
|
|
|
|
+ this.userModel = {}
|
|
|
|
+ this.videoModel = {}
|
|
|
|
+ this.playerOptions.sources[0].src = ''
|
|
|
|
+ this.photoId = photoId
|
|
|
|
+ this.userId = userId
|
|
|
|
+ this.loadDetail(photoId, userId)
|
|
|
|
+ this.visible = true
|
|
|
|
+ this.defaultActiveKey = "1"
|
|
|
|
+ },
|
|
|
|
+ loadDetail(photoId, userId) {
|
|
|
|
+ var params = {
|
|
|
|
+ photoId: photoId,
|
|
|
|
+ userId: userId
|
|
|
|
+ }
|
|
|
|
+ console.log(params)
|
|
|
|
+ getAction('/ctop/adcover/detail', params).then(res => {
|
|
|
|
+ if (res.success) {
|
|
|
|
+ console.log(res.result)
|
|
|
|
+ this.userModel = res.result.user
|
|
|
|
+ this.videoModel = res.result.video
|
|
|
|
+ this.model = res.result.adlist
|
|
|
|
+ if (res.result.video != null) {
|
|
|
|
+ this.playerOptions.sources[0].src = res.result.video.mvUrl
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ // this.dataSource = res.result.records;
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ close() {
|
|
|
|
+ this.$emit('close')
|
|
|
|
+ this.visible = false
|
|
|
|
+ this.defaultActiveKey = "1";
|
|
|
|
+ },
|
|
|
|
+ handleCancel() {
|
|
|
|
+ this.close()
|
|
|
|
+ this.defaultActiveKey = "1";
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
-<style>
|
|
|
|
- .ant-carousel >>> .slick-slide {
|
|
|
|
- text-align: center;
|
|
|
|
- height: 160px;
|
|
|
|
- line-height: 160px;
|
|
|
|
- background: #364d79;
|
|
|
|
- overflow: hidden;
|
|
|
|
- }
|
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.ant-carousel >>> .slick-slide {
|
|
|
|
+ text-align: center;
|
|
|
|
+ height: 160px;
|
|
|
|
+ line-height: 160px;
|
|
|
|
+ background: #364d79;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+}
|
|
|
|
|
|
- .ant-card-body {
|
|
|
|
- padding: 0;
|
|
|
|
- }
|
|
|
|
|
|
+.ant-card-body {
|
|
|
|
+ padding: 0;
|
|
|
|
+}
|
|
|
|
|
|
- .ant-carousel >>> .slick-slide h3 {
|
|
|
|
- color: #fff;
|
|
|
|
|
|
+.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-image: url(../images/arrow_left.png);
|
|
|
|
+ }
|
|
|
|
+ .slick_arrow_right {
|
|
|
|
+ background-image: url(../images/arrow_right.png);
|
|
}
|
|
}
|
|
|
|
+}
|
|
</style>
|
|
</style>
|