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

@@ -60,43 +60,58 @@ export default {
     return {
       detail: {
         mp: ''
-      }
+      },
+      initTimer: null,
+      mp: null
     }
   },
   created() {
   },
   mounted() {
-    setTimeout(() => {
-      var mp = new MuiPlayer({
-        container: '#mui-player-' + this.item.id,
-        title: this.item.title,
-        src: this.item.video,
-        poster: this.item.cover ? this.item.cover : DEFAULT_COVER,
-        // poster: DEFAULT_COVER,
-        autoFit: false,
-        videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
-          {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'},
-          {attrKey:'playsinline',attrValue:'playsinline'},
-          {attrKey:'x5-video-player-type',attrValue:'h5-page'},
-        ]
-      })
-      this.detail = _.cloneDeep(this.item);
-      // 传回数据
-      this.$emit('on-click', this.detail);
-      this.mp = mp;
-      var video = mp.video();
-      // 监听原生video事件
-      var _this = this;
-      video && video.addEventListener('play', function (event) {
-        _this.handleAction('play', _this.item.id)
-      });
-    }, 500)
+    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({
+          container: '#mui-player-' + this.item.id,
+          title: this.item.title,
+          src: this.item.video,
+          poster: this.item.cover ? this.item.cover : DEFAULT_COVER,
+          // poster: DEFAULT_COVER,
+          autoFit: false,
+          videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
+            {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'},
+            {attrKey:'playsinline',attrValue:'playsinline'},
+            {attrKey:'x5-video-player-type',attrValue:'h5-page'},
+          ]
+        })
+        this.detail = _.cloneDeep(this.item);
+        // 传回数据
+        this.$emit('on-click', this.detail);
+        this.mp = mp;
+        var video = mp.video();
+        // 监听原生video事件
+        var _this = this;
+        video && video.addEventListener('play', function () {
+          _this.handleAction('play', _this.item.id)
+        });
+      }, 0)
+    }
   }
 }
 </script>

@@ -14,7 +14,7 @@
     </div>
 
     <div class="video-player">
-      <video-detail :item="videoInfo" @on-click="onVideoDetail" />
+      <video-detail v-if="videoInfo.video" :item="videoInfo" @on-click="onVideoDetail" />
     </div>
 
     <div class="video-main">
@@ -33,8 +33,8 @@
             </van-tab> -->
             <van-tab :title="'留言 ' + comment_num" :title-style="tabClass">
               <!-- <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-tabs>
         </van-col>
@@ -109,7 +109,7 @@ const tabClass = {
 const store = mainStore();
 const { comment_num } = storeToRefs(store);
 
-const videoInfo = ref('');
+const videoInfo = ref({});
 const childRef = ref(null);
 onMounted(async () => {
   // 检查$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;
   // 动态调整留言数量
   store.changeCommentNum(data.comment_num);
@@ -141,7 +143,9 @@ const onVideoDetail = (v) => {
 
 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;
   store.changeVideoDetail(videoInfo.value);
 })