evolve
/
car-wash-java


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>停车券查询</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .container {
            max-width: 600px;
            width: 100%;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .header {
            text-align: center;
            padding: 20px 0;
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
            border-radius: 8px 8px 0 0;
            margin: -20px -20px 20px -20px;
        }

        h1 {
            font-size: 24px;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 14px;
            opacity: 0.9;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }

        input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        input:focus {
            outline: none;
            border-color: #4CAF50;
            box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
        }

        .btn {
            width: 100%;
            padding: 12px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .btn:hover {
            background-color: #45a049;
        }

        .btn:active {
            transform: translateY(1px);
        }

        .result-container {
            margin-top: 25px;
            padding: 20px;
            border-radius: 4px;
            display: none;
        }

        .result-container.eligible {
            background-color: #e8f5e8;
            border: 1px solid #4CAF50;
            display: block;
        }

        .result-container.not-eligible {
            background-color: #ffebee;
            border: 1px solid #f44336;
            display: block;
        }

        .result-title {
            font-weight: 600;
            margin-bottom: 10px;
            font-size: 18px;
        }

        .result-title.eligible {
            color: #4CAF50;
        }

        .result-title.not-eligible {
            color: #f44336;
        }

        .result-content {
            font-size: 16px;
            color: #666;
        }

        .btn-collect {
            margin-top: 15px;
            background-color: #2196F3;
        }

        .btn-collect:hover {
            background-color: #0b7dda;
        }

        .loading {
            display: none;
            text-align: center;
            padding: 20px;
            color: #666;
        }

        .loading.active {
            display: block;
        }

        .footer {
            text-align: center;
            padding: 20px;
            font-size: 14px;
            color: #999;
            margin-top: auto;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                margin: 0;
                border-radius: 0;
                min-height: 100vh;
                box-shadow: none;
            }

            .header {
                border-radius: 0;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 20px;
            }

            input,
            .btn {
                font-size: 14px;
                padding: 10px 14px;
            }
        }

        .hint-text {
            color: #999;
            font-size: 12px;
            text-align: center;
            margin-top: 10px;
            line-height: 1.4;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>停车券查询</h1>
        <div class="subtitle">输入手机号查询是否可以领取停车优惠券</div>
    </div>

    <form id="queryForm">
        <div class="form-group">
            <label for="phoneNumber">查询停车券</label>
            <input
                    type="tel"
                    id="phoneNumber"
                    placeholder="请输入需要查询的手机号"
                    maxlength="11"
                    pattern="^1[3-9]\d{9}$"
                    required
            >
        </div>

        <button type="submit" class="btn">查询</button>
        <p class="hint-text">
            <span>-温馨提示-</span><br>
            领取后请尽快出场，避免产生二次费用
        </p>
    </form>

    <div class="loading" id="loading">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M12 6v6l4 2"></path>
        </svg>
        <span>查询中，请稍候...</span>
    </div>

    <div id="resultContainer" class="result-container">
        <h2 id="resultTitle" class="result-title"></h2>
        <p id="resultContent" class="result-content"></p>
        <button id="collectBtn" class="btn btn-collect">查询停车券</button>
    </div>
</div>

<div class="footer">
    Yeswash 超级进化车生活
</div>

<script>
    // 表单提交处理
    document.getElementById('queryForm').addEventListener('submit', function(event) {
        event.preventDefault();

        // 获取手机号并验证
        const phoneNumber = document.getElementById('phoneNumber').value.trim();

        // 简单的手机号格式验证
        const phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(phoneNumber)) {
            alert('请输入正确的11位手机号码');
            return;
        }

        // 显示加载状态
        document.getElementById('loading').classList.add('active');
        document.getElementById('resultContainer').style.display = 'none';

        // 模拟API请求（实际项目中替换为真实的后端API调用）
        setTimeout(() => {
            // 隐藏加载状态
            document.getElementById('loading').classList.remove('active');

            // 模拟查询结果（这里用随机数模拟是否满足领取条件）
            const isEligible = Math.random() > 0.3; // 70%的概率满足条件

            // 显示查询结果
            const resultContainer = document.getElementById('resultContainer');
            const resultTitle = document.getElementById('resultTitle');
            const resultContent = document.getElementById('resultContent');
            const collectBtn = document.getElementById('collectBtn');

            // 清空之前的样式
            resultContainer.classList.remove('eligible', 'not-eligible');
            resultTitle.classList.remove('eligible', 'not-eligible');

            if (isEligible) {
                // 满足领取条件
                resultContainer.classList.add('eligible');
                resultTitle.classList.add('eligible');
                resultTitle.textContent = '恭喜您，满足领取条件！';
                resultContent.textContent = '您的手机号符合停车券领取资格，可以立即领取一张停车优惠券。';
                collectBtn.style.display = 'block';
            } else {
                // 不满足领取条件
                resultContainer.classList.add('not-eligible');
                resultTitle.classList.add('not-eligible');
                resultTitle.textContent = '抱歉，暂不满足领取条件';
                resultContent.textContent = '您的手机号暂不符合停车券领取资格，请稍后再试或咨询客服。';
                collectBtn.style.display = 'none';
            }

            // 显示结果容器
            resultContainer.style.display = 'block';

            // 滚动到结果区域
            resultContainer.scrollIntoView({ behavior: 'smooth' });
        }, 1500); // 模拟1.5秒的网络请求延迟
    });

    // 领取停车券按钮点击事件
    document.getElementById('collectBtn').addEventListener('click', function() {
        const phoneNumber = document.getElementById('phoneNumber').value.trim();

        // 显示加载状态
        document.getElementById('loading').classList.add('active');

        // 模拟查询
        setTimeout(() => {
            // 隐藏加载状态
            document.getElementById('loading').classList.remove('active');

            fetch()
            // 显示领取成功提示
            alert('停车券领取成功！优惠码已发送到您的手机。');

            // 重置表单
            document.getElementById('queryForm').reset();
            document.getElementById('resultContainer').style.display = 'none';
        }, 1000);
    });

    // 手机号输入框的输入限制和格式化
    document.getElementById('phoneNumber').addEventListener('input', function(e) {
        // 只允许输入数字
        this.value = this.value.replace(/\D/g, '');

        // 自动格式化手机号（如：138 1234 5678）
        let value = this.value;
        if (value.length > 0) {
            let formattedValue = '';
            if (value.length > 3) {
                formattedValue += value.slice(0, 3) + ' ';
                value = value.slice(3);
            }
            if (value.length > 4) {
                formattedValue += value.slice(0, 4) + ' ';
                value = value.slice(4);
            }
            formattedValue += value;
            this.value = formattedValue;
        }
    });

    // 页面加载完成后的初始化
    window.addEventListener('load', function() {
        // 自动聚焦到手机号输入框
        document.getElementById('phoneNumber').focus();
    });
</script>
</body>
</html>