wangwenju
/
orderFood


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付模拟器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            max-width: 500px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        }
        
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-size: 28px;
        }
        
        .info {
            background: #f5f5f5;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 30px;
        }
        
        .info-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 16px;
        }
        
        .info-item:last-child {
            margin-bottom: 0;
        }
        
        .label {
            color: #666;
        }
        
        .value {
            color: #333;
            font-weight: bold;
        }
        
        .amount {
            color: #ff6b6b;
            font-size: 24px;
        }
        
        .buttons {
            display: flex;
            gap: 15px;
        }
        
        button {
            flex: 1;
            padding: 15px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-success {
            background: #4caf50;
            color: white;
        }
        
        .btn-success:hover {
            background: #45a049;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
        }
        
        .btn-fail {
            background: #f44336;
            color: white;
        }
        
        .btn-fail:hover {
            background: #da190b;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(244, 67, 54, 0.3);
        }
        
        .message {
            margin-top: 20px;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            font-weight: bold;
            display: none;
        }
        
        .message.success {
            background: #d4edda;
            color: #155724;
            display: block;
        }
        
        .message.error {
            background: #f8d7da;
            color: #721c24;
            display: block;
        }
        
        .note {
            margin-top: 20px;
            padding: 15px;
            background: #fff3cd;
            border-radius: 10px;
            font-size: 14px;
            color: #856404;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>💳 支付模拟器</h1>
        
        <div class="info">
            <div class="info-item">
                <span class="label">支付单号：</span>
                <span class="value" id="paymentId">-</span>
            </div>
            <div class="info-item">
                <span class="label">支付金额：</span>
                <span class="value amount" id="amount">¥0.00</span>
            </div>
        </div>
        
        <div class="buttons">
            <button class="btn-success" onclick="simulatePayment('success')">
                ✓ 支付成功
            </button>
            <button class="btn-fail" onclick="simulatePayment('failed')">
                ✗ 支付失败
            </button>
        </div>
        
        <div class="message" id="message"></div>
        
        <div class="note">
            <strong>使用说明：</strong><br>
            1. 在主页面点击"去结算"后会显示二维码<br>
            2. 从URL中获取支付单号（paymentId）<br>
            3. 在此页面输入支付单号并点击按钮模拟支付结果<br>
            4. 主页面会自动检测到支付状态并创建订单
        </div>
    </div>
    
    <script>
        const API_BASE_URL = 'http://localhost:8086/api';
        
        // 从URL获取支付信息
        function getPaymentInfo() {
            const urlParams = new URLSearchParams(window.location.search);
            const paymentId = urlParams.get('paymentId');
            const amount = urlParams.get('amount');
            
            if (paymentId) {
                document.getElementById('paymentId').textContent = paymentId;
            }
            if (amount) {
                document.getElementById('amount').textContent = '¥' + parseFloat(amount).toFixed(2);
            }
            
            return { paymentId, amount };
        }
        
        // 模拟支付
        async function simulatePayment(status) {
            const paymentId = document.getElementById('paymentId').textContent;
            
            if (paymentId === '-') {
                showMessage('请先从主页面扫描二维码！', 'error');
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE_URL}/payment/simulate?paymentId=${paymentId}&status=${status}`, {
                    method: 'POST'
                });
                const result = await response.json();
                
                if (result.code === 200) {
                    const message = status === 'success' ? '支付成功！订单正在创建中...' : '支付失败！';
                    showMessage(message, status === 'success' ? 'success' : 'error');
                    
                    if (status === 'success') {
                        setTimeout(() => {
                            window.close();
                        }, 2000);
                    }
                } else {
                    showMessage('操作失败：' + result.message, 'error');
                }
            } catch (error) {
                console.error('模拟支付失败:', error);
                showMessage('网络错误，请检查后端服务', 'error');
            }
        }
        
        function showMessage(text, type) {
            const messageEl = document.getElementById('message');
            messageEl.textContent = text;
            messageEl.className = 'message ' + type;
        }
        
        // 页面加载时获取支付信息
        window.onload = getPaymentInfo;
    </script>
</body>
</html>