themblem/scanner/pages/emblemscanner/emblemscanner.wxml

<view class="wrapper">
    <!-- QR targeting arcs overlay -->
    <view wx:if="{{ camera_rule != null }}" 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 wx:if="{{ camera_rule != null }}" class="qrmarkers {{ qrmarkers_class }}">
        <image class="square" src="./assets/qrmarkers.png"></image>
    </view>
    
    <!-- On-screen display for hints -->
    <view wx:if="{{ camera_rule != null }}" class="osd">
        <view class="upper" bindtap="debug_tap">
            {{ hint_text }}
        </view>
    </view>
    
    <!-- Loading spinner while camera rules are loading -->
    <view wx:if="{{ show_modal == '' && camera_rule == null }}" class="loading-spinner">
        <view class="spinner"></view>
        <text>初始化相机...</text>
    </view>

    <!-- WeChat native camera -->
    <camera wx:if="{{ show_modal == '' && !use_web_view && camera_rule != null }}" 
            class="camera" 
            flash="{{ camera_flash }}"
            mode="normal"
            frame-size="large"
            resolution="high"
            bindinitdone="setup_camera">
    </camera>
    
    <!-- Web-view camera fallback for problematic devices -->
    <web-view wx:if="{{ show_modal == '' && use_web_view && emblem_camera_url && camera_rule != null }}" 
              src="{{ emblem_camera_url }}" 
              bindmessage="on_webview_message">
    </web-view>
    
    <!-- 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 }} (rule: {{ rule_zoom }})</view>
        <view>camera rule: {{ camera_rule.model || 'default' }} (web_view: {{ use_web_view }})</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>worker: {{ use_worker ? 'yes' : 'no' }}</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>