修改了，选择视频页面是灰色的，只有再点击页面才正常的问题

src/views/createDelivery/index.vue

@@ -619,15 +619,22 @@
                   <ImageUploader @change="handleUploadChange"/>
                 </el-form-item>
                 <el-form-item label="选择 Youtube 视频">
-                  <el-button type="primary" @click="fetchVideoList">加载视频列表</el-button>
+                  <el-button type="primary" @click="openVideoDialog">加载视频列表</el-button>
                   <el-input v-model="videoUrlsString" placeholder="YouTube 链接将自动填充" :disabled="true" type="textarea" :rows="3"></el-input>
-                  <div class="video-list" style="display: flex; flex-wrap: wrap;">
-                    <div v-for="video in videoDataList" :key="video.videoId" class="video-item" @click="toggleVideoSelection(video)" style="margin: 10px; text-align: center; cursor: pointer;">
-                      <video :src="video.ossUrl" controls width="200"></video>
-                      <p>{{ video.materialName }}</p>
-                      <el-checkbox v-model="selectedVideoId" :label="video.videoId"></el-checkbox>
+                  <el-dialog title="选择视频" :visible.sync="videoDialogVisible" width="70%" :modal-append-to-body="true" :append-to-body="true" >
+                    <el-button type="primary" @click="fetchVideoList" :loading="videoListLoading" style="margin-bottom: 10px;">刷新视频列表</el-button>
+                    <div class="video-list" style="display: flex; flex-wrap: wrap;">
+                      <div v-for="video in videoDataList" :key="video.videoId" class="video-item" @click="toggleVideoSelection(video)" style="margin: 10px; text-align: center; cursor: pointer;">
+                        <video :src="video.ossUrl" controls width="200"></video>
+                        <p>{{ video.materialName }}</p>
+                        <el-checkbox v-model="selectedVideoId" :label="video.videoId"></el-checkbox>
+                      </div>
                     </div>
-                  </div>
+                    <span slot="footer" class="dialog-footer">
+                          <el-button @click="videoDialogVisible = false">取 消</el-button>
+                          <el-button type="primary" @click="confirmVideoSelection">确 定</el-button>
+                    </span>
+                  </el-dialog>
                 </el-form-item>
               </el-form>
             </div>
@@ -744,6 +751,7 @@ export default {
     selectedVideoId: {
       handler(newVal) {
         this.putinTask.videoUrls = newVal.map(videoId => `https://www.youtube.com/watch?v=${videoId}`);
+        this.updateVideoUrlsString();
       },
       deep: true
     }
@@ -1019,6 +1027,8 @@ export default {
       checkedAdvId: "", // 点击户时，选中的id
       videoDataList: [], // 存储通过 getYoutubeUploadDetaillist 获取的视频列表
       selectedVideoId: [], // 存储用户选择的视频的 videoId
+      videoDialogVisible: false,
+      videoListLoading: false
     };
   },
 
@@ -1739,13 +1749,16 @@ export default {
       this.putinTask.imageAssets = files
     },
     fetchVideoList() {
+      this.videoListLoading = true;
       getYoutubeUploadDetaillist().then(res => {
         this.videoDataList = res.result.data;
+        this.$nextTick(() => {
+          console.log('视频列表已更新');
+        })
+          }).finally(() => {
+        this.videoListLoading = false;
       });
     },
-    selectVideo(video) {
-      this.selectedVideoId = video.videoId;
-    },
     toggleVideoSelection(video) {
       const index = this.selectedVideoId.indexOf(video.videoId);
       if (index > -1) {
@@ -1754,6 +1767,18 @@ export default {
         this.selectedVideoId.push(video.videoId); // 选中
       }
     },
+    openVideoDialog() {
+      this.videoDialogVisible = true;
+      if (this.videoDataList.length === 0) {
+        this.fetchVideoList();
+      }
+    },
+    confirmVideoSelection() {
+      this.videoDialogVisible = false;
+    },
+    updateVideoUrlsString() {
+      this.videoUrlsString = this.putinTask.videoUrls.join('\n');
+    },
   },
 };
 </script>