增加youtube视频

src/api/cloud.js

@@ -183,11 +183,11 @@ export function getSelectApps(params) {
 
 /* 获取投放任务列表*/
 export function putinFetchPutinTasks(params) {
-  return request({
-    url: process.env.PUTIN_API + "/putin/fetch/putin/tasks",
-    method: "GET",
-    params
-  });
+  // return request({
+  //   url: process.env.PUTIN_API + "/putin/fetch/putin/tasks",
+  //   method: "GET",
+  //   params
+  // });
 }
 
 /* 获取创意素材库列表 */

src/views/createDelivery/childComponents/ImageUploader.vue

 <template>
   <div class="el-image-uploader">
-     图片上传组件
     <el-upload
       ref="upload"
       action

src/views/createDelivery/childComponents/YouTubeVideoInput.vue

+<template>
+  <div class="youtube-video-input">
+    <!-- 视频链接输入区域 -->
+    <el-input
+      v-model="currentInput"
+      placeholder="请输入YouTube视频链接，按Enter添加多个"
+      @blur="handleInputBlur"
+      @keyup.enter.native="handleEnter"
+      clearable
+    >
+      <el-button slot="append" @click="handleEnter" :disabled="!currentInput">
+        添加
+      </el-button>
+    </el-input>
+
+    <!-- 视频预览列表 -->
+    <el-row :gutter="20" class="video-list" v-if="videoList.length > 0">
+      <el-col
+        :span="8"
+        v-for="(video, index) in videoList"
+        :key="index"
+        class="video-item mt-20"
+      >
+        <el-card shadow="hover">
+          <!-- 使用 vue-core-video-player 播放 YouTube 视频 -->
+          <div class="video-player-container">
+            <vue-core-video-player
+              :src="video.url"
+              :autoplay="false"
+              :controls="true"
+              :loop="false"
+              :muted="true"
+              :volume="0.6"
+            />
+          </div>
+
+          <!-- 视频信息和操作区 -->
+          <div class="video-info mt-10">
+            <el-tooltip :content="video.url" placement="top">
+              <div class="video-url text-truncate">{{ video.url }}</div>
+            </el-tooltip>
+
+            <el-button
+              type="danger"
+              size="mini"
+              icon="el-icon-delete"
+              @click="removeVideo(index)"
+              class="mt-10"
+            >
+              删除
+            </el-button>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 空状态 -->
+    <el-empty
+      v-else
+      description="还没有添加视频，请输入YouTube视频链接"
+      class="mt-20"
+    ></el-empty>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'YouTubeVideoInput',
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      currentInput: '',
+      videoList: []
+    }
+  },
+  watch: {
+    value: {
+      handler(newVal) {
+        if (JSON.stringify(newVal) !== JSON.stringify(this.videoList)) {
+          this.videoList = newVal.map(url => ({
+            url: this.getEmbedUrl(url),
+            originalUrl: url
+          }))
+        }
+      },
+      immediate: true
+    },
+    videoList: {
+      handler(newVal) {
+        this.$emit('input', newVal.map(video => video.originalUrl))
+      },
+      deep: true
+    }
+  },
+  methods: {
+    handleInputBlur() {
+      if (this.currentInput.trim()) {
+        this.addVideo(this.currentInput)
+      }
+    },
+    handleEnter() {
+      if (this.currentInput.trim()) {
+        this.addVideo(this.currentInput)
+      }
+    },
+    addVideo(url) {
+      const videoId = this.extractVideoId(url)
+      if (videoId) {
+        const embedUrl = this.getEmbedUrl(url)
+        this.videoList.push({
+          url: embedUrl,
+          originalUrl: url.trim()
+        })
+        this.currentInput = ''
+        this.$message.success('视频添加成功')
+      } else {
+        this.$message.error('请输入有效的YouTube视频链接')
+      }
+    },
+    removeVideo(index) {
+      this.$confirm('确定要删除这个视频吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.videoList.splice(index, 1)
+        this.$message.success('删除成功')
+      }).catch(() => {})
+    },
+    extractVideoId(url) {
+      const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/
+      const match = url.match(regExp)
+      return (match && match[2].length === 11) ? match[2] : null
+    },
+    getEmbedUrl(url) {
+      const videoId = this.extractVideoId(url)
+      return videoId ? `https://www.youtube.com/embed/${videoId}` : ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.youtube-video-input {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.video-player-container {
+  aspect-ratio: 16/9;
+  width: 100%;
+  background: #000;
+}
+
+.video-url {
+  font-size: 12px;
+  color: #606266;
+  margin: 8px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mt-10 {
+  margin-top: 10px;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>