checkMatemal.vue 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186
  1. <style lang="scss" scoped>
  2. .actor-photo-list {
  3. display: flex;
  4. padding-left: 0;
  5. li {
  6. width: 25%;
  7. margin: 10px;
  8. position: relative;
  9. height: 380px;
  10. border: 1px solid #f2f2f2;
  11. list-style: none;
  12. padding: 10px;
  13. img,
  14. video {
  15. width: 100%;
  16. // margin-top: auto;
  17. // margin-bottom: auto;
  18. // top: 0;
  19. // bottom: 0;
  20. // position: absolute;
  21. // max-height: 350px;
  22. }
  23. }
  24. }
  25. </style>
  26. <template>
  27. <div>
  28. <a-modal title="选择素材" v-model="visibleMatemal" @ok="handleOk" @cancel="close" :width="1000">
  29. <div>
  30. <ul class="actor-photo-list">
  31. <a-checkbox-group
  32. v-model="checkArr"
  33. style="width:100%; display: flex;padding-left: 0;"
  34. @change="onChangeCheck"
  35. >
  36. <li v-for="(item, index) of dataSource" :key="index">
  37. <a-checkbox :value="item" style="position:absolute;z-index:100;padding-right:30px">
  38. <video
  39. class="video"
  40. v-if="active == 'video'"
  41. :src="item.url"
  42. controls="controls"
  43. style="min-height:160px"
  44. >
  45. 您的浏览器不支持 video 标签。
  46. </video>
  47. <img :src="item.url" v-else alt="" />
  48. </a-checkbox>
  49. </li>
  50. </a-checkbox-group>
  51. </ul>
  52. </div>
  53. <div style="text-align:right">
  54. <a-pagination
  55. size="small"
  56. :showTotal="ipagination.showTotal"
  57. style="float:right"
  58. v-if="dataSource.length > 0"
  59. showQuickJumper
  60. :pageSize.sync="ipagination.pageSize"
  61. :total="ipagination.total"
  62. v-model="ipagination.current"
  63. @change="getDataSource"
  64. />
  65. </div>
  66. </a-modal>
  67. </div>
  68. </template>
  69. <script>
  70. import { getAction, postAction, postFile } from '@/api/manage'
  71. import { mapGetters } from 'vuex'
  72. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  73. export default {
  74. name: 'check-matemal',
  75. components: {},
  76. data() {
  77. return {
  78. url: {
  79. list: '/kuaishou/batch/getVideoList'
  80. },
  81. visibleMatemal: false,
  82. dataSource: [],
  83. columns: [],
  84. checkArr: [],
  85. active: '',
  86. joinVideo: {
  87. video: '',
  88. image: [],
  89. key: 1
  90. },
  91. ipagination: {
  92. current: 1,
  93. pageSize: 4,
  94. // pageSizeOptions: ['10', '20', '30'],
  95. showTotal: (total, range) => {
  96. return range[0] + '-' + range[1] + ' 共' + total + '条'
  97. },
  98. showQuickJumper: true,
  99. // showSizeChanger: true,
  100. total: 0,
  101. onChange: current => {
  102. // 切换分页时的回调,
  103. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  104. this.ipagination.current = current
  105. }
  106. }
  107. }
  108. },
  109. watch: {},
  110. updated() {
  111. stopOtherVideo()
  112. },
  113. methods: {
  114. showCheck(typeName, url, item, typeString, key) {
  115. this.dataSource = []
  116. this.visibleMatemal = true
  117. this.joinVideo.key = key
  118. var params = {}
  119. params.accountId = localStorage.getItem('accountId')
  120. params.materialType = typeName
  121. params.pageSize = this.ipagination.pageSize
  122. params.pageNo = this.ipagination.current
  123. this.active = typeString
  124. this.numberType = typeName
  125. this.url.list = url
  126. this.getData(url, params)
  127. },
  128. getData(url, params) {
  129. getAction(url, params).then(res => {
  130. if (res.success) {
  131. this.dataSource = res.result.records
  132. this.ipagination.total = res.result.total
  133. }
  134. })
  135. },
  136. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  137. handleOk() {
  138. this.visibleMatemal = false
  139. this.checkArr = []
  140. this.ipagination.current = 1
  141. this.$emit('showVideo', this.joinVideo, this.active)
  142. },
  143. close() {},
  144. getDataSource(page, pageSize) {
  145. this.ipagination.current = page
  146. var params = {}
  147. params.accountId = localStorage.getItem('accountId')
  148. params.materialType = this.numberType
  149. params.pageSize = this.ipagination.pageSize
  150. params.pageNo = page
  151. this.getData(this.url.list, params)
  152. },
  153. onChangeCheck(checkedList) {
  154. console.log(checkedList)
  155. // { value: 'VIDEO_HEAD', tab: '片头' },
  156. // { value: 'VIDEO_PART', tab: '片段' },
  157. // { value: 'VIDEO_TAIL', tab: '片尾' }
  158. if (this.active == 'video') {
  159. //片头
  160. if (this.checkArr.length > 1) {
  161. this.checkArr.shift()
  162. this.joinVideo.video = checkedList[0]
  163. } else if (this.checkArr.length == 1) {
  164. this.joinVideo.video = checkedList[0]
  165. } else if (this.checkArr.length == 0) {
  166. this.joinVideo.video = ''
  167. }
  168. } else {
  169. //内容
  170. if (this.checkArr.length > 15) {
  171. this.$message.error('封面最多选择15张')
  172. this.checkArr.pop()
  173. this.joinVideo.image = this.checkArr
  174. } else {
  175. this.joinVideo.image = checkedList
  176. }
  177. }
  178. }
  179. }
  180. }
  181. </script>
  182. <style scoped>
  183. @import '~@assets/less/common.less';
  184. </style>