yangg 3 months ago
parent
commit
a9f13061cd

+ 13 - 2
pages/face-photo/face-photo.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="photo-container">
+  <view class="photo-container" :class="{'loaded': isPageLoaded}">
     <!-- 标题 -->
     <view class="photo-header">
       <text class="photo-title">拍摄照片</text>
@@ -29,12 +29,17 @@ export default {
     return {
       photoSrc: '', // 拍摄的照片路径
       isCameraReady: false,
-      cameraContext: null
+      cameraContext: null,
+      isPageLoaded: false // 添加页面加载状态标记
     }
   },
   onReady() {
     // 相机组件初始化完成后创建相机上下文
     this.cameraContext = uni.createCameraContext();
+    // 设置页面已加载完成
+    setTimeout(() => {
+      this.isPageLoaded = true;
+    }, 100);
   },
   methods: {
     // 处理相机错误
@@ -153,6 +158,12 @@ export default {
   min-height: 100vh;
   background-color: #f5f7fa;
   padding: 30rpx;
+  opacity: 0; /* 初始设置为不可见 */
+  transition: opacity 0.3s ease; /* 添加过渡效果 */
+}
+
+.photo-container.loaded {
+  opacity: 1; /* 加载完成后显示 */
 }
 
 .photo-header {

+ 8 - 1
unpackage/dist/dev/mp-weixin/pages/face-photo/face-photo.js

@@ -6,11 +6,16 @@ const _sfc_main = {
       photoSrc: "",
       // 拍摄的照片路径
       isCameraReady: false,
-      cameraContext: null
+      cameraContext: null,
+      isPageLoaded: false
+      // 添加页面加载状态标记
     };
   },
   onReady() {
     this.cameraContext = common_vendor.index.createCameraContext();
+    setTimeout(() => {
+      this.isPageLoaded = true;
+    }, 100);
   },
   methods: {
     // 处理相机错误
@@ -123,6 +128,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   } : {
     f: common_vendor.o((...args) => $options.retakePhoto && $options.retakePhoto(...args)),
     g: common_vendor.o((...args) => $options.startInterview && $options.startInterview(...args))
+  }, {
+    h: $data.isPageLoaded ? 1 : ""
   });
 }
 const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);

+ 1 - 1
unpackage/dist/dev/mp-weixin/pages/face-photo/face-photo.wxml

@@ -1 +1 @@
-<view class="photo-container"><view class="photo-header"><text class="photo-title">拍摄照片</text><text class="photo-subtitle">我们将用于身份核验,请正对摄像头</text></view><view class="photo-preview"><camera wx:if="{{a}}" device-position="front" flash="auto" class="camera" binderror="{{b}}"></camera><image wx:else class="preview-image" src="{{c}}" mode="aspectFit"></image><view class="face-outline"></view></view><button wx:if="{{d}}" class="capture-btn" bindtap="{{e}}">拍照</button><view wx:else class="btn-group"><button class="retry-btn" bindtap="{{f}}">重新拍照</button><button class="start-btn" bindtap="{{g}}">开始面试</button></view></view>
+<view class="{{['photo-container', h && 'loaded']}}"><view class="photo-header"><text class="photo-title">拍摄照片</text><text class="photo-subtitle">我们将用于身份核验,请正对摄像头</text></view><view class="photo-preview"><camera wx:if="{{a}}" device-position="front" flash="auto" class="camera" binderror="{{b}}"></camera><image wx:else class="preview-image" src="{{c}}" mode="aspectFit"></image><view class="face-outline"></view></view><button wx:if="{{d}}" class="capture-btn" bindtap="{{e}}">拍照</button><view wx:else class="btn-group"><button class="retry-btn" bindtap="{{f}}">重新拍照</button><button class="start-btn" bindtap="{{g}}">开始面试</button></view></view>

+ 5 - 0
unpackage/dist/dev/mp-weixin/pages/face-photo/face-photo.wxss

@@ -5,6 +5,11 @@
   min-height: 100vh;
   background-color: #f5f7fa;
   padding: 30rpx;
+  opacity: 0; /* 初始设置为不可见 */
+  transition: opacity 0.3s ease; /* 添加过渡效果 */
+}
+.photo-container.loaded {
+  opacity: 1; /* 加载完成后显示 */
 }
 .photo-header {
   display: flex;