CRM_26-08-05#story#9126,车辆管理、服务商管理系统需求

src/components/CameraGuide.vue

@@ -2,7 +2,7 @@
   <div class="cameraGuide" v-if="visible">
     <!-- ===== 拍摄引导页 ===== -->
     <div class="cameraPage" v-show="step==='guide'">
-      <video ref="video" class="cameraVideo" autoplay playsinline muted @playing="cameraReady=true"></video>
+      <video ref="video" class="cameraVideo" autoplay playsinline muted></video>
 
       <div class="cameraNav">
         <van-icon name="arrow-left" class="backBtn" @click="handleClose" />
@@ -107,7 +107,7 @@
       </div>
 
       <div class="shootBar">
-        <div class="shootBtn" :class="{'shootBtnDisabled': !cameraReady}" @click="takePhoto"></div>
+        <div class="shootBtn" @click="takePhoto"></div>
         <div class="shootLabel">点击拍照</div>
       </div>
     </div>
@@ -154,7 +154,6 @@ export default {
     return {
       step: 'guide', // guide 拍摄引导 | preview 预览确认
       stream: null,
-      cameraReady: false,
       previewBlob: null,
       previewDataURL: '',
       barcodeBars: heights
@@ -174,13 +173,7 @@ export default {
         this.step = 'guide'
         this.previewBlob = null
         this.previewDataURL = ''
-        this.$nextTick(() => {
+        this.$nextTick(() => this.startCamera())
-          // 提升到 body 下渲染：避免在 overflow 滚动容器内 fixed 元素的合成层排序异常（部分 WebView 会被页面导航栏盖住）
-          if (this.$el && this.$el.nodeType === 1 && this.$el.parentNode !== document.body) {
-            document.body.appendChild(this.$el)
-          }
-          this.startCamera()
-        })
       } else {
         this.stopCamera()
       }
@@ -191,7 +184,6 @@ export default {
   },
   methods: {
     async startCamera() {
-      this.cameraReady = false
       try {
         const stream = await navigator.mediaDevices.getUserMedia({
           video: { facingMode: 'environment' },
@@ -581,9 +573,6 @@ export default {
   &:active {
     transform: scale(.92);
   }
-  &.shootBtnDisabled {
-    opacity: .45;
-  }
   &::after {
     content: '';
     position: absolute;