|
|
@@ -3,7 +3,7 @@
|
|
|
<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>
|
|
|
+ <title>停车减免查询</title>
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
@@ -25,26 +25,24 @@
|
|
|
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;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
text-align: center;
|
|
|
- padding: 20px 0;
|
|
|
+ padding: 24px 20px;
|
|
|
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;
|
|
|
+ margin-bottom: 8px;
|
|
|
}
|
|
|
|
|
|
.subtitle {
|
|
|
@@ -52,6 +50,10 @@
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
|
|
|
+ .form-section {
|
|
|
+ padding: 24px 20px;
|
|
|
+ }
|
|
|
+
|
|
|
.form-group {
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
@@ -61,58 +63,80 @@
|
|
|
margin-bottom: 8px;
|
|
|
font-weight: 500;
|
|
|
color: #555;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
|
|
|
input {
|
|
|
width: 100%;
|
|
|
padding: 12px 16px;
|
|
|
border: 1px solid #ddd;
|
|
|
- border-radius: 4px;
|
|
|
+ border-radius: 8px;
|
|
|
font-size: 16px;
|
|
|
- transition: border-color 0.3s;
|
|
|
+ transition: border-color 0.3s, box-shadow 0.3s;
|
|
|
+ -webkit-appearance: none;
|
|
|
}
|
|
|
|
|
|
input:focus {
|
|
|
outline: none;
|
|
|
border-color: #4CAF50;
|
|
|
- box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
|
|
|
+ box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
|
|
|
}
|
|
|
|
|
|
.btn {
|
|
|
width: 100%;
|
|
|
- padding: 12px;
|
|
|
+ padding: 14px;
|
|
|
background-color: #4CAF50;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
- border-radius: 4px;
|
|
|
+ border-radius: 8px;
|
|
|
font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
+ font-weight: 600;
|
|
|
cursor: pointer;
|
|
|
- transition: background-color 0.3s;
|
|
|
+ transition: background-color 0.3s, transform 0.15s, opacity 0.3s;
|
|
|
}
|
|
|
|
|
|
- .btn:hover {
|
|
|
+ .btn:hover:not(:disabled) {
|
|
|
background-color: #45a049;
|
|
|
}
|
|
|
|
|
|
- .btn:active {
|
|
|
- transform: translateY(1px);
|
|
|
+ .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-top: 25px;
|
|
|
+ margin: 0 20px 24px;
|
|
|
padding: 20px;
|
|
|
- border-radius: 4px;
|
|
|
+ border-radius: 8px;
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.result-container.eligible {
|
|
|
- background-color: #e8f5e8;
|
|
|
+ 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;
|
|
|
@@ -120,7 +144,7 @@
|
|
|
|
|
|
.result-title {
|
|
|
font-weight: 600;
|
|
|
- margin-bottom: 10px;
|
|
|
+ margin-bottom: 8px;
|
|
|
font-size: 18px;
|
|
|
}
|
|
|
|
|
|
@@ -129,21 +153,17 @@
|
|
|
}
|
|
|
|
|
|
.result-title.not-eligible {
|
|
|
- color: #f44336;
|
|
|
- }
|
|
|
-
|
|
|
- .result-content {
|
|
|
- font-size: 16px;
|
|
|
- color: #666;
|
|
|
+ color: #e65100;
|
|
|
}
|
|
|
|
|
|
- .btn-collect {
|
|
|
- margin-top: 15px;
|
|
|
- background-color: #2196F3;
|
|
|
+ .result-title.network-error {
|
|
|
+ color: #c62828;
|
|
|
}
|
|
|
|
|
|
- .btn-collect:hover {
|
|
|
- background-color: #0b7dda;
|
|
|
+ .result-content {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #555;
|
|
|
+ line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
.loading {
|
|
|
@@ -154,7 +174,19 @@
|
|
|
}
|
|
|
|
|
|
.loading.active {
|
|
|
- display: block;
|
|
|
+ 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 {
|
|
|
@@ -165,7 +197,14 @@
|
|
|
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;
|
|
|
@@ -173,10 +212,6 @@
|
|
|
min-height: 100vh;
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
-
|
|
|
- .header {
|
|
|
- border-radius: 0;
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
@media (max-width: 480px) {
|
|
|
@@ -186,51 +221,44 @@
|
|
|
|
|
|
input,
|
|
|
.btn {
|
|
|
- font-size: 14px;
|
|
|
- padding: 10px 14px;
|
|
|
+ font-size: 15px;
|
|
|
+ padding: 12px 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>
|
|
|
+ <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="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="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 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>
|
|
|
@@ -238,7 +266,7 @@
|
|
|
<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>
|
|
|
+ <button id="collectBtn" class="btn btn-collect">领取停车券</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -247,128 +275,103 @@
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
- // 表单提交处理
|
|
|
- document.getElementById('queryForm').addEventListener('submit', function(event) {
|
|
|
- event.preventDefault();
|
|
|
+ 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';
|
|
|
+ }
|
|
|
|
|
|
- // 获取手机号并验证
|
|
|
- const phoneNumber = document.getElementById('phoneNumber').value.trim();
|
|
|
+ resultTitle.textContent = title;
|
|
|
+ resultContent.textContent = content;
|
|
|
+ resultContainer.style.display = 'block';
|
|
|
+ resultContainer.scrollIntoView({ behavior: 'smooth' });
|
|
|
+ }
|
|
|
|
|
|
- // 简单的手机号格式验证
|
|
|
- const phoneRegex = /^1[3-9]\d{9}$/;
|
|
|
+ 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;
|
|
|
}
|
|
|
|
|
|
- // 显示加载状态
|
|
|
- document.getElementById('loading').classList.add('active');
|
|
|
- document.getElementById('resultContainer').style.display = 'none';
|
|
|
-
|
|
|
- let isEligible = false; // 70%的概率满足条件
|
|
|
- // 模拟API请求（实际项目中替换为真实的后端API调用）
|
|
|
- fetch(`https://dev-wash-cloud.kuaiyuman.cn/api/parking-coupon/checkParkingCoupon?mobilePhone=${phoneNumber}`).then(response => {
|
|
|
- console.log(response);
|
|
|
-
|
|
|
- // 隐藏加载状态
|
|
|
- document.getElementById('loading').classList.remove('active');
|
|
|
-
|
|
|
- isEligible =response.ok();
|
|
|
+ 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);
|
|
|
|
|
|
- // 显示查询结果
|
|
|
- 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';
|
|
|
- collectBtn['data-jump']= response.text();
|
|
|
+ if (result.code === 200) {
|
|
|
+ redirectUrl = result.data;
|
|
|
+ showResult('eligible', '恭喜您，满足领取条件！', '您的手机号符合停车券领取资格，可以立即领取一张停车优惠券。');
|
|
|
} else {
|
|
|
- // 不满足领取条件
|
|
|
- resultContainer.classList.add('not-eligible');
|
|
|
- resultTitle.classList.add('not-eligible');
|
|
|
- resultTitle.textContent = '抱歉，暂不满足领取条件';
|
|
|
- resultContent.textContent = '您的手机号暂不符合停车券领取资格，请稍后再试或咨询客服。';
|
|
|
- collectBtn.style.display = 'none';
|
|
|
+ showResult('not-eligible', '抱歉，暂不满足领取条件', result.message || '暂不符合停车券领取资格，请稍后再试。');
|
|
|
}
|
|
|
-
|
|
|
- // 显示结果容器
|
|
|
- resultContainer.style.display = 'block';
|
|
|
-
|
|
|
- // 滚动到结果区域
|
|
|
- resultContainer.scrollIntoView({ behavior: 'smooth' });
|
|
|
})
|
|
|
-
|
|
|
+ .catch(function(error) {
|
|
|
+ setLoading(false);
|
|
|
+ showResult('network-error', '网络异常', error.message || '网络连接失败，请检查网络后重试。');
|
|
|
+ });
|
|
|
});
|
|
|
|
|
|
- // 领取停车券按钮点击事件
|
|
|
- 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');
|
|
|
- const collectBtn = document.getElementById('collectBtn');
|
|
|
- location.href=collectBtn.dataset.jump;
|
|
|
- /* fetch(`https://dev-wash-cloud.kuaiyuman.cn/api/parking-coupon/checkParkingCoupon?mobilePhone=${phoneNumber}`).then(response => {
|
|
|
- let ok = response.ok;
|
|
|
- if(ok){
|
|
|
- // 显示领取成功提示
|
|
|
- alert('停车券领取成功！优惠码已发送到您的手机。');
|
|
|
-
|
|
|
- // 重置表单
|
|
|
- document.getElementById('queryForm').reset();
|
|
|
- document.getElementById('resultContainer').style.display = 'none';
|
|
|
- }else{
|
|
|
- alert(response.message);
|
|
|
- }
|
|
|
- })*/
|
|
|
-
|
|
|
- }, 100);
|
|
|
+ collectBtn.addEventListener('click', function() {
|
|
|
+ if (redirectUrl) {
|
|
|
+ setLoading(true);
|
|
|
+ location.href = redirectUrl;
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
- // 手机号输入框的输入限制和格式化
|
|
|
- document.getElementById('phoneNumber').addEventListener('input', function(e) {
|
|
|
- // 只允许输入数字
|
|
|
+ phoneInput.addEventListener('input', function() {
|
|
|
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();
|
|
|
+ phoneInput.focus();
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
-</html>
|
|
|
+</html>
|
skyline