diff --git a/scanner/pages/emblemscanner/assets/spinner.png b/scanner/pages/emblemscanner/assets/spinner.png new file mode 100644 index 0000000..1a62b8f Binary files /dev/null and b/scanner/pages/emblemscanner/assets/spinner.png differ diff --git a/scanner/pages/emblemscanner/emblemscanner.js b/scanner/pages/emblemscanner/emblemscanner.js index b3f65b7..2d14dc8 100644 --- a/scanner/pages/emblemscanner/emblemscanner.js +++ b/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); diff --git a/scanner/pages/emblemscanner/emblemscanner.wxml b/scanner/pages/emblemscanner/emblemscanner.wxml index 6a4585b..475dbc3 100644 --- a/scanner/pages/emblemscanner/emblemscanner.wxml +++ b/scanner/pages/emblemscanner/emblemscanner.wxml @@ -183,11 +183,13 @@ - - - - - 正在验证中... + + + + + + + Loading @@ -195,7 +197,7 @@ 验证失败 - + diff --git a/scanner/pages/emblemscanner/emblemscanner.wxss b/scanner/pages/emblemscanner/emblemscanner.wxss index 1380bff..8904d13 100644 --- a/scanner/pages/emblemscanner/emblemscanner.wxss +++ b/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; + } } \ No newline at end of file