视频详情页 - 修复异步时机导致报错视频地址为空的问题

@@ -60,13 +60,33 @@ export default {
     return {
     return {
       detail: {
       detail: {
         mp: ''
         mp: ''
-      }
+      },
+      initTimer: null,
+      mp: null
     }
     }
   },
   },
   created() {
   created() {
   },
   },
   mounted() {
   mounted() {
-    setTimeout(() => {
+    this.initPlayer();
+    // 配置16:9高度比
+    const width = document.getElementById('mui-player-' + this.item.id).clientWidth;
+    const height = (width * 9) / 16;
+    document.getElementById('mui-player-' + this.item.id).height = height;
+  },
+  beforeUnmount() {
+    if (this.initTimer) {
+      clearTimeout(this.initTimer);
+      this.initTimer = null;
+    }
+    if (this.mp && typeof this.mp.destroy === 'function') {
+      this.mp.destroy();
+    }
+  },
+  methods: {
+    initPlayer() {
+      if (!this.item || !this.item.id || !this.item.video) return;
+      this.initTimer = setTimeout(() => {
         var mp = new MuiPlayer({
         var mp = new MuiPlayer({
           container: '#mui-player-' + this.item.id,
           container: '#mui-player-' + this.item.id,
           title: this.item.title,
           title: this.item.title,
@@ -87,16 +107,11 @@ export default {
         var video = mp.video();
         var video = mp.video();
         // 监听原生video事件
         // 监听原生video事件
         var _this = this;
         var _this = this;
-      video && video.addEventListener('play', function (event) {
+        video && video.addEventListener('play', function () {
           _this.handleAction('play', _this.item.id)
           _this.handleAction('play', _this.item.id)
         });
         });
-    }, 500)
-    // 配置16:9高度比
-    const width = document.getElementById('mui-player-' + this.item.id).clientWidth;
-    const height = (width * 9) / 16;
-    document.getElementById('mui-player-' + this.item.id).height = height;
-  },
-  methods: {
+      }, 0)
+    }
   }
   }
 }
 }
 </script>
 </script>

@@ -14,7 +14,7 @@
     </div>
     </div>
 
 
     <div class="video-player">
     <div class="video-player">
-      <video-detail :item="videoInfo" @on-click="onVideoDetail" />
+      <video-detail v-if="videoInfo.video" :item="videoInfo" @on-click="onVideoDetail" />
     </div>
     </div>
 
 
     <div class="video-main">
     <div class="video-main">
@@ -33,8 +33,8 @@
             </van-tab> -->
             </van-tab> -->
             <van-tab :title="'留言 ' + comment_num" :title-style="tabClass">
             <van-tab :title="'留言 ' + comment_num" :title-style="tabClass">
               <!-- <router-view ref="childRef" name="comment" /> -->
               <!-- <router-view ref="childRef" name="comment" /> -->
-              <video-detail-comment v-if="videoInfo" ref="childRef" :info="videoInfo" />
-              <donate-bar v-if="videoInfo" :perf-id="videoInfo.perf_id">为TA助力</donate-bar>
+              <video-detail-comment v-if="videoInfo.id" ref="childRef" :info="videoInfo" />
+              <donate-bar v-if="videoInfo.id" :perf-id="videoInfo.perf_id">为TA助力</donate-bar>
             </van-tab>
             </van-tab>
           </van-tabs>
           </van-tabs>
         </van-col>
         </van-col>
@@ -109,7 +109,7 @@ const tabClass = {
 const store = mainStore();
 const store = mainStore();
 const { comment_num } = storeToRefs(store);
 const { comment_num } = storeToRefs(store);
 
 
-const videoInfo = ref('');
+const videoInfo = ref({});
 const childRef = ref(null);
 const childRef = ref(null);
 onMounted(async () => {
 onMounted(async () => {
   // 检查$route.path判断tab默认值
   // 检查$route.path判断tab默认值
@@ -117,7 +117,9 @@ onMounted(async () => {
   /**
   /**
    * 获取视频详情
    * 获取视频详情
    */
    */
-  const { data } = await prodInfoAPI({ prod_id: $route.query.prod_id });
+  const res = await prodInfoAPI({ prod_id: $route.query.prod_id });
+  if (!res) return;
+  const { data } = res;
   videoInfo.value = data;
   videoInfo.value = data;
   // 动态调整留言数量
   // 动态调整留言数量
   store.changeCommentNum(data.comment_num);
   store.changeCommentNum(data.comment_num);
@@ -141,7 +143,9 @@ const onVideoDetail = (v) => {
 
 
 onBeforeRouteLeave(async () => {
 onBeforeRouteLeave(async () => {
   // 缓存作品信息，给其他页使用
   // 缓存作品信息，给其他页使用
-  const { data } = await prodInfoAPI({ prod_id: $route.query.prod_id });
+  const res = await prodInfoAPI({ prod_id: $route.query.prod_id });
+  if (!res) return;
+  const { data } = res;
   videoInfo.value = data;
   videoInfo.value = data;
   store.changeVideoDetail(videoInfo.value);
   store.changeVideoDetail(videoInfo.value);
 })
 })