|
@@ -136,6 +136,27 @@
|
|
|
a {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
+.actor-photo-list {
|
|
|
+ display: flex;
|
|
|
+ padding-left: 0;
|
|
|
+ li {
|
|
|
+ width: 25%;
|
|
|
+ margin: 10px;
|
|
|
+ position: relative;
|
|
|
+ height: 250px;
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
+ img,
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: auto;
|
|
|
+ margin-bottom: auto;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ position: absolute;
|
|
|
+ max-height: 250px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
|
|
<template>
|
|
|
<a-card :bordered="false">
|
|
@@ -202,68 +223,86 @@ a {
|
|
|
|
|
|
<a-tabs @change="callbackTwo" v-model="active" type="card" id="material-card">
|
|
|
<a-tab-pane :tab="item.tab" v-for="item of examinelList" :key="item.value">
|
|
|
- <div v-if="dataSource.length > 0">
|
|
|
- <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
|
|
|
- <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
|
|
|
- <div class="home-right">
|
|
|
- <a-badge
|
|
|
- v-if="active == 'VIDEO_PART'"
|
|
|
- :count="checkArr.indexOf(items.id) > -1 ? checkArr.indexOf(items.id) + 1 : 0"
|
|
|
- :numberStyle="{ backgroundColor: '#52c41a' }"
|
|
|
- style="width:100%"
|
|
|
- >
|
|
|
+ <div v-if="item.value != 'join' && item.value != 'success'">
|
|
|
+ <div v-if="dataSource.length > 0">
|
|
|
+ <a-checkbox-group @change="onChangeCheck" v-model="checkArr" class="home-card">
|
|
|
+ <div class="home-item" v-for="(items, index) in dataSource" :key="index" @click="showDetail(items)">
|
|
|
+ <div class="home-right">
|
|
|
+ <a-badge
|
|
|
+ v-if="active == 'VIDEO_PART'"
|
|
|
+ :count="checkArr.indexOf(items.id) > -1 ? checkArr.indexOf(items.id) + 1 : 0"
|
|
|
+ :numberStyle="{ backgroundColor: '#52c41a' }"
|
|
|
+ style="width:100%"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
|
|
|
+ >
|
|
|
+ {{ items.materialName }}
|
|
|
+ </span>
|
|
|
+ </a-badge>
|
|
|
<span
|
|
|
+ v-else
|
|
|
style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
|
|
|
>
|
|
|
{{ items.materialName }}
|
|
|
</span>
|
|
|
- </a-badge>
|
|
|
- <span
|
|
|
- v-else
|
|
|
- style="color: #999; fontSize: 16px;padding-bottom:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;"
|
|
|
- >
|
|
|
- {{ items.materialName }}
|
|
|
- </span>
|
|
|
- <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative">
|
|
|
- <video
|
|
|
- :src="items.url"
|
|
|
- @canplay="a(items)"
|
|
|
- style="height:200px;max-width:100%;position:absolute;z-index:10;"
|
|
|
- />
|
|
|
- <img
|
|
|
- src="./timg.gif"
|
|
|
- v-if="!items.showVideo"
|
|
|
- alt=""
|
|
|
- style="height:200px;max-width:100%;position:absolute;z-index:11;"
|
|
|
- @click.stop
|
|
|
- />
|
|
|
- </div>
|
|
|
+ <div style="display:flex;justify-content:center;width:100%;height:200px;position:relative">
|
|
|
+ <video
|
|
|
+ :src="items.url"
|
|
|
+ @canplay="a(items)"
|
|
|
+ style="height:200px;max-width:100%;position:absolute;z-index:10;"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="./timg.gif"
|
|
|
+ v-if="!items.showVideo"
|
|
|
+ alt=""
|
|
|
+ style="height:200px;max-width:100%;position:absolute;z-index:11;"
|
|
|
+ @click.stop
|
|
|
+ />
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- <div v-if="active == '2'" class="bh">驳回原因:{{ items.refuseReason }}</div> -->
|
|
|
- <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
|
|
|
- {{ items.createTime | getDate }}
|
|
|
- <a-checkbox :value="items.id" style="float:right"></a-checkbox
|
|
|
- ></span>
|
|
|
+ <!-- <div v-if="active == '2'" class="bh">驳回原因:{{ items.refuseReason }}</div> -->
|
|
|
+ <span style="color: black; fontSize: 16px;padding-top:10px;display:block;width:100%" @click.stop>
|
|
|
+ {{ items.createTime | getDate }}
|
|
|
+ <a-checkbox :value="items.id" style="float:right"></a-checkbox
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </a-checkbox-group>
|
|
|
- <a-pagination
|
|
|
- size="small"
|
|
|
- :showTotal="ipagination.showTotal"
|
|
|
- style="float:right"
|
|
|
- v-if="dataSource.length > 0"
|
|
|
- showQuickJumper
|
|
|
- :pageSize.sync="ipagination.pageSize"
|
|
|
- :total="ipagination.total"
|
|
|
- v-model="ipagination.current"
|
|
|
- @change="getDataSource"
|
|
|
- />
|
|
|
+ </a-checkbox-group>
|
|
|
+ <a-pagination
|
|
|
+ size="small"
|
|
|
+ :showTotal="ipagination.showTotal"
|
|
|
+ style="float:right"
|
|
|
+ v-if="dataSource.length > 0"
|
|
|
+ showQuickJumper
|
|
|
+ :pageSize.sync="ipagination.pageSize"
|
|
|
+ :total="ipagination.total"
|
|
|
+ v-model="ipagination.current"
|
|
|
+ @change="getDataSource"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
|
|
|
+ <img
|
|
|
+ src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div v-else style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
|
|
|
- <img
|
|
|
- src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <div v-else>
|
|
|
+ <a-table :columns="columns" :dataSource="dataList" :pagination="false">
|
|
|
+ <span slot="VIDEO_HEAD" slot-scope="text">
|
|
|
+ <div v-if="text != ''"></div>
|
|
|
+ <a-button @click="dirVideoGet" type="primary" icon="plus" v-else>选择素材</a-button>
|
|
|
+ </span>
|
|
|
+ <span slot="VIDEO_PART" slot-scope="text">
|
|
|
+ <div v-if="text.length > 0"></div>
|
|
|
+ <a-button @click="dirVideoGet" type="primary" icon="plus" v-else>选择素材</a-button>
|
|
|
+ </span>
|
|
|
+ <span slot="VIDEO_TAIL" slot-scope="text">
|
|
|
+ <div v-if="text != ''"></div>
|
|
|
+ <a-button @click="dirVideoGet" type="primary" icon="plus" v-else>选择素材</a-button>
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
</div>
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
@@ -427,6 +466,7 @@ a {
|
|
|
</div>
|
|
|
</a-modal>
|
|
|
|
|
|
+
|
|
|
<account-check ref="check" @synchro="implement"></account-check>
|
|
|
</a-card>
|
|
|
</template>
|
|
@@ -455,6 +495,30 @@ export default {
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '片头',
|
|
|
+ dataIndex: 'VIDEO_HEAD',
|
|
|
+ key: 1,
|
|
|
+ scopedSlots: { customRender: 'VIDEO_HEAD' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '内容',
|
|
|
+ dataIndex: 'VIDEO_PART',
|
|
|
+ key: 2,
|
|
|
+ scopedSlots: { customRender: 'VIDEO_PART' },
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '片尾',
|
|
|
+ dataIndex: 'VIDEO_TAIL',
|
|
|
+ key: 3,
|
|
|
+ scopedSlots: { customRender: 'VIDEO_TAIL' },
|
|
|
+ align: 'center'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ dataList: [{ VIDEO_HEAD: '', VIDEO_PART: [], VIDEO_TAIL: '' }],
|
|
|
inputVisible: false,
|
|
|
inputValue: '',
|
|
|
labelCol: {
|
|
@@ -482,10 +546,11 @@ export default {
|
|
|
examinelList: [
|
|
|
{ value: 'VIDEO_HEAD', tab: '片头' },
|
|
|
{ value: 'VIDEO_PART', tab: '片段' },
|
|
|
- { value: 'VIDEO_TAIL', tab: '片尾' }
|
|
|
+ { value: 'VIDEO_TAIL', tab: '片尾' },
|
|
|
+ { value: 'join', tab: '视频拼接' },
|
|
|
+ { value: 'success', tab: '成品' }
|
|
|
],
|
|
|
// 表头
|
|
|
- columns: [],
|
|
|
urlList: { url: '', md5: '', name: '' },
|
|
|
url: {
|
|
|
list: '/ctop/materialInfo/list'
|