<!DOCTYPE HTML>
|
<html xmlns:th="http://www.thymeleaf.org">
|
<head>
|
<meta charset="utf-8">
|
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
|
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
|
<meta http-equiv="Cache-Control" content="no-siteapp" />
|
<!-- 本框架基本脚本和样式 -->
|
<script type="text/javascript"
|
th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
|
<script type="text/javascript" th:src="@{/js/systools/MBase.js}"></script>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Oego4OzlvPRPNyjCPTctXtuVNsSissOX"></script>
|
|
|
</head>
|
<body>
|
<div class="ibox-content">
|
<form class="form-horizontal" id="dataform"
|
onsubmit="javascripr:return false;">
|
|
<input autocomplete="off" type="hidden" name="id" th:value="${obj?.id}">
|
|
<div class="form-group">
|
<label class="col-sm-2 control-label">门店编号<span class="text-danger">*</span></label>
|
<div class="col-sm-4">
|
<input autocomplete="off" type="text" dataType="*1-20" class="form-control"
|
name="shopNo" th:value="${obj?.shopNo}">
|
<div class="Validform_checktip"></div>
|
</div>
|
<label class="col-sm-2 control-label">门店名称<span class="text-danger">*</span></label>
|
<div class="col-sm-4">
|
<input autocomplete="off" type="text" dataType="*1-20" class="form-control"
|
th:value="${obj?.shopName }" name="shopName">
|
<div class="Validform_checktip"></div>
|
</div>
|
</div>
|
|
<div class="form-group ">
|
|
<label class="col-sm-2 control-label">门店电话<span class="text-danger">*</span></label>
|
<div class="col-sm-4">
|
<input autocomplete="off" type="text" class="form-control" dataType="pOrm" name="shopTel" errormsg="请输入座机号(带区号)或者手机号"
|
th:value="${obj?.shopTel}">
|
<div class="Validform_checktip"></div>
|
</div>
|
</div>
|
<div class="form-group ">
|
|
<label class="col-sm-2 control-label">门店租金</label>
|
<div class="col-sm-4">
|
<input autocomplete="off" type="text" class="form-control" name="rent" th:value="${obj?.rent}">
|
</div>
|
<label class="col-sm-2 control-label">门店银行卡号<span class="text-danger">*</span></label>
|
<div class="col-sm-4">
|
<input autocomplete="off" dataType="*" type="text" class="form-control" name="bankNo" errormsg="请输入银行卡号" th:value="${obj?.bankNo}">
|
</div>
|
</div>
|
|
|
<div class="form-group ">
|
|
<label class="col-sm-2 control-label">开户行</label>
|
<div class="col-sm-4">
|
<select class="form-control autoFull" name="bankName"
|
id="instoreType" data-filed="name" data-value="name"
|
th:data-url="@{/admin/dataDictionary/showDataDictionary}"
|
data-param="{type:'开户行'}"
|
datatype="*" nullmsg="开户行不能为空">
|
<option value=''>--请选择开户行--</option>
|
<div class="Validform_checktip"></div>
|
</select>
|
</div>
|
<label class="col-sm-2 control-label">开户人姓名<span class="text-danger">*</span></label>
|
<div class="col-sm-4">
|
<input autocomplete="off" dataType="*" type="text" class="form-control" name="bankOwnerName" errormsg="请输入开户人姓名" th:value="${obj?.bankOwnerName}">
|
</div>
|
</div>
|
|
<div class="form-group ">
|
<label class="col-sm-2 control-label">门店地址<span class="text-danger">*</span></label>
|
<div class="col-sm-4">
|
<div class="form-group">
|
<input autocomplete="off" type="text" style="width: 65% ;float: right;" class="form-control" name="shopAddr" id="text_" dataType="*1-200" th:value="${obj?.shopAddr}">
|
<a href="javascript:;" onclick="geocoderGetPoint()" style="width: 30% ;float: right;" class="btn btn-success radius">取经纬度</a>
|
</div>
|
<div class="Validform_checktip"></div>
|
</div>
|
<label class="col-sm-2 control-label">门店描述</label>
|
<div class="col-sm-4">
|
<input autocomplete="off" type="text" class="form-control" name="shopDes" dataType="*1-200"
|
ignore="ignore" th:value="${obj?.shopDes}">
|
<div class="Validform_checktip"></div>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="col-sm-2 control-label">门店经度</label>
|
<div class="col-sm-4">
|
<input autocomplete="off" type="text" dataType="*1-20" class="form-control" readonly="readonly"
|
name="longitude" th:value="${obj?.longitude}" id="longitude" nullmsg="经度不为空，点击获取经纬度">
|
<div class="Validform_checktip"></div>
|
</div>
|
<label class="col-sm-2 control-label">门店纬度</label>
|
<div class="col-sm-4">
|
<input autocomplete="off" type="text" dataType="*1-20" class="form-control"readonly="readonly"
|
th:value="${obj?.latitude }" name="latitude" id="latitude" nullmsg="经度不为空，点击获取经纬度">
|
<div class="Validform_checktip"></div>
|
</div>
|
</div>
|
|
|
|
|
<div class="form-group">
|
<label class="col-sm-2 control-label">门店照片</label>
|
<div class="col-sm-8">
|
<input autocomplete="off" th:value="${obj?.shopImag}" name="shopImag" id="info6"
|
class="form-control upload-input" type="text" /> <a
|
class="btn btn-primary radius upload-a">选择图片
|
</a>
|
</div>
|
</div>
|
|
|
|
|
<div class="form-group">
|
<div class="col-sm-2 control-label"></div>
|
<div class="col-sm-9">
|
<div id="container" style="width:90%;height: 300px; border: 1px solid gray;">
|
</div>
|
</div>
|
</div>
|
<div class="form-group ">
|
<div class="col-sm-12 text-center fixed-button">
|
<a href="javascript:;" onclick="myForm.submit()"
|
class="btn btn-success radius"><i class="fa fa-check"></i> 保存</a>
|
<a class="btn btn-danger radius" href="javascript:;"
|
onclick="MTools.closeForm()"><i class="fa fa-close"></i> 关闭</a>
|
</div>
|
</div>
|
</form>
|
</div>
|
|
|
</body>
|
|
|
<script type="text/javascript" th:src="@{/js/systools/MJsBase.js}"></script>
|
<script th:inline="javascript">
|
MTools.autoFullSelect();
|
MUI.initImgUpload(".upload-input");
|
|
var myForm = MForm.initForm({
|
invokeUrl : basePath+"/admin/shopInfo/addOrModify",
|
afterSubmit : function() {
|
parent.myGrid.serchData();
|
},
|
});
|
|
|
|
/* -----------百度地图相关的js---------- */
|
|
//
|
var map = new BMap.Map("container");
|
var currentP;
|
var targetPoint;
|
initMap();
|
//geocoderGetPoint();
|
|
//初始化地图
|
function initMap(){
|
map.centerAndZoom("长沙", 11);
|
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
|
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
|
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
|
map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
|
map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角，打开
|
//var localSearch = new BMap.LocalSearch(map);
|
//localSearch.enableAutoViewport(); //允许自动调节窗体大小
|
}
|
|
|
|
//根据地址解析坐标点
|
function geocoderGetPoint(){
|
map.clearOverlays();//清空原来的标注
|
var keyword = $("#text_").val();
|
var myGeo = new BMap.Geocoder();
|
// 将地址解析结果显示在地图上，并调整地图视野
|
myGeo.getPoint(keyword, function(point){
|
if (point) {
|
|
$("#longitude").val(point.lng);
|
$("#latitude").val(point.lat);
|
//触发输入框的失去焦点事件，validaform才会去验证
|
inputBlur();
|
map.centerAndZoom(point, 12);
|
var marker = new BMap.Marker(point)
|
map.addOverlay(marker);
|
var content = $("#text_").val() + /* poi.title+ */"<br/>经度：" + point.lng + "<br/>纬度：" + point.lat;
|
addMarkerEvent(marker,content);
|
}
|
}, "长沙市");
|
}
|
|
//根据坐标点获取地址
|
function eocoderReversePoint(p){
|
var myGeo = new BMap.Geocoder();
|
var address="";
|
myGeo.getLocation(p,function(rs){
|
address=rs.address;
|
$("#mapAddress").val(address);
|
})
|
}
|
|
|
function addMarkerEvent(marker,content){
|
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");
|
marker.addEventListener("mouseover", function () { this.openInfoWindow(infoWindow); });
|
//marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
|
}
|
//给地图添加事件监听,手动选择位置
|
map.addEventListener("click",function(e){
|
//在点击处画标注，并且设置为中心点
|
var selectPoint=new BMap.Point(e.point.lng,e.point.lat);
|
targetPoint=selectPoint;
|
var myGeo = new BMap.Geocoder();
|
var address="";
|
myGeo.getLocation(selectPoint,function(rs){
|
var changeMarker = new BMap.Marker(selectPoint); // 创建标注，为要查询的地方对应的经纬度
|
map.clearOverlays();
|
map.addOverlay(changeMarker);
|
map.panTo(selectPoint);
|
//html的元素上显示经纬度
|
$("#longitude").val(selectPoint.lng );
|
$("#latitude").val(selectPoint.lat);
|
inputBlur();
|
var content = rs.address +"<br/>经度：" + selectPoint.lng + "<br/>纬度：" +selectPoint.lat;
|
//给标注添加鼠标焦点事件，鼠标移动到标注上显示信息
|
addMarkerEvent(changeMarker,content);
|
})
|
});
|
|
function inputBlur(){
|
$("#longitude").trigger("blur");
|
$("#latitude").trigger("blur");
|
}
|
|
</script>
|
</body>
|
</html>
|
