拍照时需要增加拍照要求文案的提醒

components/popup/index.vue

@@ -0,0 +1,84 @@
+<template>
+    <view class="popup">
+        <u-popup v-model="popupPhotoShow" mode="bottom" border-radius="30" :mask-close-able='false'>
+            <view class="popup_box">
+                <view class="head">
+                    <image src="/static/learn/photo_head.png" class="photo_head"></image>
+                </view>
+                <view class="warn">温馨提示</view>
+                <view class="contents">
+                    <view class="words">1、请保证摄像头正对自己，避免头像偏左或者偏右。</view>
+                    <view class="words">2、请保证拍照环境光线充足（照片太暗或曝光会降低验证通过率）。</view>
+                    <view class="words">3、请保证整个头像在人脸识别区域内，脸部无遮挡装饰物（佩戴眼镜会降低通过率）。</view>
+                    <view class="words">4、如果下面视频中出现黑屏，摄像头可能被其他进程占用，请关闭其他调用摄像头的程序，重新刷新当前页面重新拍照识别。</view>
+                </view>
+                <view class="take_photo" @click="toTakePhoto()">
+                    去拍照
+                </view>
+            </view>
+        </u-popup>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'popup',
+    props: {
+        popupPhotoShow: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            // popupShow: false
+        }
+    },
+    methods: {
+        toTakePhoto() {
+            this.$emit('takePhoto', true)
+        },
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.popup_box {
+    width: 100%;
+    height: 1100rpx;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 0rpx 40rpx;
+    .photo_head {
+        width: 240rpx;
+        height: 240rpx;
+        margin: 80rpx 0rpx 48rpx;
+    }
+    .warn {
+        width: 100%;
+        font-size: 36rpx;
+        font-weight: bold;
+        color: #222222;
+        margin-bottom: 40rpx;
+    }
+    .words {
+        font-size: 28rpx;
+        color: #666666;
+        line-height: 33rpx;
+        margin-bottom: 24rpx;
+    }
+    .take_photo {
+        width: 412rpx;
+        height: 84rpx;
+        line-height: 84rpx;
+        text-align: center;
+        background: #01C65A;
+        border-radius: 16rpx;
+        font-size: 36rpx;
+        font-weight: 500;
+        color: #FFFFFF;
+        margin-top: 100rpx;
+    }
+}
+</style>

pages2/class/questionBank.vue

@@ -823,9 +823,19 @@
             ></view>
           </view>
           <view class="photoBoxbtns">
-            <view class="btnResult" v-if="isTaking" @click="takePhoto"
+            <!-- <view class="btnResult" v-if="isTaking" @click="takePhoto"
               >拍照</view
-            >
+            > -->
+            <view v-if="isTaking" class="takePhoto_btn">
+              <view style='width: 100rpx;height: 2rpx;'></view>
+              <view class="middle_btn" @click="takePhoto">
+                <view class="square"></view>
+              </view>
+              <view class="rights" @click="takePhTips()">
+                <text>拍照提示</text>
+                <u-icon name="arrow-right" color="#FFFFFF" size="30"></u-icon>
+              </view>
+            </view> 
             <view class="btnResult" v-if="!isTaking" @click="reTake">重拍</view>
             <view class="btnResult" v-if="!isTaking" @click="submitPhoto"
               >确认</view
@@ -834,11 +844,18 @@
         </view>
       </view>
     </u-mask>
+
+    <!-- 拍照提示 -->
+    <popup-photo :popupPhotoShow.sync="popupPhotoShow" @takePhoto='toTakePhoto()'></popup-photo>
   </view>
 </template>
 
 <script>
+import PopupPhoto from '@/components/popup/index.vue'
 export default {
+  components: {
+    PopupPhoto,
+  },
   data() {
     return {
       photoPopup: false,
@@ -887,6 +904,7 @@ export default {
       originShowDialog: false,
       uploadLock: false, //上传图片
       examData: {},
+      popupPhotoShow: false,
     };
   },
   watch: {
@@ -938,9 +956,15 @@ export default {
       //需要拍没拍过直接弹出摄像头
       if (this.needPhoto && !this.isTakePhoto) {
         if (this.learning != 1) {
-        this.photoPopup = true;
-        this.isTaking = true;
-        this.avatarUrl = "";
+          if (uni.getStorageSync('tabkePhotoShow')) {
+            this.photoPopup = true;
+            this.isTaking = true;
+            this.avatarUrl = "";
+          } else {
+            this.popupPhotoShow = true
+            uni.setStorageSync('tabkePhotoShow', 1) // 本地缓存用来判断是否已经弹出过弹窗
+          }
+        
         }
       } else {
         //不需要拍照
@@ -1228,6 +1252,16 @@ export default {
         });
       });
     },
+    toTakePhoto() {
+      this.popupPhotoShow = false
+      this.openPhoto()
+    },
+    takePhTips() {
+      this.popupPhotoShow = true
+      this.isTaking = false
+      this.photoPopup = false
+    },
+    // 确认拍照
     async submitPhoto() {
       if (this.uploadLock) {
         return
@@ -1931,8 +1965,13 @@ export default {
 
             if (this.needPhoto) {
               if (this.learning != 1) {
+                if (uni.getStorageSync('tabkePhotoShow')) {
                 this.photoPopup = true; //拍照
                 this.isTaking = true;
+                } else {
+                  this.popupPhotoShow = true
+                  uni.setStorageSync('tabkePhotoShow', 1) // 本地缓存用来判断是否已经弹出过弹窗
+                }
               }
               
             } else {
@@ -2876,7 +2915,34 @@ export default {
 
   .photoBoxbtns {
     display: flex;
-
+    .takePhoto_btn {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: #808080;
+      padding: 50rpx;
+      .middle_btn {
+        width: 120rpx;
+        height: 120rpx;
+        border-radius: 40rpx;
+        border: 4rpx solid #FFFFFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .square {
+        width: 96rpx;
+        height: 96rpx;
+        background: #FFFFFF;
+        border-radius: 28rpx;
+      }
+      .rights {
+        font-size: 32rpx;
+        font-weight: 500;
+        color: #FFFFFF;
+      }
+    }
     .btnResult {
       height: 100rpx;
       width: 100%;

pages3/live/detail.vue

@@ -540,9 +540,19 @@
             ></view>
           </view>
           <view class="btns">
-            <view class="btnResult" v-if="isTaking" @click="takePhoto"
+            <!-- <view class="btnResult" v-if="isTaking" @click="takePhoto"
               >拍照</view
-            >
+            > -->
+            <view v-if="isTaking" class="takePhoto_btn">
+              <view style='width: 100rpx;height: 2rpx;'></view>
+              <view class="middle_btn" @click="takePhoto">
+                <view class="square"></view>
+              </view>
+              <view class="rights" @click="takePhTips()">
+                <text>拍照提示</text>
+                <u-icon name="arrow-right" color="#FFFFFF" size="30"></u-icon>
+              </view>
+            </view> 
             <view class="btnResult" v-if="!isTaking" @click="reTake">重拍</view>
             <view class="btnResult" v-if="!isTaking" @click="submit">确认</view>
           </view>
@@ -614,6 +624,9 @@
 				</view>
 			</view>
 		</u-popup>
+
+    <!-- 拍照提示 -->
+    <popup-photo :popupPhotoShow.sync="popupPhotoShow" @takePhoto='toTakePhoto()'></popup-photo>
   </view>
 </template>
 
@@ -622,6 +635,7 @@ import plv from "@/pages3/static/polyv-sdk/index";
 import courseModule from "@/components/course/courseModule.vue";
 import courseChapter from "@/components/course/courseChapter.vue";
 import courseSection from "@/components/course/courseSection.vue";
+import PopupPhoto from '@/components/popup/index.vue'
 import {WEBVIEW_URL} from '@/common/request.js'
 // import { websocket } from "@/common/socket.js";
 import { mapGetters, mapMutations } from "vuex";
@@ -630,6 +644,7 @@ export default {
     courseModule,
     courseChapter,
     courseSection,
+    PopupPhoto,
   },
 	filters: {
 		formatDate(date) {
@@ -757,6 +772,7 @@ export default {
       subIndex: 0,
       compareFaceData: 0, // 拍照匹配相似度
       CountTo: 30, // 倒计时
+      popupPhotoShow: false,
     };
   },
   computed: {
@@ -1941,8 +1957,13 @@ export default {
                 //暂停
                 polyvPlayerContext.exitFullScreen();
                 polyvPlayerContext.pause();
+                if (uni.getStorageSync('tabkePhotoShow')) {
                 this.photoIndex = i;
                 this.openPhoto();
+                } else {
+                  this.popupPhotoShow = true
+                  uni.setStorageSync('tabkePhotoShow', 1) // 本地缓存用来判断是否已经弹出过弹窗
+                }
               }
             }
           }
@@ -2157,6 +2178,16 @@ export default {
     reTake() {
       this.isTaking = true;
     },
+    toTakePhoto() {
+      this.popupPhotoShow = false
+      this.openPhoto()
+    },
+    takePhTips() {
+      this.popupPhotoShow = true
+      this.isTaking = false
+      this.photoPopup = false
+      this.enableAutoRotation = false
+    },
     //确认拍照
     takePhoto() {
       var self = this;
@@ -2278,7 +2309,7 @@ export default {
                 if (Object.keys(this.sectionItem).length) {
                   let playNextId = `moduleId${this.sectionItem.moduleId}chapterId${this.sectionItem.chapterId}sectionId${this.sectionItem.sectionId}`;
                   this.$store.commit("updatePlayNextId", playNextId)
-                  
+
                   if (res.data.rows[i].menuId == this.sectionItem.chapterId && (!this.sectionItem.moduleId || this.sectionItem.moduleId == 0)) {
                     this.menuIndex = [i];
                     break;
@@ -2564,7 +2595,34 @@ export default {
 
   .btns {
     display: flex;
-
+    .takePhoto_btn {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: #808080;
+      padding: 50rpx;
+      .middle_btn {
+        width: 120rpx;
+        height: 120rpx;
+        border-radius: 40rpx;
+        border: 4rpx solid #FFFFFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .square {
+        width: 96rpx;
+        height: 96rpx;
+        background: #FFFFFF;
+        border-radius: 28rpx;
+      }
+      .rights {
+        font-size: 32rpx;
+        font-weight: 500;
+        color: #FFFFFF;
+      }
+    }
     .btnResult {
       height: 100rpx;
       flex: 1;

pages3/polyv/detail.vue

@@ -531,9 +531,19 @@
             ></view>
           </view>
           <view class="btns">
-            <view class="btnResult" v-if="isTaking" @click="takePhoto"
+            <!-- <view class="btnResult" v-if="isTaking" @click="takePhoto"
               >拍照</view
-            >
+            > -->
+            <view v-if="isTaking" class="takePhoto_btn">
+              <view style='width: 100rpx;height: 2rpx;'></view>
+              <view class="middle_btn" @click="takePhoto">
+                <view class="square"></view>
+              </view>
+              <view class="rights" @click="takePhTips()">
+                <text>拍照提示</text>
+                <u-icon name="arrow-right" color="#FFFFFF" size="30"></u-icon>
+              </view>
+            </view> 
             <view class="btnResult" v-if="!isTaking" @click="reTake">重拍</view>
             <view class="btnResult" v-if="!isTaking" @click="submit">确认</view>
           </view>
@@ -629,6 +639,9 @@
         </view>
 			</view>
 		</u-popup>
+
+    <!-- 拍照提示 -->
+    <popup-photo :popupPhotoShow.sync="popupPhotoShow" @takePhoto='toTakePhoto()'></popup-photo>
 		 
   </view>
 </template>
@@ -638,6 +651,7 @@ import plv from "../static/polyv-sdk/index";
 import courseModule from "@/components/course/courseModule.vue";
 import courseChapter from "@/components/course/courseChapter.vue";
 import courseSection from "@/components/course/courseSection.vue";
+import PopupPhoto from '@/components/popup/index.vue'
 import {WEBVIEW_URL} from '@/common/request.js'
 // import { websocket } from "@/common/socket.js";
 import { mapGetters, mapMutations } from "vuex";
@@ -646,6 +660,7 @@ export default {
     courseModule,
     courseChapter,
     courseSection,
+    PopupPhoto,
   },
   data() {
     return {
@@ -761,6 +776,7 @@ export default {
       studyTimer: null, // 学习记录定时器
       CountTo: 30, // 倒计时
       menuAllList: [],
+      popupPhotoShow: false,
     };
   },
   computed: {
@@ -2559,7 +2575,7 @@ export default {
       var polyvPlayerContext = this.selectComponent("#playerVideo");
       if (polyvPlayerContext != null) {
         this.playTime = polyvPlayerContext.getCurrentTime(); //播放时刻
-        // console.log(this.playTime, 789, this.photoHistoryList, 'this.photoList:', this.photoList)
+        console.log('拍照啊', 789, this.photoHistoryList, 'this.photoList:', this.photoList)
         //判断是否需要拍照
         if (this.photoNum > 0) {
           this.configPhoto();
@@ -2577,8 +2593,14 @@ export default {
                 //暂停
                 polyvPlayerContext.exitFullScreen();
                 polyvPlayerContext.pause();
+                if (uni.getStorageSync('tabkePhotoShow')) {
                 this.photoIndex = i;
                 this.openPhoto();
+                } else {
+                  this.popupPhotoShow = true
+                  uni.setStorageSync('tabkePhotoShow', 1) // 本地缓存用来判断是否已经弹出过弹窗
+                }
+                
               }
             }
           }
@@ -2741,7 +2763,7 @@ export default {
         });
       });
     },
-
+    // 确定拍照
     async submit() {
       console.log('this.uploadLock的值：', this.uploadLock)
       if (this.uploadLock) {
@@ -2795,6 +2817,16 @@ export default {
     reTake() {
       this.isTaking = true;
     },
+    toTakePhoto() {
+      this.popupPhotoShow = false
+      this.openPhoto()
+    },
+    takePhTips() {
+      this.popupPhotoShow = true
+      this.isTaking = false
+      this.photoPopup = false
+      this.enableAutoRotation = false
+    },
     //确认拍照
     takePhoto() {
       var self = this;
@@ -3301,7 +3333,34 @@ export default {
 
   .btns {
     display: flex;
-
+    .takePhoto_btn {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: #a7a8a9;
+      padding: 50rpx;
+      .middle_btn {
+        width: 120rpx;
+        height: 120rpx;
+        border-radius: 40rpx;
+        border: 4rpx solid #FFFFFF;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .square {
+        width: 96rpx;
+        height: 96rpx;
+        background: #FFFFFF;
+        border-radius: 28rpx;
+      }
+      .rights {
+        font-size: 32rpx;
+        font-weight: 500;
+        color: #FFFFFF;
+      }
+    }
     .btnResult {
       height: 100rpx;
       flex: 1;