zc100/template/pc/common/include/step.htm

<!-- Javascript -->
<?php
/*
 * <script src="/template/pc/js/botstrap-step/jquery-1.11.1.min.js"></script>
 */
?>
<script src="/template/pc/js/botstrap-step/bootstrap.min.js"></script>
<script src="/template/pc/js/botstrap-step/jquery.backstretch.min.js"></script>
<script src="/template/pc/js/botstrap-step/retina-1.1.0.min.js"></script>
<script src="/template/pc/js/botstrap-step/scripts.js"></script>

<!--[if lt IE 10]>
<script src="/template/pc/js/botstrap-step/placeholder.js"></script>
<![endif]-->

<!--时间组件-->
<script type="text/javascript" src="/template/pc/js/botstrap-step/moment.min.js"></script>
<script type="text/javascript" src="/template/pc/js/botstrap-step/daterangepicker.js"></script>

<!--滚动组件-->
<script src="/template/pc/js/botstrap-step/autoScroll.js"></script>

<script>
    $(function() {
        $(".daterange input").each(function() {
            var $this = $(this);

            $this.daterangepicker({
                locale : {
                    //"format" : "YYYY-MM",// 显示格式 //YYYY-MM-DD
                    "separator" : " / ",// 两个日期之间的分割线
                    // 中文化
                    "applyLabel" : "确定",
                    "cancelLabel" : "取消",
                    "fromLabel" : "开始",
                    "toLabel" : "结束",
                    "daysOfWeek" : [ "日", "一", "二", "三", "四", "五", "六" ],
                    "monthNames" : [ "一月", "二月", "三月", "四月", "五月", "六", "七月", "八月", "九月", "十月", "十一月", "十二月" ],
                    "firstDay" : 1,
                    "defaultDate": new Date(),
                    "format": 'YYYY', // 设置年份格式
                },
                startDate: moment(),
                endDate: moment(),
                minView: "years", // 设置最小视图为年份
                maxView: "years", // 设置最大视图为年份
                showDropdowns: true,
                singleDatePicker: true,
                opens: 'right', //日期选择框的弹出位置
            }, function(start, end, label) {
                // 点击确定后的事件，下面是为了bootstrap validate得校验，
                // 若未使用，可忽视
                if ($this.parents("form.required-validate").length > 0) {
                    var $form = $this.parents("form.required-validate");

                    var name = $this.attr("name");
                    if ($form.length > 0) {
                        var data = $form.data('bootstrapValidator');
                        data.updateStatus(name, 'NOT_VALIDATED', null)
                            // Validate the field
                            .validateField(name);
                    }
                }
                // 设置最小宽度，否则显示不全
            }).css("min-width", "210px").next("i").click(function() {
                // 对日期的i标签增加click事件，使其在鼠标点击时可以拉出日期选择
                $(this).parent().find('input').click();
            });
        });
    });
</script>

<script>
    //获取手机验证码
    /*
    erDiagram
    User -->> Button: 点击
    Button -->> Frontend: 发送请求
    Frontend -->> Backend: 请求验证码
    Backend -->> User: 发送验证码
    User -->> Input: 输入验证码
    Input -->> Frontend: 提交验证码
    Frontend -->> Backend: 验证验证码
     */

    $(function(){
        /**
         * 点击按钮开始倒计时
         * @param obj 倒计时操作的文档对象
         * @param countdown 倒计时时间
         */
        function setTime(obj, countdown) {
            if (countdown == 0) {
                obj.prop('disabled',false);
                obj.addClass('get-code-hover');
                obj.html("获取验证码");
                return;
            } else {
                obj.prop('disabled', 'disabled');
                obj.removeClass('get-code-hover');
                obj.html("重新发送(" + countdown + ")");
                countdown--;
            }
            setTimeout(function() {
                setTime(obj, countdown);
            }, 1000)
        };

        // 使用正则表达式验证手机号码
        function isValidPhoneNumber(phoneNumber) {
            var regex = /^1[3-9]\d{9}$/; // 中国手机号码正则表达式，以1开头，第二位是3-9，后面跟着9位数字
            return regex.test(phoneNumber);
        }


        $(document).on('click','#retrieve-code',function (){


            //验证手机号码
            var phoneNumber = $('#per-phone').val();
            if (isValidPhoneNumber(phoneNumber)) {
                console.log("手机号码有效");
            } else {
                console.log("手机号码无效");
                $('#myModal .modal-body p').html('手机号码无效');
                $('#myModal').modal('show');
                return false;
            }

            // 显示加载状态
            $('#loadingModal .visually-hidden').html('发送中...');
            $('#loadingModal').modal('show');

            // 点击事件调用倒计时函数
            setTime($('#retrieve-code'),120);
            //return false;
            //请求ajax 发送短信
            // 发送 AJAX 请求
            $.ajax({
                url: '/api/Diyajax/getCode',
                data: {
                    'mobile' : phoneNumber,
                },
                method: 'GET',
                success: function(data) {
                    // 请求成功后隐藏加载状态
                    $('#loadingModal').modal('hide');
                    // 处理返回的数据
                    console.log('Ajax response:', data);

                    $('#loadingModal .visually-hidden').html(data.msg);
                    $('#loadingModal').modal('show');
                    setTimeout(function() {
                        $('#loadingModal').modal('hide');
                    }, 3000); // 5秒后取消定时器

                },
                error: function(xhr, status, error) {
                    // 请求失败后隐藏加载状态
                    $('#loadingModal').modal('hide');
                    // 处理错误
                    console.error('Ajax error:', status, error);
                }
            });
        });


        $(document).on('click','#cx-rel-code',function (){


            //验证手机号码
            var phoneNumber = $('#ffnp').val();
            if (isValidPhoneNumber(phoneNumber)) {
                console.log("手机号码有效");
            } else {
                console.log("手机号码无效");
                $('#myModal .modal-body p').html('手机号码无效');
                $('#myModal').modal('show');
                return false;
            }

            // 显示加载状态
            $('#loadingModal .visually-hidden').html('发送中...');
            $('#loadingModal').modal('show');

            // 点击事件调用倒计时函数
            setTime($('#cx-rel-code'),120);
            //return false;
            //请求ajax 发送短信
            // 发送 AJAX 请求
            $.ajax({
                url: '/api/Diyajax/getCode',
                data: {
                    'mobile' : phoneNumber,
                },
                method: 'GET',
                success: function(data) {
                    // 请求成功后隐藏加载状态
                    $('#loadingModal').modal('hide');
                    // 处理返回的数据
                    console.log('Ajax response:', data);

                    $('#loadingModal .visually-hidden').html(data.msg);
                    $('#loadingModal').modal('show');
                    setTimeout(function() {
                        $('#loadingModal').modal('hide');
                    }, 3000); // 5秒后取消定时器

                },
                error: function(xhr, status, error) {
                    // 请求失败后隐藏加载状态
                    $('#loadingModal').modal('hide');
                    // 处理错误
                    console.error('Ajax error:', status, error);
                }
            });
        });

        //选择地区
        $("#choose1").change(function (){

            var id = $(this).val();
            if(id > 0) {
                //发送请求
                $('#loadingModal').modal('show');
                $.ajax({
                    url: '/api/Diyajax/getZcList',
                    method: 'POST',
                    dataType: 'json', // 指定响应数据为JSON
                    data: {
                        id : id
                    },
                    success: function(data) {
                        // 请求成功后隐藏加载状态
                        $('#loadingModal').modal('hide');
                        // 处理返回的数据
                        console.log('Ajax response:', data);
                        console.log(data.data);
                        var html = '<option value="0">选择申报专业</option>';
                        $.each(data.data,function (i,e){
                            console.log(e);
                            html += '<option value="'+e.id+'">'+e.title+'</option>';
                        });
                        $('#choose2').empty();
                        $('#choose2').append(html);
                    },
                    error: function(xhr, status, error) {
                        // 请求失败后隐藏加载状态
                        $('#loadingModal').modal('hide');
                        // 处理错误
                        console.error('Ajax error:', status, error);
                    }
                });
            }

        });

        //选择专业 触发等级
        $("#choose2").change(function (){

            var id = $(this).val();
            if(id > 0) {
                //发送请求
                $('#loadingModal').modal('show');
                $.ajax({
                    url: '/api/Diyajax/getZcDjList',
                    method: 'POST',
                    dataType: 'json', // 指定响应数据为JSON
                    data: {
                        id : id
                    },
                    success: function(data) {
                        // 请求成功后隐藏加载状态
                        $('#loadingModal').modal('hide');
                        // 处理返回的数据
                        console.log('Ajax response:', data);
                        console.log(data.data);
                        var html = '<option value="0">选择申报等级</option>';
                        $.each(data.data,function (i,e){
                            console.log(e);
                            html += '<option value="'+e.id+'">'+e.title+'</option>';
                        });
                        $('#choose3').empty();
                        $('#choose3').append(html);
                    },
                    error: function(xhr, status, error) {
                        // 请求失败后隐藏加载状态
                        $('#loadingModal').modal('hide');
                        // 处理错误
                        console.error('Ajax error:', status, error);
                    }
                });
            }

        });


        /*
        * 选择省份 触发城市
        *
        * */
        $("#choose11").change(function (){

            var id = $(this).val();
            if(id > 0) {
                //发送请求
                $('#loadingModal').modal('show');
                $.ajax({
                    url: '/api/Diyajax/getCsList',
                    method: 'POST',
                    dataType: 'json', // 指定响应数据为JSON
                    data: {
                        id : id
                    },
                    success: function(data) {
                        // 请求成功后隐藏加载状态
                        $('#loadingModal').modal('hide');
                        // 处理返回的数据
                        console.log('Ajax response:', data);
                        console.log(data.data);
                        var html = '<option value="0">选择城市</option>';
                        $.each(data.data,function (i,e){
                            console.log(e);
                            html += '<option value="'+e.id+'">'+e.name+'</option>';
                        });
                        $('#choose12').empty();
                        $('#choose12').append(html);
                    },
                    error: function(xhr, status, error) {
                        // 请求失败后隐藏加载状态
                        $('#loadingModal').modal('hide');
                        // 处理错误
                        console.error('Ajax error:', status, error);
                    }
                });
            }

        });



        //选择学历 触发专业判断  无法进行判断
        /*
        $("#choose5").change(function (){
            var a = $('#choose2').val();
            var id = $(this).val();
            if(id > 0) {
                //发送请求
                $('#loadingModal').modal('show');
                $.ajax({
                    url: '/api/Diyajax/getZyList',
                    method: 'POST',
                    dataType: 'json', // 指定响应数据为JSON
                    data: {
                        'zcid' : a,
                        'xlid' : id
                    },
                    success: function(data) {
                        // 请求成功后隐藏加载状态
                        $('#loadingModal').modal('hide');
                        // 处理返回的数据
                        console.log('Ajax response:', data);
                        console.log(data.data);
                        var html = '<option value="0">选择申报等级</option>';
                        $.each(data.data,function (i,e){
                            console.log(e);
                            html += '<option value="'+e.id+'">'+e.title+'</option>';
                        });
                        $('#choose3').empty();
                        $('#choose3').append(html);
                    },
                    error: function(xhr, status, error) {
                        // 请求失败后隐藏加载状态
                        $('#loadingModal').modal('hide');
                        // 处理错误
                        console.error('Ajax error:', status, error);
                    }
                });
            }
        });*/

       /*$("#autoScroll01").autoScroll({
            direction: 'down',                //滚动方向，'up'、'down'、'left'、'right'，*必须参数
            interval: 40,                     //滚动间隔，单位'ms'，一定要大于'滚动速度'，*必须参数
            speed: 10,                        //滚动完成耗时，单位'ms'，一定要小于'滚动间隔'，*必须参数
            distance: 3,                      //单次滚动距离，单位'px'，*必须参数
            liHeight: 35,                     //单个li的盒模型高度&宽度(包括margin值。左右滚动只有liWidth参数，上下滚动只有liHeight参数)，*必须参数
            showNum: 5                        //显示几个li，父级高会自适应，但不要超过最大个数，*必须参数
        });*/


        //循环滚动
        $("#autoScroll01").autoScroll({
            direction: 'down',              //向下滚动
            interval: 1000,                 //2秒滚动一次
            speed: 500,                     //滚动耗时0.6秒（所以必须2秒内滚完，以免没滚完就执行下一次滚动了）
            distance: 35,                   //一次滚动40px
            liHeight: 35,                   //单个的li的盒模型高度是40px（上下滚动li没有margin跟padding值）
            showNum: 7                      //容器里显示3个li标签
        });

        //置换头尾
        setInterval(function() {
            var html = $('#autoScroll01 ul li:last').prop('outerHTML');
            $('#autoScroll01 ul li:last').remove();
            //$('#autoScroll01 ul li:first').before(html);
            $('#autoScroll01 ul').append(html);
        }, 1000);

        //
        $(document).on('click','.hjk',function(){
            var index = $(this).index();
            if($(this).is('.hjk-check')){
                $(this).removeClass('hjk-check');
                $('#inlineCheckbox'+index).attr("checked",false);
            }else{
                $(this).addClass('hjk-check');
                $('#inlineCheckbox'+index).attr("checked",'checked');
            }
        });

        //展开 拉起
        $('.zklp').click(function(){
            var index = $(this).attr('data');
            var t = $(this).text();
            if(t == '展开'){
                $('.zklp').text('展开');
                $(this).text('收起');
                $('.p-con68').hide();
                $('.klp'+index).show();
                $(this).removeClass('zklp-3');
                $(this).addClass('zklp-2');
            }else{
                //$('.zklp').text('收起');
                $(this).text('展开');
                $('.p-con68').hide();
                $(this).removeClass('zklp-2');
                $(this).addClass('zklp-3');
            }
        });

        //咨询费用
        $('#zxfy').click(function(){
            var url = '{eyou:global name='web_attr_26' /}';
            var html = "<div style='width:100%;text-align: center;'>请使用微信扫一扫二维码<br/><img src='"+url+"'/></div>";
            //$('#myModal .modal-title').html('提示');
            $('#myModal .modal-body p').html(html);
            $('#myModal').modal('show');
        });

        //解决方案
        $('#jjfa').click(function(){
            var url = '{eyou:global name='web_attr_26' /}';
            var html = "<div style='width:100%;text-align: left;'>&nbsp;&nbsp;&nbsp;&nbsp;本站已收到您的求助，将于24小时内安排专业的建筑职称申报辅导老师与您联系，请保持电话畅通！并预祝您早日下证！</div>";
            //$('#myModal .modal-title').html('提示');
            $('#myModal .modal-body p').html(html);
            $('#myModal').modal('show');
        });

        //点击获取二维码
        $('#getCode').click(function(){
            var url = '{eyou:global name='web_attr_26' /}';
            var html = "<div style='width:100%;text-align: center;'>请使用微信扫一扫二维码<br/><img src='"+url+"'/></div>";
            //$('#myModal .modal-title').html('提示');
            $('#myModal .modal-body p').html(html);
            $('#myModal').modal('show');
        });

        //发送后台保存 $param_k_json
        $.ajax({
            url: '/api/Diyajax/kjForm',
            method: 'POST',
            dataType: 'json', // 指定响应数据为JSON
            data: {$param_k_json},
            success: function(data) {
                // 请求成功后隐藏加载状态
                $('#loadingModal').modal('hide');
                // 处理返回的数据
                console.log('Ajax response:', data);

                //$('#loadingModal .visually-hidden').html(data.msg);
                //$('#loadingModal').modal('show');

                if(data.code == 0){
                    //setTimeout(function() {
                        //$('#loadingModal').modal('hide');
                    //}, 3000); // 5秒后取消定时器
                }else{

                }
            },
            error: function(xhr, status, error) {
                // 请求失败后隐藏加载状态
                $('#loadingModal').modal('hide');
                // 处理错误
                console.error('Ajax error:', status, error);
            }
        });

        //ajax获取表单数据 因为页面是缓存数据
        $.ajax({
            url: '/api/Diyajax/getFormList',
            method: 'POST',
            dataType: 'json', // 指定响应数据为JSON
            data: {},
            success: function(data) {
                // 请求成功后隐藏加载状态
                $('#loadingModal').modal('hide');
                // 处理返回的数据
                console.log('Ajax response:', data);

                //$('#loadingModal .visually-hidden').html(data.msg);
                //$('#loadingModal').modal('show');

                if(data.code == 1){
                    //setTimeout(function() {
                    //$('#loadingModal').modal('hide');
                    //}, 3000); // 5秒后取消定时器

                    var html = '';
                    $.each(data.data,function (i,e){
                        var cal = '';
                        if(e.is_tg_n == 0){
                            cal = 'tib-li-err';
                        }
                        html += '<li class="tib-li '+cal+'"><span class="sp1">'+e.ch+'</span><span class="sp2">'+e.sjhm+'</span><span class="sp3">'+e.sbxx+'</span><span class="sp4">'+e.is_tg+'</span></li>';
                    });
                    //console.log(html);
                    $('#autoScroll01 ul').empty();
                    $('#autoScroll01 ul').append(html);
                }else{

                }
            },
            error: function(xhr, status, error) {
                // 请求失败后隐藏加载状态
                $('#loadingModal').modal('hide');
                // 处理错误
                console.error('Ajax error:', status, error);
            }
        });
    });
</script>