优化视频地址可能丢失的问题

src/pages/jckc/zy_detail.vue

@@ -7,12 +7,15 @@
     <div class="look px-2" v-else @click="download">
       <van-icon name="down" /> 点击下载
     </div> -->
-    <div class="look px-2" v-if="detailInfo.file_allow_preview_h5==1 && suffix=='mp4'">浏览量：{{detailInfo.kf_view_num}}</div>
+    <div class="look px-2" v-if="detailInfo.file_allow_preview_h5 == 1 && suffix == 'mp4'">浏览量：{{ detailInfo.kf_view_num
+      }}
+    </div>
     <!-- <div class="look px-2" v-else @click="download">
       <van-icon name="down" /> 点击下载
     </div> -->
 
-    <div v-if="detailInfo.file_allow_preview_h5==2" style="height: 100px;line-height: 120px;text-align: center;font-size: 12px;color: #ccc;">
+    <div v-if="detailInfo.file_allow_preview_h5 == 2"
+      style="height: 100px;line-height: 120px;text-align: center;font-size: 12px;color: #ccc;">
       <div class="flex items-center justify-center">
         当前文件暂不支持预览
         <div class="look1 px-2 ml-2" @click="download">
@@ -21,16 +24,17 @@
       </div>
     </div>
     <template v-else>
-      <div v-if="suffix=='mp4'" class="videoDiv">
+      <div v-if="suffix == 'mp4'" class="videoDiv">
         <div class="aliPlayerShow" id="J_prismPlayer"></div>
       </div>
-      <audio v-else-if="suffix=='mp3'" ref="urlResouce" controls :src="commonUrl">
+      <audio v-else-if="suffix == 'mp3'" ref="urlResouce" controls :src="commonUrl">
         <source :src="commonUrl" type="audio/mp3">
       </audio>
-      <div v-else-if="suffix=='pdf'" style="height: calc(100% - 60px);">
+      <div v-else-if="suffix == 'pdf'" style="height: calc(100% - 60px);">
         <iframe :src="commonUrl" frameborder="0" width="100%" height="100%"></iframe>
       </div>
-      <div v-else-if="suffix=='doc' || suffix=='docx'" style="height: 100px;line-height: 140px;text-align: center;font-size: 12px;color: #ccc;">
+      <div v-else-if="suffix == 'doc' || suffix == 'docx'"
+        style="height: 100px;line-height: 140px;text-align: center;font-size: 12px;color: #ccc;">
         当前文件暂不支持预览
       </div>
       <div v-else style="height: calc(100% - 60px);">
@@ -39,15 +43,15 @@
     </template>
 
     <div class="flex justify-between items-center px-3 mt-2">
-      <div style="font-size: 15px;">{{detailInfo.kf_name}}</div>
+      <div style="font-size: 15px;">{{ detailInfo.kf_name }}</div>
       <div class="flex space-x-4 tip">
         <div @click="handleFinger">
-          <van-icon :name="detailInfo.is_like==0 ? 'good-job-o' : 'good-job'" />
-          <span>{{detailInfo.kf_like_num}}</span>
+          <van-icon :name="detailInfo.is_like == 0 ? 'good-job-o' : 'good-job'" />
+          <span>{{ detailInfo.kf_like_num }}</span>
         </div>
         <div @click="handleLoveIcon">
-          <van-icon :name="detailInfo.is_fav==0 ? 'like-o' : 'like'" />
-          <span>{{detailInfo.kf_fav_num}}</span>
+          <van-icon :name="detailInfo.is_fav == 0 ? 'like-o' : 'like'" />
+          <span>{{ detailInfo.kf_fav_num }}</span>
         </div>
       </div>
     </div>
@@ -58,6 +62,7 @@
 import { getFullUrl } from '@/utils/helper';
 import { files_detail, likeApi_add, likeApi_del, collectApi_add, collectApi_del } from "./api.js";
 import { useRouter } from 'vue-router';
+import { onMounted } from 'vue';
 const router = useRouter();
 const parentId = ref(router.currentRoute.value.params.id);
 const parentKkId = ref("");
@@ -69,8 +74,9 @@ const sourceUrl = ref("");
 
 const player = ref("");
 const onClickLeft = () => history.back();
-
-initDetailData();
+onMounted(() => {
+  initDetailData();
+});
 function initDetailData() {
   detailLoad.value = true;
   files_detail({ kf_id: parentId.value }).then((res) => {
@@ -90,7 +96,7 @@ function initDetailData() {
       //示例设置清晰度为超清和高清的地址("OD": "<原画URL>","FD": "<流畅URL>","LD":"<标清URL>","SD": "<高清URL>","HD": "<超清URL>","2K": "<2K URL>","4K": "<4K URL>")
       // source:'{"HD":"http://******/player/hdexample.mp4","SD":"http://******/player/sdexample.mp4"}'
 
-      sourceUrl.value = { "OD": detailInfo.value.kf_path_od, "FD": detailInfo.value.kf_path_fd, "LD": detailInfo.value.kf_path_ld };
+      sourceUrl.value = { "OD": detailInfo.value.kf_path_od || detailInfo.value.kf_path, "FD": detailInfo.value.kf_path_fd, "LD": detailInfo.value.kf_path_ld };
       let stringSourceUrl = JSON.stringify(sourceUrl.value)
       // 初始换aliplayer
       player.value = new Aliplayer({
@@ -217,6 +223,7 @@ const handleLoveIcon = () => {
 .zyDetailContent {
   height: 100vh;
   background: #fcfeff;
+
   .top {
     position: absolute;
     z-index: 10;
@@ -224,6 +231,7 @@ const handleLoveIcon = () => {
     color: #fff;
     font-size: 12px;
   }
+
   .look {
     background: rgba($color: #050026, $alpha: 0.5);
     border-radius: 5px;
@@ -235,6 +243,7 @@ const handleLoveIcon = () => {
     color: #fff;
     font-size: 12px;
   }
+
   .look1 {
     background: rgba($color: #050026, $alpha: 0.5);
     border-radius: 5px;
@@ -246,16 +255,19 @@ const handleLoveIcon = () => {
     color: #fff;
     font-size: 12px;
   }
+
   .videoDiv {
     height: 220px;
   }
+
   video {
     width: 100%;
   }
+
   .tip {
     color: #00a3ff;
     font-size: 12px;
     white-space: nowrap;
   }
 }
-</style>
+</style>