摘要：生育健康平臺(tái)算是我做過(guò)的比較完整，也比較大的一個(gè)項(xiàng)目了。首先，主要做的還是寫前臺(tái)，因?yàn)楹笈_(tái)我們這里用原來(lái)的項(xiàng)目的接口即可。孕前保健孕期保健兒童保健生殖健康就是通過(guò)在標(biāo)簽下放好類，然后在點(diǎn)擊時(shí)切換類然后調(diào)接口拼接頁(yè)面想要的內(nèi)容。

生育健康平臺(tái)算是我做過(guò)的比較完整，也比較大的一個(gè)項(xiàng)目了?，F(xiàn)在想記錄一下，總結(jié)一下做的過(guò)程，遇到的難點(diǎn)。

首先，主要做的還是寫前臺(tái)，因?yàn)楹笈_(tái)我們這里用原來(lái)的項(xiàng)目的接口即可。前臺(tái)用的主要的技術(shù)是ajax、layui,現(xiàn)在想到的是這兩大塊，下面每一個(gè)模塊簡(jiǎn)單說(shuō)說(shuō)吧。（設(shè)計(jì)什么的我也沒話語(yǔ)權(quán)不多說(shuō)了--?。?/p>

這一塊圖片是寫死的，點(diǎn)擊可以展開全部，還有一些內(nèi)容，點(diǎn)擊傳參，傳參寫死的。進(jìn)去以后有不同的內(nèi)容，醫(yī)院的相關(guān)信息。

這塊就是從左說(shuō)吧，可以通過(guò)開通業(yè)務(wù)的醫(yī)院去預(yù)約?；疑怯幸恍顟B(tài)控制，藍(lán)色可以點(diǎn)擊。點(diǎn)擊后進(jìn)入預(yù)約須知頁(yè)面，再點(diǎn)擊下一步可以預(yù)約。

這樣子，設(shè)定是綠色是有號(hào)源，然后被選定狀態(tài)，灰色是沒號(hào)源。這些都是可以通過(guò)ajax獲得數(shù)據(jù)。比較新奇的是樣式這一塊，聯(lián)動(dòng)的效果，點(diǎn)擊那些藍(lán)色的號(hào)源，首先是調(diào)用ajax獲取下面的相關(guān)數(shù)據(jù)，然后上面這一行有號(hào)這些原來(lái)是綠色選中狀態(tài)會(huì)變成藍(lán)色，這個(gè)原來(lái)沒遇到過(guò)。思路是這樣的，

$("#weekdate").append("
"+nextDates[j]+"
");
$("#schedul").append("
有號(hào)
");

在js下拼接這些html，其中包含著id和class然后可以通過(guò)原生js的寫法this這些可以選取到相關(guān)節(jié)點(diǎn)，然后對(duì)class進(jìn)行處理。

$(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");
 });

比如說(shuō)，綠色是已選中狀態(tài)，藍(lán)色未選中，綠色會(huì)比藍(lán)色多一個(gè)類，顏色也會(huì)覆蓋調(diào)藍(lán)色即可，點(diǎn)擊綠色時(shí)，移除是綠色的那個(gè)類，然后給當(dāng)前類賦值即可。
然后其他的內(nèi)容也就是調(diào)接口，對(duì)數(shù)據(jù)處理了。

這里有5塊，然后我就分了5個(gè)div。。。怎么滑動(dòng)的不是很清楚但是看到一些內(nèi)容：

界面就是選擇框，input框了。這里再說(shuō)一下token驗(yàn)證吧，就是一些接口要登陸時(shí)驗(yàn)證登陸狀態(tài)

$.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時(shí)會(huì)去通過(guò)cookie獲取token，當(dāng)然是要先登陸的。這里就是用cookieutil調(diào)用一下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寫到j(luò)s下
  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;  
    } 

就是一張圖片一個(gè)鏈接

同樣會(huì)先看到一個(gè)須知頁(yè)面，然后點(diǎn)擊同意會(huì)跳轉(zhuǎn)到選擇就診人（這個(gè)是分醫(yī)院的有的醫(yī)院是跳轉(zhuǎn)到就診人，有的不用選就診人，直接下一步）

這一塊也是input框，js寫拼接，調(diào)用ajax，選好后下一步到選擇科室

table原來(lái)用的layui后來(lái)領(lǐng)導(dǎo)改成手寫了。最后預(yù)約同樣是選擇號(hào)源。

不多說(shuō)了，一些文字圖片。地圖的話不是我做的，我覺得它應(yīng)該是調(diào)用ajax先取得位置信息，然后用地圖api處理的，高德地圖。

這里是一個(gè)地圖，那些綠點(diǎn)就是定位的機(jī)器，在鼠標(biāo)拖動(dòng)完以后會(huì)調(diào)用ajax獲取新的數(shù)據(jù)去展示機(jī)器。人工網(wǎng)點(diǎn)，發(fā)放機(jī)網(wǎng)點(diǎn)兩種機(jī)器互相切換。我當(dāng)時(shí)也沒做地圖這塊，但是修改了一些問(wèn)題。拖動(dòng)地圖后會(huì)重新調(diào)取接口。

 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后，對(duì)map添加dragend事件，獲取它的經(jīng)緯度以便后面調(diào)接口用。getDrugBox就是調(diào)接口，處理數(shù)據(jù)。

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后自動(dòng)關(guān)閉
                       });
                }
                
                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();當(dāng)時(shí)也去掉了，這個(gè)是自適應(yīng)，添加后的地圖可能是按照附近信息多的位置為中心位置，就是不一定會(huì)放到你想要的準(zhǔn)確位置。

這里有四塊內(nèi)容，說(shuō)一下通過(guò)點(diǎn)擊切換板塊吧。

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


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);
            };
        }
    }

就是通過(guò)在標(biāo)簽下放好類，然后在點(diǎn)擊時(shí)切換類然后調(diào)getNews接口拼接頁(yè)面想要的內(nèi)容。