订单优化
This commit is contained in:
parent
65854684a0
commit
90c3c4ba25
|
|
@ -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' => '',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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); };
|
||||
|
|
|
|||
|
|
@ -53,13 +53,15 @@
|
|||
data-lat-id="lat">地图查找</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='address'>
|
||||
<textarea id="c-address"
|
||||
class="form-control form-textarea"
|
||||
readonly
|
||||
<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">{$row.address}</textarea>
|
||||
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); };
|
||||
|
|
|
|||
|
|
@ -52,13 +52,15 @@
|
|||
data-lat-id="lat">地图查找</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='address'>
|
||||
<textarea id="c-address"
|
||||
class="form-control form-textarea"
|
||||
readonly
|
||||
<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">{$row.address}</textarea>
|
||||
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); };
|
||||
|
|
|
|||
|
|
@ -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 ($('#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 ($('#lng').val() && $('#lng').val() === ''){
|
||||
if (res) {
|
||||
Form.api.submit($("form[role=form]"), function (data, ret) {
|
||||
clearInfo();
|
||||
return false;
|
||||
});
|
||||
// Toastr.success('录入成功');
|
||||
}
|
||||
}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;
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user