拍照遮罩层

pages3/polyv/detail.vue

@@ -542,7 +542,6 @@
         </view>
       </view>
     </u-popup>
-    <!-- :show="photoPopup" -->
     <u-popup v-model="photoPopup" mode="bottom" border-radius="40">
       <!-- 播放前拍照start -->
       <!-- :mask-close-able="false" -->
@@ -590,7 +589,7 @@
                 class="photo_v"
               ></video>
               <!-- <canvas class="canvas"  canvas-id="canvas"></canvas> -->
-              <div class="mask"></div>
+              <view class="mask"></view>
               <!-- #endif -->
             </view>
             <view class="custom" v-if="!isTaking">
@@ -958,35 +957,6 @@ export default {
     }
   },
   onShow() {
-    // this.photoPopup = true;
-    // this.isTaking = true;
-    // console.log('photoPopup:', this.photoPopup, 'isTaking:', this.isTaking, 'window:', window, 'navigator:', navigator);
-    // console.log('window.navigator.mediaDevices', window.navigator.mediaDevices, '1:', window.navigator.mediaDevices.getUserMedia, '2:',window.navigator.getUserMedia,
-    //   '3:', window.navigator.webkitGetUserMedia, '4:', window.navigator.mozGetUserMedia);
-    // if (
-    //       (window.navigator.mediaDevices &&
-    //         window.navigator.mediaDevices.getUserMedia) ||
-    //       window.navigator.getUserMedia ||
-    //       window.navigator.webkitGetUserMedia ||
-    //       window.navigator.mozGetUserMedia
-    //     ) {
-    //       console.log( "getUserMedia----");
-    //       // 调用用户媒体设备, 访问摄像头
-    //       this.getUserMedia(
-    //         {
-    //           video: {
-    //             width: 400,
-    //             height: 300,
-    //           },
-    //         },
-    //         this.photographSuccess,
-    //         this.photographError
-    //       );
-    //     } else {
-    //       console.log('1111没有摄像');
-    //       this.photographError();
-    //     }
-    // // console.log('this.option:', this.option);
     if (this.$method.isGoLogin()) {
       // 从公众号消息进来的没登录需要跳到登录页，登录后返回
       return;
@@ -4119,6 +4089,17 @@ export default {
         width: 100%;
         height: 100%;
       }
+      .mask {
+        width: 500rpx;
+        height: 550rpx;
+        position: absolute;
+        top: 100rpx;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        margin: 0 auto;
+        box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.4);
+      }
     }
     .custom {
       width: 750rpx;
@@ -4132,17 +4113,17 @@ export default {
         height: 100%;
       }
     }
-    .mask {
-      width: 500rpx;
-      height: 550rpx;
-      position: absolute;
-      top: 100px;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: 0 auto;
-      box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5);
-    }
+    // .mask {
+    //   width: 500rpx;
+    //   height: 550rpx;
+    //   position: absolute;
+    //   top: 100px;
+    //   left: 0;
+    //   right: 0;
+    //   bottom: 0;
+    //   margin: 0 auto;
+    //   box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5);
+    // }
   }
 
   .btns {