为合成视频和保存按钮添加loading，目前只测了保存按钮没测合成视频按钮，但应该没问题

Flex

2025-04-18 340fd2abbf1eba3031ccff621cf1f5d265a77604

为合成视频和保存按钮添加loading，目前只测了保存按钮没测合成视频按钮，但应该没问题

 easegen-front/src/views/chooseTemplate/index.vue

@@ -32,9 +32,9 @@
      <div class="top-right">
        <span v-if="saveTime">{{ saveTime }} {{ t('courseCenter.saved') }}</span>
        <!-- 保存按钮 -->
        <el-button size="small" @click="saveSubmit('save')">{{ t('common.save') }}</el-button>
        <el-button size="small" @click="saveSubmit('save')" :loading="SaveLoading" >{{ t('common.save') }}</el-button>
        <!-- 合成视频 -->
        <el-button type="primary" size="small" @click="saveSubmit('')">{{
        <el-button type="primary" size="small" @click="saveSubmit('')" :loading="MakeLoading" >{{
          t('courseCenter.composeViode')
        }}</el-button>
      </div>
@@ -682,6 +682,7 @@
//引入人脸识别方法
import { useFaceDetection } from '@/utils/HaveFace'
import {coursesDelete} from "@/api/pptTemplate";
import { tr } from 'element-plus/es/locale'
const editorHtml = useEditorHtml()
const router = useRouter() // 路由
const route = useRoute() //
@@ -691,6 +692,10 @@
const message = useMessage()
const isEditing = ref(false)
const inputRef = ref(null)
//保存的加载动画
const SaveLoading = ref(false)
//视频合成的加载动画
const MakeLoading = ref(false)
// 切换到编辑模式
const toggleEdit = () => {
  isEditing.value = true
@@ -1427,9 +1432,22 @@

//传入 save 则代表保存，空字符传则是合成视频
const saveSubmit = async (type) => {

  if( type.length === 0 ){
    //此时为视频合成
    MakeLoading.value = true
    SaveLoading.value = true
  }else{
    //此时为保存
    SaveLoading.value = true
  }

  // 检查场景是否为空
  if (!PPTArr.value || PPTArr.value.length === 0) {
    message.warning('场景为空，请先上传PPT！')
    //关闭视频合成与保存按钮的loading动画
    MakeLoading.value = false
    SaveLoading.value = false
    return false
  }

@@ -1442,6 +1460,9 @@
  const IsHaveFace = await detectFacesInImages(InitPpt)
  if( IsHaveFace ){
    message.warning('当前ppt中包含人脸元素, 为方便后续视频生成 ,请去除该元素')
    //关闭视频合成与保存按钮的loading动画
    MakeLoading.value = false
    SaveLoading.value = false
    return false
  }
  //保存课程
@@ -1583,6 +1604,9 @@
        scenes.push(formatItem)
      } catch (error) {
        console.error(`处理第 ${index + 1} 个场景时出错:`, error)
        //关闭视频合成与保存按钮的loading动画
        MakeLoading.value = false
        SaveLoading.value = false
        //抛出异常
        throw error
      }
@@ -1597,6 +1621,9 @@
    saveSubmitForm.scenes = cloneDeep(scenes)
    console.log('saveSubmitForm:', cloneDeep(saveSubmitForm))
  } catch (error) {
    //关闭视频合成与保存按钮的loading动画
    MakeLoading.value = false
    SaveLoading.value = false
    console.error('保存表单数据时出错:', error)
  }

@@ -1606,12 +1633,17 @@
      if (res) {
        message.success('保存成功！')
        saveTime.value = getSaveTime()
        MakeLoading.value = false
        SaveLoading.value = false
        return true // 返回保存成功标志
      }
      return false
    } catch (error) {
      console.error('保存课程时出错:', error)
      message.error('保存失败，请重试')
      //关闭视频合成与保存按钮的loading动画
      MakeLoading.value = false
      SaveLoading.value = false
      return false
    }
  } else {
@@ -1620,6 +1652,9 @@
      const saveResult = await saveSubmit('save')
      if (!saveResult) {
        message.error('保存失败，请重试后再合成视频')
        //关闭视频合成与保存按钮的loading动画
        MakeLoading.value = false
        SaveLoading.value = false
        return
      }

@@ -1631,6 +1666,9 @@
        // 校验背景宽高
        if (!item.width || !item.height) {
          message.warning('背景尺寸无效，请检查宽高设置，或者重新选择模板')
          //关闭视频合成与保存按钮的loading动画
          MakeLoading.value = false
          SaveLoading.value = false
          return
        }
        if (item.driverType == 1) {
@@ -1654,6 +1692,9 @@

      if (warningStrArr.length > 0) {
        warningDialog.value.open(warningStrArr.map((warning) => `<div>${warning}</div>`).join(''))
        //关闭视频合成与保存按钮的loading动画
        MakeLoading.value = false
        SaveLoading.value = false
        return
      }

@@ -1661,13 +1702,22 @@
      try {
        const res = await pptTemplateApi.megerMedia(saveSubmitForm)
        if (res) {
          //关闭视频合成与保存按钮的loading动画
          MakeLoading.value = false
          SaveLoading.value = false
          message.success('合成视频任务提交成功，请到我的视频中查看！')
        }
      } catch (error) {
        //关闭视频合成与保存按钮的loading动画
        MakeLoading.value = false
        SaveLoading.value = false
        console.error('合成视频失败:', error)
        message.error('合成视频失败，请重试')
      }
    } catch (error) {
      //关闭视频合成与保存按钮的loading动画
      MakeLoading.value = false
      SaveLoading.value = false
      console.error('保存或合成过程出错:', error)
      message.error('操作失败，请重试')
    }