石家庄生育健康服务平台项目

摘要：生育健康平台算是我做过的比较完整，也比较大的一个项目了。首先，主要做的还是写前台，因为后台我们这里用原来的项目的接口即可。孕前保健孕期保健儿童保健生殖健康就是通过在标签下放好类，然后在点击时切换类然后调接口拼接页面想要的内容。

生育健康平台算是我做过的比较完整，也比较大的一个项目了。现在想记录一下，总结一下做的过程，遇到的难点。

首先，主要做的还是写前台，因为后台我们这里用原来的项目的接口即可。前台用的主要的技术是ajax、layui,现在想到的是这两大块，下面每一个模块简单说说吧。（设计什么的我也没话语权不多说了--！）

这一块图片是写死的，点击可以展开全部，还有一些内容，点击传参，传参写死的。进去以后有不同的内容，医院的相关信息。

这块就是从左说吧，可以通过开通业务的医院去预约。灰色是有一些状态控制，蓝色可以点击。点击后进入预约须知页面，再点击下一步可以预约。

这样子，设定是绿色是有号源，然后被选定状态，灰色是没号源。这些都是可以通过ajax获得数据。比较新奇的是样式这一块，联动的效果，点击那些蓝色的号源，首先是调用ajax获取下面的相关数据，然后上面这一行有号这些原来是绿色选中状态会变成蓝色，这个原来没遇到过。思路是这样的，

$("#weekdate").append("
"+nextDates[j]+"
");
$("#schedul").append("
有号
");

在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。。。怎么滑动的不是很清楚但是看到一些内容：

界面就是选择框，input框了。这里再说一下token验证吧，就是一些接口要登陆时验证登陆状态

$.ajax({
            type:"POST",
            url: remoteIp + "i/people/getPeopleInfo.do",
            data:{},
            dataType:"json",
            beforeSend: function (XMLHttpRequest) {XMLHttpRequest.setRequestHeader("Authorization", decodeURIComponent(getCookie("token")).replace(/
|
|(
)|(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();当时也去掉了，这个是自适应，添加后的地图可能是按照附近信息多的位置为中心位置，就是不一定会放到你想要的准确位置。

这里有四块内容，说一下通过点击切换板块吧。

                        
孕前保健
                        
孕期保健
                        
儿童保健
                        
生殖健康
                    


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接口拼接页面想要的内容。