添加loading

src/containers/center/play/components/iMedia.vue

@@ -100,16 +100,15 @@
       <i-collect :updateTime="updateTime" @getface="getface" />
     </div>
 
-    <!-- <el-dialog class="left-float-dialog" title="人脸认证" center
-    :visible.sync="identifyFace" width="460px" :close-on-click-modal="false">
-      <i-collect @getface="getface" />
-      <div style="width: 240px;margin: 100px auto;">
-        <video ref="video2"  width="240" height="180" autoplay></video>
-        <p  style="margin-top: 20px;">当前照片：</p>
-        <canvas ref="canvas" width="240" height="180"></canvas>
-        <p v-if="errMsg" style="font-size: 30px;color: red;"> {{errMsg}}</p>
+   <el-dialog  title="开始人脸认证" center :visible.sync="identifyFaceDialog" width="400px" :append-to-body="true" >
+      <div>
+        <p style="color: red;font-size: 24px;text-align: center;"> 请将人脸对准摄像头</p>
+        <canvas id="canvas" width="240" height="180"></canvas>
+        <div class="tc m20">
+          <p  v-if="errMsg && identifyFace" style="font-size: 30px;color: red;"> {{errMsg}}</p>
+        </div>
       </div>
-    </el-dialog> -->
+    </el-dialog> 
   </div>
 </template>
 
@@ -142,6 +141,7 @@
         ontakebtn: false,
         identifyFace: false,
         identifyFacePass: false,
+        identifyFaceDialog: false,
         activeChapter: '',
         activeName: '',
         curTimes: 0,
@@ -151,7 +151,8 @@
         onIdentify: false,
         updateTime: 0,
         imgbase64: '',
-        onPlay: false
+        onPlay: false,
+        loading: false
       }
     },
     components: {
@@ -375,12 +376,15 @@
         if( !this.closeFace){
           this.identifyFace = true
           this.identifyFacePass = false
+          this.identifyFaceDialog = true
           this.updateTime = Date.now()
         }
         this.startTick()
       },
+
       identifyPassAndPlay(){
         this.identifyFacePass = true
+        this.identifyFaceDialog = false
         this.$message.successMsg("人脸认证通过", 2)
         this.doPlay()
       },
@@ -539,6 +543,21 @@
     text-align: center;
     border-radius: 5px;
   }
+
+  .center-float-dialog {
+    width: 240px;
+    height: 180px;
+    background-color: #8bbdf5;
+    position: fixed;
+    transition: bottom ease .9s;
+    z-index: 0;
+    left: 40%;
+    top: 200px;
+    /* margin: 120px auto; */
+    text-align: center;
+    border-radius: 5px;
+  }
+
   .left-float-dialog{
     width: 240px;
     height: 180px;