增加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>

src/views/createDelivery/index.vue

@@ -615,8 +615,12 @@
             <div class="drawer-item-title">制作创意</div>
             <div class="drawer-item-con">
               <el-form ref="form">
-                <ImageUploader @change="handleUploadChange"/>
-
+                <el-form-item label="选择图片">
+                  <ImageUploader @change="handleUploadChange"/>
+                </el-form-item>
+                <el-form-item label="输入Youtube链接">
+                  <TextInputList v-model="putinTask.videoUrls" :maxLength="100"/>
+                </el-form-item>
               </el-form>
             </div>
           </div>
@@ -690,7 +694,6 @@ import {
   putinFetchConvertIds,
   putinUpdateAdvertiseConversion,
   putinCreatePutinTask,
-  putinFetchIndustryList,
   getAdvList,
   getAdvertiseCount,
   fetchConversionAction
@@ -709,6 +712,7 @@ import CountrySelector from "./childComponents/CountrySelector";
 import LanguageSelector from "./childComponents/LanguageSelector";
 import TextInputList from "./childComponents/TextInputList";
 import ImageUploader from "./childComponents/ImageUploader.vue";
+import YouTubeVideoInput from "./childComponents/YouTubeVideoInput.vue";
 
 import { stepList } from "./childComponents/util";
 
@@ -724,7 +728,8 @@ export default {
     TextTextarea,
     CountrySelector,
     TextInputList,
-    ImageUploader
+    ImageUploader,
+    YouTubeVideoInput
   }, // 注册
 
   data() {
@@ -857,6 +862,7 @@ export default {
         descriptions: [],
         imageAssets: [],
         videoAssets: [],
+        videoUrls: [],
         conversionActions: []
       },
 
@@ -1009,7 +1015,6 @@ export default {
     this._menuSelectApps(); // 获取App名称配置列表
     this.APIGetEnums(); // 获取公共下拉框参数
     this.materialGroupList(); // 获取创建的素材组列表
-    this.putinFetchIndustryList(); // 抓取创意三级分类信息列表
     this.putinFetchPutinTasks(); // 获取投放任务列表
     // this.executeTask()
     this.APIGetBusinText();
@@ -1114,78 +1119,6 @@ export default {
       });
     },
 
-    handleClose2(tag) {
-      this.putinTask.headlines.splice(this.putinTask.headlines.indexOf(tag), 1);
-    },
-
-    /* 点击添加时 显示表单输入 */
-    showInput2() {
-      this.inputVisible2 = true;
-      this.$nextTick((_) => {
-        this.$refs.saveTagInput2.$refs.input.focus();
-      });
-    },
-
-    showInputTag() {
-      this.inputVisibleTag = true;
-      this.$nextTick((_) => {
-        this.$refs.saveTagInputTag.$refs.input.focus();
-      });
-    },
-
-    /* 添加文案 */
-    handleInputConfirm2() {
-      let inputValue2 = this.inputValue2;
-      if (inputValue2 && this.tagId == "") {
-        this.putinTask.headlines.push(inputValue2);
-        /* 添加到文案库 */
-        this.APIGetBusinTextAdd(inputValue2);
-      } else if (inputValue2 && this.tagId != "") {
-        this.APIGetBusinTextEdit(this.tagId, inputValue2); // 修改文案
-        this.putinTask.headlines.push(inputValue2);
-      }
-      // this.inputVisible2 = false;
-      this.inputValue2 = ""; // 添加完之后恢复表单为空值
-
-    },
-
-    // 批量添加文案
-    handleTextareaData(value) {
-      this.putinTask.headlines = [];
-      console.log(value);
-      // 过滤空行
-      var values =  value.filter((item) => item != '');
-      console.log(values);
-      values.forEach((item) => {
-        this.putinTask.headlines.push(item);
-      });
-
-      this.putinTask.headlines =  [...new Set(this.putinTask.headlines)];
-
-      /* 添加到文案库 */
-      this.APIGetBusinTextAdd(values.toString());
-    },
-
-    /* 添加到文案库 */
-    APIGetBusinTextAdd(text) {
-      let params = {
-        appId: this.appId - 0,
-        text,
-      };
-      getBusinTextAdd(params).then((res) => {
-        console.log(112233, res);
-        if (res.status == 200) {
-          this.$message({
-            message: "添加到文案库成功！",
-            type: "success",
-          });
-          this.APIGetBusinText(); // 添加成功重新获取列表
-        } else {
-          this.$message.error("未添加到文案库！");
-        }
-      });
-    },
-
     /* 获取文案库列表 这里只获取前50个 提供修改删除的操作 */
     APIGetBusinText() {
       let params = {
@@ -1216,49 +1149,6 @@ export default {
       });
     },
 
-    handleInputConfirmTag() {
-      let inputValueTag = this.inputValueTag;
-      if (inputValueTag) {
-        this.putinTask.headlines.push(inputValueTag);
-      }
-      this.inputVisibleTag = false;
-      this.inputValueTag = "";
-    },
-
-    handleClose3(tag) {
-      this.arrays.productSellingPoints.splice(
-        this.arrays.productSellingPoints.indexOf(tag),
-        1
-      );
-    },
-
-    showInput3() {
-      this.inputVisible3 = true;
-      this.$nextTick((_) => {
-        this.$refs.saveTagInput3.$refs.input.focus();
-      });
-    },
-
-    handleInputConfirm3() {
-      let inputValue3 = this.inputValue3;
-      if (inputValue3.length < 6 || inputValue3.length > 9) {
-        this.$message.warning("推广卖点长度必须是6-9个字");
-        return;
-      }
-
-      if (inputValue3) {
-        this.arrays.productSellingPoints.push(inputValue3);
-      }
-      this.inputVisible3 = false;
-      this.inputValue3 = "";
-    },
-
-    // 抓取创意三级分类信息列表
-    putinFetchIndustryList: function () {
-      putinFetchIndustryList({}).then((res) => {
-        this.creativeCategoryList = res.result.data;
-      });
-    },
 
     handleChange(value) {
       // console.log("创意分类改变：", value);
@@ -1267,20 +1157,11 @@ export default {
       console.log("huix", this.makeCreative.creativeFullCategory);
     },
 
-    /* 创意标签多选处理 */
-    handleMultipleChange(value) {
-      console.log("创意分类多选", value);
-      let finalValue = [];
-      value.forEach((item) => {
-        finalValue.push(item[2]);
-      });
-      this.makeCreative.creativeCategoryGroup = finalValue.join(",");
-    },
-
     // 创建投放任务
     putinCreatePutinTask: function () {
       this.putinTask.appId = this.putinTask.appInfo.value
       this.loading = true
+      this.putinTask.videoAssets = this.putinTask.videoUrls.map(obj => ({ url: obj, name: moment().format("YYYY-MM-DD HH:mm:ss")}));
       putinCreatePutinTask(this.putinTask)
         .then((res) => {
           if (res.status === 200) {
@@ -1481,7 +1362,7 @@ export default {
 
     // 获取投放任务列表
     putinFetchPutinTasks() {
-      this.loading = true;
+      // this.loading = true;
       putinFetchPutinTasks({
         listData: true,
         pkg: this.putinBaseInfo.pkg,
@@ -1494,33 +1375,6 @@ export default {
       });
     },
 
-    handleClose_creative(tag) {
-      this.arrays.creativeTags.splice(this.arrays.creativeTags.indexOf(tag), 1);
-    },
-
-    showInput() {
-      this.inputVisible = true;
-      this.$nextTick((_) => {
-        this.$refs.saveTagInput.$refs.input.focus();
-      });
-    },
-
-    handleInputConfirm() {
-      let inputValue = this.inputValue;
-      if (inputValue) {
-        inputValue.split(/[\,]|[\，]/).forEach((item) => {
-          this.arrays.creativeTags.push(item.replace(/(^\s*)|(\s*$)/g, ""));
-        });
-      }
-      this.inputValue = "";
-      this.inputVisible = false;
-    },
-
-    handleClick(data, checked, node) {
-      if (checked) {
-        this.$refs.tree.setCheckedNodes([data]);
-      }
-    },
 
     /* 克隆 */
     clonePutinTask(item) {
@@ -1679,127 +1533,6 @@ export default {
       return finalArr;
     },
 
-    /* 接收子组件传回来的值 */
-    receiveData(textData) {
-      // console.log("文案数据", textData);
-      textData.forEach((item) => {
-        if (this.putinTask.headlines.indexOf(item) === -1) {
-          this.putinTask.headlines.push(item);
-        }
-      });
-    },
-
-    tagEdit(value) {
-      /* 点击某个tag 获取他的id */
-      for (let i = 0; i < this.textList.length; i++) {
-        if (this.textList[i].text == value) {
-          this.tagId = this.textList[i].id;
-          break;
-        }
-      }
-      this.handleClose2(value);
-      this.inputValue2 = value;
-      this.$nextTick((_) => {
-        this.$refs.inputText.$refs.input.focus();
-      });
-    },
-
-    /* 删除表单 */
-    removeText(i) {
-      this.putinTask.headlines.splice(i, 1);
-    },
-
-    /* tab栏切换时触发 参数为被选中的tab */
-    handleTabClick(tab) {
-      /* 当切换到选择已有定向包时触发 */
-      if (tab.index === "1") {
-        this.orientation.selectHisPack = "select";
-      } else {
-        this.orientation.selectHisPack = "";
-      }
-    },
-
-    /* 自定义人群的改变 */
-    testRadio() {
-      if (this.crowdValue === "不限") {
-        this.logicShow = false; // 关闭定向逻辑
-        /* 选中的定向逻辑中的值还原为初始值 */
-        this.custom_audienc_id = [];
-        this.together_id2 = [];
-        this.together_id1 = [];
-      } else {
-        this.logicShow = true; // 显示定向逻辑
-      }
-    },
-
-    /* 选择已有定向包 */
-    selectPkg() {
-      if (this.putinBaseInfo.pkg == "") {
-        this.$message.warning("请选择应用!");
-      } else {
-        this.APIGetCreatedDirectPkg(this.putinBaseInfo.pkg);
-      }
-    },
-
-    testChange() {
-      /* tab改变时 将选中的值清空 */
-      this.orientation.retargetingTagsExclude = "";
-      this.orientation.retargetingTagsInclude = "";
-      this.custom_audienc_id = [];
-    },
-
-    /* 定向人群包状态改变 */
-    selectAudience() {
-      /* 将获取到的id 转换并赋值给orientation.retargetingTagsInclude */
-      const ids = this.custom_audienc_id.join(",");
-
-      this.orientation.retargetingTagsInclude = ids;
-      console.log(333, this.orientation.retargetingTagsInclude);
-    },
-
-    /* 排除人群包状态改变 */
-    selectAudience2() {
-      const ids = this.custom_audienc_id.join(",");
-
-      this.orientation.retargetingTagsExclude = ids;
-      console.log(333, this.orientation.retargetingTagsExclude);
-    },
-
-    /* 同时排除定向 */
-    togetherChange1() {
-      const ids = this.together_id1.join(",");
-
-      this.orientation.retargetingTagsInclude = ids;
-    },
-    togetherChange2() {
-      this.together_id1.forEach((item1) => {
-        if (this.together_id2.indexOf(item1) !== -1) {
-          this.together_id2 = [];
-          this.$message.error("请选择非定向的包！");
-        }
-      });
-      // console.log("togetherChange2", this.together_id2);
-      const ids = this.together_id2.join(",");
-
-      this.orientation.retargetingTagsExclude = ids;
-      // console.log(131415, this.orientation.retargetingTagsExclude);
-    },
-
-    /* 关闭快手抽屉 */
-    closeKs() {
-      this.ks_drawerShow = false;
-    },
-
-    /* 清空选中的文案 */
-    removeAll() {
-      this.putinTask.headlines = [];
-    },
-
-    /* 清空创意分类中的标签 */
-    removeAllCreative() {
-      this.arrays.creativeTags = [];
-    },
-
     /* 分页 */
     // 当页面改变时触发
     handleCurrentChange(val) {
@@ -1818,35 +1551,6 @@ export default {
       this.paginationInfo.page++;
     },
 
-    /* 双出价改变 */
-    bidChange(val) {
-      if (val == "ladder") {
-        this.putinBaseInfo.openLadder = 1;
-      } else {
-        this.putinBaseInfo.openLadder = 0;
-      }
-
-      if (val != "doubel") {
-        this.putinBaseInfo.deepCpabid = "";
-      }
-    },
-
-    // 投放计划tab切换
-    handleTabSwitch(tab) {
-      if (tab.label == "选择已有") {
-        if (!this.targetList.length > 0) {
-          this.$message({
-            type: "warning",
-            message: "请先选择账户",
-          });
-        } else {
-        }
-      } else if (tab.label == "新建投放") {
-        // 当切换到新建投放时 清空选择已有的数据的数据
-        this.putinBaseInfo.advertCampaigns = [];
-        this.targetList.map((item) => (item.advName = null));
-      }
-    },
 
     // 点击目标户，获取广告组下拉参数
     clickBtnGetData(item, index) {