ai换脸新增loading

src/pages/faceTransplant/components/record.vue

 <template>
   <div class="face-transplant-record">
-    <template v-if="list.length">
+    <template v-if="loading">
+      <Loading></Loading>
+    </template>
+    <template v-else-if="list.length">
       <div class="record-items" v-for="item in list" :key="item.id">
         <div class="left">
           <img :src="item.cover_url" alt="" />
@@ -24,7 +27,9 @@
           </div>
         </div>
         <CustomizationStatus :status="item.audit_status">
-          <template #progressTip> <div class="progress-tips">该过程需要10～24小时</div> </template>
+          <template #progressTip>
+            <div class="progress-tips">{{ tipsLabel }}</div>
+          </template>
         </CustomizationStatus>
       </div>
     </template>
@@ -38,8 +43,11 @@
 import CustomizationStatus from '@/components/CustomizationStatus';
 import Button from '@/components/Button.vue';
 import { pyDownloadVideo } from '@/utils/pyqt';
+import { show_message } from '@/utils/tool';
+import Loading from '@/components/loading.vue';
+import { ref } from 'vue';
 
-const props = withDefaults(
+withDefaults(
   defineProps<{
     list?: any[];
     loading: boolean;
@@ -49,14 +57,19 @@ const props = withDefaults(
   },
 );
 
+const tipsLabel = ref('该过程需要10～24小时');
+
 // 下载视频
 const onDownloadVideo = (item: any) => {
   if (item.audit_status != 3) {
     return;
   }
-  // 通知python下载视频
-  let url =
-    'http://yunyi-live.oss-cn-hangzhou.aliyuncs.com/upload/1/2023-08-22c130e428-cab2-4e1e-8904-88054d84bc1b.mp4';
+  // 下载item的视频
+  let url = item.video_url;
+  if (!url) {
+    show_message('没有视频');
+    return;
+  }
   pyDownloadVideo({
     list: [url],
     id: `change_face_${item.id}`,
@@ -72,6 +85,7 @@ const onDownloadVideo = (item: any) => {
   background: #303030;
   box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.04);
   padding: 20px;
+  position: relative;
   .record-empty {
     height: 100%;
     display: flex;

src/pages/faceTransplant/index.vue

 <template>
-  <Customizable
-    class="face-transplant-izable"
-    :video="true"
-    :submit="submit"
-    :icon="getIcon()"
-    :uploadInfo="uploadInfo"
-    :dialogInfo="dialogInfo"
-    :label="navigationLabels.faceTransplant"
-  >
+  <Customizable class="face-transplant-izable" :video="true" :icon="getIcon()" :label="navigationLabels.faceTransplant">
     <template #header>
       <Header></Header>
     </template>
@@ -34,17 +26,12 @@ import CustomTabPanel from '@/components/CustomTabPanel';
 import Customizable from '@/components/Customizable';
 import PersonSvg from '@/assets/svg/home/faceTransplant.svg';
 import { onMounted, ref, reactive } from 'vue';
-import { customizedImageSubmission } from '@/utils/api/userApi';
-import { show_message } from '@/utils/tool';
 import routerConfig from '@/router/tool';
-import { useStore } from 'vuex';
 import { jumpPageAddNavigation } from '@/router/jump';
 import { getDigitalPeopleList } from '@/service/Common';
 
 const { addNavigation } = jumpPageAddNavigation();
 
-const store = useStore();
-
 const currentTab = ref('1');
 // 子组件loading
 const loading = ref(false);
@@ -53,28 +40,10 @@ const personList = reactive({
   list: [],
 });
 
-const imgs = {
-  success: new URL('../../assets/svg/upload/success2.svg', import.meta.url).href,
-};
-
-const dialogInfo = {
-  title: navigationLabels.faceTransplant,
-  inputLabel: '数字人名称',
-  placeholder: '请输入数字人名称',
-};
-
 const getIcon = () => {
   return <PersonSvg></PersonSvg>;
 };
 
-const uploadInfo = {
-  label1: '选择视频',
-  label2: '或拖视频到此处上传',
-  buttonLabel: '选择视频',
-  successIcon: imgs.success,
-  successButtonLabel: '替换视频',
-};
-
 // 获取我的数字人列表
 const getList = async () => {
   loading.value = true;
@@ -83,20 +52,6 @@ const getList = async () => {
   loading.value = false;
 };
 
-const submit = async (params: any) => {
-  try {
-    let res: any = await customizedImageSubmission(params);
-    if (res.code == 0) {
-      show_message('提交成功', 'success');
-      // 更新记录
-      getList();
-      return true;
-    }
-  } catch (e) {
-    console.log(e);
-  }
-};
-
 onMounted(() => {
   addNavigation(routerConfig.faceTransplant.path);
   // 获取数字人列表