共计 5097 个字符，预计需要花费 13 分钟才能阅读完成。
生育健康平台算是我做过的比较完整，也比较大的一个项目了。现在想记录一下，总结一下做的过程，遇到的难点。
首先，主要做的还是写前台，因为后台我们这里用原来的项目的接口即可。前台用的主要的技术是 ajax、layui, 现在想到的是这两大块，下面每一个模块简单说说吧。（设计什么的我也没话语权不多说了 –！）
婚育服务指南
这一块图片是写死的，点击可以展开全部，还有一些内容，点击传参，传参写死的。进去以后有不同的内容，医院的相关信息。
母婴保健
这块就是从左说吧，可以通过开通业务的医院去预约。灰色是有一些状态控制，蓝色可以点击。点击后进入预约须知页面，再点击下一步可以预约。
这样子，设定是绿色是有号源，然后被选定状态，灰色是没号源。这些都是可以通过 ajax 获得数据。比较新奇的是样式这一块，联动的效果，点击那些蓝色的号源，首先是调用 ajax 获取下面的相关数据，然后上面这一行有号这些原来是绿色选中状态会变成蓝色，这个原来没遇到过。思路是这样的，
$("#weekdate").append("<td id=\""+result.result[j].sdate+"\" class=\"haveSchedul\"><div class=\"tddiv dataBlueBorder dataBorder\">"+nextDates[j]+"</div></td>");
$("#schedul").append("<td class=\"haveSchedul schedulContent\"><div class=\"tddiv \"> 有号 </div></td>");
在 js 下拼接这些 html，其中包含着 id 和 class 然后可以通过原生 js 的写法 this 这些可以选取到相关节点，然后对 class 进行处理。
$(document).on("click", ".haveSchedul", function () {aChoose(this.getAttribute("id"));
var id=this.getAttribute("id");
$('.days_active').addClass("day_active");
$('.days_active').removeClass("days_active");
$('.dataBlueBorder').removeClass("dataBlueBorder");
$(this).children("div").addClass("dataBlueBorder");
$(this).removeClass("day_active");
$(this).addClass("days_active");
}); 比如说，绿色是已选中状态，蓝色未选中，绿色会比蓝色多一个类，颜色也会覆盖调蓝色即可，点击绿色时，移除是绿色的那个类，然后给当前类赋值即可。
然后其他的内容也就是调接口，对数据处理了。
这里有 5 块，然后我就分了 5 个 div。。。怎么滑动的不是很清楚但是看到一些内容：
<script type="text/javascript">
var index;
jQuery(".change-main").slide({
titCell:".flex-row li",
mainCell:".contents",
delayTime:0,
startFun :function (i) {index = i;}
});
</script>界面就是选择框，input 框了。这里再说一下 token 验证吧，就是一些接口要登陆时验证登陆状态
$.ajax({
type:"POST",
url: remoteIp + "i/people/getPeopleInfo.do",
data:{},
dataType:"json",
beforeSend: function (XMLHttpRequest) {XMLHttpRequest.setRequestHeader("Authorization", decodeURIComponent(getCookie("token")).replace(/\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029)/g, "").replace(" ",""));},
success:function(result){console.log(result);
document.getElementById("inputName2").value=result.account.name;
document.getElementById("inputId2").value=result.account.selfId;
document.getElementById("inputPhone2").value=result.account.telephone;
}
});
beforSend 时会去通过 cookie 获取 token，当然是要先登陆的。这里就是用 cookieutil 调用一下 addcookie，getcookie 这些，用到多的是 token。
@RequestMapping("/addCookie")
public @ResponseBody ModelMap addCookie(HttpServletRequest request,HttpServletResponse response,String token){ModelMap modelMap = new ModelMap();
CookieUtil.addCookie(response, "token", token);
CookieUtil.addCookie(response, "deviceId", request.getSession().getId());
modelMap.put("success", true);
modelMap.put("token", token);
return modelMap;
}
getcookie 写到 js 下
function getCookie(cookieName){
var cookieValue="";
if (document.cookie && document.cookie != '') {var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {var cookie = cookies[i].split("=");
if(cookie[0].trim() == cookieName){cookieValue = cookie[1].trim();
break;
}
}
}
return cookieValue;
}
生育办理
就是一张图片一个链接
预约服务
同样会先看到一个须知页面，然后点击同意会跳转到选择就诊人（这个是分医院的有的医院是跳转到就诊人，有的不用选就诊人，直接下一步）
这一块也是 input 框，js 写拼接，调用 ajax，选好后下一步到选择科室
table 原来用的 layui 后来领导改成手写了。最后预约同样是选择号源。
母婴室导航
不多说了，一些文字图片。地图的话不是我做的，我觉得它应该是调用 ajax 先取得位置信息，然后用地图 api 处理的，高德地图。
避孕药具导航
这里是一个地图，那些绿点就是定位的机器，在鼠标拖动完以后会调用 ajax 获取新的数据去展示机器。人工网点，发放机网点两种机器互相切换。我当时也没做地图这块，但是修改了一些问题。拖动地图后会重新调取接口。
if(type == "drugbox"){
map = new AMap.Map('container', {
resizeEnable: true,
center: [currentLng,currentLat],
zoom: 13,
scrollWheel:true,
});
console.log(map);
getDrugBox("00",114.513333,38.042478);
map.on('dragend', function(){console.log(map.getCenter());
theLng=map.getCenter().lng;
theLat=map.getCenter().lat;
getDrugBox(theBranchesType,theLng,theLat);
});
}
定义好 map 后，对 map 添加 dragend 事件，获取它的经纬度以便后面调接口用。getDrugBox 就是调接口，处理数据。
function getDrugBox(pointType,lng,lat){
var icon = base + "/index/img/markers.png";
if(pointType == "01"){icon = base + "/index/img/markers2.png";}
$.ajax({
type:"POST",
url:"https://lqj.tyjsfw.com/byt/t/napi/drugbox/list.do",
data:{
longitude:lng,
latitude:lat,
radius:"0.01",
pointType:pointType
},
dataType:"json",
success:function(result){console.log(result);
markers = new Array();
if(result.success){for(var i = 0; i< result.drugboxes.length; i++){
var marker = {
icon:icon,
position:[result.drugboxes[i].longitude,result.drugboxes[i].latitude],
name:result.drugboxes[i].nickName,
address:result.drugboxes[i].address,
pointId:result.drugboxes[i].selfId
};
markers.push(marker);
}
}else{
layer.msg(result.message, {time: 1500, //1500ms 后自动关闭});
}
addMarker(pointType);
logMapinfo();
//map.setFitView();
setTimeout(function(){map.on('zoomstart', mapZoomstart);
map.on('zoomchange', mapZoom);
map.on('zoomend', mapZoomend);
map.on('dragstart', mapZoomstart);
map.on('dragging', mapZoomstart);
map.on('dragend', mapZoomstart);
},1000);
}
});
}
map.setFitView(); 当时也去掉了，这个是自适应，添加后的地图可能是按照附近信息多的位置为中心位置，就是不一定会放到你想要的准确位置。
健康知识
这里有四块内容，说一下通过点击切换板块吧。
<ul class="healthsLists clearfix">
<li class="healthList healthActive" > 孕前保健 </li>
<li class="healthList"> 孕期保健 </li>
<li class="healthList"> 儿童保健 </li>
<li class="healthList"> 生殖健康 </li>
</ul>
tabs_Changes_news(".healthList","healthActive");
function tabs_Changes_news(tabs_name, tabs_checked_style) {var tabs = document.querySelectorAll(tabs_name),
e_mark = 0;
for (var i = 0, len = tabs.length; i < len; i++) {tabs[i].num = i;
tabs[i].onclick = function () {tabs[e_mark].classList.toggle(tabs_checked_style);
tabs[this.num].classList.toggle(tabs_checked_style);
e_mark = this.num;
getNews(this.num);
};
}
}
就是通过在标签下放好类，然后在点击时切换类然后调 getNews 接口拼接页面想要的内容。
