search-community-doctor.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  1. // TODO 社区列表示例数据
  2. //var communitiesData = {"msg":"查询成功","list":[{"code":"3502050100","name":"海沧区嵩屿街道社区卫生服务中心"},{"code":"3502050101","name":"海沧社区卫生服务站"},{"code":"3502050200","name":"石塘社区卫生服务中心"},{"code":"3502050300","name":"东孚卫生院"},{"code":"3502050301","name":"天竺社区卫生服务站"},{"code":"3502050302","name":"国营厦门第一农场社区卫生服务站"},{"code":"3502050400","name":"新阳社区卫生服务中心"},{"code":"0a11148d-5b04-11e6-8344-fa163e8aee56","name":"厦门市海沧医院","photo":""}],"status":200};
  3. // TODO 医生列表示例数据
  4. //var doctorsData = {"msg":"获取医院医生列表成功!","list":[{"code":"D2016080002","job_name":" 全科医师","introduce":"我是全科医生","name":"大米全科1","dept_name":"","photo":"http://172.19.103.85:8882/res/images/2016/08/12/20160812170142_901.jpg","id":1262,"expertise":"我是全科医生","hospital_name":"嘉莲社区医疗服务中心"},{"code":"D2016080005","job_name":" 全科医师","introduce":"我是全科医生","name":"大米全科2","dept_name":"","photo":"","id":1271,"expertise":"我是全科医生","hospital_name":"嘉莲社区医疗服务中心"},{"code":"D2016080225","job_name":" 全科医师","introduce":"我是全科医生","name":"谭仁祝(全科)","dept_name":"","photo":"","id":1274,"expertise":"我是全科医生","hospital_name":"嘉莲社区医疗服务中心"},{"code":"D2010080225","job_name":" 全科医师","introduce":"我是全科医生","name":"谭仁祝(全科1)","dept_name":"","photo":"","id":1276,"expertise":"我是全科医生","hospital_name":"嘉莲社区医疗服务中心"}],"status":200};
  5. var userAgent = window.localStorage.getItem(agentName);
  6. if(userAgent) {
  7. userAgent = JSON.parse(userAgent);
  8. }
  9. // 请求URL参数,urls[0]:社区列表,urls[1]:医生列表
  10. var urls = ["patient/hosptail/hospital_list","patient/hosptail/doctor_list"];
  11. // 搜索框
  12. var $searchbar = $('.searchbar'),
  13. // 搜索输入框
  14. $searchbarInput = $('.searchbar input'),
  15. // 搜索取消按钮
  16. $searchCancelBtn = $('.searchbar-cancel'),
  17. // 搜索框下面悬浮的搜索提示
  18. $searchSuggest = $('#search_suggest_text'),
  19. // 搜索结果展示容器
  20. $searchtResult = $('#search_result'),
  21. // 社区搜索结果容器
  22. $communityWrapper = $('#community_wrapper'),
  23. // 医生搜索结果容器
  24. $doctorWrapper = $('#doctor_wrapper'),
  25. // 查看更多社区结果容器
  26. $moreCommunityWrapper = $('#more_community_warp'),
  27. // 查看更多医生结果容器
  28. $moreDoctorWrapper = $('#more_doctor_warp'),
  29. // 搜索无结果时显示
  30. $noResultWrap = $('#no_result_wrap');
  31. // 列表分页相关,存储搜索结果最后一条记录的id
  32. var lastCommunityId = 0,
  33. lastDoctorId = 0;
  34. var page = 1;
  35. // 滚动条实例
  36. var moreCommunityScroller = null,
  37. moreDoctorScroller = null;
  38. var isFromHistory = false;
  39. var getReqPromise = function(url, data) {
  40. return new Promise(function(resolve, reject) {
  41. sendPost(url, data, "json", "post",
  42. function queryFailed (req) {
  43. dialog({contentType:'tipsbox',bottom:true, skin:'bk-popup' , content:'加载失败'}).show();
  44. // TODO 开启示例数据
  45. //resolve({});
  46. }
  47. , function success(req) {
  48. resolve(req);
  49. });
  50. });
  51. },
  52. getSearchPromise = function(data){
  53. return Promise.all(_.map(urls,function(url, index){
  54. if(index == 1){
  55. var data2 = {
  56. query: data.query,
  57. page: page,
  58. pageSize: data.pageSize
  59. };
  60. return getReqPromise(url, data2);
  61. }else{
  62. return getReqPromise(url, data);
  63. }
  64. })).then(function(data) {
  65. return {
  66. // TODO 示例数据
  67. // communities: communitiesData.list || data[0].list,
  68. // doctors: doctorsData.list || data[1].list
  69. communities: data[0].list,
  70. doctors: data[1].list
  71. };
  72. });
  73. },
  74. // 控制搜索关键字悬浮提示的显示
  75. showSearchSuggest = function(text) {
  76. var suggestText = '搜索“'+text+'”';
  77. // 如果text不为空,则显示;否则隐藏
  78. if(text&&text.trim().length) {
  79. $searchSuggest.text(suggestText);
  80. $searchSuggest.show();
  81. } else {
  82. $searchSuggest.text('');
  83. $searchSuggest.hide();
  84. }
  85. },
  86. // 显示搜索结果的社区列表(限制显示的数量最多为3)
  87. showCommunityList = function(data) {
  88. if(data && data.length) {
  89. var html = template("community_li_tmpl", {list: data.slice(0,3)}),
  90. $communityList = $('#community_list');
  91. $communityList.html(html);
  92. // 搜索结果小于等于3个时,隐藏“查看更多”
  93. if(data.length<=3) {
  94. $communityWrapper.find('.more-result').hide();
  95. } else {
  96. $communityWrapper.find('.more-result').show();
  97. }
  98. $communityWrapper.show();
  99. } else {
  100. $communityWrapper.hide();
  101. }
  102. },
  103. // 显示搜索结果的医生列表(限制显示的数量最多为3)
  104. showDoctorList = function(data) {
  105. if(data && data.length) {
  106. page ++;
  107. var html = template("doctor_li_tmpl", {list: data.slice(0,3)}),
  108. $communityList = $('#doctor_list');
  109. $communityList.html(html);
  110. // 搜索结果小于等于3个时,隐藏“查看更多”
  111. if(data.length<=3) {
  112. $doctorWrapper.find('.more-result').hide();
  113. } else {
  114. $doctorWrapper.find('.more-result').show();
  115. }
  116. $doctorWrapper.show();
  117. } else {
  118. $doctorWrapper.hide();
  119. }
  120. },
  121. // 显示更多社区列表
  122. showMoreCommunityList = function(data,isAppend) {
  123. if(data && data.length) {
  124. var html = template("community_li_tmpl", {list: data}),
  125. $moreCommunityList = $('#more_community_list');
  126. isAppend?$moreCommunityList.append(html):$moreCommunityList.html(html);
  127. $moreCommunityWrapper.show();
  128. } else {
  129. // 如果不是分页加载,也就是首屏时,若查无数据则隐藏
  130. !isAppend && $moreCommunityWrapper.hide();
  131. }
  132. },
  133. // 显示更多医生列表
  134. showMoreDoctorList = function(data,isAppend) {
  135. if(data && data.length) {
  136. var html = template("doctor_li_tmpl", {list: data}),
  137. $moreDoctorList = $('#more_doctor_list');
  138. isAppend?$moreDoctorList.append(html):$moreDoctorList.html(html);
  139. $moreDoctorWrapper.show();
  140. } else {
  141. // 如果不是分页加载,也就是首屏时,若查无数据则隐藏
  142. !isAppend && $moreDoctorWrapper.hide();
  143. }
  144. },
  145. // 分页查询社区列表
  146. searchCommunityByPaging = function () {
  147. var kw = $searchbarInput.val();
  148. // TODO 示例示例搜索参数
  149. // id: 上次搜索结果列表最后一条记录id,type固定为2,query:搜素关键字,pageSize:每页条数
  150. var url = urls[0],
  151. params = { id:0, query: kw,pageSize:15,type:2 };
  152. getReqPromise(url,params).then(function(data){
  153. // TODO 示例数据
  154. //var communities = communitiesData.list;
  155. var communities = data.list;
  156. showMoreCommunityList(communities);
  157. $moreCommunityWrapper.show();
  158. lastCommunityId = getLastId(data);
  159. if(!moreCommunityScroller) {
  160. moreCommunityScroller = initScroller($moreCommunityWrapper,url,
  161. function() { // 传递分页参数
  162. return $.extend({},params,{id:lastCommunityId});
  163. },function(data) {
  164. // TODO 示例数据
  165. //data = {"msg":"查询成功!","list":[{"code":"3502130500","address":"新圩镇龙新街","province":"350000","town":"350213","city":"350200","level":2,"name":"新圩中心卫生院","levelName":"社区医院","id":44},{"code":"3502130400","address":"内厝镇上塘村240号","province":"350000","town":"350213","city":"350200","level":2,"name":"内厝卫生院","levelName":"社区医院","id":43},{"code":"3502130300","address":"马巷镇民安路123号","province":"350000","town":"350213","city":"350200","level":2,"name":"马巷卫生院","levelName":"社区医院","id":42},{"code":"3502130200","address":"新店镇新兴街永兴路9号","province":"350000","town":"350213","city":"350200","level":2,"name":"新店中心卫生院","levelName":"社区医院","id":41},{"code":"3502130100","address":"大嶝街道田乾社区路口94号","province":"350000","town":"350213","city":"350200","level":2,"name":"大嶝卫生院(或)大嶝社区卫生服务中心","levelName":"社区医院","id":40},{"code":"3502120800","address":"莲花镇美埔村91号","province":"350000","town":"350212","city":"350200","level":2,"name":"莲花卫生院","levelName":"社区医院","id":39},{"code":"3502120700","address":"西柯针镇西柯村","province":"350000","town":"350212","city":"350200","level":2,"name":"同安区西柯中心卫生院","levelName":"社区医院","id":38},{"code":"3502120600","address":"新民镇乌涂村溪仔尾","province":"350000","town":"350212","city":"350200","level":2,"name":"新民卫生院","levelName":"社区医院","id":37},{"code":"3502120500","address":"汀溪镇汀溪街423号","province":"350000","town":"350212","city":"350200","level":2,"name":"汀溪卫生院","levelName":"社区医院","id":36},{"code":"3502120400","address":"五显镇垵炉村五显宫里1号","province":"350000","town":"350212","city":"350200","level":2,"name":"五显卫生院","levelName":"社区医院","id":35}],"status":200};
  166. showMoreCommunityList(data.list,true);
  167. lastCommunityId = getLastId(data) || lastCommunityId;
  168. var kw = $searchbarInput.val();
  169. highlightKeyword(kw);
  170. moreCommunityScroller.refresh();
  171. });
  172. }
  173. highlightKeyword(kw);
  174. moreCommunityScroller.refresh();
  175. });
  176. },
  177. // 分页查询医生列表
  178. searchDoctorByPaging = function () {
  179. var kw = $searchbarInput.val();
  180. // TODO 示例示例搜索参数
  181. // id: 上次搜索结果列表最后一条记录id,type固定为2,query:搜素关键字,pageSize:每页条数
  182. var url = urls[1],
  183. params = { page:page, query: kw,pageSize:15,type:2 };
  184. getReqPromise(url,params).then(function(data){
  185. // TODO 示例数据
  186. //var doctors = doctorsData.list;
  187. var doctors = data.list;
  188. showMoreDoctorList(doctors);
  189. $moreDoctorWrapper.show();
  190. // lastDoctorId = getLastId(data);
  191. if(!moreDoctorScroller) {
  192. moreDoctorScroller = initScroller($moreDoctorWrapper,url,
  193. function() { // 传递分页参数
  194. return $.extend({},params,{page:page +1});
  195. },function(data) {
  196. page ++;
  197. // TODO 示例数据
  198. //data = {"msg":"查询成功!","list":[{"jobName":" 全科医师","deptName":"","code":"D2010080225","sex":2,"sexName":"女","name":"谭仁祝(全科1)","photo":"","id":1276,"hospitalName":"嘉莲社区医疗服务中心","dept":"","job":"","hospital":"3502030500"},{"jobName":" 全科医师","deptName":"","code":"D2016080225","sex":2,"sexName":"女","name":"谭仁祝(全科)","photo":"","id":1274,"hospitalName":"嘉莲社区医疗服务中心","dept":"","job":"","hospital":"3502030500"},{"jobName":" 全科医师","deptName":"","code":"D2016080005","sex":2,"sexName":"女","name":"大米全科2","photo":"","id":1271,"hospitalName":"嘉莲社区医疗服务中心","dept":"","job":"","hospital":"3502030500"},{"jobName":" 全科医师","deptName":"心血管科","code":"D20160809002","sex":1,"sexName":"男","name":"孙杨(全)","photo":"","id":1264,"hospitalName":"莲前第一社区医疗服务中心","dept":"","job":"","hospital":"3502030400"},{"jobName":" 全科医师","deptName":"","code":"D2016080002","sex":1,"sexName":"男","name":"大米全科1","photo":"http://172.19.103.85:8882/res/images/2016/08/12/20160812170142_901.jpg","id":1262,"hospitalName":"嘉莲社区医疗服务中心","dept":"","job":"","hospital":"3502030500"},{"jobName":" 全科医师","deptName":"心血管科","code":"D20160802","sex":1,"sexName":"男","name":"邹林全科","photo":"","id":1244,"hospitalName":"莲前第一社区医疗服务中心","dept":"","job":"","hospital":"3502030400"},{"jobName":" 全科医师","deptName":"心血管科","code":"D2016001","sex":1,"sexName":"男","name":"陈啊咋全科","photo":"","id":1240,"hospitalName":"莲前第一社区医疗服务中心","dept":"","job":"","hospital":"3502030400"},{"jobName":"全科医师","deptName":"心血管科","code":"D20160805900002","sex":1,"sexName":"男","name":"杨炜武","photo":"http://172.19.103.85:8882/res/images/2016/08/05/20160805154335_66.png","id":1153,"hospitalName":"莲前第一社区医疗服务中心","dept":"","job":"","hospital":"3502030400"},{"jobName":"全科医师","deptName":"心血管科","code":"D20160805900001","sex":1,"sexName":"男","name":"叶泽华","photo":"","id":1152,"hospitalName":"莲前第一社区医疗服务中心","dept":"","job":"","hospital":"3502030400"},{"jobName":"副主任医师","deptName":"妇产科","code":"48833fff339111e6badcfa163e789033","sex":2,"sexName":"女","name":"丘新全","id":1137,"hospitalName":"莲前第一社区医疗服务中心","dept":"","job":"","hospital":"3502030400"}],"status":200};
  199. showMoreDoctorList(data.list,true);
  200. // lastDoctorId = getLastId(data) || lastDoctorId;
  201. var kw = $searchbarInput.val();
  202. highlightKeyword(kw);
  203. moreDoctorScroller.refresh();
  204. });
  205. }
  206. highlightKeyword(kw);
  207. moreDoctorScroller.refresh();
  208. });
  209. },
  210. // 获取分页搜索返回的最后一条记录的id
  211. getLastId = function(data) {
  212. var lastObj = data.list && data.list.length && data.list[data.list.length-1];
  213. // 最后一条记录
  214. if(lastObj) {
  215. return lastObj.id;
  216. } else {
  217. return null
  218. }
  219. },
  220. // 更新分页上拉加载的提示文本
  221. updatePullUpText= function(scroller,list) {
  222. scroller.on('refresh',function() {
  223. var $wrap = $(scroller.wrapper),
  224. $pullupLabel = $wrap.find('.pullUpLabel');
  225. if(!list || !list.length) {
  226. $pullupLabel.text('没有更多');
  227. } else {
  228. $pullupLabel.text('上拉加载更多');
  229. }
  230. });
  231. },
  232. // 关键字高亮显示
  233. highlightKeyword = function(kw) {
  234. $searchTarget = $('.search-target-text');
  235. $searchTarget.hide();
  236. _.each($searchTarget,function(ele){
  237. var $ele = $(ele),
  238. text = $ele.text(),
  239. reg = new RegExp(kw+"(?!>)","gi"),
  240. html = text.replace(reg,'<em>'+kw+'</em>');
  241. $ele.html(html);
  242. });
  243. $searchTarget.show();
  244. },
  245. // 区域滚动条分页实例初始化
  246. initScroller = function($el,url,getData,pullUpAction) {
  247. var scroller = $el.initScroll({pullDown: false,pullUpAction: function() {
  248. var data = getData();
  249. getReqPromise(url, data).then(function(data) {
  250. if(pullUpAction && $.isFunction(pullUpAction)) {
  251. pullUpAction(data);
  252. updatePullUpText(scroller,data.list);
  253. }
  254. })
  255. }});
  256. return scroller;
  257. },
  258. // 搜索框搜索执行方法
  259. search = function () {
  260. // 是否是“查看更多”模式
  261. var isMoreMode = location.hash.indexOf('more')>=0,
  262. // 获取查看更多的类型(社区或者医生)
  263. moreType = location.hash.split('-')[1];
  264. if(isMoreMode) {
  265. // 返回最初页面无hash值时的页面状态
  266. history.go(-1);
  267. }
  268. var kw = $searchbarInput.val().trim(),
  269. // 社区搜索结果列表数据
  270. communities = [],
  271. // 医生搜索结果列表数据
  272. doctors = [];
  273. // 隐藏搜索提示
  274. showSearchSuggest(false);
  275. // 搜索参数
  276. return kw && getSearchPromise({id:0,query: kw,type:2,pageSize:4}).then(function(data){
  277. communities = data.communities;
  278. doctors = data.doctors; 
  279. if(!communities.length && !doctors.length) {
  280. $noResultWrap.show();
  281. } else {
  282. $noResultWrap.hide();
  283. showCommunityList(communities);
  284. showDoctorList(doctors);
  285. showMoreCommunityList(false);
  286. showMoreDoctorList(false);
  287. $searchtResult.show();
  288. highlightKeyword(kw);
  289. }
  290. });
  291. },
  292. // 重置搜索结果的容器高度(为了让滚动条出现在容器内部,而不引起外部内容滚动)
  293. resetResultWrapHeight = function() {
  294. var winHeight = $(window).height(),
  295. diff = 45,
  296. $wrap = $('#search_result');
  297. $wrap.height(winHeight-diff);
  298. },
  299. // 监听窗口大小变化,重置所属区列表、社区列表列表容器高度
  300. resultWrapAutoAdapt = function() {
  301. resetResultWrapHeight();
  302. $(window).on('resize',function() {
  303. resetResultWrapHeight();
  304. });
  305. };
  306. resultWrapAutoAdapt();
  307. new Promise(function(resolve, reject) {
  308. // 搜索框初始化
  309. $searchbar.searchBar();
  310. $searchbarInput.click();
  311. $searchbarInput.focus();
  312. resolve(true);
  313. }).then(function() {
  314. // 注册hash值变化事件,为了判断是否点击了"查看更多",以及在点击返回时能够回到之前的查询结果页面状态
  315. window.onhashchange = function() {
  316. // 是否是“查看更多”模式
  317. var isMoreMode = location.hash.indexOf('more')>=0,
  318. // 获取查看更多的类型(社区或者医生)
  319. moreType = location.hash.split('-')[1];
  320. if(isMoreMode) {
  321. $searchtResult.hide();
  322. lastCommunityId = 0;
  323. // lastDoctorId = 0;
  324. page = 1;
  325. switch(moreType) {
  326. case 'community':
  327. searchCommunityByPaging();
  328. break;
  329. case 'doctor':
  330. searchDoctorByPaging();
  331. break;
  332. }
  333. } else {
  334. showMoreCommunityList(false);
  335. showMoreDoctorList(false);
  336. $searchtResult.show();
  337. }
  338. };
  339. $searchbarInput.on('focus',function() {
  340. // var text = $(this).val();
  341. // if(text.trim()) {
  342. // showSearchSuggest(text);
  343. // }
  344. }).on('input', function() {
  345. var text = $(this).val().trim();
  346. showMoreCommunityList(false);
  347. showMoreDoctorList(false);
  348. $searchtResult.hide();
  349. showSearchSuggest(text);
  350. }).on('keydown',function(e) {
  351. if (e.which === 13) {
  352. search();
  353. }
  354. });
  355. $searchSuggest.on('click',function() {
  356. search();
  357. });
  358. // 当点击“查看更多”后hash值发生变化,同时增加了一条历史记录,所以返回之前页面需要history.go(-2)
  359. $searchCancelBtn.on('click',function() {
  360. // 是否是“查看更多”模式
  361. var isMoreMode = location.hash.indexOf('more')>=0;
  362. isMoreMode?window.history.go(-2):window.history.go(-1);
  363. });
  364. $('#doctor_list,#more_doctor_list').on('click','li',function() {
  365. var code = $(this).attr('data-code');
  366. window.location.href = "../../ssgg/html/doctor-homepage-new.html?state="+code+"&openid="+userAgent.openid;
  367. });
  368. }).catch(function(e) {
  369. alert(e);
  370. console && console.error(e);
  371. });
  372. window.onpageshow = function() {
  373. var $input = $('.searchbar input[type=search]'),
  374. kw = $input.val().trim();
  375. if(kw) {
  376. var d = dialog({contentType:'load', skin:'bk-popup'}).show();
  377. var promise = search();
  378. if(promise) {
  379. promise.then(function() {
  380. d.close();
  381. });
  382. }
  383. }
  384. }
  385. template.helper('getHospitalImg', function(str){
  386. var url = getImgUrl(str);
  387. if(url == ''){
  388. url = '../images/hospital_default.png';
  389. }
  390. return url;
  391. });
  392. template.helper('getPhoto', function(str){
  393. return getImgUrl(str);
  394. })