123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168 |
- <style lang="scss" scoped>
- .actor-photo-list {
- display: flex;
- padding-left: 0;
- li {
- width: 25%;
- margin: 10px;
- position: relative;
- height: 250px;
- border: 1px solid #f2f2f2;
- list-style: none;
- img,
- video {
- width: 100%;
- margin-top: auto;
- margin-bottom: auto;
- top: 0;
- bottom: 0;
- position: absolute;
- max-height: 250px;
- }
- }
- }
- </style>
- <template>
- <div>
- <a-modal title="选择素材" v-model="visibleMatemal" @ok="handleOk" @cancel="close" :width="800">
- <div>
- <ul class="actor-photo-list">
- <a-checkbox-group
- v-model="checkArr"
- style="width:100%; display: flex;padding-left: 0;"
- @change="onChangeCheck"
- >
- <li v-for="(item, index) of dataSource" :key="index">
- <a-checkbox :value="item.url" style="position:absolute"></a-checkbox
- ><video class="video" :src="item.url" controls="controls" style="min-height:160px">
- 您的浏览器不支持 video 标签。
- </video>
- </li>
- </a-checkbox-group>
- </ul>
- </div>
- <div style="text-align:right">
- <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>
- </a-modal>
- </div>
- </template>
- <script>
- import { getAction, postAction, postFile } from '@/api/manage'
- import { JeecgListMixin } from '@/mixins/JeecgListMixin'
- import { mapGetters } from 'vuex'
- import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
- export default {
- name: 'check-matemal',
- mixins: [JeecgListMixin],
- components: {},
- data() {
- return {
- url: {
- list: '/ctop/materialInfo/list'
- },
- visibleMatemal: false,
- dataSource: [],
- columns: [],
- checkArr: [],
- active: '',
- joinVideo: {
- head: '',
- content: [],
- foot: '',
- key: 1
- }
- }
- },
- watch: {},
- updated() {
- stopOtherVideo()
- },
- methods: {
- showCheck(typeName, keyNumber, item) {
- this.dataSource = []
- console.log(keyNumber)
- this.visibleMatemal = true
- this.queryParam.userId = this.userInfo().id
- this.queryParam.type = typeName
- this.active = typeName
- if (typeName == 'VIDEO_PART') {
- this.checkArr = item.VIDEO_PART
- this.joinVideo = {
- head: '',
- content: item.VIDEO_PART,
- foot: '',
- key: keyNumber
- }
- } else {
- this.checkArr = []
- this.joinVideo = {
- head: '',
- content: [],
- foot: '',
- key: keyNumber
- }
- }
- this.loadData()
- },
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- handleOk() {
- this.visibleMatemal = false
- this.checkArr = []
- this.$emit('showVideo', this.joinVideo, this.active)
- },
- close() {},
- getDataSource(page, pageSize) {
- this.ipagination.current = page
- this.loadData()
- },
- onChangeCheck(checkedList) {
- console.log(checkedList)
- // { value: 'VIDEO_HEAD', tab: '片头' },
- // { value: 'VIDEO_PART', tab: '片段' },
- // { value: 'VIDEO_TAIL', tab: '片尾' }
- if (this.active == 'VIDEO_HEAD') {
- //片头
- if (this.checkArr.length > 1) {
- this.checkArr.shift()
- this.joinVideo.head = checkedList[0]
- } else if (this.checkArr.length == 1) {
- this.joinVideo.head = checkedList[0]
- } else if (this.checkArr.length == 0) {
- this.joinVideo.head = ''
- }
- } else if (this.active == 'VIDEO_TAIL') {
- //片尾
- if (this.checkArr.length > 1) {
- this.checkArr.shift()
- this.joinVideo.foot = checkedList[0]
- } else if (this.checkArr.length == 1) {
- this.joinVideo.foot = checkedList[0]
- } else if (this.checkArr.length == 0) {
- this.joinVideo.foot = ''
- }
- } else {
- //内容
- this.joinVideo.content = checkedList
- }
- }
- }
- }
- </script>
- <style scoped>
- @import '~@assets/less/common.less';
- </style>
|