From 90c3c4ba2593a74c8b7f7a863991ff6ed705712a Mon Sep 17 00:00:00 2001
From: todaywindy <hant@cherrybless.com>
Date: Wed, 11 Jun 2025 17:14:31 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AE=A2=E5=8D=95=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 addons/address/config.php                  |   4 +-
 application/admin/controller/AmapTrait.php |   3 +-
 application/admin/view/order/add.html      |  52 ++++++-
 application/admin/view/order/copy.html     |  54 +++++--
 application/admin/view/order/edit.html     |  54 +++++--
 public/assets/js/backend/order.js          | 159 ++++++++++++++++++---
 6 files changed, 283 insertions(+), 43 deletions(-)

diff --git a/addons/address/config.php b/addons/address/config.php
index 96ab16a..6bf5e5e 100644
--- a/addons/address/config.php
+++ b/addons/address/config.php
@@ -70,7 +70,7 @@ return [
         'title' => '高德地图KEY',
         'type' => 'string',
         'content' => [],
-        'value' => 'dd4e8434697466586aaac37167abfb52',
+        'value' => 'cc6b0958c512ac08b0aa884f9b64d553',
         'rule' => '',
         'msg' => '',
         'tip' => '',
@@ -82,7 +82,7 @@ return [
         'title' => '高德地图安全密钥',
         'type' => 'string',
         'content' => [],
-        'value' => '38b7b7a5e4b90dcb1aa4999826d4e9d1',
+        'value' => 'a2ac54e925b448f8884e35ead370c12d',
         'rule' => '',
         'msg' => '',
         'tip' => '',
diff --git a/application/admin/controller/AmapTrait.php b/application/admin/controller/AmapTrait.php
index 5fa3e51..41cfa89 100644
--- a/application/admin/controller/AmapTrait.php
+++ b/application/admin/controller/AmapTrait.php
@@ -32,11 +32,12 @@ trait AmapTrait
         try {
             $response = Http::get($url, $params);
             $data = json_decode($response, true);
-
+//            dd($data);
             if (isset($data['status']) && $data['status'] == '1') {
                 return $data['pois']['0'] ?? false;
             }
         } catch (\Exception $e) {
+            throw $e;
             // 这里可以做日志记录
         }
         return false;
diff --git a/application/admin/view/order/add.html b/application/admin/view/order/add.html
index d811cc4..ad8cb8d 100644
--- a/application/admin/view/order/add.html
+++ b/application/admin/view/order/add.html
@@ -53,13 +53,14 @@
                  data-lat-id="lat">地图查找</div>
           </div>
         </div>
-        <div class='address line'>
+        <div class='address line' style="position: relative">
           <input id="c-address"
                  class="form-control"
                  placeholder="请通过地图查找选择"
-                 readonly
+                 autocomplete="off"
                  name="row[address]"
                     type="text" />
+          <ul id="suggestionList"></ul>
           <input type="text" style="display: none"
                  name="row[lng]" id="lng" >
           <input type="text" style="display: none"
@@ -108,7 +109,14 @@
         <div class="item flex-sb" id="set-time">
           <div class="title flex-c"><span class="required">*</span>设置时间：</div>
           <div class="value flex-c">
-            <input  name="row[plan_time]" placeholder="请选择上门时间" class="form-input form-control datetimepicker">
+            <input  name="row[plan_time]" placeholder="请选择上门时间"
+                    id="time"
+                    data-date-format="YYYY-MM-DD HH:mm"
+                    autocomplete="off"
+                    data-date-min-view="0"
+                    data-date-minute-step="30"
+                    data-date-autoclose="true"
+                    class="form-input form-control datetimepicker">
           </div>
         </div>
       </div>
@@ -194,6 +202,44 @@
     width: 386px;
     height: 768px;
   }
+
+  #suggestionList {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    max-height: 240px;
+    overflow-y: auto;
+    margin-top: 4px;
+    padding: 0;
+    list-style: none;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    z-index: 9999;
+    font-size: 14px;
+  }
+
+  #suggestionList li {
+    padding: 10px 14px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    border-bottom: 1px solid #f1f1f1;
+  }
+
+  #suggestionList li:last-child {
+    border-bottom: none;
+  }
+
+  #suggestionList li:hover {
+    background-color: #f5f8fa;
+    color: #007aff;
+  }
+  #suggestionList li.active {
+    background-color: #82b0e1;
+    color: white;
+  }
+
 </style>
 <script>
   var items = {:json_encode($items); };
diff --git a/application/admin/view/order/copy.html b/application/admin/view/order/copy.html
index 4a4f555..55d2737 100644
--- a/application/admin/view/order/copy.html
+++ b/application/admin/view/order/copy.html
@@ -53,13 +53,15 @@
                    data-lat-id="lat">地图查找</div>
             </div>
           </div>
-          <div class='address'>
-          <textarea id="c-address"
-                    class="form-control form-textarea"
-                    readonly
-                    placeholder="请通过地图查找选择"
-                    name="row[address]"
-                    type="text">{$row.address}</textarea>
+          <div class='address line' style="position: relative">
+            <input id="c-address"
+                   class="form-control"
+                   placeholder="请通过地图查找选择"
+                   autocomplete="off"
+                   value="{$row.address}"
+                   name="row[address]"
+                   type="text" />
+            <ul id="suggestionList"></ul>
             <input type="text" style="display: none"
                    name="row[lng]" id="lng" value="{$row.lng}">
             <input type="text" style="display: none"
@@ -108,7 +110,7 @@
           <div class="item flex-sb" id="set-time" >
             <div class="title flex-c"><span class="required">*</span>设置时间：</div>
             <div class="value flex-c">
-              <input  name="row[plan_time]" value="{$row['plan_time']}" placeholder="请选择上门时间" class="form-input form-control datetimepicker">
+              <input  name="row[plan_time]" value="{$row['plan_time']}" data-date-format="YYYY-MM-DD HH:mm" placeholder="请选择上门时间" class="form-input form-control datetimepicker">
             </div>
           </div>
         </div>
@@ -174,6 +176,42 @@
     height: 768px;
     padding: 20px 10px;
   }
+  #suggestionList {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    max-height: 240px;
+    overflow-y: auto;
+    margin-top: 4px;
+    padding: 0;
+    list-style: none;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    z-index: 9999;
+    font-size: 14px;
+  }
+
+  #suggestionList li {
+    padding: 10px 14px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    border-bottom: 1px solid #f1f1f1;
+  }
+
+  #suggestionList li:last-child {
+    border-bottom: none;
+  }
+
+  #suggestionList li:hover {
+    background-color: #f5f8fa;
+    color: #007aff;
+  }
+  #suggestionList li.active {
+    background-color: #82b0e1;
+    color: white;
+  }
 </style>
 <script>
   var items = {:json_encode($items); };
diff --git a/application/admin/view/order/edit.html b/application/admin/view/order/edit.html
index fcea6c5..ac380e2 100644
--- a/application/admin/view/order/edit.html
+++ b/application/admin/view/order/edit.html
@@ -52,13 +52,15 @@
                    data-lat-id="lat">地图查找</div>
             </div>
           </div>
-          <div class='address'>
-          <textarea id="c-address"
-                    class="form-control form-textarea"
-                    readonly
-                    placeholder="请通过地图查找选择"
-                    name="row[address]"
-                    type="text">{$row.address}</textarea>
+          <div class='address line' style="position: relative">
+            <input id="c-address"
+                   class="form-control"
+                   placeholder="请通过地图查找选择"
+                   autocomplete="off"
+                   value="{$row.address}"
+                   name="row[address]"
+                   type="text" />
+            <ul id="suggestionList"></ul>
             <input type="text" style="display: none"
                    name="row[lng]" id="lng" value="{$row.lng}">
             <input type="text" style="display: none"
@@ -107,7 +109,7 @@
           <div class="item flex-sb" id="set-time" >
             <div class="title flex-c"><span class="required">*</span>设置时间：</div>
             <div class="value flex-c">
-              <input  name="row[plan_time]" value="{$row['plan_time']}" placeholder="请选择上门时间" class="form-input form-control datetimepicker">
+              <input  name="row[plan_time]" value="{$row['plan_time']}" data-date-format="YYYY-MM-DD HH:mm" placeholder="请选择上门时间" class="form-input form-control datetimepicker">
             </div>
           </div>
         </div>
@@ -173,6 +175,42 @@
     height: 768px;
     padding: 20px 10px;
   }
+  #suggestionList {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    max-height: 240px;
+    overflow-y: auto;
+    margin-top: 4px;
+    padding: 0;
+    list-style: none;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    z-index: 9999;
+    font-size: 14px;
+  }
+
+  #suggestionList li {
+    padding: 10px 14px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    border-bottom: 1px solid #f1f1f1;
+  }
+
+  #suggestionList li:last-child {
+    border-bottom: none;
+  }
+
+  #suggestionList li:hover {
+    background-color: #f5f8fa;
+    color: #007aff;
+  }
+  #suggestionList li.active {
+    background-color: #82b0e1;
+    color: white;
+  }
 </style>
 <script>
   var items = {:json_encode($items); };
diff --git a/public/assets/js/backend/order.js b/public/assets/js/backend/order.js
index 98ad031..18726eb 100644
--- a/public/assets/js/backend/order.js
+++ b/public/assets/js/backend/order.js
@@ -414,22 +414,30 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'cascader'], function
         add: function () {
             $("#mybuttom").on("click", function () {
                 const res = $("form[role=form]").isValid();
-                if (res) {
-                    Form.api.submit($("form[role=form]"));
-                    // Toastr.success('录入成功');
+                if ($('#lng').val() && $('#lng').val() === ''){
+                    if (res) {
+                        Form.api.submit($("form[role=form]"));
+                        // Toastr.success('录入成功');
+                    }
+                }else{
+                    Toastr.success('请选择有效地址');
                 }
+
                 return false;
             });
 
             $("#mysubmit").on("click", function () {
                 const res = $("form[role=form]").isValid();
-                console.log('form', res);
-                if (res) {
-                    Form.api.submit($("form[role=form]"), function (data, ret) {
-                        clearInfo();
-                        return false;
-                    });
-                    // Toastr.success('录入成功');
+
+                if ($('#lng').val() && $('#lng').val() === ''){
+                    if (res) {
+                        Form.api.submit($("form[role=form]"), function (data, ret) {
+                            clearInfo();
+                            return false;
+                        });
+                    }
+                }else{
+                    Toastr.success('请选择有效地址');
                 }
                 return false;
             });
@@ -546,16 +554,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'cascader'], function
                     $("#area_id").val(code);
                     $("#area_name").val(citypicker.getVal());
                 });
-                // $("#area_map").data("callback", function (res) {
-                //     Form.api.target($('#c-address'));
-                // });
                 $(document).on('click', "#area_map", function (e) {
-                    // const data = $("#c-city").val();
-                    // if (!data) {
-                    //     Toastr.error('请先选择区域');
-                    //     return false;
-                    // }
-
                     var that = this;
                     var callback = $(that).data('callback');
                     var input_id = $(that).data("input-id") ? $(that).data("input-id") : "";
@@ -594,9 +593,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'cascader'], function
                     });
 
                 });
-
                 var _data = items;
-
                 $('#item_id').zdCascader({
                     data: _data,
                     onChange: function ($this, data, allPathData) {
@@ -632,6 +629,126 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'cascader'], function
                 }
 
                 toggleTime();
+
+                const amapKey = 'c299da50c080dfccf9b1d00560ff9639';
+
+                let isComposing = false;
+                let addressSelected = false;
+                let selectedIndex = -1;
+                $('#c-address')
+                    .on('compositionstart', () => {
+                        isComposing = true;
+                    })
+                    .on('compositionend', () => {
+                        isComposing = false;
+                        // 不执行 handleInput，由 input 触发
+                    })
+                    .on('input', debounce(function (e) {
+                        if (!isComposing) handleInput(e);
+                    }, 300))
+                    .on('blur', function () {
+                    // 如果还没有选择地址，且列表中有内容，则默认选择第一个
+                    if (!addressSelected) {
+                        $('#suggestionList').empty();
+                    }})
+                    .on('keydown', function (e) {
+                    const $items = $('#suggestionList li');
+                    const len = $items.length;
+
+                    if (!len) return;
+
+                    if (e.key === 'ArrowDown') {
+                        e.preventDefault();
+                        selectedIndex = (selectedIndex + 1) % len;
+                        updateActiveItem($items);
+                    } else if (e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        selectedIndex = (selectedIndex - 1 + len) % len;
+                        updateActiveItem($items);
+                    } else if (e.key === 'Enter') {
+                        if (selectedIndex >= 0 && selectedIndex < len) {
+                            e.preventDefault();
+                            $items.eq(selectedIndex).trigger('mousedown');
+                        }
+                    }
+                });
+                function updateActiveItem($items) {
+                    $items.removeClass('active');
+                    if (selectedIndex >= 0) {
+                        const $active = $items.eq(selectedIndex);
+                        $active.addClass('active');
+
+                        // 自动滚动使其可见
+                        const container = $('#suggestionList')[0];
+                        const item = $active[0];
+
+                        if (item && container) {
+                            const itemTop = item.offsetTop;
+                            const itemBottom = itemTop + item.offsetHeight;
+                            const containerTop = container.scrollTop;
+                            const containerBottom = containerTop + container.clientHeight;
+
+                            if (itemTop < containerTop) {
+                                container.scrollTop = itemTop;
+                            } else if (itemBottom > containerBottom) {
+                                container.scrollTop = itemBottom - container.clientHeight;
+                            }
+                        }
+                    }
+                }
+
+
+                function handleInput(e) {
+                    selectedIndex = -1;
+                    addressSelected = false;
+                    const keyword = $(e.target).val();
+                    if (!keyword.trim() || /^[\s\p{P}]+$/u.test(keyword)) return;
+                    if (!keyword) return $('#c-address').empty();
+
+                    $.getJSON('https://restapi.amap.com/v3/assistant/inputtips', {
+                        key: amapKey,
+                        keywords: keyword,
+                        datatype: 'all',
+                        city: '全国',
+                    }, function (res) {
+                        if (res.tips) {
+                            let html = '';
+                            res.tips.forEach(tip => {
+                                if (tip.location) {
+                                    html += `<li data-name="${tip.district} ${tip.name}" data-location="${tip.location}">
+             ${tip.district} ${tip.name}
+            </li>`;
+                                }
+                            });
+                            $('#suggestionList').html(html).show();
+                        }
+                    });
+                }
+
+                function debounce(fn, delay = 300) {
+                    let timer = null;
+                    return function (...args) {
+                        clearTimeout(timer);
+                        timer = setTimeout(() => {
+                            fn.apply(this, args);
+                        }, delay);
+                    };
+                }
+
+
+                $('#suggestionList').on('mousedown', 'li', function (e) {
+                    const name = $(this).data('name');
+                    const location = $(this).data('location'); // "经度,纬度"
+                    const [lng, lat] = location.split(',');
+                    // console.log('click');
+                    $('#c-address').val(name);
+                    $('#lng').val(lng);
+                    $('#lat').val(lat);
+                    // 隐藏提示列表
+                    $('#suggestionList').empty().hide();
+                    selectedIndex = -1;
+                    addressSelected = true;
+                });
             }
         }
     };