evolve
/
car-wash-java


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377
							<!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;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
            margin-bottom: 20px;
            overflow: hidden;
        }

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

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

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

        .form-section {
            padding: 24px 20px;
        }

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

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

        input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            transition: border-color 0.3s, box-shadow 0.3s;
            -webkit-appearance: none;
        }

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

        .btn {
            width: 100%;
            padding: 14px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s, transform 0.15s, opacity 0.3s;
        }

        .btn:hover:not(:disabled) {
            background-color: #45a049;
        }

        .btn:active:not(:disabled) {
            transform: scale(0.98);
        }

        .btn:disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }

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

        .btn-collect:hover:not(:disabled) {
            background-color: #0b7dda;
        }

        .result-container {
            margin: 0 20px 24px;
            padding: 20px;
            border-radius: 8px;
            display: none;
        }

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

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

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

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

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

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

        .result-title.network-error {
            color: #c62828;
        }

        .result-content {
            font-size: 15px;
            color: #555;
            line-height: 1.6;
        }

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

        .loading.active {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .loading svg {
            animation: spin 1.5s linear infinite;
        }

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

        .hint-text {
            color: #999;
            font-size: 12px;
            text-align: center;
            margin-top: 12px;
            line-height: 1.5;
        }

        @media (max-width: 768px) {
            .container {
                margin: 0;
                border-radius: 0;
                min-height: 100vh;
                box-shadow: none;
            }
        }

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

            input,
            .btn {
                font-size: 15px;
                padding: 12px 14px;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>停车减免查询</h1>
        <div class="subtitle">输入手机号查询是否可以领取停车优惠券</div>
    </div>

    <div class="form-section">
        <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" id="submitBtn">查询</button>
            <p class="hint-text">
                <span>- 温馨提示 -</span><br>
                领取后请尽快出场，避免产生二次费用
            </p>
        </form>
    </div>

    <div class="loading" id="loading">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 12a9 9 0 1 1-6.219-8.56"></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>
    const queryForm = document.getElementById('queryForm');
    const phoneInput = document.getElementById('phoneNumber');
    const submitBtn = document.getElementById('submitBtn');
    const loadingEl = document.getElementById('loading');
    const resultContainer = document.getElementById('resultContainer');
    const resultTitle = document.getElementById('resultTitle');
    const resultContent = document.getElementById('resultContent');
    const collectBtn = document.getElementById('collectBtn');

    var redirectUrl = null;

    function setLoading(loading) {
        if (loading) {
            loadingEl.classList.add('active');
            submitBtn.disabled = true;
            collectBtn.disabled = true;
            resultContainer.style.display = 'none';
        } else {
            loadingEl.classList.remove('active');
            submitBtn.disabled = false;
            collectBtn.disabled = false;
        }
    }

    function showResult(type, title, content) {
        resultContainer.classList.remove('eligible', 'not-eligible', 'network-error');
        resultTitle.classList.remove('eligible', 'not-eligible', 'network-error');

        if (type === 'eligible') {
            resultContainer.classList.add('eligible');
            resultTitle.classList.add('eligible');
            collectBtn.style.display = 'block';
        } else if (type === 'not-eligible') {
            resultContainer.classList.add('not-eligible');
            resultTitle.classList.add('not-eligible');
            collectBtn.style.display = 'none';
        } else if (type === 'network-error') {
            resultContainer.classList.add('network-error');
            resultTitle.classList.add('network-error');
            collectBtn.style.display = 'none';
        }

        resultTitle.textContent = title;
        resultContent.textContent = content;
        resultContainer.style.display = 'block';
        resultContainer.scrollIntoView({ behavior: 'smooth' });
    }

    queryForm.addEventListener('submit', function(event) {
        event.preventDefault();

        var phoneNumber = phoneInput.value.trim();
        var phoneRegex = /^1[3-9]\d{9}$/;
        if (!phoneRegex.test(phoneNumber)) {
            alert('请输入正确的11位手机号码');
            return;
        }

        setLoading(true);

        fetch('https://dev-wash-cloud.kuaiyuman.cn/api/parking-coupon/checkParkingCoupon?mobilePhone=' + encodeURIComponent(phoneNumber))
            .then(function(response) {
                if (!response.ok) {
                    throw new Error('服务器繁忙，请稍后重试');
                }
                return response.json();
            })
            .then(function(result) {
                setLoading(false);

                if (result.code === 200) {
                    redirectUrl = result.data;
                    showResult('eligible', '恭喜您，满足领取条件！', '您的手机号符合停车券领取资格，可以立即领取一张停车优惠券。');
                } else {
                    showResult('not-eligible', '抱歉，暂不满足领取条件', result.message || '暂不符合停车券领取资格，请稍后再试。');
                }
            })
            .catch(function(error) {
                setLoading(false);
                showResult('network-error', '网络异常', error.message || '网络连接失败，请检查网络后重试。');
            });
    });

    collectBtn.addEventListener('click', function() {
        if (redirectUrl) {
            setLoading(true);
            location.href = redirectUrl;
        }
    });

    phoneInput.addEventListener('input', function() {
        this.value = this.value.replace(/\D/g, '');
    });

    window.addEventListener('load', function() {
        phoneInput.focus();
    });
</script>
</body>
</html>