yardDetail.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247
  1. <style>
  2. .ping .ant-modal-content .ant-modal-footer {
  3. display: none !important;
  4. }
  5. .ping .ant-list-item-content {
  6. justify-content: space-between;
  7. cursor: pointer;
  8. }
  9. .ping-list .detele {
  10. display: none;
  11. }
  12. /* .ping-list:hover span {
  13. display: block;
  14. } */
  15. li {
  16. list-style-type: none;
  17. }
  18. </style>
  19. <style lang="scss" scoped>
  20. .actor-photo-list {
  21. display: flex;
  22. padding-left: 0;
  23. li {
  24. width: 25%;
  25. margin: 10px;
  26. position: relative;
  27. height: 250px;
  28. border: 1px solid #f2f2f2;
  29. img,
  30. video {
  31. width: 100%;
  32. margin-top: auto;
  33. margin-bottom: auto;
  34. top: 0;
  35. bottom: 0;
  36. position: absolute;
  37. max-height: 250px;
  38. }
  39. }
  40. }
  41. </style>
  42. <template>
  43. <div>
  44. <a-modal title="详情" v-model="detail" class="ping" :width="800">
  45. <!-- <a-tabs defaultActiveKey="1" @change="callback" v-model="indexDetail">
  46. <a-tab-pane tab="演员图集" key="1" forceRender>
  47. <div>
  48. <a type="primary" style="margin-left:10px" @click="addPhoto=true">新增图集</a>
  49. <ul class="actor-photo-list">
  50. <li v-for="(item,index) of photoList" :key="index">
  51. <a-icon
  52. type="close-circle"
  53. style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
  54. @click="deteleImg(item.id)"
  55. />
  56. <img :src="item.photoUrl" alt />
  57. </li>
  58. </ul>
  59. </div>
  60. <div style="text-align:right">
  61. <a-pagination
  62. showQuickJumper
  63. :total="total"
  64. @change="pageChange"
  65. :pageSize.sync="pageSize"
  66. />
  67. </div>
  68. </a-tab-pane>
  69. <a-tab-pane tab="演员作品" key="2">
  70. <div>
  71. <a type="primary" style="margin-left:10px" @click="addVideo=true">新增作品</a>
  72. <ul class="actor-photo-list">
  73. <li v-for="(item,index) of videoList" :key="index">
  74. <a-icon
  75. type="close-circle"
  76. style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
  77. @click="deteleVideo(item.id)"
  78. />
  79. <video
  80. class="video"
  81. :src="item.videoUrl"
  82. controls="controls"
  83. style="min-height:160px"
  84. >您的浏览器不支持 video 标签。</video>
  85. </li>
  86. </ul>
  87. </div>
  88. <div style="text-align:right">
  89. <a-pagination
  90. showQuickJumper
  91. :total="videoTotal"
  92. @change="pageChange"
  93. :pageSize.sync="pageSize"
  94. />
  95. </div>
  96. </a-tab-pane>
  97. </a-tabs> -->
  98. </a-modal>
  99. <!-- 新增图集 -->
  100. <a-modal
  101. v-model="addPhoto"
  102. title="新增图集"
  103. @ok="handleOk('photo')"
  104. @cancel="handleCancel('photo')"
  105. >
  106. <uploadFile :value.sync="imageUrl" :fileCount="1" uploadType="image" :multiple="false" />
  107. <!-- <upload-to-ali
  108. style="margin:10px"
  109. v-model="imageUrl"
  110. :customDomain="customDomain"
  111. preview
  112. :region="region"
  113. :bucket="bucket"
  114. :accept="acceptImage"
  115. :max="1"
  116. :size="1024000"
  117. :accessKeyId="accessKeyId"
  118. :accessKeySecret="accessKeySecret"
  119. ></upload-to-ali> -->
  120. </a-modal>
  121. <!-- 新增作品 -->
  122. <a-modal
  123. v-model="addVideo"
  124. title="新增作品"
  125. @ok="handleOk('video')"
  126. @cancel="handleCancel('video')"
  127. >
  128. <uploadFile :value.sync="videoUrl" :fileCount="1" uploadType="video" :multiple="false" />
  129. <!-- <upload-to-ali
  130. style="margin:10px"
  131. v-model="videoUrl"
  132. :customDomain="customDomain"
  133. preview
  134. :region="region"
  135. :bucket="bucket"
  136. :accept="acceptVideo"
  137. :max="1"
  138. :size="1024000"
  139. :accessKeyId="accessKeyId"
  140. :accessKeySecret="accessKeySecret"
  141. ></upload-to-ali> -->
  142. </a-modal>
  143. </div>
  144. </template>
  145. <script>
  146. import moment from 'moment'
  147. import {
  148. } from '@/api/actor'
  149. import UploadToAli from '@femessage/upload-to-ali'
  150. import uploadFile from '@/components/uploadFile.vue'
  151. import { closeAllVideoFun } from '@/utils/videoControl'
  152. export default {
  153. name: 'VmCard',
  154. components: {
  155. UploadToAli,
  156. uploadFile
  157. },
  158. props: {},
  159. data: function() {
  160. return {
  161. addPhoto: false,
  162. addVideo: false,
  163. indexDetail: '1',
  164. to: null,
  165. comments: [],
  166. submitting: false,
  167. value: '',
  168. moment,
  169. visible: false,
  170. detail: false,
  171. customDomain: '',
  172. region: 'oss-cn-beijing',
  173. bucket: 'ctop-media',
  174. acceptVideo: 'video/mpeg,video/mp4',
  175. acceptImage: 'image/jpeg,image/jpg,image/png',
  176. accessKeyId: 'LTAIbNbqWzSOklQV',
  177. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  178. form: {
  179. name: '',
  180. birthday: '',
  181. sex: null,
  182. speciality: ''
  183. },
  184. noImgUrl: require('@/assets/img/noImg.png'),
  185. loginInfo: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
  186. photoList: [],
  187. imageUrl: '',
  188. videoUrl: '',
  189. total: 1,
  190. videoTotal: 1,
  191. pageSize: 4,
  192. url: {
  193. list: '/ctop/actor/list'
  194. },
  195. columns: [
  196. {
  197. title: 'ID',
  198. align: 'center',
  199. dataIndex: 'id'
  200. },
  201. {
  202. title: '姓名',
  203. align: 'center',
  204. dataIndex: 'name'
  205. },
  206. {
  207. title: '生日',
  208. align: 'center',
  209. dataIndex: 'birthday'
  210. },
  211. {
  212. title: '性别',
  213. align: 'center',
  214. dataIndex: 'sex_dictText'
  215. },
  216. {
  217. title: '特长',
  218. align: 'center',
  219. dataIndex: 'speciality'
  220. },
  221. {
  222. title: '创建时间',
  223. align: 'center',
  224. dataIndex: 'createTime'
  225. },
  226. {
  227. title: '操作',
  228. dataIndex: 'action',
  229. align: 'center',
  230. scopedSlots: { customRender: 'action' }
  231. }
  232. ],
  233. currentPage: 1,
  234. videoList: []
  235. }
  236. },
  237. methods: {
  238. show(){
  239. this.detail=true
  240. },
  241. callback(){
  242. }
  243. }
  244. }
  245. </script>