|
|
@@ -21,68 +21,53 @@ |
|
|
> |
|
|
> |
|
|
< |
|
|
< |
|
|
</div> |
|
|
</div> |
|
|
<!-- 箭头 --> |
|
|
|
|
|
<!-- <div |
|
|
|
|
|
v-if="showChooseModel && videoType" |
|
|
|
|
|
class="openChooseModel" |
|
|
|
|
|
@click="showChooseModel = false" |
|
|
|
|
|
> |
|
|
|
|
|
<img src="../../assets/img/arrowLeft.png" alt="" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div |
|
|
|
|
|
v-if="!showChooseModel" |
|
|
|
|
|
class="closeChooseModel" |
|
|
|
|
|
@click="showChooseModel = true" |
|
|
|
|
|
> |
|
|
|
|
|
<img src="../../assets/img/arrowRight.png" alt="" /> |
|
|
|
|
|
</div> --> |
|
|
|
|
|
<!-- tab栏 --> |
|
|
<!-- tab栏 --> |
|
|
<p>性别</p> |
|
|
|
|
|
|
|
|
<p>{{ $t("createVideo.sex") }}</p> |
|
|
<div class="tab" v-show="showChooseModel"> |
|
|
<div class="tab" v-show="showChooseModel"> |
|
|
<div |
|
|
<div |
|
|
class="tabItem" |
|
|
class="tabItem" |
|
|
:class="modelTabItemActive == 0 ? 'tabItemActive' : ''" |
|
|
:class="modelTabItemActive == 0 ? 'tabItemActive' : ''" |
|
|
@click="changeTabSex(0)" |
|
|
@click="changeTabSex(0)" |
|
|
> |
|
|
> |
|
|
全部 |
|
|
|
|
|
|
|
|
{{ $t("createVideo.all") }} |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
<div |
|
|
class="tabItem" |
|
|
class="tabItem" |
|
|
:class="modelTabItemActive == 1 ? 'tabItemActive' : ''" |
|
|
:class="modelTabItemActive == 1 ? 'tabItemActive' : ''" |
|
|
@click="changeTabSex(1)" |
|
|
@click="changeTabSex(1)" |
|
|
> |
|
|
> |
|
|
男性 |
|
|
|
|
|
|
|
|
{{ $t("createVideo.male") }} |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
<div |
|
|
class="tabItem" |
|
|
class="tabItem" |
|
|
:class="modelTabItemActive == 2 ? 'tabItemActive' : ''" |
|
|
:class="modelTabItemActive == 2 ? 'tabItemActive' : ''" |
|
|
@click="changeTabSex(2)" |
|
|
@click="changeTabSex(2)" |
|
|
> |
|
|
> |
|
|
女性 |
|
|
|
|
|
|
|
|
{{ $t("createVideo.female") }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<p>视频比例</p> |
|
|
|
|
|
|
|
|
<p>{{ $t("createVideo.videoRatio") }}</p> |
|
|
<div class="tab" v-show="showChooseModel"> |
|
|
<div class="tab" v-show="showChooseModel"> |
|
|
<div |
|
|
<div |
|
|
class="tabItem" |
|
|
class="tabItem" |
|
|
:class="modelTabItemActive2 == 0 ? 'tabItemActive' : ''" |
|
|
:class="modelTabItemActive2 == 0 ? 'tabItemActive' : ''" |
|
|
@click="changeTabVideoType(0)" |
|
|
@click="changeTabVideoType(0)" |
|
|
> |
|
|
> |
|
|
全部 |
|
|
|
|
|
|
|
|
{{ $t("createVideo.all") }} |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
<div |
|
|
class="tabItem" |
|
|
class="tabItem" |
|
|
:class="modelTabItemActive2 == 2 ? 'tabItemActive' : ''" |
|
|
:class="modelTabItemActive2 == 2 ? 'tabItemActive' : ''" |
|
|
@click="changeTabVideoType(2)" |
|
|
@click="changeTabVideoType(2)" |
|
|
> |
|
|
> |
|
|
横屏 |
|
|
|
|
|
|
|
|
{{ $t("createVideo.landscape") }} |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
<div |
|
|
class="tabItem" |
|
|
class="tabItem" |
|
|
:class="modelTabItemActive2 == 1 ? 'tabItemActive' : ''" |
|
|
:class="modelTabItemActive2 == 1 ? 'tabItemActive' : ''" |
|
|
@click="changeTabVideoType(1)" |
|
|
@click="changeTabVideoType(1)" |
|
|
> |
|
|
> |
|
|
竖屏 |
|
|
|
|
|
|
|
|
{{ $t("createVideo.portrait") }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 模版列表 --> |
|
|
<!-- 模版列表 --> |
|
|
@@ -124,28 +109,28 @@ |
|
|
:class="tabItemActive == 1 ? 'tabItemActive' : ''" |
|
|
:class="tabItemActive == 1 ? 'tabItemActive' : ''" |
|
|
@click="tabItemActive = 1" |
|
|
@click="tabItemActive = 1" |
|
|
> |
|
|
> |
|
|
文案 |
|
|
|
|
|
|
|
|
{{ $t("createVideo.copywriting") }} |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
<div |
|
|
class="tabItem" |
|
|
class="tabItem" |
|
|
:class="tabItemActive == 2 ? 'tabItemActive' : ''" |
|
|
:class="tabItemActive == 2 ? 'tabItemActive' : ''" |
|
|
@click="tabItemActive = 2" |
|
|
@click="tabItemActive = 2" |
|
|
> |
|
|
> |
|
|
背景 |
|
|
|
|
|
|
|
|
{{ $t("createVideo.BackgroundImage") }} |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
<div |
|
|
class="tabItem" |
|
|
class="tabItem" |
|
|
:class="tabItemActive == 3 ? 'tabItemActive' : ''" |
|
|
:class="tabItemActive == 3 ? 'tabItemActive' : ''" |
|
|
@click="tabItemActive = 3" |
|
|
@click="tabItemActive = 3" |
|
|
> |
|
|
> |
|
|
素材 |
|
|
|
|
|
|
|
|
{{ $t("createVideo.material") }} |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
<div |
|
|
class="tabItem" |
|
|
class="tabItem" |
|
|
:class="tabItemActive == 4 ? 'tabItemActive' : ''" |
|
|
:class="tabItemActive == 4 ? 'tabItemActive' : ''" |
|
|
@click="tabItemActive = 4" |
|
|
@click="tabItemActive = 4" |
|
|
> |
|
|
> |
|
|
字幕 |
|
|
|
|
|
|
|
|
{{ $t("createVideo.subtitles") }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 文案 只能使用v-if,不能使用v-show--> |
|
|
<!-- 文案 只能使用v-if,不能使用v-show--> |
|
|
@@ -171,13 +156,13 @@ |
|
|
type="textarea" |
|
|
type="textarea" |
|
|
:placeholder="$t('createVideo.aiText')" |
|
|
:placeholder="$t('createVideo.aiText')" |
|
|
/> |
|
|
/> |
|
|
|
|
|
|
|
|
<span |
|
|
<span |
|
|
class="pointer" |
|
|
|
|
|
@click="getPreviewAudio" |
|
|
|
|
|
style="margin-right: 10px; font-size: 20px" |
|
|
style="margin-right: 10px; font-size: 20px" |
|
|
>🔊</span |
|
|
|
|
|
|
|
|
class="pointer" |
|
|
|
|
|
@click="insertIcon" |
|
|
|
|
|
>🕗</span |
|
|
> |
|
|
> |
|
|
<span class="pointer" @click="insertIcon">🕗</span> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<p>{{ $t("createVideo.languages") }}</p> |
|
|
<p>{{ $t("createVideo.languages") }}</p> |
|
|
<!-- 语言 --> |
|
|
<!-- 语言 --> |
|
|
@@ -190,7 +175,7 @@ |
|
|
<el-option |
|
|
<el-option |
|
|
v-for="item in languageOptions" |
|
|
v-for="item in languageOptions" |
|
|
:key="item.value" |
|
|
:key="item.value" |
|
|
:label="item.name" |
|
|
|
|
|
|
|
|
:label="lanChange == 'zh-cn' ? item.chineseName : item.name" |
|
|
:value="item.id" |
|
|
:value="item.id" |
|
|
> |
|
|
> |
|
|
<img |
|
|
<img |
|
|
@@ -198,7 +183,9 @@ |
|
|
alt="" |
|
|
alt="" |
|
|
style="width: 20px; margin-right: 10px; vertical-align: text-top" |
|
|
style="width: 20px; margin-right: 10px; vertical-align: text-top" |
|
|
/> |
|
|
/> |
|
|
<span style="line-height: 20px">{{ item.name }}</span> |
|
|
|
|
|
|
|
|
<span style="line-height: 20px">{{ |
|
|
|
|
|
lanChange == "zh-cn" ? item.chineseName : item.name |
|
|
|
|
|
}}</span> |
|
|
</el-option> |
|
|
</el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
<p>{{ $t("createVideo.voices") }}</p> |
|
|
<p>{{ $t("createVideo.voices") }}</p> |
|
|
@@ -213,7 +200,13 @@ |
|
|
<el-option |
|
|
<el-option |
|
|
v-for="item in soundOptions" |
|
|
v-for="item in soundOptions" |
|
|
:key="item.value" |
|
|
:key="item.value" |
|
|
:label="item.displayName" |
|
|
|
|
|
|
|
|
:label=" |
|
|
|
|
|
(lanChange == 'zh-cn' |
|
|
|
|
|
? item.displayName + ` (${item.sex == 1 ? '男' : '女'})` |
|
|
|
|
|
: item.localName + |
|
|
|
|
|
` (${item.sex == 1 ? 'male' : 'female'})`) + |
|
|
|
|
|
returnAge(item.ageType) |
|
|
|
|
|
" |
|
|
:value="item.id" |
|
|
:value="item.id" |
|
|
/> |
|
|
/> |
|
|
</el-select> |
|
|
</el-select> |
|
|
@@ -227,10 +220,19 @@ |
|
|
> |
|
|
> |
|
|
<el-option |
|
|
<el-option |
|
|
v-for="item in soundStyleOptions" |
|
|
v-for="item in soundStyleOptions" |
|
|
:key="item" |
|
|
|
|
|
:label="item" |
|
|
|
|
|
:value="item" |
|
|
|
|
|
/> |
|
|
|
|
|
|
|
|
:key="item.name" |
|
|
|
|
|
:label="lanChange == 'zh-cn' ? item.name : item.engName" |
|
|
|
|
|
:value="item.name" |
|
|
|
|
|
> |
|
|
|
|
|
<div style="padding: 0 20px"> |
|
|
|
|
|
{{ lanChange == "zh-cn" ? item.name : item.engName }} |
|
|
|
|
|
<span |
|
|
|
|
|
style="float: right; cursor: pointer" |
|
|
|
|
|
@click.stop="ListenVoices(item.url)" |
|
|
|
|
|
>🔊</span |
|
|
|
|
|
> |
|
|
|
|
|
</div> |
|
|
|
|
|
</el-option> |
|
|
</el-select> |
|
|
</el-select> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 背景 --> |
|
|
<!-- 背景 --> |
|
|
@@ -241,18 +243,19 @@ |
|
|
:class="bjTabItemActive == 1 ? 'tabItemActive' : ''" |
|
|
:class="bjTabItemActive == 1 ? 'tabItemActive' : ''" |
|
|
@click="bjTabItemActive = 1" |
|
|
@click="bjTabItemActive = 1" |
|
|
> |
|
|
> |
|
|
系统背景 |
|
|
|
|
|
|
|
|
{{ $t("createVideo.systemBGI") }} |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
<div |
|
|
class="tabItem" |
|
|
class="tabItem" |
|
|
:class="bjTabItemActive == 2 ? 'tabItemActive' : ''" |
|
|
:class="bjTabItemActive == 2 ? 'tabItemActive' : ''" |
|
|
@click="bjTabItemActive = 2" |
|
|
@click="bjTabItemActive = 2" |
|
|
> |
|
|
> |
|
|
个人背景 |
|
|
|
|
|
|
|
|
{{ $t("createVideo.personBGI") }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 背景图片展示 --> |
|
|
|
|
|
|
|
|
<!-- 系统背景图片展示 --> |
|
|
<div |
|
|
<div |
|
|
|
|
|
v-if="bjTabItemActive == 1" |
|
|
class="bjSystemBox" |
|
|
class="bjSystemBox" |
|
|
v-infinite-scroll="loadMoreSystemBGI" |
|
|
v-infinite-scroll="loadMoreSystemBGI" |
|
|
:infinite-scroll-disabled="overLoadSystemBG" |
|
|
:infinite-scroll-disabled="overLoadSystemBG" |
|
|
@@ -265,6 +268,21 @@ |
|
|
<img class="boxCentreImg" :src="item.material" alt="" /> |
|
|
<img class="boxCentreImg" :src="item.material" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 个人背景图片展示 --> |
|
|
|
|
|
<div |
|
|
|
|
|
v-if="bjTabItemActive == 3" |
|
|
|
|
|
class="bjSystemBox" |
|
|
|
|
|
v-infinite-scroll="loadMorePersonBGI" |
|
|
|
|
|
:infinite-scroll-disabled="overLoadpersonBG" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
class="bjSystemBoxItem" |
|
|
|
|
|
v-for="item in personBGIList" |
|
|
|
|
|
:key="item.id" |
|
|
|
|
|
> |
|
|
|
|
|
<img class="boxCentreImg" :src="item.material" alt="" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 素材 --> |
|
|
<!-- 素材 --> |
|
|
<div v-if="tabItemActive == 3" class="tabContent tab3"> |
|
|
<div v-if="tabItemActive == 3" class="tabContent tab3"> |
|
|
@@ -274,18 +292,19 @@ |
|
|
:class="scTabItemActive == 1 ? 'tabItemActive' : ''" |
|
|
:class="scTabItemActive == 1 ? 'tabItemActive' : ''" |
|
|
@click="scTabItemActive = 1" |
|
|
@click="scTabItemActive = 1" |
|
|
> |
|
|
> |
|
|
系统素材 |
|
|
|
|
|
|
|
|
{{ $t("createVideo.systemMaterial") }} |
|
|
</div> |
|
|
</div> |
|
|
<div |
|
|
<div |
|
|
class="tabItem" |
|
|
class="tabItem" |
|
|
:class="scTabItemActive == 2 ? 'tabItemActive' : ''" |
|
|
:class="scTabItemActive == 2 ? 'tabItemActive' : ''" |
|
|
@click="scTabItemActive = 2" |
|
|
@click="scTabItemActive = 2" |
|
|
> |
|
|
> |
|
|
个人素材 |
|
|
|
|
|
|
|
|
{{ $t("createVideo.personMaterial") }} |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 素材图片展示 --> |
|
|
|
|
|
|
|
|
<!-- 系统素材图片展示 --> |
|
|
<div |
|
|
<div |
|
|
|
|
|
v-if="scTabItemActive == 1" |
|
|
class="bjSystemBox" |
|
|
class="bjSystemBox" |
|
|
v-infinite-scroll="loadMoreSystemSCI" |
|
|
v-infinite-scroll="loadMoreSystemSCI" |
|
|
:infinite-scroll-disabled="overLoadSystemSC" |
|
|
:infinite-scroll-disabled="overLoadSystemSC" |
|
|
@@ -298,6 +317,21 @@ |
|
|
<img class="boxCentreImg" :src="item.material" alt="" /> |
|
|
<img class="boxCentreImg" :src="item.material" alt="" /> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- 个人素材图片展示 --> |
|
|
|
|
|
<div |
|
|
|
|
|
v-if="scTabItemActive == 3" |
|
|
|
|
|
class="bjSystemBox" |
|
|
|
|
|
v-infinite-scroll="loadMorePersonSCI" |
|
|
|
|
|
:infinite-scroll-disabled="overLoadpersonSC" |
|
|
|
|
|
> |
|
|
|
|
|
<div |
|
|
|
|
|
class="bjSystemBoxItem" |
|
|
|
|
|
v-for="item in personSCIList" |
|
|
|
|
|
:key="item.id" |
|
|
|
|
|
> |
|
|
|
|
|
<img class="boxCentreImg" :src="item.material" alt="" /> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<!-- 字幕 --> |
|
|
<!-- 字幕 --> |
|
|
<div v-if="tabItemActive == 4" class="tabContent"></div> |
|
|
<div v-if="tabItemActive == 4" class="tabContent"></div> |
|
|
@@ -332,6 +366,11 @@ const route = useRoute(); |
|
|
const router = useRouter(); |
|
|
const router = useRouter(); |
|
|
const { locale } = useI18n(); |
|
|
const { locale } = useI18n(); |
|
|
const lanChange = ref(locale); |
|
|
const lanChange = ref(locale); |
|
|
|
|
|
// ElMessage.error( |
|
|
|
|
|
// lanChange.value == "zh-cn" |
|
|
|
|
|
// ? `您还没有输入文案` |
|
|
|
|
|
// : `You have not entered the copy yet` |
|
|
|
|
|
// ); |
|
|
|
|
|
|
|
|
const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录 |
|
|
const AccessToken = localStorage.getItem("AccessToken"); // 判断有没有登录 |
|
|
|
|
|
|
|
|
@@ -462,16 +501,7 @@ const language = ref(""); //选择的语言 |
|
|
const sound = ref(""); // 选择的声音 |
|
|
const sound = ref(""); // 选择的声音 |
|
|
const soundStyle = ref(""); //选择的风格 |
|
|
const soundStyle = ref(""); //选择的风格 |
|
|
// 语言下拉框内容 |
|
|
// 语言下拉框内容 |
|
|
const languageOptions = ref([ |
|
|
|
|
|
{ |
|
|
|
|
|
id: "0", |
|
|
|
|
|
name: "中文", |
|
|
|
|
|
}, |
|
|
|
|
|
{ |
|
|
|
|
|
id: "1", |
|
|
|
|
|
name: "English", |
|
|
|
|
|
}, |
|
|
|
|
|
]); |
|
|
|
|
|
|
|
|
const languageOptions = ref([]); |
|
|
async function voiceTotal() { |
|
|
async function voiceTotal() { |
|
|
const res = await voiceTotalApi(); |
|
|
const res = await voiceTotalApi(); |
|
|
languageOptions.value = res.data; |
|
|
languageOptions.value = res.data; |
|
|
@@ -531,13 +561,58 @@ async function getPreviewAudio() { |
|
|
ElMessage.error(error); |
|
|
ElMessage.error(error); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
// 根据ageType返回年龄 |
|
|
|
|
|
function returnAge(ageType) { |
|
|
|
|
|
if (!ageType) { |
|
|
|
|
|
return ""; |
|
|
|
|
|
} else if (ageType == 1) { |
|
|
|
|
|
if (lanChange.value == "zh-cn") { |
|
|
|
|
|
return " 儿童"; |
|
|
|
|
|
} else { |
|
|
|
|
|
return "Child"; |
|
|
|
|
|
} |
|
|
|
|
|
} else if (ageType == 2) { |
|
|
|
|
|
if (lanChange.value == "zh-cn") { |
|
|
|
|
|
return " 少年"; |
|
|
|
|
|
} else { |
|
|
|
|
|
return "Teen"; |
|
|
|
|
|
} |
|
|
|
|
|
} else if (ageType == 3) { |
|
|
|
|
|
if (lanChange.value == "zh-cn") { |
|
|
|
|
|
return " 年轻"; |
|
|
|
|
|
} else { |
|
|
|
|
|
return "YoungAdult"; |
|
|
|
|
|
} |
|
|
|
|
|
} else if (ageType == 4) { |
|
|
|
|
|
if (lanChange.value == "zh-cn") { |
|
|
|
|
|
return " 中年"; |
|
|
|
|
|
} else { |
|
|
|
|
|
return "OlderAdult"; |
|
|
|
|
|
} |
|
|
|
|
|
} else if (ageType == 5) { |
|
|
|
|
|
if (lanChange.value == "zh-cn") { |
|
|
|
|
|
return " 老年"; |
|
|
|
|
|
} else { |
|
|
|
|
|
return "Senior"; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
// 新的试听 |
|
|
|
|
|
function ListenVoices(url) { |
|
|
|
|
|
previewAudioUrl.value = url; |
|
|
|
|
|
let audioA = document.getElementById("audio"); |
|
|
|
|
|
audioA.addEventListener("loadedmetadata", async () => { |
|
|
|
|
|
audioA.muted = false; // 将 muted 属性设置为 false |
|
|
|
|
|
await audioA.play(); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
//#endregion ---------------------------- |
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
|
//#region 背景 |
|
|
//#region 背景 |
|
|
const bjTabItemActive = ref(1); //系统或个人tab高亮 |
|
|
const bjTabItemActive = ref(1); //系统或个人tab高亮 |
|
|
const systemBGIList = ref([]); //系统背景列表 |
|
|
const systemBGIList = ref([]); //系统背景列表 |
|
|
const systemBGPageNum = ref(1); //系统背景页数 |
|
|
const systemBGPageNum = ref(1); //系统背景页数 |
|
|
const overLoadSystemBG = ref(true); |
|
|
|
|
|
|
|
|
const overLoadSystemBG = ref(true); //禁止系统背景触底刷新 |
|
|
async function getSystemBGIList() { |
|
|
async function getSystemBGIList() { |
|
|
const res = await systemBGIListApi( |
|
|
const res = await systemBGIListApi( |
|
|
systemBGPageNum.value, |
|
|
systemBGPageNum.value, |
|
|
@@ -561,19 +636,11 @@ async function loadMoreSystemBGI() { |
|
|
systemBGPageNum.value = modelPageNum.value - 1; |
|
|
systemBGPageNum.value = modelPageNum.value - 1; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
// 当横屏竖屏改变时,重新获取背景列表 |
|
|
|
|
|
watch( |
|
|
|
|
|
() => videoType, |
|
|
|
|
|
(newValue, oldValue) => { |
|
|
|
|
|
systemBGPageNum.value = 1; |
|
|
|
|
|
getSystemBGIList(); |
|
|
|
|
|
}, |
|
|
|
|
|
{ deep: true } |
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
// 个人背景 |
|
|
// 个人背景 |
|
|
const personBGIList = ref([]); //系统背景列表 |
|
|
|
|
|
const personBGPageNum = ref(1); //系统背景页数 |
|
|
|
|
|
const overLoadpersonBG = ref(true); |
|
|
|
|
|
|
|
|
const personBGIList = ref([]); //个人背景列表 |
|
|
|
|
|
const personBGPageNum = ref(1); //个人背景页数 |
|
|
|
|
|
const overLoadpersonBG = ref(true); //禁止个人背景触底刷新 |
|
|
async function getpersonBGIList() { |
|
|
async function getpersonBGIList() { |
|
|
const res = await personBGIListApi( |
|
|
const res = await personBGIListApi( |
|
|
personBGPageNum.value, |
|
|
personBGPageNum.value, |
|
|
@@ -583,7 +650,7 @@ async function getpersonBGIList() { |
|
|
personBGIList.value = res.data.list; |
|
|
personBGIList.value = res.data.list; |
|
|
overLoadpersonBG.value = false; |
|
|
overLoadpersonBG.value = false; |
|
|
} |
|
|
} |
|
|
// 加载更多系统背景图 |
|
|
|
|
|
|
|
|
// 加载更多个人背景图 |
|
|
async function loadMorePersonBGI() { |
|
|
async function loadMorePersonBGI() { |
|
|
personBGPageNum.value += 1; |
|
|
personBGPageNum.value += 1; |
|
|
const res = await personBGIListApi( |
|
|
const res = await personBGIListApi( |
|
|
@@ -597,13 +664,26 @@ async function loadMorePersonBGI() { |
|
|
personBGPageNum.value = modelPageNum.value - 1; |
|
|
personBGPageNum.value = modelPageNum.value - 1; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
// 当横屏竖屏改变时,重新获取背景列表,且还原页数和禁止刷新状态 |
|
|
|
|
|
watch( |
|
|
|
|
|
() => videoType, |
|
|
|
|
|
async (newValue, oldValue) => { |
|
|
|
|
|
systemBGPageNum.value = 1; |
|
|
|
|
|
personBGPageNum.value = 1; |
|
|
|
|
|
overLoadSystemBG.value = true; |
|
|
|
|
|
overLoadpersonBG.value = true; |
|
|
|
|
|
await getSystemBGIList(); |
|
|
|
|
|
await getpersonBGIList(); |
|
|
|
|
|
}, |
|
|
|
|
|
{ deep: true } |
|
|
|
|
|
); |
|
|
//#endregion ---------------------------- |
|
|
//#endregion ---------------------------- |
|
|
|
|
|
|
|
|
//#region 素材 |
|
|
//#region 素材 |
|
|
const scTabItemActive = ref(1); //系统或个人tab高亮 |
|
|
const scTabItemActive = ref(1); //系统或个人tab高亮 |
|
|
const systemSCIList = ref([]); //系统素材列表 |
|
|
const systemSCIList = ref([]); //系统素材列表 |
|
|
const systemSCPageNum = ref(1); //系统素材页数 |
|
|
const systemSCPageNum = ref(1); //系统素材页数 |
|
|
const overLoadSystemSC = ref(true); |
|
|
|
|
|
|
|
|
const overLoadSystemSC = ref(true); //禁止系统素材触底刷新 |
|
|
async function getSystemSCIList() { |
|
|
async function getSystemSCIList() { |
|
|
const res = await systemSCIListApi( |
|
|
const res = await systemSCIListApi( |
|
|
systemSCPageNum.value, |
|
|
systemSCPageNum.value, |
|
|
@@ -629,9 +709,9 @@ async function loadMoreSystemSCI() { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 个人素材 |
|
|
// 个人素材 |
|
|
const personSCIList = ref([]); //系统素材列表 |
|
|
|
|
|
const personSCPageNum = ref(1); //系统素材页数 |
|
|
|
|
|
const overLoadpersonSC = ref(true); |
|
|
|
|
|
|
|
|
const personSCIList = ref([]); //个人素材列表 |
|
|
|
|
|
const personSCPageNum = ref(1); //个人素材页数 |
|
|
|
|
|
const overLoadpersonSC = ref(true); //禁止个人素材触底刷新 |
|
|
async function getpersonSCIList() { |
|
|
async function getpersonSCIList() { |
|
|
const res = await personSCIListApi( |
|
|
const res = await personSCIListApi( |
|
|
personSCPageNum.value, |
|
|
personSCPageNum.value, |
|
|
@@ -675,9 +755,12 @@ const string = "createVideo.typeScript"; |
|
|
const t = globalProperties.$t(string); |
|
|
const t = globalProperties.$t(string); |
|
|
|
|
|
|
|
|
onMounted(async () => { |
|
|
onMounted(async () => { |
|
|
voiceTotal(); |
|
|
|
|
|
|
|
|
voiceTotal(); //获取声音列表 |
|
|
|
|
|
// getSystemSCIList(); |
|
|
|
|
|
// getpersonBGIList(); |
|
|
|
|
|
await getModeList("", 1, 20); //获取模版列表 |
|
|
|
|
|
getpersonSCIList(); |
|
|
getSystemSCIList(); |
|
|
getSystemSCIList(); |
|
|
await getModeList("", 1, 20); |
|
|
|
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</script> |
|
|
|
|
|
|
|
|
@@ -706,26 +789,14 @@ onMounted(async () => { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 0px; |
|
|
top: 0px; |
|
|
left: 0px; |
|
|
left: 0px; |
|
|
width: 30%; |
|
|
|
|
|
|
|
|
width: 50%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
padding: 30px; |
|
|
padding: 30px; |
|
|
transition: all 0.3s; |
|
|
transition: all 0.3s; |
|
|
// background-color: #f1f2f6; |
|
|
// background-color: #f1f2f6; |
|
|
background-color: #454545; |
|
|
background-color: #454545; |
|
|
z-index: 9; |
|
|
z-index: 9; |
|
|
.openChooseModel, |
|
|
|
|
|
.closeChooseModel { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 50%; |
|
|
|
|
|
width: 50px; |
|
|
|
|
|
height: 20px; |
|
|
|
|
|
z-index: 999; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
img { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 伸缩按钮 |
|
|
// 伸缩按钮 |
|
|
.shrinkBtn { |
|
|
.shrinkBtn { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
@@ -774,6 +845,7 @@ onMounted(async () => { |
|
|
margin: auto; |
|
|
margin: auto; |
|
|
margin-top: 10px; |
|
|
margin-top: 10px; |
|
|
display: flex; |
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 40px; |
|
|
height: 40px; |
|
|
// background-color: #fff; |
|
|
// background-color: #fff; |
|
|
@@ -781,14 +853,16 @@ onMounted(async () => { |
|
|
border-radius: 25px; |
|
|
border-radius: 25px; |
|
|
color: #b9b9b9; |
|
|
color: #b9b9b9; |
|
|
.tabItem { |
|
|
.tabItem { |
|
|
flex: 1; |
|
|
|
|
|
font-size: 16px; |
|
|
|
|
|
|
|
|
// flex: 1; |
|
|
|
|
|
width: 30%; |
|
|
|
|
|
font-size: 14px; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
line-height: 40px; |
|
|
line-height: 40px; |
|
|
border-radius: 15px; |
|
|
border-radius: 15px; |
|
|
transition: all 0.3s; |
|
|
transition: all 0.3s; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
margin: 0 10px; |
|
|
|
|
|
|
|
|
// margin: 0 10px; |
|
|
|
|
|
// padding: 0 5px; |
|
|
background-color: #000; |
|
|
background-color: #000; |
|
|
} |
|
|
} |
|
|
.tabItemActive { |
|
|
.tabItemActive { |
|
|
@@ -812,9 +886,10 @@ onMounted(async () => { |
|
|
position: relative; |
|
|
position: relative; |
|
|
padding: 20px; |
|
|
padding: 20px; |
|
|
width: 45%; |
|
|
width: 45%; |
|
|
height: 110px; |
|
|
|
|
|
margin: 0 10px 10px 0; |
|
|
|
|
|
|
|
|
height: 190px; |
|
|
|
|
|
margin: 0 20px 20px 0; |
|
|
border-radius: 15px; |
|
|
border-radius: 15px; |
|
|
|
|
|
// padding: 20px; |
|
|
// background: rgba(0, 0, 0, 0.1); |
|
|
// background: rgba(0, 0, 0, 0.1); |
|
|
background-color: #fff; |
|
|
background-color: #fff; |
|
|
z-index: 2; |
|
|
z-index: 2; |
|
|
|