pfhwyigou/wechat/views/public/customization.php

<!-- <link rel="stylesheet" href="/js/signup/m_xqdz.css"> -->
<style>

.max_box{max-width:640px;margin:auto;min-width:320px;position: relative;}
.max_box img{display:block;}

.demand_box{width:100%;position:fixed;top:0;background:#F7F7F7;}
.demand_box_gb{position:absolute;top:0;right:0;width:40px;height:40px;display: block;}
.demand{width:90%;height:100%;margin:auto;position:relative;overflow:hidden;}
.demand_title{font-size:1.5rem;color:#333;text-align:center;margin-top:15%}

/*价格*/
.Price{margin-top:15%;}
.Pricexyb{width:60%;height:40px;font-size:1rem;color:#FFF;background:#FC5C2B;border-radius:40px;position:absolute;bottom:12%;left:50%;margin-left:-30%;text-align:center;line-height:40px;}


/*户型*/
#Huxing_list{border:1px solid #FC5C2B;color:#FC5C2B;}
.Huxing{margin-top:15%;}
.Huxing .Huxing_list{border:1px solid #eae7e7;float:left;border-radius:20px;width:44%;height:40px;text-align:center;line-height:40px;margin-right:12%;margin-bottom:8%;background:#FFF;font-size:1rem;color:#3A3A3A;position:relative;}
.Huxing .Huxing_list:nth-child(2n){margin-right:0;}
.Huxing_list img{width:17px;height:17px;position:absolute;top:-8px;right:0;}
.Huxing_list_i{width:17px;height:17px;position:absolute;top:-8px;right:0;background:url(/image/xqdz1.png) no-repeat 0 0/ 100% 100%;}
.NextStep{width:60%;height:40px;font-size:1rem;color:#FFF;background:#C5C5C5;border-radius:40px;position:absolute;bottom:12%;left:50%;margin-left:-30%;text-align:center;line-height:40px;}

#NextStepcolor{background:#FC5C2B;}

/*区域*/
.Determine{width:60%;height:40px;font-size:1rem;color:#FFF;background:#C5C5C5;border-radius:40px;position:absolute;bottom:12%;left:50%;margin-left:-30%;text-align:center;line-height:40px;}
#Detecolor{background:#FC5C2B;}
.region_box{width:100%;height:62%;margin-top:10%;position:relative;overflow:hidden;}
.region{width:40%;height:100%;position:absolute;top:0;left:50%;margin-left:-20%;max-height:100%;overflow:auto;transition: all .4s;}   /*13%*/
.region li{transition: all .4s;height:60px;text-align:center;line-height:60px;font-size:1.1rem;color:#333;position:relative;}
.region li i{width:7px;height:7px;border-radius:20px;background:none;position:absolute;top:41%;left:26%;float:left;display:block;}
#regionlii{background:#FC5C2B;}
#region{height:38px;line-height:38px;transition: all .4s;}
.regionli{background:#FFF;}
#m_regionYd{left:13%;transition: all .4s;}


#opacity{opacity:0.1}

.region_City{width:67%;height:100%;position:absolute;top:0;right:0;background:#FFF;max-height:100%;overflow:auto;display: none;}
.region_City li{height:45px;line-height:45px;font-size:1rem;color:#333;}
.region_City li span{margin-left:30px;float:left;}
.region_City li img{float:right;width:17px;height:17px;margin:13px 9px 0 0;}
.i_bright{float:right;width:17px;height:17px;margin:13px 9px 0 0;background:url(/image/xqdz1.png) no-repeat 0 0/ 100% 100%;}
.i_dark{float:right;width:17px;height:17px;margin:13px 9px 0 0;background:url(/image/xqdz2.png) no-repeat 0 0/ 100% 100%;}
.remind{position:absolute;top:50%;left:50%;margin-top:-17.5px;margin-left:-55px;background:rgba(31, 30, 30, 0.83);border-radius:5px;width:110px;height:35px;text-align:center;line-height:35px;font-size:0.95rem;color:#FFF;display:none;}
.HxRemind{position:absolute;top:50%;left:50%;margin-top:-17.5px;margin-left:-85px;background:rgba(31, 30, 30, 0.83);border-radius:5px;width:170px;height:35px;text-align:center;line-height:35px;font-size:0.95rem;color:#FFF;display:none;}
#disabled{pointer-events: none;}

@media screen and (min-width: 300px) and (max-width: 374px) {
  .Determine{height:35px;bottom:12%;}
  .region_box{height:60%;}
  /*.demand_title{margin-top:70px;}*/
  .region li i{left:24%;}
}



/*刻度尺*/
  .box {height:50px;position:relative;width:100%;margin:0 auto;}
  .wrap{min-width: 320px;max-width:768px;margin:0 auto;overflow:hidden;position:relative;}
  .wrapper {position:relative;height:49px;line-height:50px;width:100%;overflow: hidden;margin:0 auto;border:1px solid #ccc;border-radius:25px;
            
            background:-webkit-gradient(linear ,-25% 10%, 111% 100%,
                                  color-stop(0.14,rgb(227, 227, 227)),
                                  color-stop(0.5,rgb(255, 255, 255)),
                                  color-stop(1,rgb(229, 229, 229)) );
  }
  .wrapper .scroller {position:absolute;padding:0 48% 0 50%;}
  .wrapper .scroller li {float: left;width:50px;height:13px;line-height:13px;/*text-align: center;*/font-style: none;margin: 0 20px; padding:25px 0 10px;position:relative;top:5px;}
/*  .wrapper .scroller li:first-child {width:230px;}
  .wrapper .scroller li:last-child {width:210px;}*/
  .wrapper .scroller li span{display:block;border-left:1px solid #ccc;width:100%;height:13px;}
  .wrapper .scroller li span i {display:inline-block;font-size:12px;color:#9b9b9b;font-style:normal;position:absolute;top:7px;left:-10px;}
  .pillar {display:inline-block;width:6px;height:60px;border-radius:10px;background:rgba(252, 92, 44, 0.85);position:absolute;z-index:2;left:50%;top:-5px;margin-left:-3px;}
  .Price h3{text-align: center;line-height:100px;font-size:1.6rem;color:#FF470F;}


/*报名*/
.xm_bm_box{width:100%;height:100%;position:fixed;top:0;left:0;z-index:100;display:none;}
.xm_bm{width:80%;position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-40%;background:#FFF;z-index:200;border-radius:5px;padding-bottom:25px;}
.xm_bm em{font-size:1.2rem;color:#DF4312;margin-top:20px;text-align:center;display: block;font-weight:600;letter-spacing:1px;}
.xm_bm_box form{width:90%;margin:auto;margin-top:20px;}
.xm_bm_box form .m_input{border:1px solid #F9DED5;width:100%;height:40px;padding:0 15px;border-radius:5px;}
.xm_bm_box form .m_button{width:100%;height:40px;background:#FF6E42;border:0;margin-top:20px;border-radius:30px;font-size:1rem;color:#FFF;letter-spacing:1px;}
.xm_bm_gb{display: block;width:30px;height:30px;position: absolute;top:-37px;right:-4px;}

.xm_bm_zhez{width:100%;height:100%;background:rgba(33, 33, 33, 0.5);position: absolute;top:0;left:0;}

.m_form{
animation:change 0.8s;
-webkit-animation:change 0.8s;
-moz-animation:change 0.8s; 
}

@keyframes change {
  0% {left:100%;opacity:0;}
  100% {opacity:1;}
}

-webkit-@keyframes change {
  0% {left:100%;opacity:0;}
  100% {opacity:1;}
}

-moz-@keyframes change {
  0% {left:100%;opacity:0;}
  100% {opacity:1;}
}


@media screen and (max-height: 568px){
  .demand_title{margin-top:10%;}
  .region_City li{height:38px;line-height:38px;}
  .region li{font-size:1rem;}
  .Huxing .Huxing_list{margin-bottom:5%;}

}
</style>

<script type="text/javascript" src="/js/signup/iscroll.js"></script>
<script type="text/javascript" src="/js/signup/navbarscroll.js"></script>

<!-- 需求定制 -->
 <div class="demand_box"> 
       <img src="/image/demand_gb.png" alt="" class="demand_box_gb">
        <!-- 价格 -->
      <div class="demand" Nextstep="1">
          <div class="demand_title">您理想的房子价格？</div>
          <div class="Price">

      <h3 id="numberID">540</h3>
      <div class="box">
        <span class="pillar"></span>
        <div class="wrapper" id="wrapper1">
        <div class="scroller">
          <ul class="clearfix">
              <?php  foreach ($price as $val){  ?>
                  <li><span><i><?= $val; ?></i></span></li>
              <?php }  ?>
<!--            <li><span><i>不限</i></span></li>-->
<!--            <li><span><i>100</i></span></li>-->
<!--            <li><span><i>200</i></span></li>-->
<!--            <li><span><i>300</i></span></li>-->
<!--            <li><span><i>400</i></span></li>-->
<!--            <li><span><i>500</i></span></li>-->
<!--            <li><span><i>600</i></span></li>-->
<!--            <li><span><i>700</i></span></li>-->
<!--            <li><span><i>800</i></span></li>-->
<!--            <li><span><i>900</i></span></li>-->
<!--            <li><span><i>1000</i></span></li>-->
          </ul>
        </div>
        </div>
      </div>

          </div>

          <div class="Pricexyb"  Nextstep="2">下一步</div>
          <div class="HxRemind">户型最多只能选择3项</div>
      </div><!-- 价格 -->



        <!-- 户型 -->
      <div class="demand" Nextstep="2" style="display:none;">
          <div class="demand_title">您想要买什么户型？</div>
          <div class="Huxing">
              <?php  foreach ($type as $val){  ?>
                  <div class="Huxing_list"><span HuXing="<?= $val['id'] ?>"><?=  $val['huxing_name'] ?></span><i></i></div>
              <?php }   ?>
<!--               <div class="Huxing_list"><span HuXing="1">一室</span><i></i></div>-->
<!--               <div class="Huxing_list"><span HuXing="2">二室</span><i></i></div>-->
<!--               <div class="Huxing_list"><span HuXing="3">三室</span><i></i></div>-->
<!--               <div class="Huxing_list"><span HuXing="4">四室</span><i></i></div>-->
<!--               <div class="Huxing_list"><span HuXing="5">五室及以上</span><i></i></div>-->
               <div class="Huxing_list"><span HuXing="0">不限</span><i></i></div>
          </div>

          <div class="NextStep"  Nextstep="3">下一步</div>
          <div class="HxRemind">户型最多只能选择3项</div>
      </div><!-- 户型 -->

                      <!-- 区域 -->
      <div class="demand" style="display:none;" Nextstep="3">
          <div class="demand_title">您想在哪里买房？</div>

          <div class="region_box">
                <ul class="region">
                    <?php  foreach ($province as $val){  ?>
                        <li regionId="<?=  $val['id']  ?>"><i></i><?= $val['city_name'] ?></li>
                    <?php  } ?>

<!--                  <li regionId="2"><i></i>广西</li> -->
<!--                  <li regionId="3"><i></i>广东</li> -->
<!--                  <li regionId="4"><i></i>云南</li> -->
<!--                  <li regionId="5"><i></i>东南亚</li> -->
                </ul>
                    <div class="region_City_box">
                  <ul class="region_City">
                  <!--   <li><span>不限</span><i class="i_dark"></i></li>  i_bright
                     <li><span>海南</span><i class="i_dark"></i></li>
                     <li><span>海南</span><i class="i_dark"></i></li>
                     <li><span>海南</span><i class="i_dark"></i></li>
                     <li><span>海南</span><i class="i_dark"></i></li>
                     <li><span>海南</span><i class="i_dark"></i></li>
                     <li><span>海南</span><i class="i_dark"></i></li>
                     <li><span>海南</span><i class="i_dark"></i></li>
                     <li><span>海南</span><i class="i_dark"></i></li>
                     <li><span>海南</span><i class="i_dark"></i></li>
                     <li><span>海南</span><i class="i_dark"></i></li> -->
                  </ul>
                </div>  
          </div>


          <div class="Determine">确定</div>

          <div class="remind">最多只能选择5项</div>
          
      </div><!-- 区域 -->



      <div class="xm_bm_box">

            <div class="xm_bm_zhez"></div>
            <div class="xm_bm m_form">
                 <em>免费定制您的需求</em>
                 <form action="" class="submit_area">
                    <input type="hidden" name="hid" value="0">              <!-- 0 为公共报名，其它为楼盘ID-->
                    <input type="hidden" name="source" value="3">     <!--报名来源 具体查看applyVerify.js文件中SourceModule 标识说明-->
                    <input type="hidden" name="equipment" value="1">        <!--来源设备 （ PC端  2,手机端   1 ）-->

                    <input type="hidden" class="m_intention_city" name="intention_city" value="">         <!-- 区域 -->     
                    <input type="hidden" class="m_intention_housetype" name="intention_housetype" value="">    <!--  户型 -->
                    <input type="hidden" class="m_budget" name="budget" value="">                 <!-- 价格 -->

                    <input type="text" placeholder="请输入您的手机号" class="m_input" name="mobile">
                    <input type="button" class="m_button apply_submit" value="马上定制">
                 </form>

                 <img src="/image/m_bm4.png" alt="" class="xm_bm_gb">
            </div>
        </div>
 </div>


<script>
 $(function(){
    // 修改页面适应样式

    // 修改弹窗信息
    $('.m_form em').html(w_title);
    $('.m_form form input[name="hid"]').val(w_id);
    $('.m_form form input[name="source"]').val(w_module);

    // 提交筛选信息
    $('.m_form form input[name="intention_city"]').val(intention_city);  // 区域 
    $('.m_form form input[name="intention_housetype"]').val(intention_housetype);  //户型 
    $('.m_form form input[name="budget"]').val(budget);       // 价格 
    
    //报名验证及提交的调用
    PublicAction.AjaxSend(
        {
            CORID:'apply_submit',                    /*操作ID*/
        }
    );

       
  })


  
   var Iheight = $(window).outerHeight(); 
     $('.demand_box').height(Iheight + 60);



 var intention_city = ""  // 区域
 var intention_housetype = ""   //户型
 var budget = ''; // 价格


 //区域数据
 function region (){
       var html = '';
            $.ajax({
              url: "/index/cityson",
              data:{pid:YqData},
              type: "POST",
              dataType: "json",
              success: function(data) {
               console.log(data);
                  if(data.code == 200){
                      $.each(data.data, function (i, data) {
                    
              html+=  '<li CityId="'+data.id+'" CityName="'+data.city_name+'"><span>'+data.city_name+'</span><i class="i_dark"></i></li>';
                        
                      });

                      $(".region_City").html(html);
                  }
              }
          });
    }

 var YqData = "";
   // 区域数据
$('.region li').on('click',function(){
    YqData = $(this).attr('regionId');
    region ();
    $('.region_City').show();
    $('.region').attr('id','m_regionYd');
    $('.region li').attr('id','region');
    $(this).attr('class','regionli').siblings().attr('class','');
    $('.Determine').attr('id','disabled');
})



// 区域选中功能
$('.Determine').attr('id','disabled');
$('.region_City').on('click',' li',function(){
    
    $(this).find('i').attr('class','i_bright').parent().siblings().find('i').attr('class','i_dark');
    // 选中才能点击确认
    var existence = $('.region_City li .i_bright').length; 
    if (existence == 1) {
       $('.Determine').attr('id','Detecolor');
    }else{
         $('.Determine').attr('id','disabled');
    }

    intention_city = $(this).attr('CityName')
})




// 户型选中功能
$('.NextStep').attr('id','disabled');
$('.Huxing .Huxing_list').on('click',function(){

      var IdHx = $(this).find('span').html();
      var Hudata = $(this).attr('id');
     
       //点击选中  在点击关闭
    if(Hudata == "Huxing_list"){  
           $(this).attr('id','').find('i').attr('class','')
    }else{
         $(this).attr('id','Huxing_list').find('i').attr('class','Huxing_list_i')
    }


    // 限制只能选中3个
    var Hxid = $('.Huxing #Huxing_list').length;
          if(Hxid >3){  
          $(this).attr('id','').find('i').attr('class','');
          $('.HxRemind').fadeIn(500);
          setTimeout(function(){
              $('.HxRemind').fadeOut(500);
          },1500);
          return;
      }

       // 点击不限 其他关闭。
    if (IdHx !== '不限') {
      $(this).parent().find('.Huxing_list').last().attr('id','').find('i').attr('class','');
    }else{
      $(this).siblings().attr('id','').find('i').attr('class','');
    };
    
    // 选中才能点击确认
    var HxIdData = $('.Huxing #Huxing_list').length;
    if (HxIdData >= 1) {
       $('.NextStep').attr('id','NextStepcolor');

    }else{
       $('.NextStep').attr('id','disabled');
    }
})


// 获取户型
var arr = new Array();

$('.NextStep').on('click',function(){  
     $('.demand').hide();
     var NextstepID = $(this).attr('Nextstep')
     $('.demand[Nextstep='+ NextstepID +']').show();
   $('.Huxing #Huxing_list').each(function(){   

     var HxdataId = $(this).find('span').html();  
        arr.push(HxdataId);  
     })

        intention_housetype =  arr.join(",");
        console.log(intention_housetype);
})



// 获取价格
$('.Pricexyb').on('click',function(){ 
     $('.demand').hide();
     var NextstepID = $(this).attr('Nextstep')
     $('.demand[Nextstep='+ NextstepID +']').show();

     budget = $('.Price h3').html();
     console.log(budget);
   
})


                    // <input type="hidden" class="m_intention_city" name="intention_city" value="">         <!-- 区域 -->     
                    // <input type="hidden" class="m_intention_housetype" name="intention_housetype" value="">    <!--  户型 -->
                    // <input type="hidden" class="m_budget" name="budget" value="">                 <!-- 价格 -->

// 最后确认
$('.demand').on('click','.Determine',function(){

   console.log(intention_city);
   $('.m_form .m_intention_city').attr('value',intention_city);   <!-- 区域 -->  
   console.log(intention_housetype);
   $('.m_form .m_intention_housetype').attr('value',intention_housetype); <!--  户型 -->
   console.log(budget);
   $('.m_form .m_budget').attr('value',budget); <!-- 价格 -->

   $('.xm_bm_box').fadeIn(800);
   $('.demand').attr('id','opacity');


})


$('.xm_bm_zhez').on('click',function(){
  $('.xm_bm_box').fadeOut(100);
  $('.demand').attr('id','');
   
})

$('.xm_bm_gb').on('click',function(){
  $('.xm_bm_box').fadeOut(100);
  $('.demand').attr('id','');
   
})

$('.demand_box_gb').on('click',function(){
  RemoveDiv();
})


  
  // 刻度尺

$(function(){
  //demo示例一到四 通过lass调取，一句可以搞定，用于页面中可能有多个导航的情况
  // $('.wrapper').navbarscroll();

  //demo示例五 通过id调取
  // $('.wrapper').navbarscroll({
  //  defaultSelect:6,
  //  endClickScroll:function(obj){
  //    console.log(obj.text())
  //  }
  // });
  
  //demo示例六 通过id调取
  $('.wrapper').navbarscroll({
    duibiScreenWidth:0.1, //单位以rem为准，默认为0.4rem
        scrollerWidth:1, //单位以px为准，默认为3,[仅用于特殊情况：外层宽度因为小数点造成的不精准情况]
        fingerClick:0, //目标第0或1个选项触发,必须每一项长度一致，方可用此项
    endClickScroll:function(obj){
      // console.log(obj.text())
    }
  });
});

</script>