LIJU
/
mhCardReader


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ThCardReader 读卡测试页面</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .header {
            text-align: center;
            color: #333;
            border-bottom: 2px solid #007bff;
            padding-bottom: 20px;
            margin-bottom: 30px;
        }
        .section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .section h3 {
            color: #007bff;
            margin-top: 0;
        }
        .btn-group {
            margin: 10px 0;
        }
        .btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            margin: 5px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        .btn:hover {
            background-color: #0056b3;
        }
        .btn-success {
            background-color: #28a745;
        }
        .btn-success:hover {
            background-color: #218838;
        }
        .btn-warning {
            background-color: #ffc107;
            color: #333;
        }
        .btn-warning:hover {
            background-color: #e0a800;
        }
        .result {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 15px;
            margin-top: 15px;
            min-height: 200px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            white-space: pre-wrap;
            overflow-x: auto;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
            font-weight: bold;
        }
        .status-success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status-error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .status-info {
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        .api-info {
            background-color: #e9ecef;
            padding: 10px;
            border-radius: 4px;
            margin-bottom: 10px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🆔 ThCardReader 读卡测试页面</h1>
            <p>支持华视读身份证和江苏医保读社保卡功能</p>
            <div id="serviceStatus" class="status status-info">
                正在检查服务状态...
            </div>
        </div>

        <!-- 华视读身份证功能 -->
        <div class="section">
            <h3>🆔 华视读身份证功能</h3>
            <div class="api-info">服务地址：http://localhost:8321</div>
            
            <div class="btn-group">
                <button class="btn" onclick="huashiInit()">初始化读卡器</button>
                <button class="btn btn-success" onclick="huashiReadCard()">读取身份证</button>
                <button class="btn" onclick="huashiStatus()">设备状态</button>
                <button class="btn btn-warning" onclick="huashiClose()">关闭连接</button>
            </div>
            
            <div class="result" id="huashiResult">等待操作...</div>
        </div>

        <!-- 江苏医保读社保卡功能 -->
        <div class="section">
            <h3>🏥 江苏医保读社保卡功能</h3>
            <div class="api-info">服务地址：http://localhost:8321/readcard/jiangsu</div>
            
            <div class="btn-group">
                <button class="btn btn-success" onclick="jiangsuReadCardAuto()">自动初始化读卡</button>
                <button class="btn" onclick="jiangsuInit()">手动初始化</button>
                <button class="btn" onclick="jiangsuReadCard()">读取社保卡</button>
                <button class="btn" onclick="jiangsuStatus()">设备状态</button>
            </div>
            
            <div class="btn-group">
                <button class="btn btn-warning" onclick="jiangsuVerifyPin()">验证PIN码</button>
                <button class="btn btn-warning" onclick="jiangsuDiagnose()">系统诊断</button>
            </div>
            
            <div class="result" id="jiangsuResult">等待操作...</div>
        </div>
    </div>

    <script>
        // 基础配置
        const BASE_URL = 'http://localhost:8321';
        
        // 页面加载时检查服务状态
        window.onload = function() {
            checkServiceStatus();
        };

        // 检查服务状态
        async function checkServiceStatus() {
            try {
                const response = await fetch(`${BASE_URL}/readcard/huashi/health`);
                const data = await response.json();
                
                if (data.status === 'healthy') {
                    showStatus('服务运行正常 ✅', 'success');
                } else {
                    showStatus('服务状态异常 ⚠️', 'error');
                }
            } catch (error) {
                showStatus('服务未启动或无法访问 ❌', 'error');
            }
        }

        // 显示状态
        function showStatus(message, type) {
            const statusDiv = document.getElementById('serviceStatus');
            statusDiv.textContent = message;
            statusDiv.className = `status status-${type}`;
        }

        // 通用请求函数
        async function makeRequest(url, resultElementId) {
            const resultElement = document.getElementById(resultElementId);
            resultElement.textContent = '请求中...';
            
            try {
                const response = await fetch(url);
                const data = await response.json();
                
                resultElement.textContent = JSON.stringify(data, null, 2);
                
                // 根据结果更新状态
                if (data.code === 200 || data.success) {
                    console.log('操作成功:', data);
                } else {
                    console.error('操作失败:', data);
                }
            } catch (error) {
                resultElement.textContent = `请求失败: ${error.message}`;
                console.error('请求异常:', error);
            }
        }

        // 华视读卡器功能
        function huashiInit() {
            makeRequest(`${BASE_URL}/readcard/entry?param=huashi_init_1001`, 'huashiResult');
        }

        function huashiReadCard() {
            makeRequest(`${BASE_URL}/readcard/entry?param=huashi_readcard`, 'huashiResult');
        }

        function huashiStatus() {
            makeRequest(`${BASE_URL}/readcard/entry?param=huashi_status`, 'huashiResult');
        }

        function huashiClose() {
            makeRequest(`${BASE_URL}/readcard/entry?param=huashi_close`, 'huashiResult');
        }

        // 江苏医保功能
        function jiangsuReadCardAuto() {
            makeRequest(`${BASE_URL}/readcard/jiangsu/readcard_auto`, 'jiangsuResult');
        }

        function jiangsuInit() {
            makeRequest(`${BASE_URL}/readcard/jiangsu/init`, 'jiangsuResult');
        }

        function jiangsuReadCard() {
            makeRequest(`${BASE_URL}/readcard/jiangsu/readcard`, 'jiangsuResult');
        }

        function jiangsuStatus() {
            makeRequest(`${BASE_URL}/readcard/jiangsu/status`, 'jiangsuResult');
        }

        function jiangsuVerifyPin() {
            makeRequest(`${BASE_URL}/readcard/jiangsu/verifypin`, 'jiangsuResult');
        }

        function jiangsuDiagnose() {
            makeRequest(`${BASE_URL}/readcard/jiangsu/diagnose`, 'jiangsuResult');
        }

        // POST请求示例（高级功能）
        async function jiangsuPostRequest() {
            const resultElement = document.getElementById('jiangsuResult');
            resultElement.textContent = 'POST请求中...';
            
            try {
                const response = await fetch(`${BASE_URL}/readcard/jiangsu`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        action: 'readcard',
                        autoVerifyPIN: false,
                        autoInit: true
                    })
                });
                
                const data = await response.json();
                resultElement.textContent = JSON.stringify(data, null, 2);
            } catch (error) {
                resultElement.textContent = `POST请求失败: ${error.message}`;
            }
        }
    </script>
</body>
</html>