choose.html 5.7 KB
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <include file="public@head_common"/>
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/weui.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/myweui.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/register_login/login.css" />
    <link rel="stylesheet" type="text/css" href="__TMPL__/public/mobile/css/augly.css" />
    <title>选择年龄</title>
    <style type="text/css">
        .content_height {
            background: url(__TMPL__/public/mobile/images/login_bg.png) center no-repeat;
            background-size: 100% 100%;
            padding-top: 1rem;
        }
        .container {
            padding-top: 0;
        }

        .input_num {
            position: relative;
        }
        .input_num p {
            font-size: 0.3rem;
            margin-left: 0.4rem;
            margin-right: 0.34rem;
        }

        .jiantou {
            width: 0.3rem;
            height: 0.3rem;
            position: absolute;
            top: 50%;
            transform: translateY(-0.15rem);
            right: 0.3rem;
        }
        .bottom_icon {
            margin-bottom: 0;
            margin-top: -0.7rem;
        }
    </style>
</head>

<body>
<div class="test_num"></div>
<div class="header">
    <div class="return">
        <span class="back_href">
            <i class="iconfont icon-jiantou-copy"></i>返回
        </span>
    </div>
    选择宝宝年龄
</div>
<div class="content_height">
    <div class="container">
        <!--<div class="header_wrap"></div>-->
        <!--banner-->
        <div class="login_img" style="margin-top: 2.9rem;">
            <div class="baby_img">
               <img src="__TMPL__/public/mobile/images/login_pic2.png" class="img_detail" />
            </div>
            <div class="login_text">
                <p style="font-weight: bold;">选择宝宝年龄</p>
                <span style="color: #CCCCCC;">Choose age</span>
            </div>
        </div>
        <div class="input_num">
            <p>宝宝年龄</p>
            <input type="text" name="baby_age" id="age" value="" readonly class="input_text" placeholder="请选择宝宝年龄" />
            <img src="__TMPL__/public/mobile/images/youjiantou.png" class="jiantou" />
            <!--<select name="baby_age" class="input_text">-->
                <!--<volist name="babyList" id="vo">-->
                    <!--<option value="{$vo.id}">{$vo.age}</option>-->
                <!--</volist>-->
            <!--</select>-->
            <!--<input type="text" name="" id="age" value="" class="input_text" placeholder="7~35月龄" />-->
            <!--<img src="__TMPL__/public/mobile/images/youjiantou.png" class="jiantou" />-->
        </div>

        <div class="btn">
            确定
        </div>
    </div>
</div>
<div class="bottom_icon">
    <img src="__TMPL__/public/mobile/images/biglogo@2x.png" class="bottom_img" />
    <p class="bottom_text">{$site_info.site_name}</p>
</div>
<script src="__TMPL__/public/mobile/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/weui.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/myweui.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/swiper-4.3.5.min.js" type="text/javascript" charset="utf-8"></script>
<script src="__TMPL__/public/mobile/js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // $('.input_num').click(function() {
    //     weui.datePicker({
    //         start: 2000,
    //         end: 2030,
    //         defaultValue: [2015, 6, 9],
    //         onChange: function(result) {
    //             console.log(result);
    //         },
    //         onConfirm: function(result) {
    //             var birthday = result[0].label + result[1].label + result[2].label
    //             $('#age').val(birthday)
    //         },
    //         id: 'datePicker'
    //     });
    // })

    var age_id = '';
    $('#age').click(function() {
        var babyList = JSON.parse(`{$babyList}`);
        weui.picker(babyList, {
            onChange: function(result) {
                console.log(result);
            },
            onConfirm: function(result) {
                $('#age').val(result[0].label);
                age_id = result[0].value;
                console.log(result);
            },
            id: 'multiPickerBtn'
        });
    });
    $('.btn').click(function(){
        if($('#age').val() == '') {
            _error('请选择宝宝年龄');
            return false;
        }
        var data = {
            id: age_id
        };
        $.ajax({
            url: "{:url('user/Login/chooseSubmit')}",
            type: "POST",
            data: data,
            dataType: "JSON",
            success: function(res){
                if(res.code == 1) {
                    window.location.href = res.url;
                } else {
                    _error(res.msg);
                }
            }
        });
    });

    // 弹窗提示
    var popup_switch = true;
    function _error(test) {
        if(popup_switch) {
            popup_switch = false;
            $('.test_num').html(test);
            $('.test_num').removeClass('Augly-fadeout');
            $('.test_num').addClass('Augly-fadein');
            $('.test_num').show();
            setTimeout(function() {
                $('.test_num').removeClass('Augly-fadein');
                $('.test_num').addClass('Augly-fadeout');
                popup_switch = true
            }, 1500)
        } else {
            popup_switch = true
        }
    }
</script>
</body>

</html>