人脸照片回显

src/views/construction-person/entry-and-exit-manage/person-entry/add-or-edit-form.vue

@@ -197,11 +197,22 @@
                             :file-size="10"
                             :multiple="true"
                             ref="faceImgRef"
+                            v-if="!isReadCard"
                             @onUploadChange="onUploadChangeFaceImg"
                             :file-type="['jpg', 'png', 'jpeg']"
                             :file-list.sync="idCardInfoForm.faceImg"
                             :is-uploaded="idCardInfoForm.faceImg.length >= 1"
                         />
+
+                        <div class="id-card-face-img" v-if="isReadCard">
+                            <img
+                                :src="'data:image/jpeg;base64,' + Base64Photo"
+                            />
+                            <i
+                                class="el-icon-delete"
+                                @click="onDeleteFaceImg"
+                            />
+                        </div>
                     </el-form-item>
                 </el-col>
             </el-row>
@@ -1001,6 +1012,8 @@ export default {
             isEditContract: false, // 是否是编辑状态
             webSocket: null, // websocket连接
             isConnected: false, // 是否连接成功
+            isReadCard: false, // 是否是读卡器方式入场
+            Base64Photo: '', // 读卡器方式入场时的人脸照片
         }
     },
     methods: {
@@ -1682,6 +1695,7 @@ export default {
                 const message = JSON.parse(evt.data)
                 console.log('收到消息', message)
                 if (message.Certificate) {
+                    _this.isReadCard = true
                     const {
                         Sex,
                         Name,
@@ -1692,6 +1706,7 @@ export default {
                         IDNumber,
                         ValidDate,
                         IssuedData,
+                        Base64Photo,
                     } = message.Certificate
 
                     _this.idCardInfoForm.sex = Sex
@@ -1703,6 +1718,7 @@ export default {
                     _this.idCardInfoForm.endTime = _this.initDate(ValidDate)
                     _this.idCardInfoForm.birthday = _this.initDate(Birthday)
                     _this.idCardInfoForm.startTime = _this.initDate(IssuedData)
+                    _this.Base64Photo = Base64Photo
 
                     // 计算年龄
                     const birthdayYear = Birthday.slice(0, 4)
@@ -1770,6 +1786,12 @@ export default {
                     })
             }
         },
+
+        // 删除人脸照片
+        onDeleteFaceImg() {
+            this.isReadCard = false
+            this.Base64Photo = ''
+        },
     },
 
     async created() {
@@ -1817,4 +1839,26 @@ export default {
         color: $red;
     }
 }
+
+.id-card-face-img {
+    width: 148px;
+    height: 148px;
+    border: 1px dashed #dcdfe6;
+    border-radius: 4px;
+    position: relative;
+
+    & img {
+        width: 100%;
+        height: 100%;
+    }
+
+    .el-icon-delete {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        cursor: pointer;
+        color: $red;
+        font-size: 20px;
+    }
+}
 </style>