puzhibing
2023-06-30 f58cca364b731eac2d60a440ffaa804be3cd43fd
management/guns-admin/src/main/webapp/WEB-INF/view/system/tOrder/tOrder_add.html
@@ -1,39 +1,56 @@
@layout("/common/_container.html"){
<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
<div class="ibox float-e-margins">
    <div class="ibox-content">
        <div class="form-horizontal">
            <div class="row">
                <div class="col-sm-6 b-r">
                            <#input id="id" name="主键" underline="true"/>
                            <#input id="code" name="编号" underline="true"/>
                            <#input id="userId" name="用户id" underline="true"/>
                            <#input id="driverId" name="司机id" underline="true"/>
                            <#input id="source" name="订单来源(1=小程序)" underline="true"/>
                            <#input id="agentId" name="代理商id" underline="true"/>
                            <#input id="branchOfficeId" name="分公司id" underline="true"/>
                            <#input id="startTime" name="开始服务时间" underline="true"/>
                            <#input id="startAddress" name="起点地址" underline="true"/>
                            <#input id="startLat" name="起点纬度" underline="true"/>
                            <#input id="startLng" name="起点经度" underline="true"/>
                            <#input id="endAddress" name="终点地址" underline="true"/>
                            <#input id="endLat" name="终点纬度"/>
                </div>
                <div class="col-sm-6">
                            <#input id="endLng" name="终点经度" underline="true"/>
                            <#input id="boardingTime" name="上车时间" underline="true"/>
                            <#input id="getoffTime" name="下车时间" underline="true"/>
                            <#input id="estimatedPrice" name="预估价" underline="true"/>
                            <#input id="orderMoney" name="订单金额" underline="true"/>
                            <#input id="payMoney" name="支付金额" underline="true"/>
                            <#input id="discountedPrice" name="优惠金额" underline="true"/>
                            <#input id="couponId" name="优惠券id" underline="true"/>
                            <#input id="payType" name="支付类型(1=线上)" underline="true"/>
                            <#input id="payTime" name="支付时间" underline="true"/>
                            <#input id="state" name="订单状态(1=待接单,2=已接单,3=)" underline="true"/>
                            <#input id="status" name="状态(1=正常,2=冻结,3=删除)" underline="true"/>
                            <#input id="createTime" name="添加时间" underline="true"/>
                <div class="col-sm-12">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">*乘客姓名:</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="userName" name="userName" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">*乘客手机号:</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="userPhone" name="userPhone" placeholder="请输入">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">*起始地点:</label>
                        <div class="col-sm-6">
                            <input type="text" id="tipinput1" class="form-control" id="startAddress" name="startAddress" autocomplete="off" placeholder="请输入">
                            <div id="map_of_cs_one"
                                 style="visibility: visible; display: none; left: 1088.5px; top: 485px; min-width: 166px;"></div>
                            <div class="amap-sug-result-one" style="position: absolute;display: none; min-width: 96%;right: 0px;overflow: hidden;max-width: 96%;margin-right: 16px;z-index: 1024;
background-color: #fefefe;border: 1px solid #d1d1d1"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"></label>
                        <div class="col-sm-6">
                            <div id="container1" style="width: 100%;height: 300px;"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">目的地:</label>
                        <div class="col-sm-6">
                            <input type="text" id="tipinput2" class="form-control" id="endAddress" autocomplete="off" name="endAddress">
                            <div id="map_of_cs_two"
                                 style="visibility: visible; display: none; left: 1088.5px; top: 485px; min-width: 166px;"></div>
                            <div class="amap-sug-result-two" style="position: absolute;display: none; min-width: 96%;right: 0px;overflow: hidden;max-width: 96%;margin-right: 16px;z-index: 1024;
background-color: #fefefe;border: 1px solid #d1d1d1"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label"></label>
                        <div class="col-sm-6">
                            <div id="container2" style="width: 100%;height: 300px;"></div>
                        </div>
                    </div>
                </div>
            </div>
@@ -47,5 +64,196 @@
    </div>
</div>
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'34399ecced17d9c01ef705ef964fc077',
    }
</script>
<script src="${ctxPath}/static/modular/system/tOrder/tOrder_info.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=86fcccf007b64ae97b01c3c982c0ef0f&plugin=AMap.PlaceSearch,AMap.AutoComplete,AMap.Marker,AMap.Geocoder,AMap.Geolocation"></script>
<script type="text/javascript">
    //地图加载
    var map1 = new AMap.Map("container1", {
        zoom: 13,
        resizeEnable: true
    });
    function autoInput1(){
        var keywords = document.getElementById("tipinput1").value;
            // 实例化Autocomplete
            var autoOptions = {
                city: '全国'
            }
            var autoComplete = new AMap.Autocomplete(autoOptions);
            autoComplete.search(keywords, function(status, result) {
                $(".amap-sug-result-one").html("");
                $(".amap-sug-result-one").show();
                console.log(result.info);
                for(const key in result.tips){
                    $(".amap-sug-result-one").append('<div class="auto-item amapaddr" id="amap-sug4" onclick="javascript:geoCode1(\''+result.tips[key].name+'\', \''+result.tips[key].district+ result.tips[key].address+'\');">' + result.tips[key].name+ " <span style='color: darkgray;margin-left: 13px;'>" + result.tips[key].district+ result.tips[key].address+ " </span></div>");
                }
            })
    }
    autoInput1();
    document.getElementById("tipinput1").oninput = autoInput1;
    var geocoder1 = new AMap.Geocoder({
    });
    var marker1 = new AMap.Marker();
    function geoCode1(t, d) {
        var address  = t; //document.getElementById('address').value;
        geocoder1.getLocation(address, function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                // console.log(result);
                var lnglat = result.geocodes[0].location;
                TOrderInfoDlg.startAddress = {
                    name: t,
                    address: result.geocodes[0].formattedAddress,
                    lat: lnglat.lat,
                    lon: lnglat.lng,
                };
                document.getElementById('tipinput1').value = t;
                marker1.setPosition(lnglat);
                map1.add(marker1);
                map1.setFitView(marker1);
            }else{
                log.error('根据地址查询位置失败');
            }
        });
        $(".amap-sug-result-one").hide();
    }
    map1.on('click', function(e) {
        var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
        geocoder1.getAddress(lnglatXY, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                // console.log(result,'result')
                var address = result.regeocode.formattedAddress;
                // console.log(address,'address');
                TOrderInfoDlg.startAddress = {
                    name: address,
                    address: result.regeocode.addressComponent.province+result.regeocode.addressComponent.city+result.regeocode.addressComponent.district,
                    lat: e.lnglat.getLat(),
                    lon: e.lnglat.getLng(),
                };
                document.getElementById('tipinput1').value = address;
            } else {
                log.error('根据坐标查询地址失败');
            }
        });
        // console.log(e,'e')
        ln = e.lnglat.getLng();
        lt = e.lnglat.getLat();
        if (marker1){
            map1.remove(marker1);
        }
        marker1 = new AMap.Marker({
            position: new AMap.LngLat(ln, lt),
            anchor: 'bottom-center',
            map: map1,
        });
    });
    var map2 = new AMap.Map("container2", {
        zoom: 13,
        resizeEnable: true
    });
    function autoInput2(){
        var keywords = document.getElementById("tipinput2").value;
        AMap.plugin('AMap.AutoComplete', function(){
            // 实例化Autocomplete
            var autoOptions = {
                city: '全国'
            }
            var autoComplete = new AMap.Autocomplete(autoOptions);
            autoComplete.search(keywords, function(status, result) {
                $(".amap-sug-result-two").html("");
                $(".amap-sug-result-two").show();
                // console.log(result.info);
                for(const key in result.tips){
                    $(".amap-sug-result-two").append('<div class="auto-item amapaddr" id="amap-sug4" onclick="javascript:geoCode2(\''+result.tips[key].name+'\', \''+result.tips[key].district+ result.tips[key].address+'\');">' + result.tips[key].name+ " <span style='color: darkgray;margin-left: 13px;'>" + result.tips[key].district+ result.tips[key].address+ " </span></div>");
                }
            })
        })
    }
    autoInput2();
    document.getElementById("tipinput2").oninput = autoInput2;
    var geocoder2 = new AMap.Geocoder({
    });
    var marker2 = new AMap.Marker();
    function geoCode2(t, d) {
        var address  = t; //document.getElementById('address').value;
        geocoder2.getLocation(address, function(status, result) {
            if (status === 'complete'&&result.geocodes.length) {
                var lnglat = result.geocodes[0].location;
                TOrderInfoDlg.endAddress = {
                    name: t,
                    address: result.geocodes[0].formattedAddress,
                    lat: lnglat.lat,
                    lon: lnglat.lng,
                };
                document.getElementById('tipinput2').value = t;
                marker2.setPosition(lnglat);
                map2.add(marker2);
                map2.setFitView(marker2);
            }else{
                log.error('根据地址查询位置失败');
            }
        });
        $(".amap-sug-result-two").hide();
    }
    map2.on('click', function(e) {
        var lnglatXY = [e.lnglat.getLng(), e.lnglat.getLat()];
        geocoder2.getAddress(lnglatXY, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                var address = result.regeocode.formattedAddress;
                TOrderInfoDlg.endAddress = {
                    name: address,
                    address: result.regeocode.addressComponent.province+result.regeocode.addressComponent.city+result.regeocode.addressComponent.district,
                    lat: e.lnglat.getLat(),
                    lon: e.lnglat.getLng(),
                };
                document.getElementById('tipinput2').value = address;
            } else {
                log.error('根据坐标查询地址失败');
            }
        });
        ln = e.lnglat.getLng();
        lt = e.lnglat.getLat();
        if (marker2){
            map2.remove(marker2);
        }
        marker2 = new AMap.Marker({
            position: new AMap.LngLat(ln, lt),
            anchor: 'bottom-center',
            map: map2,
        });
    });
</script>
@}