123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186 |
- <style lang="scss" scoped>
- .actor-photo-list {
- display: flex;
- padding-left: 0;
- li {
- width: 25%;
- margin: 10px;
- position: relative;
- height: 380px;
- border: 1px solid #f2f2f2;
- list-style: none;
- padding: 10px;
- img,
- video {
- width: 100%;
- // margin-top: auto;
- // margin-bottom: auto;
- // top: 0;
- // bottom: 0;
- // position: absolute;
- // max-height: 350px;
- }
- }
- }
- </style>
- <template>
- <div>
- <a-modal title="选择素材" v-model="visibleMatemal" @ok="handleOk" @cancel="close" :width="1000">
- <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" style="position:absolute;z-index:100;padding-right:30px">
- <video
- class="video"
- v-if="active == 'video'"
- :src="item.url"
- controls="controls"
- style="min-height:160px"
- >
- 您的浏览器不支持 video 标签。
- </video>
- <img :src="item.url" v-else alt="" />
- </a-checkbox>
- </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 { mapGetters } from 'vuex'
- import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
- export default {
- name: 'check-matemal',
- components: {},
- data() {
- return {
- url: {
- list: '/kuaishou/batch/getVideoList'
- },
- visibleMatemal: false,
- dataSource: [],
- columns: [],
- checkArr: [],
- active: '',
- joinVideo: {
- video: '',
- image: [],
- key: 1
- },
- ipagination: {
- current: 1,
- pageSize: 4,
- // pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- // showSizeChanger: true,
- total: 0,
- onChange: current => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current
- }
- }
- }
- },
- watch: {},
- updated() {
- stopOtherVideo()
- },
- methods: {
- showCheck(typeName, url, item, typeString, key) {
- this.dataSource = []
- this.visibleMatemal = true
- this.joinVideo.key = key
- var params = {}
- params.accountId = localStorage.getItem('accountId')
- params.materialType = typeName
- params.pageSize = this.ipagination.pageSize
- params.pageNo = this.ipagination.current
- this.active = typeString
- this.numberType = typeName
- this.url.list = url
- this.getData(url, params)
- },
- getData(url, params) {
- getAction(url, params).then(res => {
- if (res.success) {
- this.dataSource = res.result.records
- this.ipagination.total = res.result.total
- }
- })
- },
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- handleOk() {
- this.visibleMatemal = false
- this.checkArr = []
- this.ipagination.current = 1
- this.$emit('showVideo', this.joinVideo, this.active)
- },
- close() {},
- getDataSource(page, pageSize) {
- this.ipagination.current = page
- var params = {}
- params.accountId = localStorage.getItem('accountId')
- params.materialType = this.numberType
- params.pageSize = this.ipagination.pageSize
- params.pageNo = page
- this.getData(this.url.list, params)
- },
- onChangeCheck(checkedList) {
- console.log(checkedList)
- // { value: 'VIDEO_HEAD', tab: '片头' },
- // { value: 'VIDEO_PART', tab: '片段' },
- // { value: 'VIDEO_TAIL', tab: '片尾' }
- if (this.active == 'video') {
- //片头
- if (this.checkArr.length > 1) {
- this.checkArr.shift()
- this.joinVideo.video = checkedList[0]
- } else if (this.checkArr.length == 1) {
- this.joinVideo.video = checkedList[0]
- } else if (this.checkArr.length == 0) {
- this.joinVideo.video = ''
- }
- } else {
- //内容
- if (this.checkArr.length > 15) {
- this.$message.error('封面最多选择15张')
- this.checkArr.pop()
- this.joinVideo.image = this.checkArr
- } else {
- this.joinVideo.image = checkedList
- }
- }
- }
- }
- }
- </script>
- <style scoped>
- @import '~@assets/less/common.less';
- </style>
|