|
@@ -28,7 +28,9 @@ li {
|
|
|
margin: 10px;
|
|
|
position: relative;
|
|
|
height: 250px;
|
|
|
- img,video {
|
|
|
+ border: 1px solid #f2f2f2;
|
|
|
+ img,
|
|
|
+ video {
|
|
|
width: 100%;
|
|
|
margin-top: auto;
|
|
|
margin-bottom: auto;
|
|
@@ -47,7 +49,7 @@ li {
|
|
|
style="height:250px"
|
|
|
:style="{backgroundImage: img?'url(' +img+')':'url('+noImgUrl+')', backgroundSize:'contain', backgroundRepeat: 'no-repeat',backgroundPosition:'center center'}"
|
|
|
>
|
|
|
- <!-- <img src="./image/noImg.jpeg" alt="" height="250"> -->
|
|
|
+ <!-- <img :src="img" alt="" height="250"> -->
|
|
|
<div v-if="editable && type == 'vertical'" class="control">
|
|
|
<span class="edit">
|
|
|
<a :href="editUrl">
|
|
@@ -141,50 +143,124 @@ li {
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane tab="演员图集" key="2" forceRender>
|
|
|
<div>
|
|
|
+ <a type="primary" style="margin-left:10px" @click="addPhoto=true">新增图集</a>
|
|
|
<ul class="actor-photo-list">
|
|
|
<li v-for="(item,index) of photoList" :key="index">
|
|
|
+ <a-icon
|
|
|
+ type="close-circle"
|
|
|
+ style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
|
|
|
+ @click="deteleImg(item.id)"
|
|
|
+ />
|
|
|
<img :src="item.photoUrl" alt />
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div style="text-align:right">
|
|
|
- <a-pagination showQuickJumper :total="total" @change="pageChange" :pageSize.sync="pageSize"/>
|
|
|
+ <a-pagination
|
|
|
+ showQuickJumper
|
|
|
+ :total="total"
|
|
|
+ @change="pageChange"
|
|
|
+ :pageSize.sync="pageSize"
|
|
|
+ />
|
|
|
</div>
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane tab="演员作品" key="3">
|
|
|
- <div>
|
|
|
+ <div>
|
|
|
+ <a type="primary" style="margin-left:10px" @click="addVideo=true">新增作品</a>
|
|
|
<ul class="actor-photo-list">
|
|
|
<li v-for="(item,index) of videoList" :key="index">
|
|
|
- <video
|
|
|
- class="video"
|
|
|
- :src="item.videoUrl"
|
|
|
- controls="controls"
|
|
|
- style="min-height:160px"
|
|
|
- >您的浏览器不支持 video 标签。
|
|
|
- </video>
|
|
|
+ <a-icon
|
|
|
+ type="close-circle"
|
|
|
+ style="position:absolute;top:-5px;right:-5px;color:red;z-index:10;cursor: pointer;"
|
|
|
+ @click="deteleVideo(item.id)"
|
|
|
+ />
|
|
|
+ <video
|
|
|
+ class="video"
|
|
|
+ :src="item.videoUrl"
|
|
|
+ controls="controls"
|
|
|
+ style="min-height:160px"
|
|
|
+ >您的浏览器不支持 video 标签。</video>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div style="text-align:right">
|
|
|
- <a-pagination showQuickJumper :total="videoTotal" @change="pageChange" :pageSize.sync="pageSize"/>
|
|
|
+ <a-pagination
|
|
|
+ showQuickJumper
|
|
|
+ :total="videoTotal"
|
|
|
+ @change="pageChange"
|
|
|
+ :pageSize.sync="pageSize"
|
|
|
+ />
|
|
|
</div>
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
</a-modal>
|
|
|
+ <a-modal
|
|
|
+ v-model="addPhoto"
|
|
|
+ title="新增图集"
|
|
|
+ @ok="handleOk('photo')"
|
|
|
+ @cancel="handleCancel('photo')"
|
|
|
+ >
|
|
|
+ <upload-to-ali
|
|
|
+ style="margin:10px"
|
|
|
+ v-model="imageUrl"
|
|
|
+ :customDomain="customDomain"
|
|
|
+ preview
|
|
|
+ :region="region"
|
|
|
+ :bucket="bucket"
|
|
|
+ :accept="acceptImage"
|
|
|
+ :max="1"
|
|
|
+ :size="1024000"
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
+ :accessKeySecret="accessKeySecret"
|
|
|
+ ></upload-to-ali>
|
|
|
+ </a-modal>
|
|
|
+ <a-modal
|
|
|
+ v-model="addVideo"
|
|
|
+ title="新增作品"
|
|
|
+ @ok="handleOk('video')"
|
|
|
+ @cancel="handleCancel('video')"
|
|
|
+ >
|
|
|
+ <upload-to-ali
|
|
|
+ style="margin:10px"
|
|
|
+ v-model="videoUrl"
|
|
|
+ :customDomain="customDomain"
|
|
|
+ preview
|
|
|
+ :region="region"
|
|
|
+ :bucket="bucket"
|
|
|
+ :accept="acceptVideo"
|
|
|
+ :max="1"
|
|
|
+ :size="1024000"
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
+ :accessKeySecret="accessKeySecret"
|
|
|
+ ></upload-to-ali>
|
|
|
+ </a-modal>
|
|
|
<actor-modal ref="modalForm" @ok="modalFormOk" @updateList="updateList" @close="closeVideo"></actor-modal>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import moment from 'moment'
|
|
|
-import { actorDetail, actorCommentList, actorCommentAdd, actorCommentDetele, actorPhotoList,actorVideoList } from '@/api/actor'
|
|
|
+import {
|
|
|
+ actorDetail,
|
|
|
+ actorCommentList,
|
|
|
+ actorCommentAdd,
|
|
|
+ actorCommentDetele,
|
|
|
+ actorPhotoList,
|
|
|
+ actorVideoList,
|
|
|
+ actorPhotoDelete,
|
|
|
+ actorVideoDelete,
|
|
|
+ actorPhotoAdd,
|
|
|
+ actorVideoAdd
|
|
|
+} from '@/api/actor'
|
|
|
import actorModal from './ActorModal'
|
|
|
-import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
|
|
-import {closeAllVideoFun} from '@/utils/videoControl'
|
|
|
+import UploadToAli from '@femessage/upload-to-ali'
|
|
|
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
|
|
+import { closeAllVideoFun } from '@/utils/videoControl'
|
|
|
export default {
|
|
|
name: 'VmCard',
|
|
|
mixins: [JeecgListMixin],
|
|
|
components: {
|
|
|
- actorModal
|
|
|
+ actorModal,
|
|
|
+ UploadToAli
|
|
|
},
|
|
|
props: {
|
|
|
type: {
|
|
@@ -221,15 +297,17 @@ export default {
|
|
|
return 0
|
|
|
}
|
|
|
},
|
|
|
- record:{
|
|
|
- default(){
|
|
|
- return {}
|
|
|
- }
|
|
|
+ record: {
|
|
|
+ default() {
|
|
|
+ return {}
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
data: function() {
|
|
|
return {
|
|
|
- indexDetail:"1",
|
|
|
+ addPhoto: false,
|
|
|
+ addVideo: false,
|
|
|
+ indexDetail: '1',
|
|
|
to: null,
|
|
|
comments: [],
|
|
|
submitting: false,
|
|
@@ -237,6 +315,13 @@ export default {
|
|
|
moment,
|
|
|
visible: false,
|
|
|
detail: false,
|
|
|
+ customDomain: '',
|
|
|
+ region: 'oss-cn-beijing',
|
|
|
+ bucket: 'ctop-media',
|
|
|
+ acceptVideo: 'video/mpeg,video/mp4',
|
|
|
+ acceptImage: 'image/jpeg,image/jpg,image/png',
|
|
|
+ accessKeyId: 'LTAIbNbqWzSOklQV',
|
|
|
+ accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
|
|
|
form: {
|
|
|
name: '',
|
|
|
birthday: '',
|
|
@@ -246,62 +331,63 @@ export default {
|
|
|
noImgUrl: require('@/assets/img/noImg.png'),
|
|
|
loginInfo: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
|
|
|
photoList: [],
|
|
|
+ imageUrl: '',
|
|
|
+ videoUrl: '',
|
|
|
total: 1,
|
|
|
- videoTotal:1,
|
|
|
- pageSize:4,
|
|
|
+ videoTotal: 1,
|
|
|
+ pageSize: 4,
|
|
|
url: {
|
|
|
- list: "/ctop/actor/list",
|
|
|
+ list: '/ctop/actor/list'
|
|
|
},
|
|
|
columns: [
|
|
|
- {
|
|
|
- title: 'ID',
|
|
|
- align: "center",
|
|
|
- dataIndex: 'id'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '姓名',
|
|
|
- align: "center",
|
|
|
- dataIndex: 'name'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '生日',
|
|
|
- align: "center",
|
|
|
- dataIndex: 'birthday',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '性别',
|
|
|
- align: "center",
|
|
|
- dataIndex: 'sex_dictText',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '特长',
|
|
|
- align: "center",
|
|
|
- dataIndex: 'speciality'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '创建时间',
|
|
|
- align: 'center',
|
|
|
- dataIndex: 'createTime'
|
|
|
- },
|
|
|
- {
|
|
|
- title: '操作',
|
|
|
- dataIndex: 'action',
|
|
|
- align: "center",
|
|
|
- scopedSlots: {customRender: 'action'},
|
|
|
- }
|
|
|
- ],
|
|
|
- currentPage:1,
|
|
|
- videoList:[]
|
|
|
+ {
|
|
|
+ title: 'ID',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'id'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '姓名',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'name'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '生日',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'birthday'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '性别',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'sex_dictText'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '特长',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'speciality'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创建时间',
|
|
|
+ align: 'center',
|
|
|
+ dataIndex: 'createTime'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'action' }
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ currentPage: 1,
|
|
|
+ videoList: []
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- updateList(){
|
|
|
- this.$emit("updateList")
|
|
|
+ updateList() {
|
|
|
+ this.$emit('updateList')
|
|
|
},
|
|
|
pageChange: function(page) {
|
|
|
console.log(page)
|
|
|
this.currentPage = page
|
|
|
-
|
|
|
this.getPhoto()
|
|
|
},
|
|
|
handleSubmit() {
|
|
@@ -324,7 +410,7 @@ export default {
|
|
|
this.value = e.target.value
|
|
|
},
|
|
|
getDetail() {
|
|
|
- this.indexDetail = "1"
|
|
|
+ this.indexDetail = '1'
|
|
|
this.detail = true
|
|
|
actorDetail({ actorId: this.id }).then(res => {
|
|
|
console.log(res)
|
|
@@ -355,8 +441,8 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
- closeVideo(){
|
|
|
- closeAllVideoFun()
|
|
|
+ closeVideo() {
|
|
|
+ closeAllVideoFun()
|
|
|
},
|
|
|
callback(key) {
|
|
|
console.log(key)
|
|
@@ -364,30 +450,87 @@ export default {
|
|
|
this.closeVideo()
|
|
|
this.currentPage = 1
|
|
|
this.getPhoto()
|
|
|
- }else if(key == '3'){
|
|
|
+ } else if (key == '3') {
|
|
|
this.currentPage = 1
|
|
|
this.getVideo()
|
|
|
- }else if(key == '1'){
|
|
|
+ } else if (key == '1') {
|
|
|
this.closeVideo()
|
|
|
}
|
|
|
},
|
|
|
- getPhoto(){
|
|
|
- actorPhotoList({ pageNo: this.currentPage, pageSize: 4,actorId:this.id}).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
- console.log(res)
|
|
|
- this.photoList = res.result.records
|
|
|
- this.total = res.result.total
|
|
|
- }
|
|
|
- })
|
|
|
+ getPhoto() {
|
|
|
+ actorPhotoList({ pageNo: this.currentPage, pageSize: 4, actorId: this.id }).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ console.log(res)
|
|
|
+ this.photoList = res.result.records
|
|
|
+ this.total = res.result.total
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getVideo() {
|
|
|
+ actorVideoList({ pageNo: this.currentPage, pageSize: 4, actorId: this.id }).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ console.log(res)
|
|
|
+ this.videoList = res.result.records
|
|
|
+ this.videoTotal = res.result.total
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deteleImg(id) {
|
|
|
+ actorPhotoDelete({ id: id }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ console.log(res)
|
|
|
+ this.getPhoto()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deteleVideo(id) {
|
|
|
+ actorPhotoDelete({ id: id }).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ console.log(res)
|
|
|
+ this.getPhoto()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleOk(type) {
|
|
|
+ const that = this
|
|
|
+ if (type == 'photo') {
|
|
|
+ actorPhotoAdd({ actorId: that.id, photoUrl: that.imageUrl })
|
|
|
+ .then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.getPhoto()
|
|
|
+ this.handleCancel('photo')
|
|
|
+ } else {
|
|
|
+ that.$message.warning(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ that.confirmLoading = false
|
|
|
+ that.handleCancel('photo')
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ actorVideoAdd({ actorId: that.id, videoUrl: that.videoUrl })
|
|
|
+ .then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.getVideo()
|
|
|
+ this.handleCancel('video')
|
|
|
+ } else {
|
|
|
+ that.$message.warning(res.message)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ that.confirmLoading = false
|
|
|
+ that.handleCancel('video')
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
- getVideo(){
|
|
|
- actorVideoList({ pageNo: this.currentPage, pageSize: 4,actorId:this.id}).then(res => {
|
|
|
- if (res.code == 0) {
|
|
|
- console.log(res)
|
|
|
- this.videoList = res.result.records
|
|
|
- this.videoTotal = res.result.total
|
|
|
- }
|
|
|
- })
|
|
|
+ handleCancel(type) {
|
|
|
+ if (type == 'photo') {
|
|
|
+ this.imageUrl = ''
|
|
|
+ this.addPhoto = false
|
|
|
+ } else {
|
|
|
+ this.videoUrl = ''
|
|
|
+ this.addVideo = false
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|