|
@@ -28,13 +28,14 @@ li {
|
|
margin: 10px;
|
|
margin: 10px;
|
|
position: relative;
|
|
position: relative;
|
|
height: 250px;
|
|
height: 250px;
|
|
- img {
|
|
|
|
|
|
+ img,video {
|
|
width: 100%;
|
|
width: 100%;
|
|
margin-top: auto;
|
|
margin-top: auto;
|
|
margin-bottom: auto;
|
|
margin-bottom: auto;
|
|
top: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
bottom: 0;
|
|
position: absolute;
|
|
position: absolute;
|
|
|
|
+ max-height: 250px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -50,7 +51,7 @@ li {
|
|
<div v-if="editable && type == 'vertical'" class="control">
|
|
<div v-if="editable && type == 'vertical'" class="control">
|
|
<span class="edit">
|
|
<span class="edit">
|
|
<a :href="editUrl">
|
|
<a :href="editUrl">
|
|
- <a-icon type="edit"></a-icon>
|
|
|
|
|
|
+ <a-icon type="edit" @click="handleDetail(record)"></a-icon>
|
|
</a>
|
|
</a>
|
|
</span>
|
|
</span>
|
|
<span class="delete">
|
|
<span class="delete">
|
|
@@ -122,7 +123,7 @@ li {
|
|
<span>{{form.name}}</span>
|
|
<span>{{form.name}}</span>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
<a-form-item label="性别" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
|
|
<a-form-item label="性别" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
|
|
- <span>{{form.sex==1?"女":"男"}}</span>
|
|
|
|
|
|
+ <span>{{form.sex==1?"男":"女"}}</span>
|
|
</a-form-item>
|
|
</a-form-item>
|
|
<a-form-item label="出生年月" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
|
|
<a-form-item label="出生年月" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
|
|
<span>{{form.birthday}}</span>
|
|
<span>{{form.birthday}}</span>
|
|
@@ -147,19 +148,44 @@ li {
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div style="text-align:right">
|
|
<div style="text-align:right">
|
|
- <a-pagination :total="total" :pageSize.sync="pageSize"/>
|
|
|
|
|
|
+ <a-pagination showQuickJumper :total="total" @change="pageChange" :pageSize.sync="pageSize"/>
|
|
|
|
+ </div>
|
|
|
|
+ </a-tab-pane>
|
|
|
|
+ <a-tab-pane tab="演员作品" key="3">
|
|
|
|
+ <div>
|
|
|
|
+ <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>
|
|
|
|
+ </li>
|
|
|
|
+ </ul>
|
|
|
|
+ </div>
|
|
|
|
+ <div style="text-align:right">
|
|
|
|
+ <a-pagination showQuickJumper :total="videoTotal" @change="pageChange" :pageSize.sync="pageSize"/>
|
|
</div>
|
|
</div>
|
|
</a-tab-pane>
|
|
</a-tab-pane>
|
|
- <a-tab-pane tab="演员作品" key="3">Content of Tab Pane 3</a-tab-pane>
|
|
|
|
</a-tabs>
|
|
</a-tabs>
|
|
</a-modal>
|
|
</a-modal>
|
|
|
|
+ <actor-modal ref="modalForm" @ok="modalFormOk" @updateList="updateList"></actor-modal>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
<script>
|
|
<script>
|
|
import moment from 'moment'
|
|
import moment from 'moment'
|
|
-import { actorDetail, actorCommentList, actorCommentAdd, actorCommentDetele, actorPhotoList } from '@/api/actor'
|
|
|
|
|
|
+import { actorDetail, actorCommentList, actorCommentAdd, actorCommentDetele, actorPhotoList,actorVideoList } from '@/api/actor'
|
|
|
|
+import actorModal from './ActorModal'
|
|
|
|
+import {JeecgListMixin} from '@/mixins/JeecgListMixin'
|
|
|
|
+import {closeAllVideoFun} from '@/utils/videoControl'
|
|
export default {
|
|
export default {
|
|
name: 'VmCard',
|
|
name: 'VmCard',
|
|
|
|
+ mixins: [JeecgListMixin],
|
|
|
|
+ components: {
|
|
|
|
+ actorModal
|
|
|
|
+ },
|
|
props: {
|
|
props: {
|
|
type: {
|
|
type: {
|
|
type: String,
|
|
type: String,
|
|
@@ -194,6 +220,11 @@ export default {
|
|
default() {
|
|
default() {
|
|
return 0
|
|
return 0
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
+ record:{
|
|
|
|
+ default(){
|
|
|
|
+ return {}
|
|
|
|
+ }
|
|
}
|
|
}
|
|
},
|
|
},
|
|
data: function() {
|
|
data: function() {
|
|
@@ -204,7 +235,7 @@ export default {
|
|
value: '',
|
|
value: '',
|
|
moment,
|
|
moment,
|
|
visible: false,
|
|
visible: false,
|
|
- detail: true,
|
|
|
|
|
|
+ detail: false,
|
|
form: {
|
|
form: {
|
|
name: '',
|
|
name: '',
|
|
birthday: '',
|
|
birthday: '',
|
|
@@ -215,10 +246,63 @@ export default {
|
|
loginInfo: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
|
|
loginInfo: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
|
|
photoList: [],
|
|
photoList: [],
|
|
total: 1,
|
|
total: 1,
|
|
- pageSize:4
|
|
|
|
|
|
+ videoTotal:1,
|
|
|
|
+ pageSize:4,
|
|
|
|
+ url: {
|
|
|
|
+ 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:[]
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
+ updateList(){
|
|
|
|
+ this.$emit("updateList")
|
|
|
|
+ },
|
|
|
|
+ pageChange: function(page) {
|
|
|
|
+ console.log(page)
|
|
|
|
+ this.currentPage = page
|
|
|
|
+
|
|
|
|
+ this.getPhoto()
|
|
|
|
+ },
|
|
handleSubmit() {
|
|
handleSubmit() {
|
|
if (!this.value) {
|
|
if (!this.value) {
|
|
return
|
|
return
|
|
@@ -272,14 +356,33 @@ export default {
|
|
callback(key) {
|
|
callback(key) {
|
|
console.log(key)
|
|
console.log(key)
|
|
if (key == '2') {
|
|
if (key == '2') {
|
|
- actorPhotoList({ pageNo: 1, pageSize: 4 }).then(res => {
|
|
|
|
|
|
+ closeAllVideoFun()
|
|
|
|
+ this.currentPage = 1
|
|
|
|
+ this.getPhoto()
|
|
|
|
+ }else if(key == '3'){
|
|
|
|
+ this.currentPage = 1
|
|
|
|
+ this.getVideo()
|
|
|
|
+ }else if(key == '1'){
|
|
|
|
+ closeAllVideoFun()
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ getPhoto(){
|
|
|
|
+ actorPhotoList({ pageNo: this.currentPage, pageSize: 4,actorId:this.id}).then(res => {
|
|
if (res.code == 0) {
|
|
if (res.code == 0) {
|
|
console.log(res)
|
|
console.log(res)
|
|
this.photoList = res.result.records
|
|
this.photoList = res.result.records
|
|
this.total = res.result.total
|
|
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
|
|
|
|
+ }
|
|
|
|
+ })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|