cd987a4b82
Create portable QR scanning page module with: - WeChat native camera integration with overlay system - Animated QR targeting arcs and visual feedback - Torch/flash controls and camera setup - Inline modal system (verification, guide, service) - Return page navigation support via query parameter - Debug overlay and device detection - Complete asset bundle (arc.png, qrmarkers.png, buttons) Module can be integrated into other WeChat Mini Programs by copying pages/emblemscanner/ directory. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
112 lines
3.8 KiB
Plaintext
112 lines
3.8 KiB
Plaintext
<view class="wrapper">
|
|
<!-- QR targeting arcs overlay -->
|
|
<view class="qrarc {{ qrarc_class }}">
|
|
<image class="topleft arc" src="./assets/arc.png"></image>
|
|
<image class="topright arc" src="./assets/arc.png"></image>
|
|
<image class="bottomleft arc" src="./assets/arc.png"></image>
|
|
<image class="bottomright arc" src="./assets/arc.png"></image>
|
|
</view>
|
|
|
|
<!-- QR markers overlay -->
|
|
<view class="qrmarkers {{ qrmarkers_class }}">
|
|
<image class="square" src="./assets/qrmarkers.png"></image>
|
|
</view>
|
|
|
|
<!-- On-screen display for hints -->
|
|
<view class="osd">
|
|
<view class="upper" bindtap="debug_tap">
|
|
{{ hint_text }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- WeChat native camera -->
|
|
<camera wx:if="{{ show_modal == '' }}"
|
|
class="camera"
|
|
flash="{{ camera_flash }}"
|
|
mode="normal"
|
|
frame-size="large"
|
|
resolution="high"
|
|
bindinitdone="setup_camera">
|
|
</camera>
|
|
|
|
<!-- Canvas for image processing -->
|
|
<canvas id="output" type="2d"></canvas>
|
|
|
|
<!-- Debug overlay -->
|
|
<view class="debug" wx:if="{{ enable_debug }}">
|
|
<view><image src="{{ debug_image_data_url }}"></image></view>
|
|
<view wx:for="{{ debug_msgs }}">{{ item }}</view>
|
|
<view>model: {{ phone_model }}</view>
|
|
<view>zoom: {{ zoom }}</view>
|
|
<view>sensitivity: {{ camera_sensitivity }}</view>
|
|
<view>frame uploaded: {{ frame_uploaded }} (upload cost {{ frame_upload_time_cost }}ms)</view>
|
|
<view>max zoom: {{ max_zoom }}</view>
|
|
<view>result: {{ result }}</view>
|
|
</view>
|
|
|
|
<!-- Bottom action controls -->
|
|
<view class="bottomfixed">
|
|
<view class="actions">
|
|
<view class="half {{ show_tip ? 'brighter' : '' }}" bindtap="show_scanguide">
|
|
<view class="icon">
|
|
<image src="./assets/play-button.png"></image>
|
|
</view>
|
|
<view class="text">
|
|
扫描指南
|
|
</view>
|
|
</view>
|
|
<view class="half {{ camera_flash == 'torch' ? 'brighter' : '' }}" bindtap="toggle_torch">
|
|
<view class="icon">
|
|
<image src="./assets/flash-button.png"></image>
|
|
</view>
|
|
<view class="text">
|
|
开启补光
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Tooltip -->
|
|
<view wx:if="{{ show_tip && show_modal == '' }}" class="tooltip">
|
|
<view class="tooltip-content">
|
|
<text>将QR码置于框内进行扫描</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Service Modal -->
|
|
<view wx:if="{{ show_modal == 'service' }}" class="modal">
|
|
<view class="modal-content">
|
|
<text>服务联系信息</text>
|
|
<button bindtap="close_modal">关闭</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Verification Spinner -->
|
|
<view wx:if="{{ show_modal == 'verifying' }}" class="modal">
|
|
<view class="modal-content verifying">
|
|
<view class="spinner"></view>
|
|
<text>正在验证中...</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Verification Failed -->
|
|
<view wx:if="{{ show_modal == 'verifyfailed' }}" class="modal">
|
|
<view class="modal-content">
|
|
<text>验证失败</text>
|
|
<button bindtap="restart_camera">重新扫描</button>
|
|
<button bindtap="show_service">联系客服</button>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- Scan Guide -->
|
|
<view wx:if="{{ show_modal == 'scanguide' }}" class="modal">
|
|
<view class="modal-content">
|
|
<text>扫描指南</text>
|
|
<view>1. 将QR码置于框内</view>
|
|
<view>2. 保持稳定</view>
|
|
<view>3. 确保光线充足</view>
|
|
<button bindtap="restart_camera">开始扫描</button>
|
|
<button bindtap="show_service">联系客服</button>
|
|
</view>
|
|
</view> |