12.12海囤全球母婴

/* 页面样式 */
.user_babyplan {margin: 0 auto; padding: 14px 0 35px; width: 96.875%;}
.user_babyplan_wrap {border-radius: 8px; background: #febd23; /* <-- 修改颜色处 */}
.user_babyplan_btn {position: absolute; bottom: -11px; left: 3.5%; width: 93%;}
.user_babyplan_btn:before {content: ''; position: absolute; top: 3px; left: 0; width: 100%; height: 100%; border-radius: 35px; background: rgba(0,0,0,0.1);}
.user_babyplan_btn_wrap {position: relative; display: block; height: 35px; line-height: 35px; font-size: 16px; border-radius: 35px; background: #fff; text-align: center; color: #222; }
.user_babyplan_btn_wrap i {vertical-align: middle;}
.user_babyplan_btn_wrap:after {content: ''; display: inline-block; margin-left: 8px; width: 10px; height: 14px; background: url(//img14.360buyimg.com/cms/jfs/t3820/163/363736183/1420/a1d7c2b5/580f239fN7da860ea.png) no-repeat; background-size: 100%; vertical-align: middle;}
.user_babyplan_btn.user_babyplan_submit .user_babyplan_btn_wrap:before {content: ''; display: inline-block; margin-right: 7px; width: 35px; height: 28px; background: url(//img13.360buyimg.com/cms/jfs/t3727/256/611402121/4207/dc50caa/580f239fNfb6fc28f.png) no-repeat; background-size: 100%; vertical-align: middle;}
.user_babyplan_tab {border-bottom: 1px solid rgba(255,255,255,0.4);}
.user_babyplan_tab_it {max-width: 25%; height: 29px; line-height: 29px; border-left: 1px solid rgba(255,255,255,0.4); font-size: 14px; color: #fff; text-align: center; white-space: nowrap; word-wrap: normal;}
.user_babyplan_tab_it:first-child {border-left: 0;}
.user_babyplan_tab_it:first-child:last-child {border-right: 1px solid rgba(255,255,255,0.4);}
.user_babyplan_tab_it:after {content: ''; display: inline-block; margin-left: 3px; width: 4.5px; height: 7.5px; background: url(//img13.360buyimg.com/cms/jfs/t3529/258/612779060/1040/5cac3b20/580f239fN7eea6cc8.png) no-repeat; background-size: 100%;}
.user_babyplan_hd {padding-top: 9.8387%; background: url(//img14.360buyimg.com/cms/jfs/t3559/227/624673277/9409/f4c1e3dd/580f239fN72b0d1c6.png) no-repeat; background-size: 100%;}
.user_babyplan_cont {position:relative; padding-bottom: 29px; border-radius: 8px; background: rgba(255,255,255,0.4) url(//img13.360buyimg.com/cms/jfs/t3679/234/591123399/1156/db79467a/580f239fNe2d2d36f.png);}
/* 表单页 */
.user_babyplan_form {}
  .user_babyplan_form_row {border-bottom: 1px solid #e5e5e5;}
  .user_babyplan_form_row_cont {padding: 0 10px; height: 39px;}
  .user_babyplan_form_row_label {font-size: 14px; color: #fff;}
  .user_babyplan_form_row_field {width: 55%;}
  .user_babyplan_form_row_field.user_date { position: relative; }
  .user_babyplan_form_row_field.user_date:before { 
    content: ''; position: absolute; right: 0; top: 50%; margin-top: -11.5px; width: 23px; height: 23px;
    background: url(//img30.360buyimg.com/cms/jfs/t3373/158/654640328/222/555c328e/581054baN42dc3880.png) no-repeat; background-size: 100%;}
  .user_babyplan_form_row_field.user_date .user_date_real {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
  .user_babyplan_form_row_field.user_date .user_date_real input {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
  .user_babyplan_form_row_field.user_radio {  }
  .user_babyplan_form_row_field.user_radio label { position: relative; margin-left: 8px; }
  .user_babyplan_form_row_field.user_radio label:first-child { margin-left: 0; }
  .user_babyplan_form_row_field.user_radio label > span { display: block; line-height: 25px; border: 1px solid #ccc; font-size: 14px; border-radius: 2px; color: #808080; background: #fff; text-align: center; border-radius: 25px; }
  .user_babyplan_form_row_field.user_radio input[type="radio"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}
  .user_babyplan_form_row_field.user_radio input[type="radio"]:checked + span {color: #ff0e00; border-color: #dc93ff;}
    .user_babyplan_form input {width: 100%; border: 0; font-size: 14px; background: transparent; color: #fff;}
    .user_babyplan_form input::-webkit-input-placeholder  {color: #fff;}
/* 欢迎页 */
.user_babyplan_welcome {}
  .user_babyplan_welcome_baby {padding: 8px 0;}
  .user_babyplan_welcome_baby_avatar {display: inline-block; margin-right: 10px; width: 67px; height: 60px; background: url(//img10.360buyimg.com/cms/jfs/t3841/290/460164217/5745/2e7dc055/5811d072N137d736a.png) no-repeat; background-size: 100% 100%;}
  .user_babyplan_welcome_baby_avatar.user_babyplan_girl {background: url(//img10.360buyimg.com/cms/jfs/t3760/176/743419973/8639/3066f254/5811d072Nbc8594bf.png) no-repeat; background-size: 100% 100%;}
  .user_babyplan_welcome_baby_avatar.user_babyplan_boy {background: url(//img12.360buyimg.com/cms/jfs/t3625/146/725988839/6716/ebdfc100/5811d072N87b52219.png) no-repeat; background-size: 100% 100%;}
  .user_babyplan_welcome_baby_info {height: 60px; color: #fff;}
  .user_babyplan_welcome_text {font-size: 16px; color: #fff; text-align: center;}
/* Toast */
.user_toast {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}
  .user_toast_cont {position: absolute; top: 35%; left: 50%; padding: 0 40px; line-height: 40px; font-size: 15px; font-weight: bold; color: #000; border-radius: 4px; background: #fff; text-align: center; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); white-space: nowrap; word-wrap: normal;}
@media screen and (-webkit-min-device-pixel-ratio:2){
  .user_babyplan_form_row:after {background: #e5e5e5;}
}
</style>

<div class="user_babyplan">
  <div class="user_babyplan_wrap">
    
    
    <div class="user_babyplan_hd"></div>
    <div class="user_babyplan_cont">
      <div class="user_babyplan_form" style="display: block">
        <form action="" id="joinus">
            <div class="user_babyplan_form_row ly_retina_bottom_after">
              <div class="user_babyplan_form_row_cont ly_box ly_box_aligncenter">
                <div class="user_babyplan_form_row_label ly_box_flexone">宝宝性别：</div>
                <div class="user_babyplan_form_row_field user_radio ly_box">
                  <label class="ly_box_flexone"><input type="radio" name="sexual" value="1"><span>王子</span></label>
                  <label class="ly_box_flexone"><input type="radio" name="sexual" value="2"><span>公主</span></label>
                  <label class="ly_box_flexone"><input type="radio" name="sexual" value="0"><span>怀孕中</span></label>
                </div>
              </div>
            </div>
            <div class="user_babyplan_form_row ly_retina_bottom_after">
              <div class="user_babyplan_form_row_cont ly_box ly_box_aligncenter">
                <div class="user_babyplan_form_row_label ly_box_flexone">宝宝生日/预产期：</div>
                <div class="user_babyplan_form_row_field user_date">
                  <input type="text" placeholder="请选择日期" name="borndate" id="borndate">
                  <div class="user_date_real"><input type="date"></div>
                </div>
              </div>
            </div>
            <div class="user_babyplan_form_row ly_retina_bottom_after">
              <div class="user_babyplan_form_row_cont ly_box ly_box_aligncenter">
                <div class="user_babyplan_form_row_label ly_box_flexone">宝宝昵称：</div>
                <div class="user_babyplan_form_row_field"><input type="text" placeholder="请输入昵称" name="nickname" id="nickname" maxlength="6"></div>
              </div>
            </div>
            <a href="javascript:;" class="user_babyplan_btn user_babyplan_submit"><span class="user_babyplan_btn_wrap"><i>现在加入，有机会抽取超值优惠券哦</i></span></a>
        </form>
      </div>
      <div class="user_babyplan_welcome" style="display: none">
        <div class="user_babyplan_welcome_baby ly_box ly_box_justifycenter">
          <div class="user_babyplan_welcome_baby_avatar"></div>
          <div class="user_babyplan_welcome_baby_info ly_box ly_box_column ly_box_justifycenter">
            <div class="user_babyplan_welcome_baby_name">小葡萄</div>
            <div class="user_babyplan_welcome_baby_meta"><span class="user_babyplan_welcome_baby_sex">公主</span> | <span class="user_babyplan_welcome_baby_age">2岁</span></div>
          </div>
        </div>
        <div class="user_babyplan_welcome_text">您已加入陪伴计划<br>海量优惠好礼等你来抢</div>
        
        <a href="https://h5.m.jd.com/dev/3786r4YdgZxtkrMBpcD9c2ho1kpe/index.html#/privilege" class="user_babyplan_btn user_babyplan_go"><span class="user_babyplan_btn_wrap"><i>立即前往陪伴计划</i></span></a>
      </div>
    </div>
  </div>
</div>
<script>
;(function(global, factory) {
  'use strict';
  global.jdLoginHelper = factory(global);
}(typeof window !== 'undefined' ? window : this, function(window) {
  'use strict';
  var jdLoginHelper = {},
    ua = navigator.userAgent.toLowerCase(),
    versioner = {
      isJdApp: ua.indexOf('jdapp') != -1
    };
  function getUrlParam(url, name) {
    var regex = /^((\w+):\/\/)?((\w+):?(\w+)?@)?([^\/\?:]+):?(\d+)?(\/?[^\?#]+)?\??([^#]+)?#?(\w*)/;
    var urlInfo = regex.exec(url);
    var param = urlInfo[9];
    if (param && param != "") {
      var paramInfo = param.split("&");
      for (var i = 0; i < paramInfo.length; i++) {
        var obj = paramInfo[i];
        var objInfo = obj.split("=");
        if (objInfo[0] == name) {
          return decodeURIComponent(objInfo[1]);
        }
      }
    }
    return false;
  }
  /**
   * 获得 sid
   * @returns {*}
   */
  jdLoginHelper.getSid = function() {
    return getUrlParam(location.href, 'sid');
  }
  /**
   * 跳到登陆页面
   * @param rurl 登陆成功后返回的url，无需 encode；如果不传此参数，默认登陆成功后返回的url为 location.href；
   */
  jdLoginHelper.goLogin = function(rurl) {
    var _url = "";
    if (rurl) {
      _url = encodeURIComponent(rurl);
    } else {
      _url = encodeURIComponent(location.href);
    }
    window.location.href = "https://passport.m.jd.com/user/login.action?v=1&returnurl=" + _url;
  }
  return jdLoginHelper;
}));

;! function() {
  // 获取礼包信息
  var gift = {};
  $.ajax({
    url:'https://mup.jd.com/tmp01_gifts/allGifts?businessType=0',
    dataType:'jsonp',
    success:function(rst){
      if(rst.success && rst.data){
        if(rst.data.availablePersonalGiftPackages[0]){
          gift.owner = rst.data.availablePersonalGiftPackages[0].owner;
          gift.giftPackageCode = rst.data.availablePersonalGiftPackages[0].giftCode;
          gift.name = rst.data.availablePersonalGiftPackages[0].personalGiftName;
        }
      }
    }
  });
  // 实名认证
  var checkVerify = function (res) {
    if(res.isRealName === false){
      var urlStr = 'https://msc.jd.com/auth/loginpage/wcoo/toAuthPage?source=4&businessType=88&directReturnUrl=' + decodeURIComponent(res.requestURI);
      return false;
    }else{
      return true;
    }
  }

$('.user_babyplan').parents('.j-custom-2').css('height', 'auto');
  var domForm = document.querySelector('.user_babyplan_form');
  var domWelcome = document.querySelector('.user_babyplan_welcome');
  var domBornDate = document.getElementById('borndate');
  var domBornDateSelector = document.querySelector('.user_date_real input');
  var domNickName = document.getElementById('nickname');
  var domFormSubmit = document.querySelector('.user_babyplan_submit');
  var sid = jdLoginHelper.getSid();
  // 强制登录
  // if(!sid) {
  //   goLogin();
  // }
  // 获取Cookie
  function getCookie(c_name) {
    if (document.cookie.length > 0) {
      c_start = document.cookie.indexOf(c_name + "=")
      if (c_start != -1) {
        c_start = c_start + c_name.length + 1
        c_end = document.cookie.indexOf(";", c_start)
        if (c_end == -1) c_end = document.cookie.length
        return unescape(document.cookie.substring(c_start, c_end))
      }
    }
    return ""
  }
  // 写Cookie
  function setCookie(c_name, value, expiredays) {
    var exdate = new Date()
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
  }
  // 从Cookie还原现场
  var babyNickname = getCookie('baby_nickname');
  var babyBirthdayStr = getCookie('baby_birthdayStr');
  var babySex = getCookie('baby_sex');
  if (babyNickname && babyBirthdayStr && babySex) {
    domBornDate.value = babyBirthdayStr;
    domBornDateSelector.value = babyBirthdayStr;
    domNickName.value = babyNickname;
    babySex = parseInt(babySex);
    var cindex;
    if (babySex === 0) {
      cindex = 2;
    } else {
      cindex = babySex - 1;
    }
    Zepto('input[name="sexual"]').eq(cindex).attr("checked", true);
  }
  // 去登录
  function goLogin(nickname, birthdayStr, sex) {
    if (nickname) {
      setCookie('baby_nickname', nickname, 1);
    }
    if (birthdayStr) {
      setCookie('baby_birthdayStr', birthdayStr, 1);
    }
    if(typeof sex === 'number') {
      setCookie('baby_sex', sex, 1);
    }
    if (!!location.pathname.match(/^\/wq\//)) {
      location.href = '//wq.jd.com/pinbind/pintokenredirect?biz=growthplan&url=' + encodeURIComponent(location.href);
    } else {
      location.href = '//passport.m.jd.com/user/login.action' + "?v=t&returnurl=" + encodeURIComponent(location.href);
    }
  }
  // 根据出生日期获得大概年龄
  function getAge (birthday) {
    if(birthday > Date.now()) {
      return 0;
    } else {
      return (new Date(Date.now() - birthday).getFullYear() - 1970);
    }
  }

function toast(text) {
    var newdom = document.createElement('div');
    newdom.classList.add('user_toast');
    newdom.innerHTML = '<div class="user_toast_cont">' + text + '</div></div>';
    newdom.addEventListener('click', function() {
      document.body.removeChild(newdom);
    }, false);
    document.body.appendChild(newdom);
  }