haoshengxin/frontend/views/myhouse/add.php

<?php
use yii\helpers\Html;
use yii\helpers\Url;
?>
<?= Html::cssFile('@web/css/weui.min.css'); ?>
<?= Html::cssFile('@web/css/jquery-weui.min.css'); ?>
<?= Html::cssFile('@web/css/base.css'); ?>
<?= Html::cssFile('@web/iconfont/iconfont.css'); ?>
<?= Html::jsFile('@web/js/jquery.min.js'); ?>
<?= Html::jsFile('@web/js/jquery-weui.min.js'); ?>
<?= Html::jsFile('@web/js/city-picker.js'); ?>
<div class="add-box">
    <ul>

        <li  onclick="open_div('#name');" data-target="#name">
            <div class="left">
                小区名称
            </div>
            <div class="right" >
                <a href="javascript:void(0);"  id="J_compound"></a>
            </div>
            <i class="iconfont icon-gengduo"></i>
        </li>

        <li onclick="open_div('#address');" data-target="#address">
            <div class="left">
                小区地址
            </div>
            <div class="right">
                <a href="javascript:void(0);"  id="J_address"></a>
            </div>
            <i class="iconfont icon-gengduo"></i>
        </li>

        <li onclick="open_div('#type');" data-target="#type">
            <div class="left">
                住宅户型
            </div>
            <div class="right">
                <a href="javascript:void(0);"  id="J_layout"></a>
            </div>
            <i class="iconfont icon-gengduo"></i>
        </li>

        <li onclick="open_div('#area');" data-target="#area">
            <div class="left">
                住宅面积
            </div>
            <div class="right">
                <a href="javascript:void(0);"  id="J_acreage"></a>
            </div>
            <i class="iconfont icon-gengduo"></i>
        </li>

        <li onclick="open_div('#budget');" data-target="#budget">
            <div class="left">
                装修预算
            </div>
            <div class="right">
                <a href="javascript:void(0);"  id="J_amount"></a>
            </div>
            <i class="iconfont icon-gengduo"></i>
        </li>

        <li  onclick="open_div('#styles');" data-target="#style">
            <div class="left">
                装修风格
            </div>
            <div class="right">
                <a href="javascript:void(0);"  id="J_styles"></a>
            </div>
            <i class="iconfont icon-gengduo"></i>
        </li>

    </ul>
    <a href="javascript:void(0);" id="form_submit" class="weui-btn weui-btn_plain-default submit-btn">完成</a>

    <!--名称 弹出层-->
    <div id="name" class="weui-popup__container">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <input type="email" placeholder="请输入小区名称" class="text" id="input_compound">
            <a id="form_name" href="javascript:void(0);" class="weui-btn weui-btn_plain-default submit-btn">提交</a>
        </div>
    </div>
    <script type="text/javascript">
        function open_div(obj)
        {
            $(obj).show();
            $(obj).addClass('weui-popup__container--visible');
        }
        $('#form_name').on('click',function () {
           var input_compound =  $.trim($('#input_compound').val());
           if(input_compound=='')
           {
               alert('请输入小区名称');
               return false;
           }
           $('#compound').val(input_compound);
           $('#J_compound').html(input_compound);
           $('#name').hide();
        });
    </script>
    <!--地址 弹出层-->
    <div id="address" class="weui-popup__container">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="name" class="weui-label">请选择</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" id='city-picker' type="text"  >
                    <i class="iconfont icon-gengduo"></i>
                </div>
            </div>
            <input type="text"  class="text"  placeholder="请输入详细地址" id="input_address" />
            <a id="form_address" href="javascript:void(0);" class="weui-btn weui-btn_plain-default submit-btn">提交</a>
        </div>
    </div>

    <script type="text/javascript">
        $('#form_address').on('click',function () {
            var city_picker =  $.trim($('#city-picker').val());
            var input_address =  $.trim($('#input_address').val());
            if(city_picker=='')
            {
                alert('请选择城市');return false;
            }
            if(input_address=='')
            {
                alert('请输入地址');return false;
            }
            var split = city_picker.split(" ");
            $('#province').val(split[0]);
            $('#city').val(split[1]);
            $('#district').val(split[2]);
            $('#address2').val(input_address);
            $('#J_address').html(city_picker+input_address);
            $('#address').hide();
        });
    </script>

    <!--户型 弹出层-->
    <div id="type" class="weui-popup__container">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="radio-title">户型</div>
            <div class="weui-cells weui-cells_radio">
                <input type="text"  class="text"  placeholder="请输入户型" id="input_type" />
            </div>
            <a id="form_type" href="javascript:void(0);" class="weui-btn weui-btn_plain-default submit-btn">提交</a>
        </div>
    </div>
    <script type="text/javascript">
        $('#form_type').on('click',function () {
            var input_type =  $.trim($('#input_type').val());
            if(input_type=='')
            {
                alert('请输入户型');return false;
            }
            $('#J_layout').html(input_type);
            $('#layout').val(input_type);
            $('#type').hide();
        });
    </script>


    <!--面积 弹出层-->
    <div id="area" class="weui-popup__container">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="pos-div">
                <input type="email" placeholder="请输入房屋面积" id="input_area" class="text right">
                <span>㎡</span>
            </div>
            <a id="form_area" href="javascript:void(0);" class="weui-btn weui-btn_plain-default submit-btn">提交</a>
        </div>
    </div>

    <script type="text/javascript">
        $('#form_area').on('click',function () {
            var input_area =  $.trim($('#input_area').val());
            if(input_area=='')
            {
                alert('请输入房屋面积');return false;
            }
            $('#J_acreage').html(input_area+"㎡");
            $('#acreage').val(input_area);
            $('#area').hide();
        });
    </script>


    <!--预算 弹出层-->
    <div id="budget" class="weui-popup__container">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="pos-div">
                <input type="email" id="input_budget" placeholder="请输入预算金额" class="text right">
                <span>万元</span>
            </div>
            <a id="form_budget" href="javascript:void(0);" class="weui-btn weui-btn_plain-default submit-btn">提交</a>
        </div>
    </div>

    <script type="text/javascript">
        $('#form_budget').on('click',function () {
            var input_budget =  $.trim($('#input_budget').val());
            if(input_budget=='')
            {
                alert('请输入预算金额');return false;
            }
            $('#J_amount').html(input_budget+"万元");
            $('#amount').val(input_budget);
            $('#budget').hide();
        });
    </script>

    <!--风格 弹出层-->
    <div id="styles" class="weui-popup__container">
        <div class="weui-popup__overlay"></div>
        <div class="weui-popup__modal">
            <div class="radio-title">风格</div>
            <div class="weui-cells weui-cells_radio">
                <label class="weui-cell weui-check__label" for="x21">
                    <div class="weui-cell__bd">
                        <p>欧式</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" value="欧式" class="weui-check" name="radio1" id="x21">
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" for="x22">
                    <div class="weui-cell__bd">
                        <p>美式</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" value="美式" name="radio1" class="weui-check" id="x22" checked="checked">
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" for="x23">
                    <div class="weui-cell__bd">
                        <p>中国风</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" value="中国风" name="radio1" class="weui-check" id="x23" checked="checked">
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" for="x24">
                    <div class="weui-cell__bd">
                        <p>现代</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" value="现代" name="radio1" class="weui-check" id="x24" checked="checked">
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
                <label class="weui-cell weui-check__label" for="x25">
                    <div class="weui-cell__bd">
                        <p>田园</p>
                    </div>
                    <div class="weui-cell__ft">
                        <input type="radio" value="田园" name="radio1" class="weui-check" id="x25" checked="checked">
                        <span class="weui-icon-checked"></span>
                    </div>
                </label>
            </div>
            <a id="form_style" href="javascript:void(0);" class="weui-btn weui-btn_plain-default submit-btn">提交</a>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('#form_style').on('click',function () {
        var input_style = $('input[name="radio1"]:checked').val();
        $('#J_styles').html(input_style);
        $('#style').val(input_style);
        $('#styles').hide();
    });
</script>


<form id="formInfo" method="post">
<input type="hidden" id="compound" name="compound" /><!--小区名称-->
<input type="hidden" id="layout" name="layout"  /><!--户型-->
<input type="hidden" id="acreage" name="acreage"  /><!--面积-->
<input type="hidden" id="amount"  name="amount"  /><!--预算-->
<input type="hidden" id="province" name="province"  /><!--省份-->
<input type="hidden" id="city" name="city"  /><!--城市-->
<input type="hidden" id="district" name="district"  /><!--地区-->
<input type="hidden" id="address2" name="address2"  /><!--详细地址-->
<input type="hidden" id="style" name="style"  /><!--装修风格-->
<input type="hidden" name="_csrf-frontend" value="<?=Yii::$app->request->csrfToken;?>" />
</form>
<script type="text/javascript">
    //地址选择器
    //$("#city-picker").val('福建省 厦门市 湖里区');
    $("#city-picker").click(function(){
       $('#input_address').blur();
    });
    $("#city-picker").cityPicker({
        title: "请选择地址"
    });
    $('#form_submit').on('click',function(){
        var compound = $('#compound').val();
        var layout = $('#layout').val();
        var acreage = $('#acreage').val();
        var amount = $('#amount').val();
        var province = $('#province').val();
        var city = $('#city').val();
        var district = $('#district').val();
        var address2 = $('#address2').val();
        var style = $('#style').val();
        if(compound=='')
        {
            alert('填写小区名称');
            return false;
        }
        if(province==''||city==''||district=='')
        {
            alert('请选择城市');
            return false;
        }
        if(address2=='')
        {
            alert('填写详细地址');
            return false;
        }
        if(layout=='')
        {
            alert('填写户型');
            return false;
        }
        if(acreage=='')
        {
            alert('填写面积');
            return false;
        }
        if(amount=='')
        {
            alert('填写装修预算');
            return false;
        }
        if(style=='')
        {
            alert('选择装修风格');
            return false;
        }

        $.ajax({
            url: '<?=Url::toRoute(['myhouse/add'])?>',
            type: 'POST',
            dataType:"json",
            data: $('#formInfo').serialize(),
            success: function (data) {
              if(data.sign==1)
              {
                  window.location='<?=Url::toRoute(['myhouse/list'])?>';
              }else{
                  alert(data.msg);
              }
            }
        });

    });
</script>