pfhwyigou/frontend/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(/overseas/img/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(/overseas/img/xqdz1.png) no-repeat 0 0/ 100% 100%;
    }

    .i_dark {
        float: right;
        width: 17px;
        height: 17px;
        margin: 13px 9px 0 0;
        background: url(/overseas/img/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="/overseas/js/signup/iscroll.js"></script>
<script type="text/javascript" src="/overseas/js/signup/navbarscroll.js"></script>

<!-- 需求定制 -->
<div class="demand_box">
    <?php

    use common\fm\Opencc;

    ?>
    <img src="/overseas/img/demand_gb.png" alt="" class="demand_box_gb">
    <!-- 价格 -->
    <div class="demand" Nextstep="1">
        <div class="demand_title"><?= Opencc::ConvertHn('您理想的房子价格？') ?></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">
                            <!--                            <li><span><i>-->
                            <? //= Opencc::ConvertHn('不限') ?><!--</i></span></li>-->
                            <?php foreach ($price as $val) { ?>
                                <li><span><i><?= \common\fm\Opencc::ConvertHn($val); ?></i></span></li>
                            <?php } ?>
                        </ul>
                    </div>
                </div>
            </div>

        </div>

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


    <!-- 户型 -->
    <div class="demand" Nextstep="2" style="display:none;">
        <div class="demand_title"><?= Opencc::ConvertHn('您想要买什么户型？') ?></div>
        <div class="Huxing">
            <?php foreach ($type as $val) { ?>
                <div class="Huxing_list"><span
                            HuXing="<?= $val['id'] ?>"><?= Opencc::ConvertHn($val['huxing_name']) ?></span><i></i></div>
            <?php } ?>
            <div class="Huxing_list"><span HuXing="0"><?= Opencc::ConvertHn('不限') ?></span><i></i></div>
        </div>

        <div class="NextStep" Nextstep="3"><?= Opencc::ConvertHn('下一步') ?></div>
        <div class="HxRemind"><?= Opencc::ConvertHn('户型最多只能选择3项') ?></div>
    </div><!-- 户型 -->

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

        <div class="region_box">
            <ul class="region">
                <?php foreach ($province as $val) { ?>
                    <li regionId="<?= $val['id'] ?>"><i></i><?= $val['city_name'] ?></li>
                <?php } ?>
            </ul>
            <div class="region_City_box">
                <ul class="region_City">
                    <!--                    <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>-->
                    <!--                    <li><span>海南</span><i class="i_dark"></i></li>-->
                </ul>
            </div>
        </div>


        <div class="Determine"><?= Opencc::ConvertHn('确定') ?></div>

        <div class="remind"><?= Opencc::ConvertHn('最多只能选择5项') ?></div>

    </div><!-- 区域 -->


    <div class="xm_bm_box">

        <div class="xm_bm_zhez"></div>
        <div class="xm_bm m_form">
            <em><?= Opencc::ConvertHn('免费定制您的需求') ?></em>
            <form action="" class="submit_area">
                <input type="hidden" name="hid" value="0">              <!-- 0 为公共报名，其它为楼盘ID-->
                <input type="hidden" name="source" value="9">     <!--报名来源 具体查看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="<?= Opencc::ConvertHn('请输入您的手机号') ?>" class="m_input" name="mobile">
                <input type="button" class="m_button apply_submit" value="<?= Opencc::ConvertHn('马上定制') ?>">
            </form>

            <img src="/overseas/img/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: "/json/soncity",
            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>