coupon-admin/view/manager/business_circle/add.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="text" name="name" lay-verify="required" 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/add" 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>