摘要：生育健康平臺算是我做過的比較完整，也比較大的一個項目了。首先，主要做的還是寫前臺，因為后臺我們這里用原來的項目的接口即可。孕前保健孕期保健兒童保健生殖健康就是通過在標簽下放好類，然后在點擊時切換類然后調接口拼接頁面想要的內容。

生育健康平臺算是我做過的比較完整，也比較大的一個項目了?，F在想記錄一下，總結一下做的過程，遇到的難點。

首先，主要做的還是寫前臺，因為后臺我們這里用原來的項目的接口即可。前臺用的主要的技術是ajax、layui,現在想到的是這兩大塊，下面每一個模塊簡單說說吧。（設計什么的我也沒話語權不多說了--！）

這一塊圖片是寫死的，點擊可以展開全部，還有一些內容，點擊傳參，傳參寫死的。進去以后有不同的內容，醫院的相關信息。

這塊就是從左說吧，可以通過開通業務的醫院去預約?；疑怯幸恍顟B控制，藍色可以點擊。點擊后進入預約須知頁面，再點擊下一步可以預約。

這樣子，設定是綠色是有號源，然后被選定狀態，灰色是沒號源。這些都是可以通過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接口拼接頁面想要的內容。