|
|
@@ -3,8 +3,39 @@
|
|
|
<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>停车减免查询 - YesWash</title>
|
|
|
<style>
|
|
|
+ :root {
|
|
|
+ --color-primary: #9B0415;
|
|
|
+ --color-primary-light: #c0051a;
|
|
|
+ --color-primary-lighter: #fef0f0;
|
|
|
+ --color-primary-bg: #fff5f5;
|
|
|
+ --color-success: #67C23A;
|
|
|
+ --color-success-bg: #f0f9eb;
|
|
|
+ --color-warning: #E6A23C;
|
|
|
+ --color-warning-bg: #fdf6ec;
|
|
|
+ --color-danger: #F56C6C;
|
|
|
+ --color-danger-bg: #fef0f0;
|
|
|
+ --color-info: #909399;
|
|
|
+ --color-info-bg: #f4f4f5;
|
|
|
+ --bg-color: #f8f8f8;
|
|
|
+ --bg-white: #ffffff;
|
|
|
+ --text-primary: #303133;
|
|
|
+ --text-regular: #606266;
|
|
|
+ --text-secondary: #909399;
|
|
|
+ --text-placeholder: #c0c4cc;
|
|
|
+ --border-color: #dcdfe6;
|
|
|
+ --border-color-light: #e4e7ed;
|
|
|
+ --border-color-lighter: #ebeef5;
|
|
|
+ --border-radius: 4px;
|
|
|
+ --border-radius-lg: 8px;
|
|
|
+ --border-radius-round: 20px;
|
|
|
+ --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.04);
|
|
|
+ --shadow-card-hover: 0 2px 12px rgba(0, 0, 0, 0.08);
|
|
|
+ --font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "SimSun", sans-serif;
|
|
|
+ --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
+ }
|
|
|
+
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
@@ -12,366 +43,575 @@
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
+ font-family: var(--font-family);
|
|
|
+ font-size: 14px;
|
|
|
+ color: var(--text-primary);
|
|
|
+ background-color: var(--bg-color);
|
|
|
min-height: 100vh;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ -moz-osx-font-smoothing: grayscale;
|
|
|
}
|
|
|
|
|
|
- .container {
|
|
|
- max-width: 600px;
|
|
|
+ /* Header */
|
|
|
+ .brand-header {
|
|
|
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;
|
|
|
+ background: linear-gradient(135deg, #8b0312 0%, #9B0415 40%, #b01528 100%);
|
|
|
+ padding: 32px 20px 40px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
|
|
|
- .header {
|
|
|
- text-align: center;
|
|
|
- padding: 24px 20px;
|
|
|
- background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
|
|
|
- color: white;
|
|
|
+ .brand-header::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: -50%;
|
|
|
+ left: -50%;
|
|
|
+ width: 200%;
|
|
|
+ height: 200%;
|
|
|
+ background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.08) 0%, transparent 60%);
|
|
|
+ pointer-events: none;
|
|
|
}
|
|
|
|
|
|
- h1 {
|
|
|
- font-size: 24px;
|
|
|
+ .brand-logo {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ letter-spacing: 4px;
|
|
|
+ opacity: 0.7;
|
|
|
margin-bottom: 8px;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
- .subtitle {
|
|
|
+ .brand-title {
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .brand-subtitle {
|
|
|
font-size: 14px;
|
|
|
- opacity: 0.9;
|
|
|
+ opacity: 0.75;
|
|
|
+ font-weight: 300;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
- .form-section {
|
|
|
- padding: 24px 20px;
|
|
|
+ /* Main Content */
|
|
|
+ .page-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ max-width: 420px;
|
|
|
+ padding: 0 16px;
|
|
|
+ margin-top: -16px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .main-card {
|
|
|
+ background: var(--bg-white);
|
|
|
+ border-radius: var(--border-radius-lg);
|
|
|
+ box-shadow: var(--shadow-card);
|
|
|
+ padding: 28px 24px;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
|
|
|
+ /* Form */
|
|
|
.form-group {
|
|
|
- margin-bottom: 20px;
|
|
|
+ margin-bottom: 0;
|
|
|
}
|
|
|
|
|
|
- label {
|
|
|
+ .field-label {
|
|
|
display: block;
|
|
|
- margin-bottom: 8px;
|
|
|
+ font-size: 13px;
|
|
|
font-weight: 500;
|
|
|
- color: #555;
|
|
|
- font-size: 14px;
|
|
|
+ color: var(--text-regular);
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-wrapper {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-prefix {
|
|
|
+ position: absolute;
|
|
|
+ left: 14px;
|
|
|
+ z-index: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .input-prefix svg {
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ color: var(--text-secondary);
|
|
|
}
|
|
|
|
|
|
- input {
|
|
|
+ .phone-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;
|
|
|
+ height: 44px;
|
|
|
+ padding: 0 14px 0 42px;
|
|
|
+ border: 1px solid var(--border-color);
|
|
|
+ border-radius: var(--border-radius);
|
|
|
+ font-size: 15px;
|
|
|
+ font-family: var(--font-family);
|
|
|
+ color: var(--text-primary);
|
|
|
+ background: var(--bg-white);
|
|
|
+ transition: border-color var(--transition), box-shadow var(--transition);
|
|
|
+ outline: none;
|
|
|
-webkit-appearance: none;
|
|
|
}
|
|
|
|
|
|
- input:focus {
|
|
|
- outline: none;
|
|
|
- border-color: #4CAF50;
|
|
|
- box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
|
|
|
+ .phone-input::placeholder {
|
|
|
+ color: var(--text-placeholder);
|
|
|
}
|
|
|
|
|
|
+ .phone-input:focus {
|
|
|
+ border-color: var(--color-primary);
|
|
|
+ box-shadow: 0 0 0 2px rgba(155, 4, 21, 0.12);
|
|
|
+ }
|
|
|
+
|
|
|
+ .phone-input.error {
|
|
|
+ border-color: var(--color-danger);
|
|
|
+ }
|
|
|
+
|
|
|
+ .field-error {
|
|
|
+ color: var(--color-danger);
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 6px;
|
|
|
+ display: none;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .field-error.show {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Buttons */
|
|
|
.btn {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
width: 100%;
|
|
|
- padding: 14px;
|
|
|
- background-color: #4CAF50;
|
|
|
- color: white;
|
|
|
+ height: 44px;
|
|
|
+ padding: 0 20px;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ font-family: var(--font-family);
|
|
|
border: none;
|
|
|
- border-radius: 8px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
+ border-radius: var(--border-radius-round);
|
|
|
cursor: pointer;
|
|
|
- transition: background-color 0.3s, transform 0.15s, opacity 0.3s;
|
|
|
+ transition: all var(--transition);
|
|
|
+ outline: none;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary {
|
|
|
+ background: var(--color-primary);
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
- .btn:hover:not(:disabled) {
|
|
|
- background-color: #45a049;
|
|
|
+ .btn-primary:hover:not(:disabled) {
|
|
|
+ background: var(--color-primary-light);
|
|
|
+ box-shadow: 0 2px 8px rgba(155, 4, 21, 0.25);
|
|
|
+ transform: translateY(-1px);
|
|
|
}
|
|
|
|
|
|
- .btn:active:not(:disabled) {
|
|
|
- transform: scale(0.98);
|
|
|
+ .btn-primary:active:not(:disabled) {
|
|
|
+ transform: translateY(0);
|
|
|
+ box-shadow: none;
|
|
|
}
|
|
|
|
|
|
- .btn:disabled {
|
|
|
- opacity: 0.65;
|
|
|
+ .btn-primary:disabled {
|
|
|
+ opacity: 0.55;
|
|
|
cursor: not-allowed;
|
|
|
}
|
|
|
|
|
|
- .btn-collect {
|
|
|
+ .btn-claim {
|
|
|
+ background: var(--color-primary);
|
|
|
+ color: #fff;
|
|
|
margin-top: 16px;
|
|
|
- background-color: #2196F3;
|
|
|
+ animation: fadeInUp 0.4s ease;
|
|
|
}
|
|
|
|
|
|
- .btn-collect:hover:not(:disabled) {
|
|
|
- background-color: #0b7dda;
|
|
|
+ .btn-claim:hover:not(:disabled) {
|
|
|
+ background: var(--color-primary-light);
|
|
|
+ box-shadow: 0 2px 8px rgba(155, 4, 21, 0.25);
|
|
|
}
|
|
|
|
|
|
- .result-container {
|
|
|
- margin: 0 20px 24px;
|
|
|
- padding: 20px;
|
|
|
- border-radius: 8px;
|
|
|
+ /* Loading */
|
|
|
+ .loading-area {
|
|
|
display: none;
|
|
|
+ text-align: center;
|
|
|
+ padding: 32px 20px;
|
|
|
}
|
|
|
|
|
|
- .result-container.eligible {
|
|
|
- background-color: #e8f5e9;
|
|
|
- border: 1px solid #4CAF50;
|
|
|
- display: block;
|
|
|
- }
|
|
|
-
|
|
|
- .result-container.not-eligible {
|
|
|
- background-color: #fff3e0;
|
|
|
- border: 1px solid #ff9800;
|
|
|
+ .loading-area.active {
|
|
|
display: block;
|
|
|
+ animation: fadeIn 0.25s ease;
|
|
|
}
|
|
|
|
|
|
- .result-container.network-error {
|
|
|
- background-color: #ffebee;
|
|
|
- border: 1px solid #f44336;
|
|
|
- display: block;
|
|
|
+ .spinner {
|
|
|
+ display: inline-block;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ border: 3px solid var(--border-color-lighter);
|
|
|
+ border-top-color: var(--color-primary);
|
|
|
+ border-radius: 50%;
|
|
|
+ animation: spin 0.8s linear infinite;
|
|
|
}
|
|
|
|
|
|
- .result-title {
|
|
|
- font-weight: 600;
|
|
|
- margin-bottom: 8px;
|
|
|
- font-size: 18px;
|
|
|
+ .loading-text {
|
|
|
+ margin-top: 14px;
|
|
|
+ font-size: 13px;
|
|
|
+ color: var(--text-secondary);
|
|
|
}
|
|
|
|
|
|
- .result-title.eligible {
|
|
|
- color: #4CAF50;
|
|
|
+ /* Result Card */
|
|
|
+ .result-card {
|
|
|
+ display: none;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: var(--border-radius);
|
|
|
+ margin-top: 20px;
|
|
|
+ animation: fadeInUp 0.35s ease;
|
|
|
}
|
|
|
|
|
|
- .result-title.not-eligible {
|
|
|
- color: #e65100;
|
|
|
+ .result-card.show {
|
|
|
+ display: block;
|
|
|
}
|
|
|
|
|
|
- .result-title.network-error {
|
|
|
- color: #c62828;
|
|
|
+ .result-card.success {
|
|
|
+ background: var(--color-success-bg);
|
|
|
+ border-left: 3px solid var(--color-success);
|
|
|
}
|
|
|
|
|
|
- .result-content {
|
|
|
- font-size: 15px;
|
|
|
- color: #555;
|
|
|
- line-height: 1.6;
|
|
|
+ .result-card.warning {
|
|
|
+ background: var(--color-warning-bg);
|
|
|
+ border-left: 3px solid var(--color-warning);
|
|
|
}
|
|
|
|
|
|
- .loading {
|
|
|
- display: none;
|
|
|
- text-align: center;
|
|
|
- padding: 20px;
|
|
|
- color: #666;
|
|
|
+ .result-card.error {
|
|
|
+ background: var(--color-danger-bg);
|
|
|
+ border-left: 3px solid var(--color-danger);
|
|
|
}
|
|
|
|
|
|
- .loading.active {
|
|
|
+ .result-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- gap: 10px;
|
|
|
+ margin-bottom: 12px;
|
|
|
}
|
|
|
|
|
|
- @keyframes spin {
|
|
|
- from { transform: rotate(0deg); }
|
|
|
- to { transform: rotate(360deg); }
|
|
|
+ .result-icon.success {
|
|
|
+ background: var(--color-success);
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
- .loading svg {
|
|
|
- animation: spin 1.5s linear infinite;
|
|
|
+ .result-icon.warning {
|
|
|
+ background: var(--color-warning);
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
- .footer {
|
|
|
- text-align: center;
|
|
|
- padding: 20px;
|
|
|
- font-size: 14px;
|
|
|
- color: #999;
|
|
|
- margin-top: auto;
|
|
|
+ .result-icon.error {
|
|
|
+ background: var(--color-danger);
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
+ .result-icon svg {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .result-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ color: var(--text-primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .result-desc {
|
|
|
+ font-size: 13px;
|
|
|
+ color: var(--text-regular);
|
|
|
+ line-height: 1.6;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Hint */
|
|
|
.hint-text {
|
|
|
- color: #999;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 6px;
|
|
|
+ margin-top: 18px;
|
|
|
font-size: 12px;
|
|
|
+ color: var(--text-placeholder);
|
|
|
+ }
|
|
|
+
|
|
|
+ .hint-text svg {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Footer */
|
|
|
+ .page-footer {
|
|
|
text-align: center;
|
|
|
- margin-top: 12px;
|
|
|
- line-height: 1.5;
|
|
|
+ padding: 16px 20px 28px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-placeholder);
|
|
|
+ letter-spacing: 1px;
|
|
|
}
|
|
|
|
|
|
- @media (max-width: 768px) {
|
|
|
- .container {
|
|
|
- margin: 0;
|
|
|
- border-radius: 0;
|
|
|
- min-height: 100vh;
|
|
|
- box-shadow: none;
|
|
|
- }
|
|
|
+ /* Keyframes */
|
|
|
+ @keyframes spin {
|
|
|
+ from { transform: rotate(0deg); }
|
|
|
+ to { transform: rotate(360deg); }
|
|
|
}
|
|
|
|
|
|
- @media (max-width: 480px) {
|
|
|
- h1 {
|
|
|
- font-size: 20px;
|
|
|
- }
|
|
|
+ @keyframes fadeIn {
|
|
|
+ from { opacity: 0; }
|
|
|
+ to { opacity: 1; }
|
|
|
+ }
|
|
|
|
|
|
- input,
|
|
|
- .btn {
|
|
|
- font-size: 15px;
|
|
|
- padding: 12px 14px;
|
|
|
+ @keyframes fadeInUp {
|
|
|
+ from { opacity: 0; transform: translateY(10px); }
|
|
|
+ to { opacity: 1; transform: translateY(0); }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Mobile tweaks */
|
|
|
+ @media (max-width: 440px) {
|
|
|
+ .brand-header {
|
|
|
+ padding: 24px 16px 32px;
|
|
|
+ }
|
|
|
+ .brand-title {
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ .page-wrapper {
|
|
|
+ padding: 0 10px;
|
|
|
+ margin-top: -12px;
|
|
|
+ }
|
|
|
+ .main-card {
|
|
|
+ padding: 22px 18px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
-<div class="container">
|
|
|
- <div class="header">
|
|
|
- <h1>停车减免查询</h1>
|
|
|
- <div class="subtitle">输入手机号查询是否可以领取停车优惠券</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="form-section">
|
|
|
- <form id="queryForm">
|
|
|
+<header class="brand-header">
|
|
|
+ <div class="brand-logo">YESWASH</div>
|
|
|
+ <h1 class="brand-title">停车减免查询</h1>
|
|
|
+ <p class="brand-subtitle">查询是否符合停车费用减免条件</p>
|
|
|
+</header>
|
|
|
+
|
|
|
+<div class="page-wrapper">
|
|
|
+ <div class="main-card">
|
|
|
+ <form id="queryForm" novalidate>
|
|
|
<div class="form-group">
|
|
|
- <label for="phoneNumber">手机号</label>
|
|
|
- <input
|
|
|
+ <label class="field-label" for="phoneNumber">手机号码</label>
|
|
|
+ <div class="input-wrapper">
|
|
|
+ <span class="input-prefix">
|
|
|
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
|
+ <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/>
|
|
|
+ <line x1="12" y1="18" x2="12.01" y2="18"/>
|
|
|
+ </svg>
|
|
|
+ </span>
|
|
|
+ <input
|
|
|
type="tel"
|
|
|
id="phoneNumber"
|
|
|
- placeholder="请输入需要查询的手机号"
|
|
|
+ class="phone-input"
|
|
|
+ placeholder="请输入注册时使用的手机号"
|
|
|
maxlength="11"
|
|
|
- pattern="^1[3-9]\d{9}$"
|
|
|
- required
|
|
|
- >
|
|
|
+ autocomplete="tel"
|
|
|
+ inputmode="numeric"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div id="fieldError" class="field-error">
|
|
|
+ <svg width="14" height="14" 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"/>
|
|
|
+ <line x1="15" y1="9" x2="9" y2="15"/>
|
|
|
+ <line x1="9" y1="9" x2="15" y2="15"/>
|
|
|
+ </svg>
|
|
|
+ <span></span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
- <button type="submit" class="btn" id="submitBtn">查询</button>
|
|
|
- <p class="hint-text">
|
|
|
- <span>- 温馨提示 -</span><br>
|
|
|
- 领取后请尽快出场，避免产生二次费用
|
|
|
- </p>
|
|
|
+ <button type="submit" class="btn btn-primary" id="submitBtn">查 询</button>
|
|
|
</form>
|
|
|
+
|
|
|
+ <div class="hint-text">
|
|
|
+ <svg 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"/>
|
|
|
+ <line x1="12" y1="16" x2="12" y2="12"/>
|
|
|
+ <line x1="12" y1="8" x2="12.01" y2="8"/>
|
|
|
+ </svg>
|
|
|
+ <span>领取后请尽快出场，避免产生二次费用</span>
|
|
|
+ </div>
|
|
|
</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 class="loading-area" id="loadingArea">
|
|
|
+ <div class="spinner"></div>
|
|
|
+ <p class="loading-text">查询中，请稍候...</p>
|
|
|
</div>
|
|
|
|
|
|
- <div id="resultContainer" class="result-container">
|
|
|
+ <div id="resultCard" class="result-card">
|
|
|
+ <div id="resultIcon" class="result-icon"></div>
|
|
|
<h2 id="resultTitle" class="result-title"></h2>
|
|
|
- <p id="resultContent" class="result-content"></p>
|
|
|
- <button id="collectBtn" class="btn btn-collect">领取停车券</button>
|
|
|
+ <p id="resultDesc" class="result-desc"></p>
|
|
|
+ <button id="collectBtn" class="btn btn-claim" style="display:none;">领取停车券</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
-<div class="footer">
|
|
|
- Yeswash 超级进化车生活
|
|
|
-</div>
|
|
|
+<footer class="page-footer">
|
|
|
+ YesWash 超级进化车生活
|
|
|
+</footer>
|
|
|
|
|
|
<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();
|
|
|
+ (function() {
|
|
|
+ var phoneInput = document.getElementById('phoneNumber');
|
|
|
+ var submitBtn = document.getElementById('submitBtn');
|
|
|
+ var fieldError = document.getElementById('fieldError');
|
|
|
+ var loadingArea = document.getElementById('loadingArea');
|
|
|
+ var resultCard = document.getElementById('resultCard');
|
|
|
+ var resultIcon = document.getElementById('resultIcon');
|
|
|
+ var resultTitle = document.getElementById('resultTitle');
|
|
|
+ var resultDesc = document.getElementById('resultDesc');
|
|
|
+ var collectBtn = document.getElementById('collectBtn');
|
|
|
+ var mainCard = document.querySelector('.main-card');
|
|
|
+
|
|
|
+ var redirectUrl = null;
|
|
|
+ var querying = false;
|
|
|
+
|
|
|
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;
|
|
|
+
|
|
|
+ function showFieldError(msg) {
|
|
|
+ fieldError.querySelector('span').textContent = msg;
|
|
|
+ fieldError.classList.add('show');
|
|
|
+ phoneInput.classList.add('error');
|
|
|
+ }
|
|
|
+
|
|
|
+ function clearFieldError() {
|
|
|
+ fieldError.classList.remove('show');
|
|
|
+ phoneInput.classList.remove('error');
|
|
|
+ }
|
|
|
+
|
|
|
+ function setLoading(loading) {
|
|
|
+ querying = loading;
|
|
|
+ if (loading) {
|
|
|
+ loadingArea.classList.add('active');
|
|
|
+ mainCard.style.opacity = '0.6';
|
|
|
+ mainCard.style.pointerEvents = 'none';
|
|
|
+ submitBtn.disabled = true;
|
|
|
+ resultCard.classList.remove('show');
|
|
|
+ resultCard.className = 'result-card';
|
|
|
+ collectBtn.style.display = 'none';
|
|
|
+ } else {
|
|
|
+ loadingArea.classList.remove('active');
|
|
|
+ mainCard.style.opacity = '';
|
|
|
+ mainCard.style.pointerEvents = '';
|
|
|
+ submitBtn.disabled = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function showResult(type, title, desc, showClaimBtn) {
|
|
|
+ resultCard.className = 'result-card ' + type + ' show';
|
|
|
+ resultIcon.className = 'result-icon ' + type;
|
|
|
+
|
|
|
+ var iconSvg = '';
|
|
|
+ if (type === 'success') {
|
|
|
+ iconSvg = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
|
|
|
+ } else if (type === 'warning') {
|
|
|
+ iconSvg = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>';
|
|
|
+ } else {
|
|
|
+ iconSvg = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>';
|
|
|
+ }
|
|
|
+ resultIcon.innerHTML = iconSvg;
|
|
|
+ resultTitle.textContent = title;
|
|
|
+ resultDesc.textContent = desc;
|
|
|
+
|
|
|
+ if (showClaimBtn) {
|
|
|
+ collectBtn.style.display = 'inline-flex';
|
|
|
+ } else {
|
|
|
+ collectBtn.style.display = 'none';
|
|
|
+ }
|
|
|
+
|
|
|
+ resultCard.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
|
|
}
|
|
|
- });
|
|
|
|
|
|
- phoneInput.addEventListener('input', function() {
|
|
|
- this.value = this.value.replace(/\D/g, '');
|
|
|
- });
|
|
|
+ document.getElementById('queryForm').addEventListener('submit', function(e) {
|
|
|
+ e.preventDefault();
|
|
|
+ if (querying) return;
|
|
|
+
|
|
|
+ var phone = phoneInput.value.replace(/\D/g, '');
|
|
|
+ clearFieldError();
|
|
|
+
|
|
|
+ if (!phoneRegex.test(phone)) {
|
|
|
+ showFieldError('请输入正确的11位手机号码');
|
|
|
+ phoneInput.focus();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ setLoading(true);
|
|
|
+
|
|
|
+ fetch('https://dev.kuaiyuman.cn/api/parking-coupon/checkParkingCoupon?mobilePhone=' + encodeURIComponent(phone))
|
|
|
+ .then(function(res) {
|
|
|
+ if (!res.ok) {
|
|
|
+ throw new Error('服务繁忙，请稍后重试');
|
|
|
+ }
|
|
|
+ return res.json();
|
|
|
+ })
|
|
|
+ .then(function(data) {
|
|
|
+ setLoading(false);
|
|
|
+ if (data.code === 200) {
|
|
|
+ redirectUrl = data.data;
|
|
|
+ showResult('success',
|
|
|
+ '符合减免条件',
|
|
|
+ '您的手机号符合停车费用减免资格，点击下方按钮领取停车优惠券。',
|
|
|
+ true
|
|
|
+ );
|
|
|
+ } else {
|
|
|
+ showResult('warning',
|
|
|
+ '暂不符合条件',
|
|
|
+ data.message || '暂不符合停车减免条件，如有疑问请联系客服。',
|
|
|
+ false
|
|
|
+ );
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(function(err) {
|
|
|
+ setLoading(false);
|
|
|
+ showResult('error',
|
|
|
+ '网络异常',
|
|
|
+ err.message || '网络连接失败，请检查网络后重试。',
|
|
|
+ false
|
|
|
+ );
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ collectBtn.addEventListener('click', function() {
|
|
|
+ if (redirectUrl && !querying) {
|
|
|
+ setLoading(true);
|
|
|
+ location.href = redirectUrl;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ phoneInput.addEventListener('input', function() {
|
|
|
+ this.value = this.value.replace(/\D/g, '');
|
|
|
+ if (this.value.length >= 11) {
|
|
|
+ clearFieldError();
|
|
|
+ }
|
|
|
+ });
|
|
|
|
|
|
- window.addEventListener('load', function() {
|
|
|
phoneInput.focus();
|
|
|
- });
|
|
|
+ })();
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
skyline