浏览代码

演员功能,图集作品的删除添加

zhuxinbo 5 年之前
父节点
当前提交
a10975d5cf
共有 3 个文件被更改,包括 291 次插入89 次删除
  1. 32 0
      src/api/actor.js
  2. 29 2
      src/components/ctop/ActorModal.vue
  3. 230 87
      src/components/ctop/vm-card.vue

+ 32 - 0
src/api/actor.js

@@ -16,6 +16,38 @@ export function actorPhotoList(parameter) {
     })
 }
 
+export function actorPhotoDelete(parameter) {
+    return axios({
+      url: "/ctop/actor/photo/delete",
+      method: 'delete',
+      params: parameter
+    })
+}
+
+export function actorPhotoAdd(parameter) {
+    return axios({
+      url: "/ctop/actor/photo/add",
+      method: 'post',
+      params: parameter
+    })
+}
+
+export function actorVideoDelete(parameter) {
+    return axios({
+      url: "/ctop/actor/video/delete",
+      method: 'delete',
+      params: parameter
+    })
+}
+
+export function actorVideoAdd(parameter) {
+    return axios({
+      url: "/ctop/actor/video/add",
+      method: 'post',
+      params: parameter
+    })
+}
+
 export function actorDetail(parameter) {
     return axios({
         url: "/ctop/actor/detail",

+ 29 - 2
src/components/ctop/ActorModal.vue

@@ -7,7 +7,6 @@
     @ok="handleOk"
     @cancel="handleCancel"
     cancelText="关闭">
-
     <a-spin :spinning="confirmLoading">
       <a-form :form="form">
 
@@ -18,9 +17,28 @@
           <a-input placeholder="请输入演员姓名" v-decorator="['name', validatorRules.name ]"/>
         </a-form-item>
         <a-form-item
+          label="封面"
+          :labelCol="labelCol"
+          :wrapperCol="wrapperCol"
+        >
+          <upload-to-ali
+            v-model="coverUrl"
+            :customDomain="customDomain"
+            preview
+            :region="region"
+            :bucket="bucket"
+            :accept="acceptImage"
+            :max="1"
+            :size="1024000"
+            :accessKeyId="accessKeyId"
+            :accessKeySecret="accessKeySecret"
+          ></upload-to-ali>
+        </a-form-item>
+        <a-form-item
           label="照片"
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
+          v-if="!model.name"
         >
           <upload-to-ali
             v-model="imageUrl"
@@ -40,6 +58,7 @@
           label="视频作品"
           :labelCol="labelCol"
           :wrapperCol="wrapperCol"
+          v-if="!model.name"
         >
           <upload-to-ali
             v-model="videoUrl"
@@ -100,6 +119,7 @@
         model: {},
         videoUrl: [],
         imageUrl: [],
+        coverUrl:"",
         customDomain: '',
         region: 'oss-cn-beijing',
         bucket: 'ctop-media',
@@ -136,11 +156,14 @@
         this.edit({});
       },
       edit(record) {
-
+        console.log(record)
         let that = this;
         that.form.resetFields();
         that.model = Object.assign({}, record);
         that.visible = true;
+        that.coverUrl = record.coverUrl
+        that.imageUrl = record.imageUrl
+        that.videoUrl = record.videoUrl
         that.$nextTick(() => {
           that.form.setFieldsValue(pick(this.model, 'name', 'sex', 'speciality'))
           //时间格式化
@@ -173,6 +196,7 @@
               values.birthday = values.birthday.format(this.dateFormat);
             }
             values.imageUrl = this.imageUrl;
+            values.coverUrl = this.coverUrl
             values.videoUrl = this.videoUrl;
             let formData = Object.assign(this.model, values);
             //时间格式化
@@ -183,6 +207,9 @@
                 that.$message.success(res.message);
                 that.$emit('ok');
                 that.$emit("updateList")
+                this.imageUrl = []
+                this.videoUrl = []
+                this.coverUrl = ""
               } else {
                 that.$message.warning(res.message);
               }

+ 230 - 87
src/components/ctop/vm-card.vue

@@ -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
+      }
     }
   }
 }