增加预约查询的基本界面

application/language/Chinese(Simplified)/translations_lang.php

@@ -490,5 +490,8 @@ $lang['home_search_button'] = '预约查询';
 $lang['home_price_button'] = '价格表';
 $lang['home_contact_button'] = '联系我们';
 $lang['please_select_service'] = '请选择(必选)';
-
+$lang['search_appointments_title'] = '预约查询';
+$lang['enter_phone_number'] = '输入预约时提交的电话号码';
+$lang['search_button'] = '查询';
+$lang['no_appointments_message'] = '暂无预约信息';
 // End

application/language/Chinese(Traditional)/translations_lang.php

@@ -490,4 +490,8 @@ $lang['home_search_button'] = '預約查詢';
 $lang['home_price_button'] = '價格表';
 $lang['home_contact_button'] = '聯絡我們';
 $lang['please_select_service'] = '請選擇(必填)';
+$lang['search_appointments_title'] = '預約查詢';
+$lang['enter_phone_number'] = '輸入預約時提交的電話號碼';
+$lang['search_button'] = '查詢';
+$lang['no_appointments_message'] = '暫無預約記錄';
 // End

application/language/English/translations_lang.php

@@ -490,4 +490,8 @@ $lang['home_search_button'] = 'Enquiry';
 $lang['home_price_button'] = 'Price List';
 $lang['home_contact_button'] = 'Contact Us';
 $lang['please_select_service'] = 'Please Select(*)';
+$lang['search_appointments_title'] = 'Enquiry';
+$lang['enter_phone_number'] = 'Enter Phone Number';
+$lang['search_button'] = 'Search';
+$lang['no_appointments_message'] = 'No Appointments Found';
 // End

application/views/layouts/home_search_layout.php

@@ -31,48 +31,51 @@
     <?php slot('styles'); ?>
 
     <style>
-        .icon-container-wrapper {
+        .search-container-wrapper {
             display: flex;
             justify-content: center;
             align-items: center;
-            /* height: 72.8vh; This makes the container fill the full height of the viewport */
             flex-direction: column;
-            min-height: 589px; /* This ensures the container has a minimum height */
+            min-height: 44.2vh;
         }
-        .icon-container {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-around;
-            width: 100%; /* Ensure it takes the full width available */
-            max-width: 600px; /* Optional: limit the max width */
+        .search-container-title {
+            color: #666666;
         }
-        .icon-button {
+        .search-container {
             display: flex;
+            flex-direction: column;
             align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            text-align: center;
-            margin: 20px;
-            padding: 20px;
-            border: 1px solid #ddd;
-            border-radius: 8px;
-            width: 150px;
-            height: 150px;
-            transition: background-color 0.3s;
-        }
-        .icon-button i {
-            font-size: 56px;
+            width: 100%;
+            max-width: 400px;
             margin-bottom: 20px;
         }
-        .icon-button span {
-            margin-top: 10px;
+        .search-container input {
+            width: 100%;
+            padding: 10px;
+            margin-bottom: 10px;
+            border-radius: 5px;
+            border: 1px solid #ccc;
         }
-        .icon-button:hover {
+        .search-container button {
+            padding: 10px 20px;
             background-color: #429a82;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            width: 100%;
         }
-        .icon-button .svg-inline--fa {
-            width: 38px; /* Adjust the size as needed */
-            height: 38px; /* Adjust the size as needed */
+        .appointments-container {
+            display: none;
+            width: 100%;
+            max-width: 600px;
+            margin-top: 20px;
+        }
+        .no-appointments {
+            display: none;
+            color: red;
+            margin-top: 20px;
+            text-align: center;
         }
     </style>
 </head>
@@ -81,16 +84,26 @@
 <div id="main" class="container">
     <div class="row wrapper">
         <div id="book-appointment-wizard" class="col-12 col-lg-10 col-xl-8 col-xxl-7">
-            <?php component('home_header', [
+        <?php component('home_header', [
                 'company_name' => vars('company_name'),
                 'company_logo' => vars('company_logo'),
             ]); ?>
-
-            <div class="icon-container-wrapper">
-                搜索结果为空！
+            <div class="search-container-wrapper">
+                <h2 class="search-container-title"><?= lang('search_appointments_title') ?></h2>
+                <div class="search-container">
+                    <input type="text" id="phoneNumber" placeholder="<?= lang('enter_phone_number') ?>">
+                    <button id="searchButton"><?= lang('search_button') ?></button>
+                </div>
+                <div class="appointments-container" id="appointmentsContainer">
+                    <h3><?= lang('appointment_results') ?></h3>
+                    <ul id="appointmentsList"></ul>
+                </div>
+                <div class="no-appointments" id="noAppointmentsMessage">
+                    <?= lang('no_appointments_message') ?>
+                </div>
             </div>
-
             <?php component('booking_footer', ['display_login_button' => vars('display_login_button')]); ?>
+
         </div>
     </div>
 </div>
@@ -132,6 +145,57 @@
 <script src="<?= asset_url('assets/js/layouts/booking_layout.js') ?>"></script>
 <script src="<?= asset_url('assets/js/http/localization_http_client.js') ?>"></script>
 
+<script>
+    document.getElementById('searchButton').addEventListener('click', function() {
+        var phoneNumber = document.getElementById('phoneNumber').value;
+        
+        if (phoneNumber.trim() === '') {
+            alert('<?= lang('enter_valid_phone_number') ?>');
+            return;
+        }
+
+        fetch('/index.php/customers/search', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ keyword: phoneNumber })
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success && data.appointments.length > 0) {
+                displayAppointments(data.appointments);
+            } else {
+                showNoAppointmentsMessage();
+            }
+        })
+        .catch(error => {
+            console.error('Error fetching appointments:', error);
+            showNoAppointmentsMessage();
+        });
+    });
+
+    function displayAppointments(appointments) {
+        var appointmentsContainer = document.getElementById('appointmentsContainer');
+        var appointmentsList = document.getElementById('appointmentsList');
+        
+        appointmentsList.innerHTML = '';
+        appointments.forEach(function(appointment) {
+            var listItem = document.createElement('li');
+            listItem.textContent = appointment.details; // 根据实际字段修改
+            appointmentsList.appendChild(listItem);
+        });
+
+        appointmentsContainer.style.display = 'block';
+        document.getElementById('noAppointmentsMessage').style.display = 'none';
+    }
+
+    function showNoAppointmentsMessage() {
+        document.getElementById('appointmentsContainer').style.display = 'none';
+        document.getElementById('noAppointmentsMessage').style.display = 'block';
+    }
+</script>
+
 <?php component('js_vars_script'); ?>
 <?php component('js_lang_script'); ?>