Skip to content

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

改进预览

parent f1092b02
Hide 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 = () => {
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_local: "assets/2024/03/12/887a52c6-e022-11ee-a7de-9be5c7a16c02_resized_with_text.png",
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_titles: [],
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_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_local: "assets/2024/03/12/10170c9e-e035-11ee-a7de-9be5c7a16c02_resized_with_text.jpg",
cover_pic_titles: [
{
text: "猪猪的奇妙冒险",
color: "#000000",
bg_color: "#FFFFFF",
font_size: 60,
position: 0.37,
},
],
cover_pic_titles: [],
};
return {
......
src/views/home/index.vue
View file @ e42888b1
......@@ -995,6 +995,7 @@ const MarketingTemplateUploadProductPicSuccess = (val: Wm.UploadResult) => {
message: '上传成功',
type: 'success'
})
onMarketingTemplateAddTextToPic('product');
} else {
ElMessage({
message: '上传失败：'+val.message,
......@@ -1025,6 +1026,7 @@ const MarketingTemplateUploadCoverPicSuccess = (val: Wm.UploadResult) => {
message: '上传成功',
type: 'success'
})
onMarketingTemplateAddTextToPic('cover');
} else {
ElMessage({
message: '上传失败：'+val.message,
......@@ -1061,27 +1063,55 @@ const onClearMarketingTemplatePic = (type: string) => {
};
};
const onAddMarketingTemplatePicText = (type: string) => {
const newElement = {
text: "新的文本",
color: "#000000",
bg_color: "#FFFFFF",
font_size: 50,
position: 0.5
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;
};
if (type == 'product') {
cover_backcover.product_pic_titles.push(newElement);
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 = {
text: "新的文本",
color: "#000000",
bg_color: "#FFFFFF",
font_size: 60,
position: 0.37
};
cover_backcover.cover_pic_titles.push(newElement);
};
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);
};
};
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) => {
if ((type == 'product' && !cover_backcover.product_pic_local)
|| (type == 'cover' && !cover_backcover.cover_pic_local)) {
ElMessage({
message: '封面或封底缺少图片，请检查',
message: '请先设置图片',
type: 'error'
})
return false;
......@@ -1096,7 +1126,17 @@ const onMarketingTemplateAddTextToPic = async (type: string) => {
cover_backcover.cover_pic_with_text_local = cover_backcover.cover_pic_local;
return true;
};
let params = {};
let params = {
image_path: '',
image_texts: [{
text: '',
text_color: '',
text_bg_color: '',
font_size: '',
position: '',
lang: '',
}],
};
if (type == 'product') {
const texts = cover_backcover.product_pic_titles.map(item => {
return {
......@@ -1129,6 +1169,16 @@ const onMarketingTemplateAddTextToPic = async (type: string) => {
image_texts: texts,
};
};
params.image_texts.forEach((item, index) => {
if (!item.text_color || item.text_color.trim() === '') {
ElMessage({
message: '字体颜色不能为空',
type: 'error'
})
return false;
}
});
try {
const result = await text2videoService.submitAddTextToImg(params);
// console.log(result);
......@@ -1223,6 +1273,9 @@ 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;
cover_backcover.cover_pic_with_text = 'src/assets/waiting.png';
cover_backcover.cover_pic_with_text_local = '';
onMarketingTemplateAddTextToPic('cover');
}
</script>
......@@ -1409,20 +1462,21 @@ const onSelectCoverChange = (value: any) => {
</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>
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('cover', 'add', 0)">增加文字</el-button>
<!-- <el-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('cover')">预览</el-button> -->
</div>
<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>
<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>
<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>
<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>
<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>
<el-slider v-model="pic_title.position" :step="0.01" :min="0" :max="1" show-input vertical height="100px" style="margin-top: 10px;"
@change="onMarketingTemplateAddTextToPic('cover')"/>
<el-button type="danger" size="small" @click="onAddMarketingTemplatePicText('cover', 'del', index)" style="margin-left: 80px;">删除文字</el-button>
</div>
</el-form-item>
</div>
......@@ -1451,20 +1505,21 @@ const onSelectCoverChange = (value: any) => {
</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>
<el-button type="primary" size="small" @click="onAddMarketingTemplatePicText('product', 'add', 0)">增加文字</el-button>
<!-- <el-button type="success" size="small" @click="onMarketingTemplateAddTextToPic('product')">预览</el-button> -->
</div>
<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>
<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>
<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>
<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>
<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>
<el-slider v-model="pic_title.position" :step="0.01" :min="0" :max="1" show-input vertical height="100px" style="margin-top: 10px;"
@change="onMarketingTemplateAddTextToPic('product')"/>
<el-button type="danger" size="small" @click="onAddMarketingTemplatePicText('product', 'del', index)" style="margin-left: 80px;">删除文字</el-button>
</div>
</el-form-item>
<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