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