Skip to content

T
tl_estate
Commit f6d87bc8 authored by xishifeng's avatar xishifeng
Browse files
Options

增加定位内容

parent 7eed985e
Hide whitespace changes
Inline Side-by-side
Showing with 367 additions and 246 deletions
application/index/view/store/index.html
View file @ f6d87bc8
......@@ -2,131 +2,135 @@
<input type="hidden" class="page-load" id="storeList" />
<style>
/*获取百度经纬度样式*/
/*********************************************************百度定位页面iframe引入*************************************/
#position_box {
height: 750px;
background-color: #f0f0f0;
overflow: scroll;
position: relative;
}
div.address-header-bar {
overflow: hidden;
float: left;
}
#address_city_title {
float: left;
width: 150px;
line-height: 60px;
font-size: 30px;
color: #333;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: none;
}
.crile {
float: left;
width: 570px;
overflow: hidden;
position: relative;
}
.crile>input {
line-height: 60px;
box-sizing: border-box;
padding: 0;
border-width: 1px;
width: 100%;
display: block;
border-radius: 30px;
background: #f5f5f5 url('/resource/image/search_ic.png') no-repeat 30px center;
background-size: 28px;
text-indent: 60px;
font-size: 28px;
outline: none;
}
.crile>input::-webkit-search-cancel-button {
-webkit-appearance: none;
}
img.cancel-pic {
width: 28px;
height: 28px;
position: absolute;
right: 0;
top: 0;
box-sizing: content-box;
padding: 15px;
}
#main_ul {
padding: 0 30px;
background-color: white;
font-size: 30px;
}
#main_ul>ul {
padding-left: 0;
}
#main_ul>ul>li {
cursor: pointer;
list-style: none;
}
#main_ul>ul>li+li {
border-top: 1px solid #e0e0e0;
}
#main_ul>ul>li>p:nth-of-type(1) {
color: #333;
padding: 20px 0 10px;
margin: 0;
}
#main_ul>ul>li>p:nth-of-type(2) {
color: #999;
padding-bottom: 20px;
margin: 0;
}
.loading_pic {
font-size: 20px;
text-align: center;
width: 100%;
position: absolute;
top: 150px;
display: none;
}
.loading_pic>img {
width: 120px;
display: block;
margin: 0 auto;
}
.loading_pic>p {
font-size: 20px;
color: #333;
text-align: center;
margin-top: 10px;
color: rgb(51, 51, 51);
}
.no_more {
font-size: 30px;
height: 50px;
line-height: 50px;
text-align: center;
display: none;
}
/**/
/*********************************************************百度定位页面iframe引入*************************************/
.address-search-head-div{
height: 88px;
overflow: hidden;
padding-left: 12%;
}
#position_box {
height: 750px;
background-color: #f0f0f0;
overflow: scroll;
position: relative;
}
div.address-header-bar {
overflow: hidden;
float: left;
}
#address_city_title {
float: left;
width: 150px;
line-height: 60px;
font-size: 30px;
color: #333;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: none;
}
.crile {
float: left;
width: 570px;
overflow: hidden;
position: relative;
}
.crile>input {
line-height: 60px;
box-sizing: border-box;
padding: 0;
border-width: 1px;
width: 100%;
display: block;
border-radius: 30px;
background: #f5f5f5 url('/resource/image/search_ic.png') no-repeat 30px center;
background-size: 28px;
text-indent: 60px;
font-size: 28px;
outline: none;
}
.crile>input::-webkit-search-cancel-button {
-webkit-appearance: none;
}
img.cancel-pic {
width: 28px;
height: 28px;
position: absolute;
right: 0;
top: 0;
box-sizing: content-box;
padding: 15px;
}
#main_ul {
padding: 0 30px;
background-color: white;
font-size: 30px;
}
#main_ul>ul {
padding-left: 0;
}
#main_ul>ul>li {
cursor: pointer;
list-style: none;
}
#main_ul>ul>li+li {
border-top: 1px solid #e0e0e0;
}
#main_ul>ul>li>p:nth-of-type(1) {
color: #333;
padding: 20px 0 10px;
margin: 0;
}
#main_ul>ul>li>p:nth-of-type(2) {
color: #999;
padding-bottom: 20px;
margin: 0;
}
.loading_pic {
font-size: 20px;
text-align: center;
width: 100%;
position: absolute;
top: 150px;
display: none;
}
.loading_pic>img {
width: 120px;
display: block;
margin: 0 auto;
}
.loading_pic>p {
font-size: 20px;
color: #333;
text-align: center;
margin-top: 10px;
color: rgb(51, 51, 51);
}
.no_more {
font-size: 30px;
height: 50px;
line-height: 50px;
text-align: center;
display: none;
}
</style>
<div id="page-content-wrapper">
<div class="container">
......@@ -287,7 +291,7 @@
</div>
<div class="form-group">
<label class="col-sm-3 control-label">详细地址：</label>
<input type="text" value="" name="address" class="form-control btn6" placeholder="请输入详细地址">
<input type="text" value="" name="address" id="address" class="form-control btn6" placeholder="请输入详细地址">
</div>
<div class="form-group">
<label class="col-sm-3 control-label">公司名：</label>
......@@ -329,33 +333,33 @@
</div>
<!--百度定位的弹出框更改-->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content" style="width: 780px;">
<div class="modal-header address-search-head-div">
<div class="address-header-bar">
<div id="address_city_title">上海市</div>
<div class="crile">
<input class="main-input" id="search_input" type="search" placeholder="请输入地址" />
<img src="/resource/image/search_gb.png" class="cancel-pic" />
</div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="font-size: 42px;"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body" style="height: 780px;">
<div id="position_box">
<div id="main_ul">
<ul></ul>
</div>
<div id="loading_pic" class="loading_pic">
<img src="/resource/image/jz2.gif" />
<p>正在加载...</p>
</div>
<div id="no_more" class="no_more">没有更多了</div>
</div>
</div>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content" style="width: 780px;">
<div class="modal-header address-search-head-div">
<div class="address-header-bar">
<div id="address_city_title">上海市</div>
<div class="crile">
<input class="main-input" id="search_input" type="search" placeholder="请输入地址" />
<img src="/resource/image/search_gb.png" class="cancel-pic" />
</div>
</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="font-size: 42px;"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body" style="height: 780px;">
<div id="position_box">
<div id="main_ul">
<ul></ul>
</div>
<div id="loading_pic" class="loading_pic">
<img src="/resource/image/jz2.gif" />
<p>正在加载...</p>
</div>
<div id="no_more" class="no_more">没有更多了</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=RTimRTxtj23AYTCkSsPvNDuQkGpR2fPX"></script>
......
public/resource/js/storeList.js
View file @ f6d87bc8
......@@ -2,98 +2,214 @@
* Created by 刘丹 on 2017/12/11.
*/
define (['doT', 'text!temp/store_template_tpl.html', 'css!style/home.css','ckfinder','ckfinderStart','pagination','bootstrapJs'], function (doT, template) {
store = {
pageNo: 1, /*第几页*/
pageSize: 10, /*每页显示多少条*/
id : '',
house_id:'',
type:'',
valueCurrent:'',
ajaxObj:'',
stopstatus:true,
boxphoto:'',
init: function () {
//初始化dot
$ ("body").append (template);
store.getList ();
store.event ();
store.getRegionsDisc();
},
event: function () {
$("#search").click(function () {
store.getList(1);
});
$("#reset").click(function () {//重置
document.getElementById("form_search").reset();
});
$ (document).delegate (".del_modal", "click", function () {
store.id = $ (this).attr ("data-id");
});
},
getRegionsDisc : function (name) {
var params = {};
params.parent_code = 310100;
$.ajax ({
url: '/index/regions',
type: 'GET',
async: true,
data: params,
dataType: 'json',
success: function (data) {
if (data.code == 200) {
var _html = '';
$.each(data.data, function (i,n) {
_html += '<option value="'+n.fullName+'">'+n.fullName+'</option>';
});
$("#area").append(_html);
} else {
alert('请求省市区错误');
}
}
});
},
getList: function (pageNo) {
store.pageNo = pageNo;
var params = {};
params.pageNo = store.pageNo;
params.pageSize = store.pageSize;
params.district = $('#area option:selected') .val();;//城市区
params.store_name = $('#mend_name') .val();//门店名
params.agents_name = $('#name') .val();//店长名
params.agents_phone = $('#phone') .val();//手机号
$.ajax ({
url: '/index/storeList',//获取列表
type: 'GET',
async: true,
data: params,
dataType: 'json',
success: function (data) {
console.log(data.data);
var temp = document.getElementById ('store_list_tpl').innerHTML;
var doTtmpl = doT.template (temp);
$ ("#store_list").html (doTtmpl (data.data.list));
/*分页代码*/
$ ("#pagediv").pagination ({
length: data.data.total,
current: pageNo,
every: store.pageSize,
onClick: function (el) {
store.getList (el.num.current);
}
});
}
});
}
};
return store;
define(['doT', 'text!temp/store_template_tpl.html', 'css!style/home.css', 'ckfinder', 'ckfinderStart', 'pagination', 'bootstrapJs'], function(doT, template) {
store = {
pageNo: 1,
/*第几页*/
pageSize: 10,
/*每页显示多少条*/
id: '',
house_id: '',
type: '',
valueCurrent: '',
ajaxObj: '',
stopstatus: true,
boxphoto: '',
init: function() {
//初始化dot
$("body").append(template);
store.getList();
store.event();
store.getRegionsDisc();
},
event: function() {
$("#search").click(function() {
store.getList(1);
});
$("#reset").click(function() { //重置
document.getElementById("form_search").reset();
});
$(document).delegate(".del_modal", "click", function() {
store.id = $(this).attr("data-id");
});
/************************************************百度地址定位相关*************************************************************/
var _doc = $(document),
_provinceInternalObj = $('#province_internal'),
_cityInternalObj = $('#city_internal'),
_discInternalObj = $('#disc_internal'),
_addressInternalObj = $('#address'),
_longitudeObj = $('#longitude'),
_latitudeObj = $('#latitude'),
ulHtml = $('#main_ul>ul'),
loadItem = $("#loading_pic"),
noMoreItem = $("#no_more"),
_inputObj = $('#search_input'),
valueCurrent = '';
//初始化,百度地图相关对象
var LocalSearch = new BMap.LocalSearch(),
myGeo = new BMap.Geocoder();
//搜索地址的回调
LocalSearch.setSearchCompleteCallback(function(data) {
if(LocalSearch.getStatus() == BMAP_STATUS_SUCCESS) {
console.log(data);
var _html = "";
for(var i = 0; i < data.getCurrentNumPois(); i++) {
_html += '<li data-city="{2}" data-lat="{3}" data-lng="{4}" data-dismiss="modal"><p>{0}</p><p>{1}</p></li>'.stringFormatObj({
'0': data.getPoi(i)["title"],
'1': data.getPoi(i)["address"],
'2': data.getPoi(i)["city"],
'3': data.getPoi(i)["point"]["lat"],
'4': data.getPoi(i)["point"]["lng"]
});
};
ulHtml.html(_html);
loadItem.hide();
noMoreItem.show();
};
});
_inputObj.on('input', function(e) {
e.preventDefault();
e.stopPropagation();
valueCurrent = $(this).val();
if(valueCurrent != '') {
addressResetLoad();
addressLoadMain(valueCurrent);
} else {
ulHtml.html('');
loadItem.hide();
noMoreItem.show();
return false;
}
});
//输入框的取消图标点击事件
$('.cancel-pic').click(function(e) {
e.preventDefault();
e.stopPropagation();
_inputObj.val('').focus();
addressResetLoad();
});
_doc.on('click', '#main_ul>ul>li', function(e) {
e.preventDefault();
e.stopPropagation();
var _this = $(this),
_city = _this.data('city'),
_lng = Number(_this.data('lng')), //经度
_lat = Number(_this.data('lat')); //纬度
getDistrict(_lng, _lat, function(data) {
console.log(data);
if(data['city']) {
_provinceInternalObj.val(data['province']);
_cityInternalObj.val(data['city']);
_discInternalObj.val(data['district']);
var _htmlOri = _this.find('p:nth-of-type(2)').html(),
_htmlDeal = '',
_index1 = _htmlOri.indexOf('市'),
_index2 = _htmlOri.indexOf('区');
if((_index1 > 0) && (_index2 > 2) && (_index2 > _index1)) {
_htmlDeal = _htmlOri.slice(_index2 + 1);
} else {
_htmlDeal = _htmlOri;
}
_addressInternalObj.val(_htmlDeal);
_longitudeObj.val(_lng);
_latitudeObj.val(_lat);
// $('#position_box').hide();
} else {
alert('请重新选择地址');
return false;
}
}); //根据经纬度获取城市区域名
});
function addressResetLoad() {
ulHtml.html('');
loadItem.hide();
noMoreItem.show();
};
function addressLoadMain(keyword) {
loadItem.show();
noMoreItem.hide();
LocalSearch.setLocation('上海市');
LocalSearch.search(keyword);
};
function getDistrict(str1, str2, fn) {
myGeo.getLocation(new BMap.Point(str1, str2), function(result) {
if(result) {
console.log(result);
fn(result['addressComponents']);
}
});
};
/************************************************百度地址定位相关****结束*************************************************************/
},
getRegionsDisc: function(name) {
var params = {};
params.parent_code = 310100;
$.ajax({
url: '/index/regions',
type: 'GET',
async: true,
data: params,
dataType: 'json',
success: function(data) {
if(data.code == 200) {
var _html = '';
$.each(data.data, function(i, n) {
_html += '<option value="' + n.fullName + '">' + n.fullName + '</option>';
});
$("#area").append(_html);
} else {
alert('请求省市区错误');
}
}
});
},
getList: function(pageNo) {
store.pageNo = pageNo;
var params = {};
params.pageNo = store.pageNo;
params.pageSize = store.pageSize;
params.district = $('#area option:selected').val();; //城市区
params.store_name = $('#mend_name').val(); //门店名
params.agents_name = $('#name').val(); //店长名
params.agents_phone = $('#phone').val(); //手机号
$.ajax({
url: '/index/storeList', //获取列表
type: 'GET',
async: true,
data: params,
dataType: 'json',
success: function(data) {
console.log(data.data);
var temp = document.getElementById('store_list_tpl').innerHTML;
var doTtmpl = doT.template(temp);
$("#store_list").html(doTtmpl(data.data.list));
/*分页代码*/
$("#pagediv").pagination({
length: data.data.total,
current: pageNo,
every: store.pageSize,
onClick: function(el) {
store.getList(el.num.current);
}
});
}
});
}
};
return store;
});
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment