浏览代码

场地图片,视频查看

zhuxinbo 5 年之前
父节点
当前提交
ae0cb615dc

+ 50 - 0
src/api/yard.js

@@ -0,0 +1,50 @@
+
+import {axios} from '@/utils/request'
+
+export function yardPhotoList(parameter) {
+    return axios({
+      url: "/ctop/yard/photo/list",
+      method: 'get',
+      params: parameter
+    })
+}
+
+export function yardVideoList(parameter) {
+    return axios({
+      url: "/ctop/yard/video/list",
+      method: 'get',
+      params: parameter
+    })
+}
+
+export function yardPhotoDelete(parameter) {
+    return axios({
+      url: "/ctop/yard/photo/delete",
+      method: 'delete',
+      params: parameter
+    })
+}
+
+export function yardVideoDelete(parameter) {
+    return axios({
+      url: "/ctop/yard/video/delete",
+      method: 'delete',
+      params: parameter
+    })
+}
+
+export function yardPhotoAdd(parameter) {
+    return axios({
+      url: "/ctop/yard/photo/add",
+      method: 'post',
+      params: parameter
+    })
+}
+
+export function yardVideoAdd(parameter) {
+    return axios({
+      url: "/ctop/yard/video/add",
+      method: 'post',
+      params: parameter
+    })
+}

+ 7 - 1
src/components/ctop/vm-card.vue

@@ -194,6 +194,7 @@ li {
         </a-tab-pane>
       </a-tabs>
     </a-modal>
+    <!-- 新增图集 -->
     <a-modal
       v-model="addPhoto"
       title="新增图集"
@@ -214,6 +215,7 @@ li {
         :accessKeySecret="accessKeySecret"
       ></upload-to-ali>
     </a-modal>
+    <!-- 新增作品 -->
     <a-modal
       v-model="addVideo"
       title="新增作品"
@@ -388,7 +390,11 @@ export default {
     pageChange: function(page) {
       console.log(page)
       this.currentPage = page
-      this.getPhoto()
+      if (this.indexDetail == '2') {
+        this.getPhoto()
+      } else if (this.indexDetail == '3') {
+        this.getVideo()
+      }
     },
     handleSubmit() {
       if (!this.value) {

+ 78 - 64
src/components/ctop/vm-image-list.vue

@@ -38,8 +38,10 @@
       <div class="panel-heading">{{ title }}</div>
       <a-row type="flex" align="middle" justify="space-between" class="panel-body">
         <div class="search-bar">
-            <a-button @click="handleAdd" type="primary" icon="plus" style="margin-right:10px">新增</a-button>
-          <a-input placeholder="请输入搜索内容" v-model="keyword" style="width: 300px"></a-input>
+          <a-button @click="handleAdd" type="primary" icon="plus" style="margin-right:10px">新增</a-button>
+          <a-input placeholder="请输入搜索内容" v-model="keyword" style="width: 300px">
+            <a-icon slot="addonAfter" type="search" style="cursor: pointer;" @click="search" />
+          </a-input>
           <!--          <Button type="ghost" @click="search"><i class="fa fa-search"></i></Button>-->
         </div>
         <a-row type="flex" align="middle" class="page">
@@ -59,9 +61,14 @@
             :current="currentPage"
             :pageSize="showNum"
             @change="pageChange"
-          ></a-pagination> -->
+          ></a-pagination>-->
 
-          <a-pagination showQuickJumper :total="total" @change="pageChange" :pageSize.sync="showNum"/>
+          <a-pagination
+            showQuickJumper
+            :total="total"
+            @change="pageChange"
+            :pageSize.sync="showNum"
+          />
         </a-row>
       </a-row>
     </a-row>
@@ -90,7 +97,7 @@ import VmCard from '@/components/ctop/vm-card'
 import ARow from 'ant-design-vue/es/grid/Row'
 import ACol from 'ant-design-vue/es/grid/Col'
 import actorModal from './ActorModal'
-import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
 export default {
   name: 'VmImageList',
   components: {
@@ -121,11 +128,11 @@ export default {
         ]
       }
     },
-    total:{
-        type:Number,
-        default(){
-            return 0
-        }
+    total: {
+      type: Number,
+      default() {
+        return 0
+      }
     }
   },
   data: function() {
@@ -135,51 +142,51 @@ export default {
       showNum: 8, // number of item per page
       currentPage: 1,
       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'},
-          }
-        ],
+        {
+          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' }
+        }
+      ]
     }
   },
   methods: {
-    updateList(){
-        this.$emit("updateList")
+    updateList() {
+      this.$emit('updateList')
     },
     updateDataShow: function() {
       let startPage = (this.currentPage - 1) * this.showNum
@@ -191,23 +198,30 @@ export default {
       this.currentPage = page
 
       this.updateDataShow()
-      this.$emit("getList",page)
-    },
-    search: function() {
-      let that = this
-      let tempData = that.data
-      that.dataShow = []
-      tempData.forEach(function(elem) {
-        for (let i in elem) {
-          if (elem[i].toString().indexOf(that.keyword) > -1) {
-            that.dataShow.push(elem)
-            return
-          }
-        }
-      })
+      this.$emit('getList', page)
     },
+    // search: function() {
+    //   let that = this
+    //   let tempData = that.data
+    //   that.dataShow = []
+    //   tempData.forEach(function(elem) {
+    //     for (let i in elem) {
+    //       if (elem[i].toString().indexOf(that.keyword) > -1) {
+    //         that.dataShow.push(elem)
+    //         return
+    //       }
+    //     }
+    //   })
+    // },
     deleteOk: function(data) {
       this.$emit('delete-ok', data)
+    },
+    search() {
+      if (this.keyword) {
+        this.$emit('getList', 1, this.keyword + '')
+      } else {
+        this.$emit('getList')
+      }
     }
   },
   watch: {

+ 3 - 3
src/views/modules/image/ImageList.vue

@@ -5,7 +5,7 @@
     @delete-ok="deletefn"
     class="vm-margin"
     @getList="getActorList"
-    @updateList="getActorList(1)"
+    @updateList="getActorList(1,'')"
   ></vm-image-list>
 </template>
 
@@ -30,9 +30,9 @@ export default {
         }
       }
     },
-    getActorList(page) {
+    getActorList(page,name) {
       this.dataImageList = []
-      actorList({ pageNo: page, pageSize: 8 }).then(res => {
+      actorList({ pageNo: page, pageSize: 8,name:name }).then(res => {
         if (res.code == 0) {
           this.dataImageList = res.result.records
           this.total = res.result.total

+ 335 - 72
src/views/modules/yard/YardList.vue

@@ -1,6 +1,39 @@
+<style>
+.ping .ant-modal-content .ant-modal-footer {
+  display: none !important;
+}
+.ant-modal-body {
+  padding-top: 0px;
+}
+li {
+  list-style-type: none;
+}
+</style>
+<style lang="scss" scoped>
+.actor-photo-list {
+  display: flex;
+  padding-left: 0;
+  li {
+    width: 25%;
+    margin: 10px;
+    position: relative;
+    height: 250px;
+    border: 1px solid #f2f2f2;
+    img,
+    video {
+      width: 100%;
+      margin-top: auto;
+      margin-bottom: auto;
+      top: 0;
+      bottom: 0;
+      position: absolute;
+      max-height: 250px;
+    }
+  }
+}
+</style>
 <template>
   <a-card :bordered="false">
-
     <!-- 查询区域 -->
     <div class="table-page-search-wrapper">
       <a-form layout="inline">
@@ -14,10 +47,14 @@
           <a-col :md="6" :sm="8">
             <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
               <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
-              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+              <a-button
+                type="primary"
+                @click="searchReset"
+                icon="reload"
+                style="margin-left: 8px"
+              >重置</a-button>
             </span>
           </a-col>
-
         </a-row>
       </a-form>
     </div>
@@ -25,12 +62,10 @@
     <!-- 操作按钮区域 -->
     <div class="table-operator">
       <a-button @click="handleAdd" v-show="show" type="primary" icon="plus">新增</a-button>
-
     </div>
 
     <!-- table区域-begin -->
     <div>
-
       <a-table
         ref="table"
         size="middle"
@@ -39,101 +74,329 @@
         :columns="columns"
         :dataSource="dataSource"
         :pagination="ipagination"
-        :loading="loading">
-
+        :loading="loading"
+      >
         <!-- 字符串超长截取省略号显示-->
         <span slot="esContent" slot-scope="text">
-          <j-ellipsis :value="text" :length="10"/>
+          <j-ellipsis :value="text" :length="10" />
         </span>
 
         <span slot="action" slot-scope="text, record">
           <a href="javascript:;" @click="handleDetail(record)">详情</a>
-          <a-divider type="vertical"/>
+          <a-divider type="vertical" />
           <a-dropdown>
-            <a class="ant-dropdown-link">更多<a-icon type="down"/></a>
+            <a class="ant-dropdown-link">
+              更多
+              <a-icon type="down" />
+            </a>
             <a-menu slot="overlay">
-               <a-menu-item v-show="show">
+              <a-menu-item v-show="show">
                 <a @click="handleEdit(record)">编辑</a>
               </a-menu-item>
             </a-menu>
           </a-dropdown>
+          <a-divider type="vertical" />
+          <a href="javascript:;" @click="showDetail(record)">场地信息</a>
         </span>
-
       </a-table>
     </div>
     <!-- table区域-end -->
 
     <!-- 表单区域 -->
+    <a-modal title="详情" v-model="detail" class="ping" :width="800">
+      <a-tabs defaultActiveKey="1" @change="callback" v-model="indexDetail">
+        <a-tab-pane tab="场地图集" key="1" 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"
+            />
+          </div>
+        </a-tab-pane>
+        <a-tab-pane tab="场地视频" key="2">
+          <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">
+                <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"
+            />
+          </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>
+
     <yard-modal ref="modalForm" @ok="modalFormOk"></yard-modal>
   </a-card>
 </template>
 
 <script>
-  import YardModal from './modules/YardModal'
-  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
-  import JEllipsis from "@/components/jeecg/JEllipsis";
+import YardModal from './modules/YardModal'
+import yardDetail from './modules/yardDetail'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import UploadToAli from '@femessage/upload-to-ali'
+import { yardPhotoList, yardVideoList, yardPhotoDelete, yardVideoDelete, yardPhotoAdd, yardVideoAdd } from '@/api/yard'
+export default {
+  name: 'YardList',
+  mixins: [JeecgListMixin],
+  components: {
+    JEllipsis,
+    YardModal,
+    UploadToAli
+  },
+  data() {
+    return {
+      queryParam: {},
+      description: '场地管理',
+      // 新增修改按钮是否显示
+      show: true,
+      // 表头
+      columns: [
+        {
+          title: 'ID',
+          align: 'center',
+          dataIndex: 'id'
+        },
+        {
+          title: '场地名称',
+          align: 'center',
+          dataIndex: 'buildingName'
+        },
+        {
+          title: '地址',
+          align: 'center',
+          dataIndex: 'address'
+        },
+        {
+          title: '联系人',
+          align: 'center',
+          dataIndex: 'contactName'
+        },
+        {
+          title: '联系电话',
+          align: 'center',
+          dataIndex: 'contactMobile'
+        },
+        {
+          title: '创建时间',
+          align: 'center',
+          dataIndex: 'createTime'
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: 'center',
+          scopedSlots: { customRender: 'action' }
+        }
+      ],
+      url: {
+        list: '/ctop/yard/list'
+      },
+      detail: false,
+      indexDetail: '1',
+      currentPage: 0,
+      pageSize: 4,
+      videoTotal: 0,
+      photoTotal: 0,
+      total: 0,
+      videoList: [],
+      photoList: [],
+      imageUrl: '',
+      videoUrl: '',
+      customDomain: '',
+      region: 'oss-cn-beijing',
+      bucket: 'ctop-media',
+      acceptVideo: 'video/mpeg,video/mp4',
+      acceptImage: 'image/jpeg,image/jpg,image/png',
+      accessKeyId: 'LTAIbNbqWzSOklQV',
+      accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
+      addPhoto: false,
+      addVideo: false,
+      confirmLoading:true
+    }
+  },
 
-  export default {
-    name: "YardList",
-    mixins: [JeecgListMixin],
-    components: {
-      JEllipsis,
-      YardModal
+  methods: {
+    showDetail(item) {
+      console.log(item)
+      this.detail = true
+      this.id = item.id
+      this.getPhoto()
     },
-    data() {
-      return {
-        queryParam:{},
-        description: '场地管理',
-        // 新增修改按钮是否显示
-        show: true,
-        // 表头
-        columns: [
-          {
-            title: 'ID',
-            align: "center",
-            dataIndex: 'id'
-          },
-          {
-            title: '场地名称',
-            align: "center",
-            dataIndex: 'buildingName'
-          },
-          {
-            title: '地址',
-            align: "center",
-            dataIndex: 'address',
-          },
-          {
-            title: '联系人',
-            align: "center",
-            dataIndex: 'contactName',
-          },
-          {
-            title: '联系电话',
-            align: "center",
-            dataIndex: 'contactMobile'
-          },
-          {
-            title: '创建时间',
-            align: 'center',
-            dataIndex: 'createTime'
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            align: "center",
-            scopedSlots: {customRender: 'action'},
-          }
-        ],
-        url: {
-          list: "/ctop/yard/list",
-        },
+    callback(key) {
+      console.log(key)
+      if (key == '1') {
+        this.currentPage = 1
+        this.getPhoto()
+      } else if (key == '2') {
+        this.currentPage = 1
+        this.getVideo()
       }
     },
-
-    methods: {}
+    pageChange: function(page) {
+      console.log(page)
+      this.currentPage = page
+      if (this.indexDetail == '1') {
+        this.getPhoto()
+      } else if (this.indexDetail == '2') {
+        this.getVideo()
+      }
+    },
+    getPhoto() {
+      yardPhotoList({ pageNo: this.currentPage, pageSize: 4, yardId: this.id }).then(res => {
+        if (res.code == 0) {
+          console.log(res)
+          this.photoList = res.result.records
+          this.total = res.result.total
+        }
+      })
+    },
+    getVideo() {
+      yardVideoList({ pageNo: this.currentPage, pageSize: 4, yardId: this.id }).then(res => {
+        if (res.code == 0) {
+          console.log(res)
+          this.videoList = res.result.records
+          this.videoTotal = res.result.total
+        }
+      })
+    },
+    handleOk(type) {
+      const that = this
+      if (type == 'photo') {
+        yardPhotoAdd({ yardId: 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 {
+        yardVideoAdd({ yardId: 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')
+          })
+      }
+    },
+    handleCancel(type) {
+      if (type == 'photo') {
+        this.imageUrl = ''
+        this.addPhoto = false
+      } else {
+        this.videoUrl = ''
+        this.addVideo = false
+      }
+    },
+    deteleImg(id) {
+      yardPhotoDelete({ id: id }).then(res => {
+        if (res.code == 200) {
+          console.log(res)
+          this.getPhoto()
+        }
+      })
+    },
+    deteleVideo(id) {
+      yardVideoDelete({ id: id }).then(res => {
+        if (res.code == 200) {
+          console.log(res)
+          this.getVideo()
+        }
+      })
+    }
   }
+}
 </script>
 <style  scoped>
-  @import '~@assets/less/common.less'
+@import '~@assets/less/common.less';
 </style>

+ 248 - 0
src/views/modules/yard/modules/yardDetail.vue

@@ -0,0 +1,248 @@
+<style>
+.ping .ant-modal-content .ant-modal-footer {
+  display: none !important;
+}
+.ping .ant-list-item-content {
+  justify-content: space-between;
+  cursor: pointer;
+}
+.ping-list .detele {
+  display: none;
+}
+/* .ping-list:hover span {
+  display: block;
+} */
+.ant-modal-body {
+  padding-top: 0px;
+}
+li {
+  list-style-type: none;
+}
+</style>
+<style lang="scss" scoped>
+.actor-photo-list {
+  display: flex;
+  padding-left: 0;
+  li {
+    width: 25%;
+    margin: 10px;
+    position: relative;
+    height: 250px;
+    border: 1px solid #f2f2f2;
+    img,
+    video {
+      width: 100%;
+      margin-top: auto;
+      margin-bottom: auto;
+      top: 0;
+      bottom: 0;
+      position: absolute;
+      max-height: 250px;
+    }
+  }
+}
+</style>
+<template>
+  <div>
+    <a-modal title="详情" v-model="detail" class="ping" :width="800">
+      <!-- <a-tabs defaultActiveKey="1" @change="callback" v-model="indexDetail">
+        <a-tab-pane tab="演员图集" key="1" 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"
+            />
+          </div>
+        </a-tab-pane>
+        <a-tab-pane tab="演员作品" key="2">
+          <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">
+                <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"
+            />
+          </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>
+  </div>
+</template>
+<script>
+import moment from 'moment'
+import {
+
+} from '@/api/actor'
+import UploadToAli from '@femessage/upload-to-ali'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { closeAllVideoFun } from '@/utils/videoControl'
+export default {
+  name: 'VmCard',
+  mixins: [JeecgListMixin],
+  components: {
+    UploadToAli
+  },
+  props: {},
+  data: function() {
+    return {
+      addPhoto: false,
+      addVideo: false,
+      indexDetail: '1',
+      to: null,
+      comments: [],
+      submitting: false,
+      value: '',
+      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: '',
+        sex: null,
+        speciality: ''
+      },
+      noImgUrl: require('@/assets/img/noImg.png'),
+      loginInfo: JSON.parse(localStorage.getItem('pro__Login_Userinfo')),
+      photoList: [],
+      imageUrl: '',
+      videoUrl: '',
+      total: 1,
+      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: {
+      show(){
+          this.detail=true
+      },
+      callback(){
+
+      }
+  }
+}
+</script>