checkMatemal.vue 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  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: 250px;
  10. border: 1px solid #f2f2f2;
  11. list-style: none;
  12. img,
  13. video {
  14. width: 100%;
  15. margin-top: auto;
  16. margin-bottom: auto;
  17. top: 0;
  18. bottom: 0;
  19. position: absolute;
  20. max-height: 250px;
  21. }
  22. }
  23. }
  24. </style>
  25. <template>
  26. <div>
  27. <a-modal title="选择素材" v-model="visibleMatemal" @ok="handleOk" @cancel="close" :width="800">
  28. <div>
  29. <ul class="actor-photo-list">
  30. <a-checkbox-group
  31. v-model="checkArr"
  32. style="width:100%; display: flex;padding-left: 0;"
  33. @change="onChangeCheck"
  34. >
  35. <li v-for="(item, index) of dataSource" :key="index">
  36. <a-checkbox :value="item.url" style="position:absolute"></a-checkbox
  37. ><video class="video" :src="item.url" controls="controls" style="min-height:160px">
  38. 您的浏览器不支持 video 标签。
  39. </video>
  40. </li>
  41. </a-checkbox-group>
  42. </ul>
  43. </div>
  44. <div style="text-align:right">
  45. <a-pagination
  46. size="small"
  47. :showTotal="ipagination.showTotal"
  48. style="float:right"
  49. v-if="dataSource.length > 0"
  50. showQuickJumper
  51. :pageSize.sync="ipagination.pageSize"
  52. :total="ipagination.total"
  53. v-model="ipagination.current"
  54. @change="getDataSource"
  55. />
  56. </div>
  57. </a-modal>
  58. </div>
  59. </template>
  60. <script>
  61. import { getAction, postAction, postFile } from '@/api/manage'
  62. import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  63. import { mapGetters } from 'vuex'
  64. import { stopOtherVideo, closeAllVideoFun } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  65. export default {
  66. name: 'check-matemal',
  67. mixins: [JeecgListMixin],
  68. components: {},
  69. data() {
  70. return {
  71. url: {
  72. list: '/ctop/materialInfo/list'
  73. },
  74. visibleMatemal: false,
  75. dataSource: [],
  76. columns: [],
  77. checkArr: [],
  78. active: '',
  79. joinVideo: {
  80. head: '',
  81. content: [],
  82. foot: '',
  83. key: 1
  84. }
  85. }
  86. },
  87. watch: {},
  88. updated() {
  89. stopOtherVideo()
  90. },
  91. methods: {
  92. showCheck(typeName, keyNumber, item) {
  93. this.dataSource = []
  94. console.log(keyNumber)
  95. this.visibleMatemal = true
  96. this.queryParam.userId = this.userInfo().id
  97. this.queryParam.type = typeName
  98. this.active = typeName
  99. if (typeName == 'VIDEO_PART') {
  100. this.checkArr = item.VIDEO_PART
  101. this.joinVideo = {
  102. head: '',
  103. content: item.VIDEO_PART,
  104. foot: '',
  105. key: keyNumber
  106. }
  107. } else {
  108. this.checkArr = []
  109. this.joinVideo = {
  110. head: '',
  111. content: [],
  112. foot: '',
  113. key: keyNumber
  114. }
  115. }
  116. this.loadData()
  117. },
  118. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  119. handleOk() {
  120. this.visibleMatemal = false
  121. this.checkArr = []
  122. this.$emit('showVideo', this.joinVideo, this.active)
  123. },
  124. close() {},
  125. getDataSource(page, pageSize) {
  126. this.ipagination.current = page
  127. this.loadData()
  128. },
  129. onChangeCheck(checkedList) {
  130. console.log(checkedList)
  131. // { value: 'VIDEO_HEAD', tab: '片头' },
  132. // { value: 'VIDEO_PART', tab: '片段' },
  133. // { value: 'VIDEO_TAIL', tab: '片尾' }
  134. if (this.active == 'VIDEO_HEAD') {
  135. //片头
  136. if (this.checkArr.length > 1) {
  137. this.checkArr.shift()
  138. this.joinVideo.head = checkedList[0]
  139. } else if (this.checkArr.length == 1) {
  140. this.joinVideo.head = checkedList[0]
  141. } else if (this.checkArr.length == 0) {
  142. this.joinVideo.head = ''
  143. }
  144. } else if (this.active == 'VIDEO_TAIL') {
  145. //片尾
  146. if (this.checkArr.length > 1) {
  147. this.checkArr.shift()
  148. this.joinVideo.foot = checkedList[0]
  149. } else if (this.checkArr.length == 1) {
  150. this.joinVideo.foot = checkedList[0]
  151. } else if (this.checkArr.length == 0) {
  152. this.joinVideo.foot = ''
  153. }
  154. } else {
  155. //内容
  156. this.joinVideo.content = checkedList
  157. }
  158. }
  159. }
  160. }
  161. </script>
  162. <style scoped>
  163. @import '~@assets/less/common.less';
  164. </style>