1

src/components/SelectionPopup.vue

@@ -63,6 +63,9 @@
           </template>
         </div>
       </div>
+      <template v-if="playAudio">
+        <audio ref="audioRef" :src="currentAudio" style="display: none" @canplay="audioCanplay"></audio>
+      </template>
     </template>
     <slot></slot>
   </t-popup>
@@ -84,6 +87,7 @@ const props = withDefaults(
     placement?: string;
     needCategorie?: boolean;
     reset?: boolean;
+    playAudio?: boolean;
   }>(),
   {
     disabled: false,
@@ -93,10 +97,16 @@ const props = withDefaults(
     placement: 'bottom',
     needCategorie: true,
     reset: false,
+    playAudio: true,
   },
 );
 const emit = defineEmits(['update:modelValue', 'update:value', 'itemChange']);
 const visible = ref(props.modelValue);
+
+const audioRef = ref<HTMLAudioElement>();
+// 当前选择的音调或音色的音频链接
+const currentAudio = ref('');
+
 const popupList = reactive({
   list: [],
 });
@@ -107,6 +117,11 @@ const getList = async () => {
   popupList.list = list;
 };
 
+// 音频播放
+const audioCanplay = () => {
+  audioRef.value.play();
+};
+
 watch(
   () => props.modelValue,
   (v) => {
@@ -132,6 +147,8 @@ const onSelect = (item: any) => {
   visible.value = false;
   emit('update:value', item.id);
   emit('itemChange', item);
+  //
+  currentAudio.value = item.audition_url;
 };
 </script>
 

src/pages/createLive/index.vue

@@ -221,18 +221,6 @@ const getEditInfo = async (id: any, type: string) => {
   }
 };
 
-onMounted(() => {
-  let obj = getElBounding(publicTool.value);
-  toolHeight.value = obj.height;
-  if (routeQuery.id && routeQuery.type) {
-    // 获取编辑数据
-    getEditInfo(routeQuery.id, routeQuery.type);
-  }
-  store.commit('live/setName', route.query.title ? route.query.title : '');
-  // 记录本次路由
-  window.localStorage.setItem(createLiveRouteKey, JSON.stringify(route.query));
-});
-
 const backHome = () => {
   router.replace({
     path: routerConfig.home.path,
@@ -405,6 +393,18 @@ const confirm = async () => {
     console.log(e);
   }
 };
+
+onMounted(() => {
+  let obj = getElBounding(publicTool.value);
+  toolHeight.value = obj.height;
+  if (routeQuery.id && routeQuery.type) {
+    // 获取编辑数据
+    getEditInfo(routeQuery.id, routeQuery.type);
+  }
+  store.commit('live/setName', route.query.title ? route.query.title : '');
+  // 记录本次路由
+  window.localStorage.setItem(createLiveRouteKey, JSON.stringify(route.query));
+});
 </script>
 
 <style lang="less">

src/pages/home/components/myDigtalPeople.vue

@@ -11,7 +11,7 @@
         >
           <template #hover>
             <div class="my-digtal-people-hover">
-              <template v-if="item.is_live == 1">
+              <template v-if="item.is_live == 0">
                 <Button class="digtal-people-start-end" theme="danger" height="40px" @click="startLive(item)"
                   >开启直播</Button
                 >
@@ -69,6 +69,7 @@ const startLive = (item: any) => {
       status: item.status,
       digital_image: item.cover_url,
       digital_name: item.name,
+      is_live: item.is_live,
     },
   });
 };

src/pages/startLive/components/audio.vue

@@ -20,9 +20,12 @@
         <div class="live-icon">
           <LiveSvg></LiveSvg>
         </div>
-        <span>直播中</span>
+        <span>
+          <template v-if="route.query.is_live == '1'"> 直播中 </template>
+          <template v-else> 未开播 </template>
+        </span>
       </div>
-      <div class="stop">
+      <div class="stop" v-if="route.query.is_live == '1'">
         <!-- <span class="start-time">00：52：20</span> -->
         <Button theme="opacity" @click="closeLive">关闭直播</Button>
       </div>
@@ -39,7 +42,8 @@ import LiveSvg from '@/assets/svg/home/live.svg';
 import PlayAudioSvg from '@/assets/svg/home/playAudio.svg';
 import { closeLiveTask } from '@/utils/api/userApi';
 import { ref, watch } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
+import routerConfig from '@/router/tool';
 import { show_message } from '@/utils/tool';
 const props = withDefaults(
   defineProps<{
@@ -52,6 +56,7 @@ const props = withDefaults(
   },
 );
 const route = useRoute();
+const router = useRouter();
 
 const canPlay = ref(false);
 
@@ -64,9 +69,31 @@ watch(
   },
 );
 
+watch(
+  () => props.value,
+  (v) => {
+    if (v) {
+      textareaValue.value = v;
+    } else {
+      textareaValue.value = '';
+    }
+  },
+);
+
 const textareaStatus = ref(false);
 const textareaValue = ref(props.value);
 
+const changeRouteQuery = () => {
+  router.replace({
+    path: routerConfig.startLive.path,
+    name: routerConfig.startLive.name,
+    query: {
+      ...route.query,
+      is_live: '0',
+    },
+  });
+};
+
 const showTextarea = () => {
   textareaStatus.value = true;
 };
@@ -76,20 +103,12 @@ const closeLive = async () => {
     let res: any = await closeLiveTask(route.query.id);
     if (res.code == 0) {
       show_message('关播成功', 'success');
+      changeRouteQuery();
     }
   } catch (e) {
     console.log(e);
   }
 };
-
-watch(
-  () => props.value,
-  (v) => {
-    if (v) {
-      textareaValue.value = v;
-    }
-  },
-);
 </script>
 
 <style lang="less">

src/pages/startLive/components/video.vue

@@ -74,6 +74,8 @@ const updateTime = () => {
 <style lang="less">
 .start-live-video {
   padding: 20px 40px;
+  display: flex;
+  align-items: center;
   .default-video {
     background: rgb(61, 222, 99);
     height: 100%;

src/pages/startLive/index.vue

 <template>
   <div class="custom-start-live-page">
     <Video :video="realVideo" v-model="progress" :video2="addVideo" :playId="addVideoId" @playEnd="playEnd"></Video>
-    <Audio :url="realAudio" v-model="progress"></Audio>
+    <Audio :url="realAudio" v-model="progress" :value="liveInfo.content"></Audio>
     <Human @createAudio="createAudio"></Human>
     <div v-show="false">
       <audio :src="audioFile" ref="audioRef" @canplay="audioCanplay"></audio>
@@ -17,12 +17,14 @@ import Video from './components/video.vue';
 import Audio from './components/audio.vue';
 import Human from './components/human.vue';
 import { getLiveDetail } from '@/utils/api/userApi';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { show_message, isDev } from '@/utils/tool';
 import { initPyqtToWindow, injectWindow } from '@/utils/pyqt';
 import { getliveTaskReply } from '@/utils/api/userApi';
+import routerConfig from '@/router/tool';
 
 const route = useRoute();
+const router = useRouter();
 const routeQuery = route.query;
 
 const progress = ref(0);
@@ -35,22 +37,6 @@ const imgs = {
   mp4: new URL('../../assets/img/1.mp4', import.meta.url).href,
   mp3: new URL('../../assets/img/2.wav', import.meta.url).href,
 };
-const getBase64 = (file) => {
-  return new Promise((resolve, reject) => {
-    let reader = new FileReader();
-    let fileResult = '';
-    reader.readAsDataURL(file);
-    reader.onload = () => {
-      fileResult = reader.result;
-    };
-    reader.onerror = (error) => {
-      reject(error);
-    };
-    reader.onloadend = () => {
-      resolve(fileResult);
-    };
-  });
-};
 
 const file = ref();
 
@@ -65,11 +51,8 @@ const audioCanplay = () => {
 const liveInfo = reactive({
   // 原始链接
   video: [],
-  // 音频从视频中提取出来
-  audio: '',
   content: '',
-  status: 1,
-  startTime: '00:50:00',
+  type_content: '',
 });
 
 // 定时检测python的方法是否注入成功
@@ -188,8 +171,20 @@ const getDetail = async () => {
     if (res.code == 0) {
       liveInfo.video = res.data.url;
       liveInfo.content = res.data.content;
+      if (res.data.type_content) {
+        liveInfo.content = res.data.type_content;
+      }
       // 通知python合并
       submitVideo();
+      // 开播成功
+      router.replace({
+        path: routerConfig.startLive.path,
+        name: routerConfig.startLive.name,
+        query: {
+          ...route.query,
+          is_live: '1',
+        },
+      });
     }
   } catch (e) {
     console.log(e);

src/utils/request.ts

@@ -8,6 +8,7 @@ import { show_message, isDev } from './tool';
 const getBaseUrl = () => {
   if (isDev()) {
     //
+    // return 'http://156.247.11.21:92/';
     return '';
   }
   // return 'http://video-assistant.test';
@@ -16,6 +17,7 @@ const getBaseUrl = () => {
 
 const instance = axios.create({
   baseURL: getBaseUrl(),
+  // withCredentials: false,
   withCredentials: isDev() ? true : false,
 });