订单优化

This commit is contained in:
todaywindy 2025-06-11 17:14:31 +08:00
parent 65854684a0
commit 90c3c4ba25
6 changed files with 283 additions and 43 deletions

View File

@ -70,7 +70,7 @@ return [
'title' => '高德地图KEY', 'title' => '高德地图KEY',
'type' => 'string', 'type' => 'string',
'content' => [], 'content' => [],
'value' => 'dd4e8434697466586aaac37167abfb52', 'value' => 'cc6b0958c512ac08b0aa884f9b64d553',
'rule' => '', 'rule' => '',
'msg' => '', 'msg' => '',
'tip' => '', 'tip' => '',
@ -82,7 +82,7 @@ return [
'title' => '高德地图安全密钥', 'title' => '高德地图安全密钥',
'type' => 'string', 'type' => 'string',
'content' => [], 'content' => [],
'value' => '38b7b7a5e4b90dcb1aa4999826d4e9d1', 'value' => 'a2ac54e925b448f8884e35ead370c12d',
'rule' => '', 'rule' => '',
'msg' => '', 'msg' => '',
'tip' => '', 'tip' => '',

View File

@ -32,11 +32,12 @@ trait AmapTrait
try { try {
$response = Http::get($url, $params); $response = Http::get($url, $params);
$data = json_decode($response, true); $data = json_decode($response, true);
// dd($data);
if (isset($data['status']) && $data['status'] == '1') { if (isset($data['status']) && $data['status'] == '1') {
return $data['pois']['0'] ?? false; return $data['pois']['0'] ?? false;
} }
} catch (\Exception $e) { } catch (\Exception $e) {
throw $e;
// 这里可以做日志记录 // 这里可以做日志记录
} }
return false; return false;

View File

@ -53,13 +53,14 @@
data-lat-id="lat">地图查找</div> data-lat-id="lat">地图查找</div>
</div> </div>
</div> </div>
<div class='address line'> <div class='address line' style="position: relative">
<input id="c-address" <input id="c-address"
class="form-control" class="form-control"
placeholder="请通过地图查找选择" placeholder="请通过地图查找选择"
readonly autocomplete="off"
name="row[address]" name="row[address]"
type="text" /> type="text" />
<ul id="suggestionList"></ul>
<input type="text" style="display: none" <input type="text" style="display: none"
name="row[lng]" id="lng" > name="row[lng]" id="lng" >
<input type="text" style="display: none" <input type="text" style="display: none"
@ -108,7 +109,14 @@
<div class="item flex-sb" id="set-time"> <div class="item flex-sb" id="set-time">
<div class="title flex-c"><span class="required">*</span>设置时间:</div> <div class="title flex-c"><span class="required">*</span>设置时间:</div>
<div class="value flex-c"> <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> </div>
</div> </div>
@ -194,6 +202,44 @@
width: 386px; width: 386px;
height: 768px; 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> </style>
<script> <script>
var items = {:json_encode($items); }; var items = {:json_encode($items); };

View File

@ -53,13 +53,15 @@
data-lat-id="lat">地图查找</div> data-lat-id="lat">地图查找</div>
</div> </div>
</div> </div>
<div class='address'> <div class='address line' style="position: relative">
<textarea id="c-address" <input id="c-address"
class="form-control form-textarea" class="form-control"
readonly
placeholder="请通过地图查找选择" placeholder="请通过地图查找选择"
autocomplete="off"
value="{$row.address}"
name="row[address]" name="row[address]"
type="text">{$row.address}</textarea> type="text" />
<ul id="suggestionList"></ul>
<input type="text" style="display: none" <input type="text" style="display: none"
name="row[lng]" id="lng" value="{$row.lng}"> name="row[lng]" id="lng" value="{$row.lng}">
<input type="text" style="display: none" <input type="text" style="display: none"
@ -108,7 +110,7 @@
<div class="item flex-sb" id="set-time" > <div class="item flex-sb" id="set-time" >
<div class="title flex-c"><span class="required">*</span>设置时间:</div> <div class="title flex-c"><span class="required">*</span>设置时间:</div>
<div class="value flex-c"> <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> </div>
</div> </div>
@ -174,6 +176,42 @@
height: 768px; height: 768px;
padding: 20px 10px; 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> </style>
<script> <script>
var items = {:json_encode($items); }; var items = {:json_encode($items); };

View File

@ -52,13 +52,15 @@
data-lat-id="lat">地图查找</div> data-lat-id="lat">地图查找</div>
</div> </div>
</div> </div>
<div class='address'> <div class='address line' style="position: relative">
<textarea id="c-address" <input id="c-address"
class="form-control form-textarea" class="form-control"
readonly
placeholder="请通过地图查找选择" placeholder="请通过地图查找选择"
autocomplete="off"
value="{$row.address}"
name="row[address]" name="row[address]"
type="text">{$row.address}</textarea> type="text" />
<ul id="suggestionList"></ul>
<input type="text" style="display: none" <input type="text" style="display: none"
name="row[lng]" id="lng" value="{$row.lng}"> name="row[lng]" id="lng" value="{$row.lng}">
<input type="text" style="display: none" <input type="text" style="display: none"
@ -107,7 +109,7 @@
<div class="item flex-sb" id="set-time" > <div class="item flex-sb" id="set-time" >
<div class="title flex-c"><span class="required">*</span>设置时间:</div> <div class="title flex-c"><span class="required">*</span>设置时间:</div>
<div class="value flex-c"> <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> </div>
</div> </div>
@ -173,6 +175,42 @@
height: 768px; height: 768px;
padding: 20px 10px; 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> </style>
<script> <script>
var items = {:json_encode($items); }; var items = {:json_encode($items); };

View File

@ -414,22 +414,30 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'cascader'], function
add: function () { add: function () {
$("#mybuttom").on("click", function () { $("#mybuttom").on("click", function () {
const res = $("form[role=form]").isValid(); const res = $("form[role=form]").isValid();
if ($('#lng').val() && $('#lng').val() === ''){
if (res) { if (res) {
Form.api.submit($("form[role=form]")); Form.api.submit($("form[role=form]"));
// Toastr.success('录入成功'); // Toastr.success('录入成功');
} }
}else{
Toastr.success('请选择有效地址');
}
return false; return false;
}); });
$("#mysubmit").on("click", function () { $("#mysubmit").on("click", function () {
const res = $("form[role=form]").isValid(); const res = $("form[role=form]").isValid();
console.log('form', res);
if ($('#lng').val() && $('#lng').val() === ''){
if (res) { if (res) {
Form.api.submit($("form[role=form]"), function (data, ret) { Form.api.submit($("form[role=form]"), function (data, ret) {
clearInfo(); clearInfo();
return false; return false;
}); });
// Toastr.success('录入成功'); }
}else{
Toastr.success('请选择有效地址');
} }
return false; return false;
}); });
@ -546,16 +554,7 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'cascader'], function
$("#area_id").val(code); $("#area_id").val(code);
$("#area_name").val(citypicker.getVal()); $("#area_name").val(citypicker.getVal());
}); });
// $("#area_map").data("callback", function (res) {
// Form.api.target($('#c-address'));
// });
$(document).on('click', "#area_map", function (e) { $(document).on('click', "#area_map", function (e) {
// const data = $("#c-city").val();
// if (!data) {
// Toastr.error('请先选择区域');
// return false;
// }
var that = this; var that = this;
var callback = $(that).data('callback'); var callback = $(that).data('callback');
var input_id = $(that).data("input-id") ? $(that).data("input-id") : ""; 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; var _data = items;
$('#item_id').zdCascader({ $('#item_id').zdCascader({
data: _data, data: _data,
onChange: function ($this, data, allPathData) { onChange: function ($this, data, allPathData) {
@ -632,6 +629,126 @@ define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'cascader'], function
} }
toggleTime(); 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;
});
} }
} }
}; };