Skip to content

T
text2video-frontend
Commit f1092b02 authored by 周成波's avatar 周成波
Browse files
Options

页面udate

parent 28fae881
Hide whitespace changes
Inline Side-by-side
Showing with 171 additions and 96 deletions
src/views/home/compositions/useManyValues.ts
View file @ f1092b02
......@@ -8,7 +8,7 @@ interface MyMarkInterface {
type MyMarkType = Record<number, MyMarkInterface | string>
export const useManyValues = () => {
const screen = "竖屏";
const screen = "横屏";
const horizontal_img_size = {width: "960", height: "540"};
const vertical_img_size = {width: "540", height: "960"};
const if_need_subtitle = "false";
......@@ -64,7 +64,36 @@ export const useManyValues = () => {
chatgpt_answer: ``,
chatgpt_answer_roles: [],
all_roles: "",
adapt_result_json: [],
adapt_result_json: [
{
"编号": "1",
"场景描述": "森林里的美味秘密是什么呢",
"场景关键词": "\"葱郁绿林深处，隐藏着一份鲜为人知的美味秘密，它在枝叶间悄然生长，诱惑着探寻者的味蕾与好奇心。\"",
"场景关键词英文": "Deep in the lush green forest, there is a little-known delicious secret. It grows quietly among the branches and leaves, tempting the taste buds and curiosity of the explorer.",
"角色": "",
"角色关键词": "",
"角色关键词英文": "",
"画面描述词": "Deep in the lush green forest, there is a little-known delicious secret. It grows quietly among the branches and leaves, tempting the taste buds and curiosity of the explorer.,",
"本镜配图": "http://wm-tools-backend.frp.wmdigit.com:8888/assets/outputs/20240209114425596/img/1_resized.png?v=20240321152031224",
"local_image_path": "assets/outputs/20240209114425596/img/1_resized.png",
"info": "",
"roles": []
},
{
"编号": "2",
"场景描述": "在葱郁的绿林中",
"场景关键词": "葱郁的绿林中，枝叶茂密如绿色帷幕，阳光斑驳洒落，交织出神秘光影，其间鸟语花香，生机盎然，仿佛隐藏着无尽的秘密与美味。",
"场景关键词英文": "In the lush green forest, the branches and leaves are as dense as a green curtain, the sun is mottled and scattered, interwoven with mysterious light and shadow, during which birds and flowers are fragrant, full of vitality, as if hiding endless secrets and delicacies.",
"角色": "",
"角色关键词": "",
"角色关键词英文": "",
"画面描述词": "In the lush green forest, the branches and leaves are as dense as a green curtain, the sun is mottled and scattered, interwoven with mysterious light and shadow, during which birds and flowers are fragrant, full of vitality, as if hiding endless secrets and delicacies.,",
"本镜配图": "http://wm-tools-backend.frp.wmdigit.com:8888/assets/outputs/20240209114425596/img/2_resized.png?v=20240321152034264",
"local_image_path": "assets/outputs/20240209114425596/img/2_resized.png",
"info": "",
"roles": []
}
],
final_video: ``,
};
......@@ -317,6 +346,9 @@ export const useManyValues = () => {
words_num: 100,
result1: "",
result2: "",
};
const cover_backcover = {
product_pic: "http://wm-tools-backend.frp.wmdigit.com:8888/assets/2024/03/12/887a52c6-e022-11ee-a7de-9be5c7a16c02_resized.png",
product_pic_local: "assets/2024/03/12/887a52c6-e022-11ee-a7de-9be5c7a16c02_resized.png",
product_pic_with_text: "http://wm-tools-backend.frp.wmdigit.com:8888/assets/2024/03/12/887a52c6-e022-11ee-a7de-9be5c7a16c02_resized_with_text.png",
......@@ -379,5 +411,6 @@ export const useManyValues = () => {
role_attribute_options: role_attribute_options,
sd_paras: sd_paras,
marketing_template: marketing_template,
cover_backcover: cover_backcover,
}
}
src/views/home/index.vue
View file @ f1092b02
......@@ -67,6 +67,17 @@ const marketing_template = reactive({
prompt2: "",
result1: "",
result2: "",
});
const cover_backcover = reactive({
if_need_cover_pic: "false",
cover_pic: "src/assets/waiting.png",
cover_pic_local: "",
cover_pic_with_text: "src/assets/waiting.png",
cover_pic_with_text_local: "",
cover_pic_titles: <Wm.PicText[]>[],
cover_pic_use_scene: "",
if_need_product_pic: "false",
product_pic: "src/assets/waiting.png",
product_pic_local: "",
......@@ -74,18 +85,13 @@ const marketing_template = reactive({
product_pic_with_text_local: "",
product_pic_titles: <Wm.PicText[]>[],
product_pic_speech: "",
if_need_cover_pic: "false",
cover_pic: "src/assets/waiting.png",
cover_pic_local: "",
cover_pic_with_text: "src/assets/waiting.png",
cover_pic_with_text_local: "",
cover_pic_titles: <Wm.PicText[]>[],
});
onMounted(() => {
// 初始化task_id
form.task_id = utils.genDateTimeStr();
console.log(form.task_id)
console.log('页面加载，task_id=', form.task_id)
// 初始化示例数据
onChangeScreen(form.screen);
// 初始化密码框
......@@ -123,6 +129,11 @@ const onAdaptRoles = async () => {
});
return;
}
if (!form.task_id) {
// 初始化task_id
form.task_id = utils.genDateTimeStr();
console.log('推理角色，生成task_id=', form.task_id)
}
// 推理角色
try {
form.chatgpt_answer_roles = [];
......@@ -241,11 +252,9 @@ const onAdapt = async () => {
return;
}
if (!form.task_id) {
ElMessage({
message: "task_id不能为空，请刷新页面",
type: "error",
});
return;
// 初始化task_id
form.task_id = utils.genDateTimeStr();
console.log('分镜，生成task_id=', form.task_id)
}
// 按标点拆分成分镜
const sentences = utils.splitText(form.chatgpt_answer);
......@@ -649,12 +658,12 @@ const onGenVideo = async () => {
});
if (!is_all_ok) return;
try {
if (marketing_template.if_need_cover_pic == 'true') {
if (cover_backcover.if_need_cover_pic == 'true') {
console.log("添加封面文字到图片")
let res = await onMarketingTemplateAddTextToPic('cover');
if (!res) {return;}
}
if (marketing_template.if_need_product_pic == 'true') {
if (cover_backcover.if_need_product_pic == 'true') {
console.log("添加封底文字到图片")
let res = await onMarketingTemplateAddTextToPic('product');
if (!res) {return;}
......@@ -663,11 +672,11 @@ const onGenVideo = async () => {
console.log(form.adapt_result_json);
let video_param_detail = [];
// 封面
if (marketing_template.if_need_cover_pic == 'true' && marketing_template.cover_pic_with_text_local) {
if (cover_backcover.if_need_cover_pic == 'true' && cover_backcover.cover_pic_with_text_local) {
video_param_detail.push({
idx: "0",
text: "",
img_path: marketing_template.cover_pic_with_text_local,
img_path: cover_backcover.cover_pic_with_text_local,
no_text_duration: "0.1"
})
};
......@@ -680,12 +689,12 @@ const onGenVideo = async () => {
})
});
// 封底
if (marketing_template.if_need_product_pic == 'true' && marketing_template.product_pic_with_text_local) {
if (cover_backcover.if_need_product_pic == 'true' && cover_backcover.product_pic_with_text_local) {
// 如果text没有值，则时长默认5秒
video_param_detail.push({
idx: String(form.adapt_result_json.length + 1),
text: marketing_template.product_pic_speech,
img_path: marketing_template.product_pic_with_text_local,
text: cover_backcover.product_pic_speech,
img_path: cover_backcover.product_pic_with_text_local,
no_text_duration: "5"
})
};
......@@ -725,13 +734,30 @@ const onGenVideo = async () => {
};
};
const clean_demo = () => {
const clean_data = () => {
form.chatgpt_prompt = "";
form.chatgpt_answer = "";
form.chatgpt_answer_roles = <Wm.RolesItem[]>[];
form.adapt_result_json = <Wm.ScriptsItem[]>[];
form.task_id = "";
form.final_video = "";
cover_backcover.if_need_cover_pic = "false";
cover_backcover.cover_pic = "src/assets/waiting.png";
cover_backcover.cover_pic_local = "";
cover_backcover.cover_pic_with_text = "src/assets/waiting.png";
cover_backcover.cover_pic_with_text_local = "";
cover_backcover.cover_pic_titles = <Wm.PicText[]>[];
cover_backcover.cover_pic_use_scene = "";
cover_backcover.if_need_product_pic = "false";
cover_backcover.product_pic = "src/assets/waiting.png";
cover_backcover.product_pic_local = "";
cover_backcover.product_pic_with_text = "src/assets/waiting.png";
cover_backcover.product_pic_with_text_local = "";
cover_backcover.product_pic_titles = <Wm.PicText[]>[];
cover_backcover.product_pic_speech = "";
}
const clean_roles = () => {
......@@ -742,6 +768,14 @@ const clean_scenes = () => {
}
const onChangeScreen = (val: string) => {
// 先清理数据
clean_data();
if (!form.task_id) {
// 初始化task_id
form.task_id = utils.genDateTimeStr();
console.log('更改屏幕设置，重新生成task_id=', form.task_id)
}
if (debug.value == true) {
if (val == "横屏") {
form.task_id = default_data.horizontal_data.task_id;
......@@ -761,8 +795,6 @@ const onChangeScreen = (val: string) => {
form.final_video = default_data.vertical_data.final_video;
}
// marketing_template.if_need_product_pic = 'true';
// marketing_template.if_need_cover_pic = 'true';
marketing_template.product_name = default_data.marketing_template.product_name;
marketing_template.product_description = default_data.marketing_template.product_description;
marketing_template.target_people = default_data.marketing_template.target_people;
......@@ -772,23 +804,24 @@ const onChangeScreen = (val: string) => {
marketing_template.reference = default_data.marketing_template.reference;
marketing_template.words_num = default_data.marketing_template.words_num;
marketing_template.product_pic_titles = default_data.marketing_template.product_pic_titles;
marketing_template.product_pic_speech = default_data.marketing_template.product_pic_speech;
marketing_template.cover_pic_titles = default_data.marketing_template.cover_pic_titles;
// cover_backcover.if_need_product_pic = 'true';
// cover_backcover.if_need_cover_pic = 'true';
cover_backcover.product_pic_titles = default_data.cover_backcover.product_pic_titles;
cover_backcover.product_pic_speech = default_data.cover_backcover.product_pic_speech;
cover_backcover.cover_pic_titles = default_data.cover_backcover.cover_pic_titles;
// marketing_template.product_pic = default_data.marketing_template.product_pic;
// marketing_template.product_pic_local = default_data.marketing_template.product_pic_local;
// marketing_template.product_pic_with_text = default_data.marketing_template.product_pic_with_text;
// marketing_template.product_pic_with_text_local = default_data.marketing_template.product_pic_with_text_local;
// cover_backcover.product_pic = default_data.cover_backcover.product_pic;
// cover_backcover.product_pic_local = default_data.cover_backcover.product_pic_local;
// cover_backcover.product_pic_with_text = default_data.cover_backcover.product_pic_with_text;
// cover_backcover.product_pic_with_text_local = default_data.cover_backcover.product_pic_with_text_local;
// marketing_template.cover_pic = default_data.marketing_template.cover_pic;
// marketing_template.cover_pic_local = default_data.marketing_template.cover_pic_local;
// marketing_template.cover_pic_with_text = default_data.marketing_template.cover_pic_with_text;
// marketing_template.cover_pic_with_text_local = default_data.marketing_template.cover_pic_with_text_local;
// cover_backcover.cover_pic = default_data.cover_backcover.cover_pic;
// cover_backcover.cover_pic_local = default_data.cover_backcover.cover_pic_local;
// cover_backcover.cover_pic_with_text = default_data.cover_backcover.cover_pic_with_text;
// cover_backcover.cover_pic_with_text_local = default_data.cover_backcover.cover_pic_with_text_local;
}
// 宽高
if (val == "横屏") {
form.img_size = default_data.horizontal_img_size;
......@@ -954,10 +987,10 @@ const upload_product = ref<UploadInstance>()
const MarketingTemplateUploadProductPicSuccess = (val: Wm.UploadResult) => {
// console.log(val)
if (val.code == 0) {
marketing_template.product_pic = val.data[0].url + "?v=" + utils.genDateTimeStr();
marketing_template.product_pic_local = val.data[0].path;
marketing_template.product_pic_with_text = 'src/assets/waiting.png';
marketing_template.product_pic_with_text_local = '';
cover_backcover.product_pic = val.data[0].url + "?v=" + utils.genDateTimeStr();
cover_backcover.product_pic_local = val.data[0].path;
cover_backcover.product_pic_with_text = 'src/assets/waiting.png';
cover_backcover.product_pic_with_text_local = '';
ElMessage({
message: '上传成功',
type: 'success'
......@@ -984,10 +1017,10 @@ const handleMarketingTemplateUploadProductPicExceed: UploadProps['onExceed'] = (
const MarketingTemplateUploadCoverPicSuccess = (val: Wm.UploadResult) => {
if (val.code == 0) {
marketing_template.cover_pic = val.data[0].url + "?v=" + utils.genDateTimeStr();
marketing_template.cover_pic_local = val.data[0].path;
marketing_template.cover_pic_with_text = 'src/assets/waiting.png';
marketing_template.cover_pic_with_text_local = '';
cover_backcover.cover_pic = val.data[0].url + "?v=" + utils.genDateTimeStr();
cover_backcover.cover_pic_local = val.data[0].path;
cover_backcover.cover_pic_with_text = 'src/assets/waiting.png';
cover_backcover.cover_pic_with_text_local = '';
ElMessage({
message: '上传成功',
type: 'success'
......@@ -1014,16 +1047,17 @@ const handleMarketingTemplateUploadCoverPicExceed: UploadProps['onExceed'] = (fi
const onClearMarketingTemplatePic = (type: string) => {
if (type == 'product') {
marketing_template.product_pic = 'src/assets/waiting.png';
marketing_template.product_pic_local = '';
marketing_template.product_pic_with_text = 'src/assets/waiting.png';
marketing_template.product_pic_with_text_local = '';
cover_backcover.product_pic = 'src/assets/waiting.png';
cover_backcover.product_pic_local = '';
cover_backcover.product_pic_with_text = 'src/assets/waiting.png';
cover_backcover.product_pic_with_text_local = '';
};
if (type == 'cover') {
marketing_template.cover_pic = 'src/assets/waiting.png';
marketing_template.cover_pic_local = '';
marketing_template.cover_pic_with_text = 'src/assets/waiting.png';
marketing_template.cover_pic_with_text_local = '';
cover_backcover.cover_pic = 'src/assets/waiting.png';
cover_backcover.cover_pic_local = '';
cover_backcover.cover_pic_with_text = 'src/assets/waiting.png';
cover_backcover.cover_pic_with_text_local = '';
cover_backcover.cover_pic_use_scene = '';
};
};
......@@ -1036,35 +1070,35 @@ const onAddMarketingTemplatePicText = (type: string) => {
position: 0.5
};
if (type == 'product') {
marketing_template.product_pic_titles.push(newElement);
cover_backcover.product_pic_titles.push(newElement);
};
if (type == 'cover') {
marketing_template.cover_pic_titles.push(newElement);
cover_backcover.cover_pic_titles.push(newElement);
};
};
const onMarketingTemplateAddTextToPic = async (type: string) => {
if ((type == 'product' && !marketing_template.product_pic_local)
|| (type == 'cover' && !marketing_template.cover_pic_local)) {
if ((type == 'product' && !cover_backcover.product_pic_local)
|| (type == 'cover' && !cover_backcover.cover_pic_local)) {
ElMessage({
message: '封面或封底缺少图片，请检查',
type: 'error'
})
return false;
};
if (type == 'product' && marketing_template.product_pic_titles.length==0) {
marketing_template.product_pic_with_text = marketing_template.product_pic;
marketing_template.product_pic_with_text_local = marketing_template.product_pic_local;
if (type == 'product' && cover_backcover.product_pic_titles.length==0) {
cover_backcover.product_pic_with_text = cover_backcover.product_pic;
cover_backcover.product_pic_with_text_local = cover_backcover.product_pic_local;
return true;
};
if (type == 'cover' && marketing_template.cover_pic_titles.length==0) {
marketing_template.cover_pic_with_text = marketing_template.cover_pic;
marketing_template.cover_pic_with_text_local = marketing_template.cover_pic_local;
if (type == 'cover' && cover_backcover.cover_pic_titles.length==0) {
cover_backcover.cover_pic_with_text = cover_backcover.cover_pic;
cover_backcover.cover_pic_with_text_local = cover_backcover.cover_pic_local;
return true;
};
let params = {};
if (type == 'product') {
const texts = marketing_template.product_pic_titles.map(item => {
const texts = cover_backcover.product_pic_titles.map(item => {
return {
text: item.text,
text_color: item.color ? item.color : '',
......@@ -1075,12 +1109,12 @@ const onMarketingTemplateAddTextToPic = async (type: string) => {
};
});
params = {
image_path: marketing_template.product_pic_local,
image_path: cover_backcover.product_pic_local,
image_texts: texts,
};
};
if (type == 'cover') {
const texts = marketing_template.cover_pic_titles.map(item => {
const texts = cover_backcover.cover_pic_titles.map(item => {
return {
text: item.text,
text_color: item.color ? item.color : '',
......@@ -1091,7 +1125,7 @@ const onMarketingTemplateAddTextToPic = async (type: string) => {
};
});
params = {
image_path: marketing_template.cover_pic_local,
image_path: cover_backcover.cover_pic_local,
image_texts: texts,
};
};
......@@ -1099,12 +1133,12 @@ const onMarketingTemplateAddTextToPic = async (type: string) => {
const result = await text2videoService.submitAddTextToImg(params);
// console.log(result);
if (type == 'product') {
marketing_template.product_pic_with_text = result.domain_image_path + "?v=" + utils.genDateTimeStr();
marketing_template.product_pic_with_text_local = result.local_image_path;
cover_backcover.product_pic_with_text = result.domain_image_path + "?v=" + utils.genDateTimeStr();
cover_backcover.product_pic_with_text_local = result.local_image_path;
}
if (type == 'cover') {
marketing_template.cover_pic_with_text = result.domain_image_path + "?v=" + utils.genDateTimeStr();
marketing_template.cover_pic_with_text_local = result.local_image_path;
cover_backcover.cover_pic_with_text = result.domain_image_path + "?v=" + utils.genDateTimeStr();
cover_backcover.cover_pic_with_text_local = result.local_image_path;
}
return true;
} catch (error) {
......@@ -1113,12 +1147,12 @@ const onMarketingTemplateAddTextToPic = async (type: string) => {
type: "error",
});
if (type == 'product') {
marketing_template.product_pic_with_text = "";
marketing_template.product_pic_with_text_local = "";
cover_backcover.product_pic_with_text = "";
cover_backcover.product_pic_with_text_local = "";
}
if (type == 'cover') {
marketing_template.cover_pic_with_text = "";
marketing_template.cover_pic_with_text_local = "";
cover_backcover.cover_pic_with_text = "";
cover_backcover.cover_pic_with_text_local = "";
}
return false;
}
......@@ -1185,6 +1219,11 @@ const onTest = () => {
});
});
};
const onSelectCoverChange = (value: any) => {
cover_backcover.cover_pic = form.adapt_result_json[parseInt(value)-1].本镜配图;
cover_backcover.cover_pic_local = form.adapt_result_json[parseInt(value)-1].local_image_path;
}
</script>
<template>
......@@ -1201,7 +1240,7 @@ const onTest = () => {
</div>
</el-form-item>
<el-form-item>
<el-button type="success" @click="clean_demo">清除所有数据</el-button>
<el-button type="success" @click="clean_data">清除所有数据</el-button>
<!-- <el-button type="danger" @click="onTest">测试</el-button> -->
</el-form-item>
<!-- Prompt到文案 -->
......@@ -1339,16 +1378,16 @@ const onTest = () => {
</el-table>
</el-form-item>
<el-form-item label="封面图片">
<el-switch v-model="marketing_template.if_need_cover_pic" active-value="true" inactive-value="false" />
<el-switch v-model="cover_backcover.if_need_cover_pic" active-value="true" inactive-value="false" />
</el-form-item>
<div v-if="JSON.parse(marketing_template.if_need_cover_pic.toLowerCase())">
<div v-if="JSON.parse(cover_backcover.if_need_cover_pic.toLowerCase())">
<el-form-item>
<!-- :style="{ width: String(parseInt(form.img_size.width) / 3)+'px', height: String(parseInt(form.img_size.height) / 3)+'px' }" -->
<div :style="{ width: String(parseInt(form.img_size.width) / 3)+'px' }" class="dashed-div">
<el-image :src="marketing_template.cover_pic" />
<el-image :src="cover_backcover.cover_pic" />
</div>
<div :style="{ width: String(parseInt(form.img_size.width) / 3)+'px' }" class="dashed-div" style="margin-left: 20px;">
<el-image :src="marketing_template.cover_pic_with_text" />
<el-image :src="cover_backcover.cover_pic_with_text" />
</div>
</el-form-item>
<el-form-item>
......@@ -1359,13 +1398,21 @@ const onTest = () => {
:before-upload="handleBeforeUpload">
<el-button type="primary" size="small">上传图片</el-button>
</el-upload>
<el-button type="danger" size="small" @click="onClearMarketingTemplatePic('cover')" style="margin-left: 30px;">清除图片</el-button>
<span style="margin-left:12px;">或使用第</span>
<el-select size="small" v-model="cover_backcover.cover_pic_use_scene" placeholder="选择" style="width: 60px;" @change="onSelectCoverChange">
<el-option v-for="item in form.adapt_result_json" :key="item.编号" :label="item.编号" :value="item.编号">
<span style="float: left">{{ item.编号 }}</span>
</el-option>
</el-select>
<span>帧做封面</span>
<el-button type="danger" size="small" @click="onClearMarketingTemplatePic('cover')" style="margin-left: 12px;">清除图片</el-button>
</el-form-item>
<el-form-item>
<div style="width: 100%;">
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('cover')">增加文字</el-button>
<el-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('cover')">预览</el-button>
</div>
<div v-for="(pic_title, index) in marketing_template.cover_pic_titles" :key="index" class="dashed-div" style="width: 100%;">
<div v-for="(pic_title, index) in cover_backcover.cover_pic_titles" :key="index" class="dashed-div" style="width: 100%;">
<el-input v-model="pic_title.text" :autosize="true" type="textarea"></el-input>
<span style="margin-left:10px;">字体颜色：</span>
<el-color-picker v-model="pic_title.color" />
......@@ -1375,24 +1422,21 @@ const onTest = () => {
<el-input-number v-model="pic_title.font_size" :min="1" :max="100" controls-position="right" />
<span style="margin-left:30px;">在图片上的位置：</span>
<el-slider v-model="pic_title.position" :step="0.01" :min="0" :max="1" show-input vertical height="100px" style="margin-top: 10px;"/>
<el-button type="danger" size="small" @click="marketing_template.cover_pic_titles.splice(index, 1);" style="margin-left: 80px;">删除文字</el-button>
</div>
<div style="width: 100%;">
<el-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('cover')">预览图片</el-button>
<el-button type="danger" size="small" @click="cover_backcover.cover_pic_titles.splice(index, 1);" style="margin-left: 80px;">删除文字</el-button>
</div>
</el-form-item>
</div>
<el-form-item label="封底图片">
<el-switch v-model="marketing_template.if_need_product_pic" active-value="true" inactive-value="false" />
<el-switch v-model="cover_backcover.if_need_product_pic" active-value="true" inactive-value="false" />
</el-form-item>
<div v-if="JSON.parse(marketing_template.if_need_product_pic.toLowerCase())">
<div v-if="JSON.parse(cover_backcover.if_need_product_pic.toLowerCase())">
<el-form-item>
<!-- :style="{ width: String(parseInt(form.img_size.width) / 3)+'px', height: String(parseInt(form.img_size.height) / 3)+'px' }" -->
<div :style="{ width: String(parseInt(form.img_size.width) / 3)+'px' }" class="dashed-div">
<el-image :src="marketing_template.product_pic" />
<el-image :src="cover_backcover.product_pic" />
</div>
<div :style="{ width: String(parseInt(form.img_size.width) / 3)+'px' }" class="dashed-div" style="margin-left: 20px;">
<el-image :src="marketing_template.product_pic_with_text" />
<el-image :src="cover_backcover.product_pic_with_text" />
</div>
</el-form-item>
<el-form-item>
......@@ -1403,13 +1447,14 @@ const onTest = () => {
:before-upload="handleBeforeUpload">
<el-button type="primary" size="small">上传图片</el-button>
</el-upload>
<el-button type="danger" size="small" @click="onClearMarketingTemplatePic('product')" style="margin-left: 30px;">清除图片</el-button>
<el-button type="danger" size="small" @click="onClearMarketingTemplatePic('product')" style="margin-left: 12px;">清除图片</el-button>
</el-form-item>
<el-form-item>
<div style="width: 100%;">
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('product')">增加文字</el-button>
<el-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('product')">预览</el-button>
</div>
<div v-for="(pic_title, index) in marketing_template.product_pic_titles" :key="index" class="dashed-div" style="width: 100%;">
<div v-for="(pic_title, index) in cover_backcover.product_pic_titles" :key="index" class="dashed-div" style="width: 100%;">
<el-input v-model="pic_title.text" :autosize="true" type="textarea"></el-input>
<span style="margin-left:10px;">字体颜色：</span>
<el-color-picker v-model="pic_title.color" />
......@@ -1419,14 +1464,11 @@ const onTest = () => {
<el-input-number v-model="pic_title.font_size" :min="1" :max="100" controls-position="right" />
<span style="margin-left:30px;">在图片上的位置：</span>
<el-slider v-model="pic_title.position" :step="0.01" :min="0" :max="1" show-input vertical height="100px" style="margin-top: 10px;"/>
<el-button type="danger" size="small" @click="marketing_template.product_pic_titles.splice(index, 1);" style="margin-left: 80px;">删除文字</el-button>
</div>
<div style="width: 100%;">
<el-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('product')">预览图片</el-button>
<el-button type="danger" size="small" @click="cover_backcover.product_pic_titles.splice(index, 1);" style="margin-left: 80px;">删除文字</el-button>
</div>
</el-form-item>
<el-form-item label="封底旁白">
<el-input v-model="marketing_template.product_pic_speech" :autosize="true" type="textarea"></el-input>
<el-input v-model="cover_backcover.product_pic_speech" :autosize="true" type="textarea"></el-input>
</el-form-item>
</div>
<!-- 生成视频 -->
......
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