From 8f488cf5dc006ea583c4f33b9348f5e588552a82 Mon Sep 17 00:00:00 2001
From: Flex <q1406482700@163.com>
Date: 星期一, 09 六月 2025 14:22:41 +0800
Subject: [PATCH] 修改登录页以及声音模型显示
---
easegen-front/src/views/chooseTemplate/index.vue | 273 +++++++++++++++++++++++++++++++++--------------------
1 files changed, 169 insertions(+), 104 deletions(-)
diff --git a/easegen-front/src/views/chooseTemplate/index.vue b/easegen-front/src/views/chooseTemplate/index.vue
index 8e333f3..44352d7 100644
--- a/easegen-front/src/views/chooseTemplate/index.vue
+++ b/easegen-front/src/views/chooseTemplate/index.vue
@@ -586,36 +586,44 @@
</div>
</div>
<div class="SoundModelArea" v-loading="soundLoading">
- <div
- class="ModealBox"
- v-for="(item, index) in audioList"
- :key="index"
- @click="handleSelect(item)"
- @mouseenter="handleMouseenter(item)"
- @mouseleave="handleMouseleave(item)"
- :class="item.isSelect ? 'slectModel' : ''"
- >
- <div class="ImgBox">
- <img :src="item.avatarUrl" alt="" />
+ <div class="SoundModelAreaBox" v-for="(value, key, index) in audioList" :key="index">
+ <div class="SoundClassTit">
+ <el-divider content-position="center"> {{ languageClass(key) }} </el-divider>
+ <!-- <el-divider content-position="center"> 123 </el-divider> -->
</div>
- <div class="TextArea">
- <p> {{ item.name }} </p>
- <p> {{ item.introduction }} </p>
+ <div class="SoundClassContent">
+ <div
+ class="ModealBox"
+ v-for="(item, index) in value"
+ :key="index"
+ @click="handleSelect(key, item)"
+ @mouseenter="handleMouseenter(key, item)"
+ @mouseleave="handleMouseleave(key, item)"
+ :class="item.isSelect ? 'slectModel' : ''"
+ >
+ <div class="ImgBox">
+ <img :src="item.avatarUrl" alt="" />
+ </div>
+ <div class="TextArea">
+ <p> {{ item.name }} </p>
+ <p> {{ item.introduction }} </p>
+ </div>
+ <img
+ class="play-img"
+ v-if="item.isHover && !item.isPlay"
+ src="@/assets/imgs/play.png"
+ alt=""
+ @click.stop="playAudio(item)"
+ />
+ <img
+ class="play-img"
+ v-if="item.isHover && item.isPlay"
+ src="@/assets/imgs/pause.png"
+ alt=""
+ @click.stop="SoundpauseAudio(item)"
+ />
+ </div>
</div>
- <img
- class="play-img"
- v-if="item.isHover && !item.isPlay"
- src="@/assets/imgs/play.png"
- alt=""
- @click.stop="playAudio(item)"
- />
- <img
- class="play-img"
- v-if="item.isHover && item.isPlay"
- src="@/assets/imgs/pause.png"
- alt=""
- @click.stop="SoundpauseAudio(item)"
- />
</div>
</div>
<div class="ButtonArea">
@@ -740,7 +748,6 @@
import { useEditorHtml } from '@/hooks/web/useEditorHtml'
import { ElMessage, ElMessageBox } from 'element-plus'
import { DICT_TYPE, getIntDictOptions, getStrDictOptions } from '@/utils/dict'
-import { measureMemory } from 'vm'
import { any } from 'vue-types'
const editorHtml = useEditorHtml()
@@ -773,7 +780,6 @@
hostValue.value = item
chooseHost1(2)
// dialogVisible2.value = true
-
}
const chooseHost1 = (index) => {
if (index == 1) {
@@ -1012,11 +1018,11 @@
// 鑾峰彇澹伴煶绫诲埆
getVoiceType()
}
- if( selectList.value === undefined ){
+ if (selectList.value === undefined) {
// 鑾峰彇妯″瀷鍒楄〃
getSoundModelList()
}
- if( ChangeSoundTypeList.value === undefined ){
+ if (ChangeSoundTypeList.value === undefined) {
// 鑾峰彇鍙�夌殑澹伴煶绫诲瀷鍒楄〃
GetSoundTypeList()
}
@@ -1088,10 +1094,11 @@
soundLoading.value = true
// 璇█绫诲瀷
soundQueryParams.language = selectLanguage?.value.value ?? ''
- soundQueryParams.language = soundQueryParams.language === "all_Language"?"":soundQueryParams.language
+ soundQueryParams.language =
+ soundQueryParams.language === 'all_Language' ? '' : soundQueryParams.language
// 鎬у埆
soundQueryParams.gender = changeAudio?.value ?? ''
- soundQueryParams.gender = Number(soundQueryParams.gender) === 3?"":soundQueryParams.gender
+ soundQueryParams.gender = Number(soundQueryParams.gender) === 3 ? '' : soundQueryParams.gender
// 澹伴煶绫诲瀷
soundQueryParams.voiceType = activeSoundType?.value.value ?? ''
const data = await pptTemplateApi.videlPageList(soundQueryParams)
@@ -1100,11 +1107,45 @@
item.isPlay = false
item.isSelect = false
})
- audioList.value = data.list
+ let LanguageArr = {}
+ data.list.forEach((item) => {
+ if (LanguageArr?.[item.language] !== undefined) {
+ LanguageArr[item.language].push(item)
+ } else {
+ LanguageArr = { ...LanguageArr, [item.language]: [{ ...item }] }
+ }
+ })
+ console.log(LanguageArr)
+
+ audioList.value = LanguageArr
total.value = data.total
+ if (selectList.value !== undefined && selectList.value !== null) {
+ selectList.value = null //鍒濆鍖�
+ }
+ // 鍋滄褰撳墠鎾斁鐨勯煶棰�
+ if (SoundcurrentAudio.value) {
+ SoundcurrentAudio.value.pause()
+ SoundcurrentAudio.value = null
+ }
+
+ // 閲嶇疆褰撳墠鎾斁鐘舵��
+ if (SoundcurrentlyPlaying.value) {
+ SoundcurrentlyPlaying.value.isPlay = false
+ SoundcurrentlyPlaying.value = null
+ }
} finally {
soundLoading.value = false
}
+}
+// 褰撳墠璇鏄剧ず
+const languageClass = (language) => {
+ let text = ''
+ languageList.value.forEach((element) => {
+ if (element.value === language) {
+ text = element.label
+ }
+ })
+ return text
}
// 璇閫夋嫨
const LanguageChange = (event) => {
@@ -1124,15 +1165,30 @@
SoundTypeList.value.forEach((element) => {
if (element.value === event) {
ChangeSoundTypeList.value = { ...element }
+
+ if (selectList.value !== undefined && selectList.value !== null) {
+ selectList.value = null //鍒濆鍖�
+ }
+ // 鍋滄褰撳墠鎾斁鐨勯煶棰�
+ if (SoundcurrentAudio.value) {
+ SoundcurrentAudio.value.pause()
+ SoundcurrentAudio.value = null
+ }
+
+ // 閲嶇疆褰撳墠鎾斁鐘舵��
+ if (SoundcurrentlyPlaying.value) {
+ SoundcurrentlyPlaying.value.isPlay = false
+ SoundcurrentlyPlaying.value = null
+ }
}
})
getSoundModelList()
}
//閫夋嫨澹伴煶妯″瀷
const selectList = ref()
-const handleSelect = (item) => {
+const handleSelect = (key, item) => {
selectList.value = [item]
- audioList.value.forEach((child) => {
+ audioList.value[key].forEach((child) => {
if (child.id == item.id) {
child.isSelect = true
} else {
@@ -1149,16 +1205,14 @@
})
// 纭畾鎸夐挳鐐瑰嚮澶勭悊鍑芥暟
const submitForm = () => {
- console.log( selectLanguage.value )
- if( selectLanguage.value.value === "all_Language" ){
+ console.log(selectLanguage.value)
+ if (selectLanguage.value.value === 'all_Language') {
message.warning('璇峰皢璇鎸夐挳鐢卞叏閮ㄨ绉嶄慨鏀逛负鎮ㄩ渶瑕佺敓鎴愮殑澹伴煶鐨勬枃鏈殑璇绫诲瀷')
return false
}
- console.log(ChangeSoundTypeList.value.value)
- if (ChangeSoundTypeList.value.value === 2) {
+ if (ChangeSoundTypeList.value.value === 2) {
//姝ゆ椂涓洪�氱敤
- console.log(selectList.value)
- if (selectList.value === undefined) {
+ if (selectList.value === undefined || selectList.value === null) {
message.warning('璇烽�夋嫨澹伴煶妯″瀷')
return false
}
@@ -1205,15 +1259,15 @@
// })
}
// 榧犳爣绉诲叆涓庣Щ鍑�
-const handleMouseenter = (item) => {
- audioList.value.forEach((child) => {
+const handleMouseenter = (key, item) => {
+ audioList.value[key].forEach((child) => {
if (child.id == item.id) {
child.isHover = true
}
})
}
-const handleMouseleave = (item) => {
- audioList.value.forEach((child) => {
+const handleMouseleave = (key, item) => {
+ audioList.value[key].forEach((child) => {
if (child.id == item.id) {
child.isHover = false
}
@@ -1439,7 +1493,7 @@
}
const chooseTemplate = (currTemplate) => {
- console.log( "currTemplate", currTemplate)
+ console.log('currTemplate', currTemplate)
selectTemplate.value = cloneDeep(currTemplate)
templates.value.forEach((item) => {
item.isActive = false
@@ -2086,9 +2140,10 @@
language: selectLanguage.value?.value
}
- if( ChangeSoundTypeList.value.value === 2 ){ //姝ゆ椂閫夊彇浜嗗０闊虫ā鍨�
+ if (ChangeSoundTypeList.value.value === 2) {
+ //姝ゆ椂閫夊彇浜嗗０闊虫ā鍨�
params.humanId = null
- }else if( ChangeSoundTypeList.value.value === 1 ){
+ } else if (ChangeSoundTypeList.value.value === 1) {
params.voiceId = null
}
@@ -2156,14 +2211,13 @@
}
const goBack = () => {
- if (PPTArr.value.length==0) {
+ if (PPTArr.value.length == 0) {
pptTemplateApi.coursesDelete(courseInfo.value.id).then((res) => {
router.go(-1)
})
- }else {
+ } else {
router.go(-1)
}
-
}
const editorRef = shallowRef()
@@ -2892,60 +2946,71 @@
height: 86%;
margin: 10px 0;
overflow-y: scroll;
- display: flex;
- flex-wrap: wrap;
- align-content: flex-start;
- > .ModealBox {
- width: 47%;
- margin: 10px 1%;
- display: flex;
- justify-content: space-around;
- align-items: center;
- position: relative;
- > .ImgBox {
- width: 26%;
+
+ .SoundModelAreaBox {
+ width: 100%;
+ .SoundClassTit {
+ width: 80%;
margin: 0 auto;
- img {
- width: 100%;
+ }
+ .SoundClassContent {
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ align-content: flex-start;
+ > .ModealBox {
+ width: 47%;
+ margin: 10px 1%;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ position: relative;
+ > .ImgBox {
+ width: 26%;
+ margin: 0 auto;
+ img {
+ width: 100%;
+ }
+ }
+ > .TextArea {
+ width: 48%;
+ p {
+ font-size: 12px;
+ margin: 4px 0;
+ padding-left: 6px;
+ box-sizing: border-box;
+ text-align: left;
+ word-wrap: break-word;
+ }
+ }
+ > .play-img {
+ width: 32px;
+ height: 32px;
+ cursor: pointer;
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ margin: auto;
+ z-index: +10;
+ }
+ }
+ .ModealBox:hover {
+ background-color: #000;
+ opacity: 0.5;
+ border: 2px solid #0183f4;
+ > .TextArea {
+ p {
+ color: #fff;
+ }
+ }
+ }
+ > .slectModel {
+ border: 2px solid #1989fa;
+ border-radius: 6px;
}
}
- > .TextArea {
- width: 48%;
- p {
- font-size: 12px;
- margin: 4px 0;
- padding-left: 6px;
- box-sizing: border-box;
- text-align: left;
- word-wrap: break-word;
- }
- }
- > .play-img {
- width: 32px;
- height: 32px;
- cursor: pointer;
- position: absolute;
- top: 0;
- right: 0;
- left: 0;
- bottom: 0;
- margin: auto;
- z-index: +10;
- }
- }
- .ModealBox:hover {
- background-color: #000;
- opacity: 0.5;
- border: 2px solid #0183f4;
- > .TextArea {
- p {
- color: #fff;
- }
- }
- }
- > .slectModel {
- border: 2px solid #1989fa;
- border-radius: 6px;
}
}
.ButtonArea {
--
Gitblit v1.9.3