224 lines
9.3 KiB
PHP
224 lines
9.3 KiB
PHP
<?php
|
|
// index.php - 预约首页
|
|
require_once 'db_connect.php';
|
|
$message = '';
|
|
$message_type = '';
|
|
|
|
// 处理表单提交
|
|
if ($_POST) {
|
|
try {
|
|
$customer_name = $_POST['customer_name'] ?? '';
|
|
$phone = $_POST['phone'] ?? '';
|
|
$car_model = $_POST['car_model'] ?? '';
|
|
$car_number = $_POST['car_number'] ?? '';
|
|
$service_type = $_POST['service_type'] ?? '';
|
|
$appointment_date = $_POST['appointment_date'] ?? '';
|
|
$appointment_time = $_POST['appointment_time'] ?? '';
|
|
$notes = $_POST['notes'] ?? '';
|
|
|
|
// 验证必填字段
|
|
if (empty($customer_name) || empty($phone) || empty($car_model) ||
|
|
empty($car_number) || empty($service_type) || empty($appointment_date) || empty($appointment_time)) {
|
|
$message = '请填写所有必填字段！';
|
|
$message_type = 'error';
|
|
} else {
|
|
// 检查时间是否已经被预约
|
|
$stmt = $pdo->prepare("SELECT COUNT(*) FROM bookings WHERE appointment_date = ? AND appointment_time = ? AND status != '已取消'");
|
|
$stmt->execute([$appointment_date, $appointment_time]);
|
|
if ($stmt->fetchColumn() > 0) {
|
|
$message = '该时间段已被预约，请选择其他时间！';
|
|
$message_type = 'error';
|
|
} else {
|
|
// 插入新预约
|
|
$stmt = $pdo->prepare("INSERT INTO bookings (customer_name, phone, car_model, car_number, service_type, appointment_date, appointment_time, notes) VALUES (?, ?, ?, ?, ?, ?, ?, ?)");
|
|
$stmt->execute([$customer_name, $phone, $car_model, $car_number, $service_type, $appointment_date, $appointment_time, $notes]);
|
|
|
|
$message = '预约成功！我们会尽快联系您确认。';
|
|
$message_type = 'success';
|
|
}
|
|
}
|
|
} catch (Exception $e) {
|
|
$message = '预约失败：' . $e->getMessage();
|
|
$message_type = 'error';
|
|
}
|
|
}
|
|
?>
|
|
<!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">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
<meta name="format-detection" content="telephone=no">
|
|
<meta name="description" content="在线洗车预约系统，快速便捷地预约专业洗车服务">
|
|
<meta name="keywords" content="洗车,预约,在线预约,洗车服务">
|
|
<title>洗车预约系统</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
<!-- Favicon for mobile devices -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚗</text></svg>">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1>🚗 洗车预约系统</h1>
|
|
<p>快速预约，专业洗车服务</p>
|
|
</header>
|
|
|
|
<nav>
|
|
<a href="index.php">预约洗车</a>
|
|
<a href="bookings.php">查看预约</a>
|
|
</nav>
|
|
|
|
<?php if ($message): ?>
|
|
<div class="<?php echo $message_type === 'success' ? 'success-message' : ''; ?>" style="<?php echo $message_type === 'error' ? 'background: #f8d7da; color: #721c24; padding: 1rem; border-radius: 4px; margin-bottom: 1rem; border: 1px solid #f5c6cb;' : ''; ?>">
|
|
<?php echo $message; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="booking-form">
|
|
<h2>预约信息</h2>
|
|
<form method="POST">
|
|
<div class="form-group">
|
|
<label for="customer_name">姓名 *</label>
|
|
<input type="text" id="customer_name" name="customer_name" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="phone">联系电话 *</label>
|
|
<input type="tel" id="phone" name="phone" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="car_model">车型 *</label>
|
|
<input type="text" id="car_model" name="car_model" placeholder="如：大众朗逸" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="car_number">车牌号 *</label>
|
|
<input type="text" id="car_number" name="car_number" placeholder="如：京A12345" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="service_type">服务类型 *</label>
|
|
<select id="service_type" name="service_type" required>
|
|
<option value="">请选择服务类型</option>
|
|
<option value="普通洗车">普通洗车 (￥30)</option>
|
|
<option value="精洗">精洗 (￥80)</option>
|
|
<option value="打蜡">打蜡 (￥120)</option>
|
|
<option value="内饰清洁">内饰清洁 (￥60)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="appointment_date">预约日期 *</label>
|
|
<input type="date" id="appointment_date" name="appointment_date" min="<?php echo date('Y-m-d'); ?>" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="appointment_time">预约时间 *</label>
|
|
<input type="time" id="appointment_time" name="appointment_time" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="notes">备注</label>
|
|
<textarea id="notes" name="notes" rows="3" placeholder="特殊要求或备注信息"></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="btn">提交预约</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 2rem; color: #666;">
|
|
<p>营业时间：8:00 - 18:00 | 咨询电话：400-123-4567</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// 移动端优化脚本
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// 自动聚焦到第一个输入框
|
|
const firstInput = document.querySelector('input[type="text"]');
|
|
if (firstInput && !/Mobi|Android/i.test(navigator.userAgent)) {
|
|
firstInput.focus();
|
|
}
|
|
|
|
// 为按钮添加触摸反馈
|
|
const buttons = document.querySelectorAll('.btn');
|
|
buttons.forEach(btn => {
|
|
btn.addEventListener('touchstart', function() {
|
|
this.style.transform = 'translateY(1px)';
|
|
});
|
|
btn.addEventListener('touchend', function() {
|
|
this.style.transform = 'translateY(-2px)';
|
|
});
|
|
});
|
|
|
|
// 优化表单输入体验
|
|
const inputs = document.querySelectorAll('input, select, textarea');
|
|
inputs.forEach(input => {
|
|
// 添加焦点样式
|
|
input.addEventListener('focus', function() {
|
|
this.parentElement.style.transform = 'scale(1.02)';
|
|
this.parentElement.style.transition = 'transform 0.2s';
|
|
});
|
|
|
|
input.addEventListener('blur', function() {
|
|
this.parentElement.style.transform = 'scale(1)';
|
|
});
|
|
|
|
// iOS Safari的输入类型优化
|
|
if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
|
|
if (input.type === 'tel') {
|
|
input.setAttribute('pattern', '[0-9]*');
|
|
}
|
|
if (input.type === 'number') {
|
|
input.setAttribute('inputmode', 'numeric');
|
|
}
|
|
}
|
|
});
|
|
|
|
// 检测设备类型并添加类名
|
|
const isMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
|
if (isMobile) {
|
|
document.body.classList.add('mobile-device');
|
|
}
|
|
|
|
// 防止双击缩放（针对iOS Safari）
|
|
let lastTouchEnd = 0;
|
|
document.addEventListener('touchend', function(event) {
|
|
const now = (new Date()).getTime();
|
|
if (now - lastTouchEnd <= 300) {
|
|
event.preventDefault();
|
|
}
|
|
lastTouchEnd = now;
|
|
}, false);
|
|
|
|
// 表单提交前的简单验证
|
|
const form = document.querySelector('form');
|
|
if (form) {
|
|
form.addEventListener('submit', function(e) {
|
|
const requiredFields = this.querySelectorAll('[required]');
|
|
let hasEmpty = false;
|
|
|
|
requiredFields.forEach(field => {
|
|
if (!field.value.trim()) {
|
|
hasEmpty = true;
|
|
field.style.borderColor = '#dc3545';
|
|
field.addEventListener('input', function() {
|
|
this.style.borderColor = '';
|
|
}, { once: true });
|
|
}
|
|
});
|
|
|
|
if (hasEmpty) {
|
|
e.preventDefault();
|
|
alert('请填写所有必填字段！');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|