|
|
@@ -0,0 +1,361 @@
|
|
|
+<!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>
|
zuy