173 lines
7.9 KiB
HTML
173 lines
7.9 KiB
HTML
{layout name="manager/layout" /}
|
||
<style>
|
||
.layui-iconpicker-body.layui-iconpicker-body-page .hide {display: none;}
|
||
</style>
|
||
<div class="layuimini-container location-operate-page">
|
||
<div class="layuimini-main">
|
||
<div class="layui-form layuimini-form">
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label required">排序</label>
|
||
<div class="layui-input-block">
|
||
<input type="number" name="sort" lay-verify="required" value="{$item.sort ?? 0}" lay-reqtext="排序不能为空" placeholder="请输入排序" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label required">标题</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="name" lay-verify="required" value="{$item.name ?? ''}" lay-reqtext="标题不能为空" placeholder="请输入标题" class="layui-input">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 地址 -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label required">地址</label>
|
||
<div class="layui-input-block">
|
||
<input type="hidden" id="input-province" name="province" value="{$item.province ?? 0}">
|
||
<input type="hidden" id="input-city" name="city" value="{$item.city ?? 0}">
|
||
<input type="hidden" id="input-county" name="county" value="{$item.county ?? 0}">
|
||
<input type="hidden" id="input-province-text" name="province_text" value="{$item.province_text ?? ''}">
|
||
<input type="hidden" id="input-city-text" name="city_text" value="{$item.city_text ?? ''}">
|
||
<input type="hidden" id="input-county-text" name="county_text" value="{$item.county_text ?? ''}">
|
||
<div id="target" style="z-index: 1111"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label required">详细地址</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="business_address" lay-verify="required" value="{$item.business_address??''}" placeholder="请输入" class="layui-input">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 经纬度 -->
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label required">经纬度</label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="lng" value="{$item.lng ?? ''}" id="longitude" placeholder="请填写经度" lay-reqtext="经度不能为空" lay-verify="required" autocomplete="off" class="layui-input">
|
||
</div>
|
||
<div class="layui-input-inline">
|
||
<input type="number" name="lat" value="{$item.lat ?? ''}" id="latitude" placeholder="请填写纬度" lay-reqtext="纬度不能为空" lay-verify="required" autocomplete="off" class="layui-input">
|
||
</div>
|
||
<div class="layui-input-inline"><button class="layui-btn-normal layui-btn" id="locationBtn">定位</button></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn layui-btn-normal" data-url="/manager/business-circle/edit?id={$item.id}" lay-submit lay-filter="saveBtn">确认保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="__MANAGER__/js/business_circle.js?v={:mt_rand()}"></script>
|
||
|
||
<script src="__STATIC__/js/iPicker/iPicker.min.js"></script>
|
||
<script src="__STATIC__/common/jquery-3.4.1.min.js"></script>
|
||
|
||
|
||
<script>
|
||
let province = $('#input-province').val();
|
||
let city = $('#input-city').val();
|
||
let county = $('#input-county').val();
|
||
let _width = 200;
|
||
let _height = 34;
|
||
|
||
province = province ? province : '110000';
|
||
city = city ? city : '110100';
|
||
county = county ? county : '110101';
|
||
|
||
if ($('#target').length > 0) {
|
||
if ($('#target').data('width') != undefined) {
|
||
_width = $('#target').data('width');
|
||
}
|
||
if ($('#target').data('height') != undefined) {
|
||
_height = $('#target').data('height');
|
||
}
|
||
}
|
||
|
||
var picker =iPicker.create("#target", {
|
||
width: _width,
|
||
height: _height,
|
||
data: {
|
||
|
||
// 此处以通过 jquery 库获取本地数据源为例
|
||
//source: Promise.resolve($.getJSON("/static/js/iPicker/area.json"))
|
||
|
||
// 此处以通过 jquery 库获取数据为例
|
||
// 示例代码中使用的 "http://www.abcddcba.com/api/area" 是模拟地址，实际应用中替换成真实地址即可
|
||
// code 参数值就是相应地区对应的行政区划代码
|
||
// ----------------------------------------------------------------------------------------------------------
|
||
// 使用自定义数据源时，必须保证 source 属性值是 Function 类型
|
||
// iPicker 会自动执行此函数，同时要确保此函数的执行结果返回的是标准的 Promise 对象
|
||
// iPicker 会自动调用 then 方法，同时要确保 then 方法的参数就是返回的数据（Array 类型）
|
||
// ----------------------------------------------------------------------------------------------------------
|
||
// 初始状态下，iPicker 会自动执行一次 source 函数来获取 “省份” 数据，此时传入的 code 参数值为 null
|
||
// 因此，开发者可能需要给 code 参数设置一个默认值来获取 “省份” 数据（如示例代码中 code 为 null 时默认取零）
|
||
source: code => $.get( "/api/area/index.html?areaId=" + ( code || 86 ) )
|
||
|
||
},
|
||
onSelect: (code, name, all) => {
|
||
// 返回参数均为数组形式
|
||
// console.log( code );
|
||
// console.log( name );
|
||
// console.log( all );
|
||
let len = code.length;
|
||
if (len === 3) {
|
||
$('#input-province').val(code[0]);
|
||
$('#input-city').val(code[1]);
|
||
$('#input-county').val(code[2]);
|
||
$('#input-province-text').val(name[0]);
|
||
$('#input-city-text').val(name[1]);
|
||
$('#input-county-text').val(name[2]);
|
||
}
|
||
},
|
||
selected: [province, city, county],
|
||
})
|
||
</script>
|
||
|
||
<script>
|
||
layui.use(['layer','form','jquery','location'],function(){
|
||
let $ = layui.jquery;
|
||
let form = layui.form;
|
||
let location = layui.location;
|
||
|
||
let lng = $('#longitude').val();
|
||
let lat = $('#latitude').val();
|
||
|
||
lng = lng.length > 0 ? lng : '116.404';
|
||
lat = lat.length > 0 ? lat : '39.915';
|
||
let locationData = {lng: lng,lat: lat};
|
||
|
||
location.render("#locationBtn",{
|
||
type: 1,
|
||
apiType: "gaodeMap",
|
||
coordinate: "gaodeMap",
|
||
mapType: 0,
|
||
zoom: 15,
|
||
title: '区域定位',
|
||
init: function(){
|
||
// 打开地图时 延迟一定时间搜索
|
||
$('body').on('click', '#locationBtn', function () {
|
||
let address = $("input[name='address']").val();
|
||
setTimeout(function () {
|
||
$('#ew-map-select-input-search').val(address).trigger('input');
|
||
}, 1500)
|
||
})
|
||
return {longitude: $("#longitude").val()?$("#longitude").val():locationData.lng,latitude: $("#latitude").val()?$("#latitude").val():locationData.lat};
|
||
},
|
||
success: function (data) {
|
||
$("#longitude").val(data.lng);
|
||
$("#latitude").val(data.lat);
|
||
},
|
||
onClickTip: function (data) {
|
||
console.log(data);
|
||
}
|
||
|
||
});
|
||
});
|
||
</script> |