emblemscanner: verifying ui design

scanner/pages/emblemscanner/emblemscanner.js

@@ -97,7 +97,8 @@ Page({
     app_state: 'loading_rules', // 'loading_rules', 'loading_qrtool', 'init_camera', 'scanning', 'webview_scanning', 'verifying', 'result'
     scan_mode: 'unknown', // 'camera', 'webview'
     no_web_view: false, // Override web-view rule, force native camera
-    worker_processing: false // Track if worker is currently processing a frame
+    worker_processing: false, // Track if worker is currently processing a frame
+    verifying_stage: 0 // Verification spinner animation stage
   },
 
   onLoad(options) {
@@ -752,8 +753,16 @@ Page({
     this.transitionToState('verifying');
     this.setData({
       hint_text: '识别成功',
-      show_modal: 'verifying'
+      show_modal: 'verifying',
+      verifying_stage: 0
     });
+
+    // Start verification animation like verifyspin component
+    setTimeout(() => {
+      this.setData({
+        verifying_stage: 1
+      });
+    }, 3000);
   },
 
   /**
@@ -773,7 +782,7 @@ Page({
       },
       fail: (err) => {
         this.addDebugMessage(`Navigation failed: ${err.errMsg}`);
-        this.restartScanning();
+        this.restart_camera();
       }
     });
   },
@@ -781,7 +790,7 @@ Page({
   /**
    * State: Any -> Loading (restart)
    */
-  restartScanning() {
+  restart_camera() {
     // Go to initializing if QRTool isn't ready, otherwise loading
     const newState = this.data.qrtool_ready ? 'loading' : 'initializing';
     this.transitionToState(newState);

scanner/pages/emblemscanner/emblemscanner.wxml

@@ -183,11 +183,13 @@
     </view>
 </view>
 
-<!-- Verification Spinner -->
+<!-- Verification Spinner - copied from verifyspin component -->
-<view wx:if="{{ show_modal == 'verifying' }}" class="modal">
+<view wx:if="{{ show_modal == 'verifying' }}" class="verification-container">
-    <view class="modal-content verifying">
+    <view class="verification-spinner {{ verifying_stage == 0 ? 'spin-and-shrink' : 'spin-only' }}">
-        <view class="spinner"></view>
+        <image class="square" src="./assets/spinner.png"></image>
-        <text>正在验证中...</text>
+    </view>
+    <view class="verification-loading">
+        Loading
     </view>
 </view>
 
@@ -195,7 +197,7 @@
 <view wx:if="{{ show_modal == 'verifyfailed' }}" class="modal">
     <view class="modal-content">
         <text>验证失败</text>
-        <button bindtap="restartScanning">重新扫描</button>
+        <button bindtap="restart_camera">重新扫描</button>
         <button bindtap="show_service">联系客服</button>
     </view>
 </view>

scanner/pages/emblemscanner/emblemscanner.wxss

@@ -338,27 +338,6 @@ view.tooltip {
     margin: 40rpx;
 }
 
-.modal-content.verifying {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 20rpx;
-}
-
-.spinner {
-    width: 60rpx;
-    height: 60rpx;
-    border: 4rpx solid #f3f3f3;
-    border-top: 4rpx solid #3498db;
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% { transform: rotate(0deg); }
-    100% { transform: rotate(360deg); }
-}
-
 .modal-content button {
     margin: 20rpx 10rpx;
     padding: 20rpx 40rpx;
@@ -366,4 +345,87 @@ view.tooltip {
     border-radius: 10rpx;
     background-color: #ef4823;
     color: white;
+}
+
+/* Verification Spinner - copied from verifyspin component */
+.verification-container {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: rgba(30, 30, 30, 0.6);
+}
+
+.verification-spinner {
+    width: 650rpx;
+    height: 650rpx;
+    margin: 100rpx auto;
+    text-align: center;
+}
+
+.spin-and-shrink {
+    animation: spin-and-shrink 3s linear forwards;
+}
+
+.verification-spinner image {
+    width: 650rpx;
+    height: 650rpx;
+}
+
+@keyframes spin-and-shrink {
+  0% {
+    transform: rotate(-90deg) scale(5.5)
+  }
+  10% {
+    transform: rotate(0deg) scale(2.0)
+  }
+  33% {
+    transform: rotate(90deg) scale(1.0);
+  }
+  66% {
+    transform: rotate(2000deg) scale(0.5);
+  }
+  99% {
+    transform: rotate(3600deg) scale(0.2);
+  }
+  100% {
+    transform: rotate(3600deg) scale(0.2);
+  }
+}
+
+.spin-only {
+    animation: spin-only 0.3s linear infinite;
+}
+
+@keyframes spin-only {
+  0% {
+    transform: rotate(0deg) scale(0.2);
+  }
+  100% {
+    transform: rotate(360deg) scale(0.2);
+  }
+}
+
+.verification-loading {
+    font-size: 1.5rem;
+    color: #eee;
+    position: absolute;
+    width: 100%;
+    height: 50rpx;
+    top: 800rpx;
+    text-align: center;
+    animation: fade-in-out 2s linear infinite;
+}
+
+@keyframes fade-in-out {
+    0% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
 }