Skip to content

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

改进预览

parent f1092b02
Show whitespace changes
Inline Side-by-side
Showing with 86 additions and 61 deletions
src/views/home/compositions/useManyValues.ts
View file @ e42888b1
...@@ -353,43 +353,13 @@ export const useManyValues = () => { ...@@ -353,43 +353,13 @@ export const useManyValues = () => {
product_pic_local: "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", 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",
product_pic_with_text_local: "assets/2024/03/12/887a52c6-e022-11ee-a7de-9be5c7a16c02_resized_with_text.png", product_pic_with_text_local: "assets/2024/03/12/887a52c6-e022-11ee-a7de-9be5c7a16c02_resized_with_text.png",
product_pic_titles: [ product_pic_titles: [],
{
text: "金巧蒂原味猪肉松",
color: "#FB7D01",
bg_color: "",
font_size: 60,
position: 0.92,
},
{
text: "促销价只要8.8！快来抢购吧~",
color: "#FF008C",
bg_color: "",
font_size: 50,
position: 0.41,
},
{
text: "关注 点赞 评论\n记得一键三连哦",
color: "#000000",
bg_color: "",
font_size: 50,
position: 0.12,
},
],
product_pic_speech: "", product_pic_speech: "",
cover_pic: "http://wm-tools-backend.frp.wmdigit.com:8888/assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized.jpg", cover_pic: "http://wm-tools-backend.frp.wmdigit.com:8888/assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized.jpg",
cover_pic_local: "assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized.jpg", cover_pic_local: "assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized.jpg",
cover_pic_with_text: "http://wm-tools-backend.frp.wmdigit.com:8888/assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized_with_text.jpg", cover_pic_with_text: "http://wm-tools-backend.frp.wmdigit.com:8888/assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized_with_text.jpg",
cover_pic_with_text_local: "assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized_with_text.jpg", cover_pic_with_text_local: "assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized_with_text.jpg",
cover_pic_titles: [ cover_pic_titles: [],
{
text: "猪猪的奇妙冒险",
color: "#000000",
bg_color: "#FFFFFF",
font_size: 60,
position: 0.37,
},
],
}; };
return { return {
......
src/views/home/index.vue
View file @ e42888b1
...@@ -995,6 +995,7 @@ const MarketingTemplateUploadProductPicSuccess = (val: Wm.UploadResult) => { ...@@ -995,6 +995,7 @@ const MarketingTemplateUploadProductPicSuccess = (val: Wm.UploadResult) => {
message: '上传成功', message: '上传成功',
type: 'success' type: 'success'
}) })
onMarketingTemplateAddTextToPic('product');
} else { } else {
ElMessage({ ElMessage({
message: '上传失败：'+val.message, message: '上传失败：'+val.message,
...@@ -1025,6 +1026,7 @@ const MarketingTemplateUploadCoverPicSuccess = (val: Wm.UploadResult) => { ...@@ -1025,6 +1026,7 @@ const MarketingTemplateUploadCoverPicSuccess = (val: Wm.UploadResult) => {
message: '上传成功', message: '上传成功',
type: 'success' type: 'success'
}) })
onMarketingTemplateAddTextToPic('cover');
} else { } else {
ElMessage({ ElMessage({
message: '上传失败：'+val.message, message: '上传失败：'+val.message,
...@@ -1061,27 +1063,55 @@ const onClearMarketingTemplatePic = (type: string) => { ...@@ -1061,27 +1063,55 @@ const onClearMarketingTemplatePic = (type: string) => {
}; };
}; };
const onAddMarketingTemplatePicText = (type: string) => {
const check_if_has_pic = (type: string) => {
if ((type == 'product' && !cover_backcover.product_pic_local)
|| (type == 'cover' && !cover_backcover.cover_pic_local)) {
ElMessage({
message: '请先设置图片',
type: 'error'
})
return false;
};
return true;
};
const onAddMarketingTemplatePicText = async (type: string, action: string, index: number) => {
if (action == "add") {
if(!check_if_has_pic(type)) {return};
if (type == 'cover') {
const newElement = { const newElement = {
text: "新的文本", text: "新的文本",
color: "#000000", color: "#000000",
bg_color: "#FFFFFF", bg_color: "#FFFFFF",
font_size: 50, font_size: 60,
position: 0.5 position: 0.37
};
cover_backcover.cover_pic_titles.push(newElement);
}; };
if (type == 'product') { if (type == 'product') {
const newElement = {
text: "关注 点赞 评论\n记得一键三连哦",
color: "#DAFB01",
bg_color: "#000000",
font_size: 60,
position: 0.2
};
cover_backcover.product_pic_titles.push(newElement); cover_backcover.product_pic_titles.push(newElement);
}; };
if (type == 'cover') {
cover_backcover.cover_pic_titles.push(newElement);
}; };
if (action == "del") {
if (type == 'cover') {cover_backcover.cover_pic_titles.splice(index, 1)};
if (type == 'product') {cover_backcover.product_pic_titles.splice(index, 1)};
};
await onMarketingTemplateAddTextToPic(type);
}; };
const onMarketingTemplateAddTextToPic = async (type: string) => { const onMarketingTemplateAddTextToPic = async (type: string) => {
if ((type == 'product' && !cover_backcover.product_pic_local) if ((type == 'product' && !cover_backcover.product_pic_local)
|| (type == 'cover' && !cover_backcover.cover_pic_local)) { || (type == 'cover' && !cover_backcover.cover_pic_local)) {
ElMessage({ ElMessage({
message: '封面或封底缺少图片，请检查', message: '请先设置图片',
type: 'error' type: 'error'
}) })
return false; return false;
...@@ -1096,7 +1126,17 @@ const onMarketingTemplateAddTextToPic = async (type: string) => { ...@@ -1096,7 +1126,17 @@ const onMarketingTemplateAddTextToPic = async (type: string) => {
cover_backcover.cover_pic_with_text_local = cover_backcover.cover_pic_local; cover_backcover.cover_pic_with_text_local = cover_backcover.cover_pic_local;
return true; return true;
}; };
let params = {}; let params = {
image_path: '',
image_texts: [{
text: '',
text_color: '',
text_bg_color: '',
font_size: '',
position: '',
lang: '',
}],
};
if (type == 'product') { if (type == 'product') {
const texts = cover_backcover.product_pic_titles.map(item => { const texts = cover_backcover.product_pic_titles.map(item => {
return { return {
...@@ -1129,6 +1169,16 @@ const onMarketingTemplateAddTextToPic = async (type: string) => { ...@@ -1129,6 +1169,16 @@ const onMarketingTemplateAddTextToPic = async (type: string) => {
image_texts: texts, image_texts: texts,
}; };
}; };
params.image_texts.forEach((item, index) => {
if (!item.text_color || item.text_color.trim() === '') {
ElMessage({
message: '字体颜色不能为空',
type: 'error'
})
return false;
}
});
try { try {
const result = await text2videoService.submitAddTextToImg(params); const result = await text2videoService.submitAddTextToImg(params);
// console.log(result); // console.log(result);
...@@ -1223,6 +1273,9 @@ const onTest = () => { ...@@ -1223,6 +1273,9 @@ const onTest = () => {
const onSelectCoverChange = (value: any) => { const onSelectCoverChange = (value: any) => {
cover_backcover.cover_pic = form.adapt_result_json[parseInt(value)-1].本镜配图; 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; cover_backcover.cover_pic_local = form.adapt_result_json[parseInt(value)-1].local_image_path;
cover_backcover.cover_pic_with_text = 'src/assets/waiting.png';
cover_backcover.cover_pic_with_text_local = '';
onMarketingTemplateAddTextToPic('cover');
} }
</script> </script>
...@@ -1409,20 +1462,21 @@ const onSelectCoverChange = (value: any) => { ...@@ -1409,20 +1462,21 @@ const onSelectCoverChange = (value: any) => {
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<div style="width: 100%;"> <div style="width: 100%;">
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('cover')">增加文字</el-button> <el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('cover', 'add', 0)">增加文字</el-button>
<el-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('cover')">预览</el-button> <!-- <el-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('cover')">预览</el-button> -->
</div> </div>
<div v-for="(pic_title, index) in cover_backcover.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> <el-input v-model="pic_title.text" :autosize="true" type="textarea" @change="onMarketingTemplateAddTextToPic('cover')"></el-input>
<span style="margin-left:10px;">字体颜色：</span> <span style="margin-left:10px;">字体颜色：</span>
<el-color-picker v-model="pic_title.color" /> <el-color-picker v-model="pic_title.color" @change="onMarketingTemplateAddTextToPic('cover')"/>
<span style="margin-left:30px;">字体背景：</span> <span style="margin-left:30px;">字体背景：</span>
<el-color-picker v-model="pic_title.bg_color" /> <el-color-picker v-model="pic_title.bg_color" @change="onMarketingTemplateAddTextToPic('cover')"/>
<span style="margin-left:30px;">字体大小：</span> <span style="margin-left:30px;">字体大小：</span>
<el-input-number v-model="pic_title.font_size" :min="1" :max="100" controls-position="right" /> <el-input-number v-model="pic_title.font_size" :min="1" :max="100" controls-position="right" @change="onMarketingTemplateAddTextToPic('cover')"/>
<span style="margin-left:30px;">在图片上的位置：</span> <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-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="cover_backcover.cover_pic_titles.splice(index, 1);" style="margin-left: 80px;">删除文字</el-button> @change="onMarketingTemplateAddTextToPic('cover')"/>
<el-button type="danger" size="small" @click="onAddMarketingTemplatePicText('cover', 'del', index)" style="margin-left: 80px;">删除文字</el-button>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
...@@ -1451,20 +1505,21 @@ const onSelectCoverChange = (value: any) => { ...@@ -1451,20 +1505,21 @@ const onSelectCoverChange = (value: any) => {
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<div style="width: 100%;"> <div style="width: 100%;">
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('product')">增加文字</el-button> <el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('product', 'add', 0)">增加文字</el-button>
<el-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('product')">预览</el-button> <!-- <el-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('product')">预览</el-button> -->
</div> </div>
<div v-for="(pic_title, index) in cover_backcover.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> <el-input v-model="pic_title.text" :autosize="true" type="textarea" @change="onMarketingTemplateAddTextToPic('product')"></el-input>
<span style="margin-left:10px;">字体颜色：</span> <span style="margin-left:10px;">字体颜色：</span>
<el-color-picker v-model="pic_title.color" /> <el-color-picker v-model="pic_title.color" @change="onMarketingTemplateAddTextToPic('product')"/>
<span style="margin-left:30px;">字体背景：</span> <span style="margin-left:30px;">字体背景：</span>
<el-color-picker v-model="pic_title.bg_color" /> <el-color-picker v-model="pic_title.bg_color" @change="onMarketingTemplateAddTextToPic('product')"/>
<span style="margin-left:30px;">字体大小：</span> <span style="margin-left:30px;">字体大小：</span>
<el-input-number v-model="pic_title.font_size" :min="1" :max="100" controls-position="right" /> <el-input-number v-model="pic_title.font_size" :min="1" :max="100" controls-position="right" @change="onMarketingTemplateAddTextToPic('product')"/>
<span style="margin-left:30px;">在图片上的位置：</span> <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-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="cover_backcover.product_pic_titles.splice(index, 1);" style="margin-left: 80px;">删除文字</el-button> @change="onMarketingTemplateAddTextToPic('product')"/>
<el-button type="danger" size="small" @click="onAddMarketingTemplatePicText('product', 'del', index)" style="margin-left: 80px;">删除文字</el-button>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="封底旁白"> <el-form-item label="封底旁白">
......
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