Skip to content

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

update

parent a2997e68
Hide whitespace changes
Inline Side-by-side
Showing with 244 additions and 204 deletions
src/views/home/compositions/useManyValues.ts
View file @ 53bac87f
......@@ -62,6 +62,7 @@ export const useManyValues = () => {
chatgpt_prompt: `生成一个50字的小故事`,
chatgpt_answer: ``,
chatgpt_answer_roles: [],
all_roles: "",
adapt_result_json: [],
final_video: ``,
};
......@@ -70,8 +71,51 @@ export const useManyValues = () => {
task_id: "20240220181602687",
chatgpt_prompt: `生成一个50字的科幻小故事，阿凡达系列`,
chatgpt_answer: `在宁静的森林里。一场奇特的食物大战正在上演。`,
chatgpt_answer_roles: [],
adapt_result_json: [],
chatgpt_answer_roles: [
{
"角色": "森林里的动物们",
"角色关键词": "动物们：松鼠，鹿，狐狸，熊，体型各异，色彩斑斓，四肢灵活，五官敏锐，皮毛浓密",
"角色关键词英文": "Animals. Squirrel. Deer. Fox. Bear. Different sizes. Colors. Agile limbs. Five officers are sharp. The fur is thick. ",
"属性": "动物"
}
],
adapt_result_json: [
{
"编号": "1",
"场景描述": "在宁静的森林里",
"场景关键词": "静谧的森林深处，层林尽染，鸟鸣声若隐若现，阳光斑驳洒落，生机盎然中弥漫着神秘与未知。",
"场景关键词英文": "♪ Deep in the quiet forest ♪ It's all over the forest. Birds sound like birds. ♪ Sunshine pours down ♪ There's a mystery in life. And unknown. ",
"角色": "无角色",
"角色关键词": "",
"角色关键词英文": "",
"画面描述词": "♪ Deep in the quiet forest ♪ It's all over the forest. Birds sound like birds. ♪ Sunshine pours down ♪ There's a mystery in life. And unknown. ,",
"本镜配图": "http://wm-tools-backend.frp.wmdigit.com:8888/assets/outputs/20240220181602687/img/1_resized.png?v=20240317121638794",
"local_image_path": "assets/outputs/20240220181602687/img/1_resized.png",
"info": "推理返回：由于本章节描述为“在宁静的森林里”，并没有明确指出具体出现了哪些动物，所以无法从角色列表（森林里的动物们）中挑选出本章节中出现过的具体角色。",
"roles": [
"无角色",
"森林里的动物们"
]
},
{
"编号": "2",
"场景描述": "一场奇特的食物大战正在上演",
"场景关键词": "宁静森林中，各类食物化身为生动角色，激烈交锋，面包掷飞镖，水果射弹珠，糖果舞动绸带，薯片挥剑，上演了一场妙趣横生的食物大战。",
"场景关键词英文": "# In the quiet forest # All kinds of food is a living angle. Colour It's a tough fight. Bread toss dart. Fruit shoots marbles. Candy-dancing silk ribbons. The chips swing the sword. There's been an interesting performance. Food war. ",
"角色": "森林里的动物们",
"角色关键词": "动物们：松鼠，鹿，狐狸，熊，体型各异，色彩斑斓，四肢灵活，五官敏锐，皮毛浓密",
"角色关键词英文": "Animals. Squirrel. Deer. Fox. Bear. Different sizes. Colors. Agile limbs. Five officers are sharp. The fur is thick. ",
"画面描述词": "# In the quiet forest # All kinds of food is a living angle. Colour It's a tough fight. Bread toss dart. Fruit shoots marbles. Candy-dancing silk ribbons. The chips swing the sword. There's been an interesting performance. Food war. ,Animals. Squirrel. Deer. Fox. Bear. Different sizes. Colors. Agile limbs. Five officers are sharp. The fur is thick. ",
"本镜配图": "http://wm-tools-backend.frp.wmdigit.com:8888/assets/outputs/20240220181602687/img/2_resized.png?v=20240317121651990",
"local_image_path": "assets/outputs/20240220181602687/img/2_resized.png",
"info": "推理返回：森林里的动物们",
"roles": [
"无角色",
"森林里的动物们"
]
}
],
all_roles: "森林里的动物们",
final_video: ``,
};
......
src/views/home/index.vue
View file @ 53bac87f
......@@ -70,14 +70,14 @@ const marketing_template = reactive({
if_need_product_pic: "false",
product_pic: "src/assets/waiting.png",
product_pic_local: "",
product_pic_with_text: "",
product_pic_with_text: "src/assets/waiting.png",
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: "",
cover_pic_with_text: "src/assets/waiting.png",
cover_pic_with_text_local: "",
cover_pic_titles: <Wm.PicText[]>[],
});
......@@ -601,7 +601,7 @@ const onDrawOne = async (item: any) => {
};
const onGenVideo = () => {
const onGenVideo = async () => {
if (!form.adapt_result_json || form.adapt_result_json.length == 0) {
ElMessage({
message: "分镜必要信息不能为空，请重新执行",
......@@ -620,68 +620,85 @@ const onGenVideo = () => {
}
});
if (!is_all_ok) return;
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) {
video_param_detail.push({
idx: "0",
text: "",
img_path: marketing_template.cover_pic_with_text_local
})
};
// 分镜
form.adapt_result_json.map(item => {
video_param_detail.push({
idx: item.编号,
text: item.场景描述,
img_path: item.local_image_path
})
});
// 封底
if (marketing_template.if_need_product_pic == 'true' && marketing_template.product_pic_with_text_local && marketing_template.product_pic_speech) {
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
})
};
let para_rate = `${voice_rate.value}%`;
let para_volume = `${voice_volume.value}%`;
if (voice_rate.value >= 0) { para_rate = `+${para_rate}` }
if (voice_volume.value >= 0) { para_volume = `+${para_volume}` }
const video_param = {
task_id: form.task_id,
if_need_subtitle: form.if_need_subtitle,
lang: "zh",
task_info: video_param_detail,
rate: para_rate,
volume: para_volume,
voice: voice.value,
bgm: bgm.value,
bgm_volume: bgm_volume.value,
sub_font_size: String(sub_font_size.value),
sub_font_color: sub_font_color.value,
sub_position: String(1 - sub_position.value),
sub_bg_color: "",
}
if (sub_bg_color.value) {
video_param.sub_bg_color = sub_bg_color.value;
}
text2videoService
.submitGenVideo(video_param)
.then((result: string) => {
console.log(result);
form.final_video = "";
form.final_video = result + "?v=" + utils.genDateTimeStr();
})
.catch((error: any) => {
// console.error(error);
ElMessage({
message: error,
type: "error",
});
try {
if (marketing_template.if_need_cover_pic == 'true') {
console.log("添加封面文字到图片")
let res = await onMarketingTemplateAddTextToPic('cover');
if (!res) {return;}
}
if (marketing_template.if_need_product_pic == 'true') {
console.log("添加封底文字到图片")
let res = await onMarketingTemplateAddTextToPic('product');
if (!res) {return;}
if (!marketing_template.product_pic_speech) {
ElMessage({
message: "请填写封底旁白",
type: "error",
});
return;
}
}
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) {
video_param_detail.push({
idx: "0",
text: "",
img_path: marketing_template.cover_pic_with_text_local
})
};
// 分镜
form.adapt_result_json.map(item => {
video_param_detail.push({
idx: item.编号,
text: item.场景描述,
img_path: item.local_image_path
})
});
// 封底
if (marketing_template.if_need_product_pic == 'true' && marketing_template.product_pic_with_text_local && marketing_template.product_pic_speech) {
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
})
};
let para_rate = `${voice_rate.value}%`;
let para_volume = `${voice_volume.value}%`;
if (voice_rate.value >= 0) { para_rate = `+${para_rate}` }
if (voice_volume.value >= 0) { para_volume = `+${para_volume}` }
const video_param = {
task_id: form.task_id,
if_need_subtitle: form.if_need_subtitle,
lang: "zh",
task_info: video_param_detail,
rate: para_rate,
volume: para_volume,
voice: voice.value,
bgm: bgm.value,
bgm_volume: bgm_volume.value,
sub_font_size: String(sub_font_size.value),
sub_font_color: sub_font_color.value,
sub_position: String(1 - sub_position.value),
sub_bg_color: "",
}
if (sub_bg_color.value) {
video_param.sub_bg_color = sub_bg_color.value;
}
const result = await text2videoService.submitGenVideo(video_param);
console.log(result);
form.final_video = "";
form.final_video = result + "?v=" + utils.genDateTimeStr();
} catch(error: any) {
// console.error(error);
ElMessage({
message: error,
type: "error",
});
};
};
const clean_demo = () => {
......@@ -707,6 +724,7 @@ const onChangeScreen = (val: string) => {
form.chatgpt_prompt = default_data.horizontal_data.chatgpt_prompt;
form.chatgpt_answer = default_data.horizontal_data.chatgpt_answer;
form.chatgpt_answer_roles = default_data.horizontal_data.chatgpt_answer_roles;
form.all_roles = default_data.horizontal_data.all_roles;
form.adapt_result_json = default_data.horizontal_data.adapt_result_json;
form.final_video = default_data.horizontal_data.final_video;
} else {
......@@ -714,37 +732,38 @@ const onChangeScreen = (val: string) => {
form.chatgpt_prompt = default_data.vertical_data.chatgpt_prompt;
form.chatgpt_answer = default_data.vertical_data.chatgpt_answer;
form.chatgpt_answer_roles = default_data.vertical_data.chatgpt_answer_roles;
form.all_roles = default_data.vertical_data.all_roles;
form.adapt_result_json = default_data.vertical_data.adapt_result_json;
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;
marketing_template.text_role = default_data.marketing_template.text_role;
marketing_template.text_style = default_data.marketing_template.text_style;
marketing_template.story_type = default_data.marketing_template.story_type;
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;
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;
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;
}
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;
marketing_template.text_role = default_data.marketing_template.text_role;
marketing_template.text_style = default_data.marketing_template.text_style;
marketing_template.story_type = default_data.marketing_template.story_type;
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;
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;
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;
// 宽高
......@@ -970,7 +989,7 @@ const onMarketingTemplateAddTextToPic = async (type: string) => {
if ((type == 'product' && !marketing_template.product_pic_local)
|| (type == 'cover' && !marketing_template.cover_pic_local)) {
ElMessage({
message: '请上传图片',
message: '封面或封底缺少图片，请检查',
type: 'error'
})
return false;
......@@ -1064,16 +1083,6 @@ const onMarketingTemplateSubmitGpt = async () => {
你给出的文案是:{}
`
try {
if (marketing_template.if_need_product_pic == 'true') {
console.log("添加文字到图片")
let res = await onMarketingTemplateAddTextToPic('product');
if (!res) {return;}
}
if (marketing_template.if_need_cover_pic == 'true') {
console.log("添加文字到图片")
let res = await onMarketingTemplateAddTextToPic('cover');
if (!res) {return;}
}
console.log("第一次提问")
let result1 = await text2videoService.submitLLM(marketing_template.prompt1, wen_an_llm.api);
marketing_template.result1 = result1;
......@@ -1249,31 +1258,104 @@ const onMarketingTemplateSubmitGpt = async () => {
</el-table-column>
</el-table>
</el-form-item>
<el-form-item label="封面" v-if="JSON.parse(marketing_template.if_need_cover_pic.toLowerCase()) && marketing_template.cover_pic_with_text_local">
<div :style="{ width: String(parseInt(form.img_size.width) / 2)+'px' } " class="dashed-div">
<el-image :src="marketing_template.cover_pic_with_text" />
</div>
<el-form-item label="封面图片">
<el-switch v-model="marketing_template.if_need_cover_pic" active-value="true" inactive-value="false" />
</el-form-item>
<el-form-item label="封底" v-if="JSON.parse(marketing_template.if_need_product_pic.toLowerCase()) && marketing_template.product_pic_with_text_local">
<div :style="{ width: String(parseInt(form.img_size.width) / 2)+'px' } " class="dashed-div">
<el-image :src="marketing_template.product_pic_with_text" />
</div>
<span style="margin-left: 20px;">镜头旁白：</span>
<el-text class="mx-1">{{ marketing_template.product_pic_speech }}</el-text>
<div v-if="JSON.parse(marketing_template.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" />
</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" />
</div>
</el-form-item>
<el-form-item>
<el-upload ref="upload_cover" :show-file-list="false" :limit="1"
accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP"
:action="actionUrl" :on-success="MarketingTemplateUploadCoverPicSuccess" :on-exceed="handleMarketingTemplateUploadCoverPicExceed"
:on-error="handleUploadError" :data="{ width: form.img_size.width, height: form.img_size.height }">
<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>
<el-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('cover')" style="margin-left: 30px;">预览图片</el-button>
</el-form-item>
<el-form-item>
<div style="width: 100%;">
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('cover')">增加文字</el-button>
</div>
<div v-for="(pic_title, index) in marketing_template.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" />
<span style="margin-left:30px;">字体背景：</span>
<el-color-picker v-model="pic_title.bg_color" />
<span style="margin-left:30px;">字体大小：</span>
<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>
</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-form-item>
<div v-if="JSON.parse(marketing_template.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" />
</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" />
</div>
</el-form-item>
<el-form-item>
<el-upload ref="upload_product" :show-file-list="false" :limit="1"
accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP"
:action="actionUrl" :on-success="MarketingTemplateUploadProductPicSuccess" :on-exceed="handleMarketingTemplateUploadProductPicExceed"
:on-error="handleUploadError" :data="{ width: form.img_size.width, height: form.img_size.height }">
<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="success" size="small" @click="onMarketingTemplateAddTextToPic('product')" style="margin-left: 30px;">预览图片</el-button>
</el-form-item>
<el-form-item>
<div style="width: 100%;">
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('product')">增加文字</el-button>
</div>
<div v-for="(pic_title, index) in marketing_template.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" />
<span style="margin-left:30px;">字体背景：</span>
<el-color-picker v-model="pic_title.bg_color" />
<span style="margin-left:30px;">字体大小：</span>
<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>
</el-form-item>
<el-form-item label="封底旁白">
<el-input v-model="marketing_template.product_pic_speech" :autosize="true" type="textarea"></el-input>
</el-form-item>
</div>
<!-- 生成视频 -->
<el-form-item label="设置">
<span style="margin: 0 20px">TTS语速：</span>
<el-form-item label="视频设置">
<span style="margin: 0 20px 0 0">TTS语速：</span>
<el-slider v-model="voice_rate" show-input :min="-50" :max="50" :marks="default_data.marks"
style="width: 900px" />
</el-form-item>
<el-form-item>
<span style="margin: 0 20px">TTS音量：</span>
<span style="margin: 0 20px 0 0">TTS音量：</span>
<el-slider v-model="voice_volume" show-input :min="-80" :max="80" :marks="default_data.marks"
style="width: 900px" />
</el-form-item>
<el-form-item>
<span style="margin: 20px 20px 0 20px">TTS语音：</span>
<span style="margin: 20px 20px 0 0">TTS语音：</span>
<el-select v-model="voice" placeholder="Select" style="width: 400px; margin-top: 20px;">
<el-option v-for="item in default_data.voices" :key="item.value" :label="item.value" :value="item.value">
<span style="float: left">{{ item.value }}</span>
......@@ -1288,7 +1370,7 @@ const onMarketingTemplateSubmitGpt = async () => {
style="height: 30px; margin: 20px 0 0 10px;"></audio>
</el-form-item>
<el-form-item>
<span style="margin: 0 20px">背景音乐：</span>
<span style="margin: 0 20px 0 0">背景音乐：</span>
<el-select v-model="bgm" placeholder="无" style="width: 400px;">
<el-option v-for="item in default_data.bgm" :key="item.value" :label="item.value" :value="item.value">
<span style="float: left">{{ item.label }}</span>
......@@ -1302,12 +1384,12 @@ const onMarketingTemplateSubmitGpt = async () => {
<audio :src="'src/assets/bgm/' + bgm + '.mp3'" controls style="height: 30px; margin-left:10px;"></audio>
</el-form-item>
<el-form-item>
<span style="margin: 0 20px">背景音量：</span>
<span style="margin: 0 20px 0 0">背景音量：</span>
<el-slider v-model="bgm_volume" show-input :step="0.1" :min="0" :max="2" :marks="default_data.bgm_volume_marks"
style="width: 600px" />
</el-form-item>
<el-form-item>
<span style="margin: 20px 20px">字幕合成：</span>
<span style="margin: 20px 20px 20px 0">字幕合成：</span>
<el-switch v-model="form.if_need_subtitle" active-value="true" inactive-value="false" />
<div v-if="JSON.parse(form.if_need_subtitle.toLowerCase())">
<span style="margin-left:30px;">字体颜色：</span>
......@@ -1379,94 +1461,8 @@ const onMarketingTemplateSubmitGpt = async () => {
<el-input v-model="marketing_template.reference" :autosize="true" type="textarea"></el-input>
</el-form-item>
<el-form-item label="文案字数">
<el-input-number v-model="marketing_template.words_num" :min="10" :max="500" controls-position="right"/>
<el-input-number v-model="marketing_template.words_num" :min="100" :max="500" controls-position="right"/>
</el-form-item>
<el-form-item label="封面图片">
<el-switch v-model="marketing_template.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())">
<el-form-item style="margin-left: 68px;">
<!-- :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" />
</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" />
</div>
</el-form-item>
<el-form-item style="margin-left: 60px;">
<el-upload ref="upload_cover" :show-file-list="false" :limit="1"
accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP"
:action="actionUrl" :on-success="MarketingTemplateUploadCoverPicSuccess" :on-exceed="handleMarketingTemplateUploadCoverPicExceed"
:on-error="handleUploadError" :data="{ width: form.img_size.width, height: form.img_size.height }">
<el-button type="primary" size="small" style="margin: 10px;">上传图片</el-button>
</el-upload>
<el-button type="danger" size="small" @click="onClearMarketingTemplatePic('cover')" style="margin-left: 15px;">清除图片</el-button>
<el-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('cover')" style="margin-left: 30px;">预览</el-button>
</el-form-item>
<el-form-item label="封面文字">
<div style="width: 100%;">
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('cover')">增加</el-button>
</div>
<div v-for="(pic_title, index) in marketing_template.cover_pic_titles" :key="index" class="dashed-div">
<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" />
<span style="margin-left:30px;">字体背景：</span>
<el-color-picker v-model="pic_title.bg_color" />
<span style="margin-left:30px;">字体大小：</span>
<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>
</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-form-item>
<div v-if="JSON.parse(marketing_template.if_need_product_pic.toLowerCase())">
<el-form-item style="margin-left: 68px;">
<!-- :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" />
</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" />
</div>
</el-form-item>
<el-form-item style="margin-left: 60px;">
<el-upload ref="upload_product" :show-file-list="false" :limit="1"
accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP"
:action="actionUrl" :on-success="MarketingTemplateUploadProductPicSuccess" :on-exceed="handleMarketingTemplateUploadProductPicExceed"
:on-error="handleUploadError" :data="{ width: form.img_size.width, height: form.img_size.height }">
<el-button type="primary" size="small" style="margin: 10px;">上传图片</el-button>
</el-upload>
<el-button type="danger" size="small" @click="onClearMarketingTemplatePic('product')" style="margin-left: 15px;">清除图片</el-button>
<el-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('product')" style="margin-left: 30px;">预览</el-button>
</el-form-item>
<el-form-item label="封底文字">
<div style="width: 100%;">
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('product')">增加</el-button>
</div>
<div v-for="(pic_title, index) in marketing_template.product_pic_titles" :key="index" class="dashed-div">
<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" />
<span style="margin-left:30px;">字体背景：</span>
<el-color-picker v-model="pic_title.bg_color" />
<span style="margin-left:30px;">字体大小：</span>
<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>
</el-form-item>
<el-form-item label="镜头旁白">
<el-input v-model="marketing_template.product_pic_speech" :autosize="true" type="textarea"></el-input>
</el-form-item>
</div>
</el-form>
<template #footer>
<div class="dialog-footer">
......
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