更新视频详情页面

src/views/home/VideoPage.vue

@@ -83,11 +83,18 @@
             type="danger"
             size="mini"
             icon="el-icon-help"
-            :disabled="isCollection"
-            @click="collection(video.videoId)"
+            @click="displayErrorDialog(video.videoId)"
           >
             <span>报错</span>
           </el-button>
+          <el-button
+            type="danger"
+            size="mini"
+            icon="el-icon-edit"
+            @click="displayUpdateDialog(video.videoId)"
+          >
+            <span>编辑</span>
+          </el-button>
         </div>
         <!--视频描述行-->
         <span class="description">{{ video.description }}</span>
@@ -157,6 +164,82 @@
         </el-row>
       </el-col>
     </el-row>
+
+    <!-- 视频信息报错对话框 -->
+    <el-dialog
+      title="视频错误信息"
+      append-to-body
+      :visible.sync="showSubmitErrorDialog"
+      width="30%"
+      center
+    >
+      <el-input
+        v-model="videoUpdate.title"
+        placeholder="标题"
+        style="width: 70%; padding-right: 2px"
+        clearable
+      />
+      <br>
+      <el-input
+        v-model="videoUpdate.pubDate"
+        placeholder="发布时间"
+        style="width: 45%; padding-right: 2px"
+      />
+      <br>
+      <el-input
+        v-model="videoUpdate.tag"
+        placeholder="标签"
+        style="width: 45%; padding-right: 2px"
+      />
+      <br>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          @click.native="submitErrorInfo"
+        >提交</el-button>
+      </span>
+    </el-dialog>
+
+    <!-- 视频信息编辑对话框 -->
+    <el-dialog
+      title="更新视频信息"
+      append-to-body
+      :visible.sync="showUpdateDialog"
+      width="30%"
+      center
+    >
+      <el-input
+        v-model="videoUpdate.title"
+        placeholder="标题"
+        style="width: 70%; padding-right: 2px"
+        clearable
+      />
+      <br>
+      <el-input
+        v-model="videoUpdate.pubDate"
+        placeholder="发布时间"
+        style="width: 45%; padding-right: 2px"
+      />
+      <br>
+      <el-input
+        v-model="videoUpdate.tag"
+        placeholder="标签"
+        style="width: 45%; padding-right: 2px"
+      />
+      <br>
+      <el-input
+        v-model="videoUpdate.tag"
+        placeholder="分区"
+        style="width: 45%; padding-right: 2px"
+      />
+      <br>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          @click.native="updateVideoInfo"
+        >更新</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -190,8 +273,11 @@ export default {
         date: '00:09',
         name: '王小虎1',
         address: '05-02 22:10'
+      }],
+      showSubmitErrorDialog: false,
+      showUpdateDialog: false,
+      videoUpdate: {
       }
-      ]
     }
   },
   watch: {
@@ -341,6 +427,20 @@ export default {
           })
         }
       })
+    },
+    displayErrorDialog() {
+      this.showSubmitErrorDialog = true
+    },
+    submitErrorInfo(videoId) {
+      console.log('提交视频错误')
+      this.showSubmitErrorDialog = false
+    },
+    displayUpdateDialog() {
+      this.showUpdateDialog = true
+    },
+    updateVideoInfo(videoId) {
+      console.log('更新视频信息')
+      this.showUpdateDialog = false
     }
   }
 }