Skip to content

Z
zxn-adputin
Commit 05575d85 authored by lijin's avatar lijin
Browse files
Options

增加youtube视频

parent e3c503d5
Show whitespace changes
Inline Side-by-side
Showing with 201 additions and 314 deletions
src/api/cloud.js
View file @ 05575d85
......@@ -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
View file @ 05575d85
<template>
<div class="el-image-uploader">
图片上传组件
<el-upload
ref="upload"
action
......
src/views/createDelivery/childComponents/YouTubeVideoInput.vue 0 → 100644
View file @ 05575d85
<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
View file @ 05575d85
......@@ -615,8 +615,12 @@
<div class="drawer-item-title">制作创意</div>
<div class="drawer-item-con">
<el-form ref="form">
<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) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment