优化视频投稿页面代码

src/views/studio/upload.vue

@@ -11,7 +11,7 @@
           </v-col>
         </v-row>
         <v-row justify="center">
-          <div>
+          <v-col>
             <uploader
               class="uploader-example"
               :options="options"
@@ -28,18 +28,12 @@
               </uploader-drop>
               <uploader-list />
             </uploader>
-          </div>
-        </v-row>
-        <v-divider />
-        <v-row justify="center">
-          <v-col cols="10">
-            <h2>基本信息</h2>
           </v-col>
         </v-row>
         <v-row justify="center">
           <v-col cols="5">
             <v-card outlined>
-              <v-img :src="videoPost.coverUrl" aspect-ratio="1.77" contain max-height="150" alt="封面图，推荐16：9" />
+              <v-img :src="videoPost.imageUrl" aspect-ratio="1.77" contain max-height="150" alt="封面图，推荐16：9" />
             </v-card>
           </v-col>
           <v-col cols="5">
@@ -56,6 +50,12 @@
             </v-btn>
           </v-col>
         </v-row>
+        <v-divider />
+        <v-row justify="center">
+          <v-col cols="10">
+            <h2>稿件信息</h2>
+          </v-col>
+        </v-row>
         <v-row justify="center">
           <v-col cols="5">
             <v-select
@@ -79,7 +79,6 @@
               placeholder="标题"
               label="标题(50字以内)"
               clearable
-              :rules="[() => videoPost.title != null || '标题不能为空']"
             />
           </v-col>
         </v-row>
@@ -143,7 +142,7 @@
 
 <script>
 import { videoCategory, submitVideoPost } from '@/api/media/video'
-import { hashFile } from '@/utils/hash'
+/* import { hashFile } from '@/utils/hash' */
 
 export default {
   data() {
@@ -178,16 +177,12 @@ export default {
       // 提交给后端的数据
       videoPost: {
         videoUploadId: null,
-        videoFileId: null,
-        duration: null,
-        horizontal: null,
-        scope: null,
-        coverUrl: null,
-        coverUrlOriginal: null,
+        imageUploadId: null,
         title: null,
         description: null,
         categoryId: null,
-        tags: []
+        tags: [],
+        scope: null
       },
       categoryMap: {
         Set: function(key, value) { this[key] = value },
@@ -198,10 +193,10 @@ export default {
       category: [],
       childCategory: [],
       scope: [
-        '全部可见',
+        '所有人可见',
         '验证码可见',
         'VIP 可见',
-        '自己可见'
+        '仅自己可见'
       ],
       nowCategory: {},
       coverFile: null,
@@ -214,9 +209,10 @@ export default {
   },
   methods: {
     onFileAdded(file) {
-      file.pause()
+      this.setTitle(file.file.name)
+
+      /* file.pause()
       hashFile(file.file).then(res => {
-        this.setTitle(file.file.name)
         const formData = new FormData()
         formData.append('filename', file.file.name)
         formData.append('size', file.file.size)
@@ -244,7 +240,7 @@ export default {
           .catch(e => {
             return null
           })
-      })
+      })*/
     },
     onFileProgress(rootFile, file, chunk) {
     },
@@ -253,10 +249,9 @@ export default {
       if (res.code === 0) {
         const resData = res.data
         if (resData.merged) {
-          this.videoPost.videoFileId = resData.videoFileId
-          this.videoPost.horizontal = resData.horizontal
-          this.videoPost.duration = resData.duration
-          this.videoPost.coverUrl = resData.coverUrl
+          this.message = '视频已上传'
+          this.showMessage = true
+          this.videoPost.videoUploadId = resData.videoUploadId
         }
       }
     },
@@ -264,18 +259,32 @@ export default {
       console.log('文件上传错误')
     },
     publish() {
-      if (!this.videoPost.videoFileId) {
+      if (!this.videoPost.videoUploadId) {
         this.message = '你还没有上传视频'
         this.showMessage = true
         return
       }
-      if (this.videoPost.title === '' || this.videoPost.coverUrl === '' || this.videoPost.tags.length === 0 || this.videoPost.categoryId === -1) {
-        this.message = '标题，封面，标签,分区不能为空'
+
+      if (!this.videoPost.imageUploadId) {
+        this.message = '你还没有上传视频封面'
+        this.showMessage = true
+        return
+      }
+
+      if (this.videoPost.title === '' || this.videoPost.categoryId === -1) {
+        this.message = '分区和稿件标题不能为空'
         this.showMessage = true
         return
       }
-      if (this.videoPost.tags.length > 10) {
-        this.message = '最多可以有 10 个标签'
+
+      if (this.videoPost.scope === null) {
+        this.message = '稿件可见范围不能为空'
+        this.showMessage = true
+        return
+      }
+
+      if (this.videoPost.tags.length === 0 || this.videoPost.tags.length > 10) {
+        this.message = '标签最少 1 个, 最多 10 个'
         this.showMessage = true
         return
       }
@@ -331,9 +340,10 @@ export default {
       }).then(response => response.json())
         .then(json => {
           if (json.code === 0) {
-            console.log(json)
-            this.videoPost.coverUrl = json.data.thumbnailUrl
-            this.videoPost.coverUrlOriginal = json.data.originalUrl
+            this.message = '封面已上传'
+            this.showMessage = true
+            this.videoPost.imageUploadId = json.data.imageUploadId
+            this.videoPost.imageUrl = json.data.imageUrl
           } else {
             this.message = '上传失败，请重试！' + json.message
             this.showMessage = true
@@ -382,17 +392,15 @@ export default {
       }
     },
     setVideoScope(scope) {
-      if (scope === '全部可见') {
+      if (scope === '所有人可见') {
         this.videoPost.scope = 1
       } else if (scope === '验证码可见') {
         this.videoPost.scope = 2
       } else if (scope === 'VIP 可见') {
         this.videoPost.scope = 3
-      } else if (scope === '自己可见') {
+      } else if (scope === '仅自己可见') {
         this.videoPost.scope = 4
       }
-
-      console.log(this.videoPost)
     }
   }
 }