订单列表和详情页视频播放问题fix

@@ -25,11 +25,14 @@
         <!-- 商品信息 -->
         <order-item-info class="item-wrapper" />
         <!-- 鉴定视频 -->
-        <div
-          class="video-wrapper item-wrapper"
-          v-if="orderDetail.appraiseVideoUrl"
-          @click="() => onVideoHandler()"
-        ></div>
+        <div class="video-img" v-if="orderDetail.appraiseVideoUrl" @click="() => onVideoHandler()"></div>
+        <div ref="videoWrapper" class="video-wrapper">
+          <VideoPlayer
+            ref="videoPlayer"
+            class="video-player"
+            :source="orderDetail.appraiseVideoUrl"
+          ></VideoPlayer>
+        </div>
         <!-- 价格信息 -->
         <div class="price-info item-wrapper">
           <p>
@@ -115,14 +118,6 @@
           "
         />
       </div>
-
-      <div ref="videoWrapper">
-        <VideoPlayer
-          ref="videoPlayer"
-          class="play-video"
-          :source="orderDetail.appraiseVideoUrl"
-        ></VideoPlayer>
-      </div>
     </div>
   </layout-app>
 </template>
@@ -192,12 +187,6 @@ export default {
       }
       this.$refs.videoPlayer.parentHandleclick();
     }
-  },
-  mounted() {
-    if (this.$yoho.isAndroid) {
-      this.$refs.videoWrapper.style.position = "absolute";
-      this.$refs.videoWrapper.style.top = "-1000px";
-    }
   }
 };
 </script>
@@ -232,13 +221,25 @@ export default {
     }
   }
 
-  .video-wrapper {
-    width: 100%;
+  .video-img {
+    margin-top: 40px;
+    margin-left: -15px;
+    width: calc(100% + 20px);
     height: 378px;
     background: url("~statics/image/order/video-big@3x.png");
     background-size: cover;
   }
 
+  .video-wrapper {
+    overflow: hidden;
+  }
+
+  .video-player {
+    display: block;
+    height: 30px;
+    opacity: 0;
+  }
+
   .item-wrapper {
     border-top: 1px solid #eee;
     padding: 40px 0;
@@ -326,11 +327,5 @@ export default {
     font-size: 28px;
     color: #d0021b;
   }
-
-  .play-video {
-    display: inline-block;
-    height: 10px;
-    opacity: 0;
-  }
 }
 </style>

@@ -118,7 +118,7 @@ export default {
   },
   watch: {
     source() {
-      this.showPlayer();
+      // this.showPlayer();
     }
   },
   mounted() {
@@ -131,6 +131,7 @@ export default {
   },
   methods: {
     parentHandleclick() {
+      this.showVideo = true;
       this.player.play();
       const timeId = setTimeout(() => {
         this.player.requestFullscreen();
@@ -142,7 +143,6 @@ export default {
         return;
       }
 
-      this.showVideo = true;
       this.$nextTick(() => {
         this.initPlayer();
       });

@@ -24,10 +24,10 @@
                 @on-video="params => onVideoHandle(params)"
               />
             </div>
-            <div ref="videoWrapper">
+            <div ref="videoWrapper" class="video-wrapper">
               <VideoPlayer
                 :ref="order.orderCode"
-                class="play-video"
+                class="video-player"
                 :source="order.appraiseVideoUrl"
               ></VideoPlayer>
             </div>
@@ -146,20 +146,23 @@ export default {
   .order-list-scroll-wrap {
     .list-wrapper {
       li {
-        padding: 40px 40px;
+        padding: 40px 40px 0;
         border-bottom: 1px solid #eee;
       }
 
-      .play-video {
-        display: inline-block;
-        height: 10px;
-        opacity: 0;
-      }
-
       & :last-child {
         border-bottom: 0;
       }
     }
   }
+
+  .video-wrapper {
+    overflow: hidden;
+  }
+  .video-player {
+    display: block;
+    height: 40px;
+    opacity: 0;
+  }
 }
 </style>