master

分支 (1)

管理

管理

master

beautyPhoto
/
showface2.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- 使用不同智能机的宽度 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="renderer" content="webkit">
    <title>MissQ校花</title>
    <link rel="stylesheet" media="all" href="css/base.css">
    <link rel="stylesheet" href="css/dian.css"/>
    <script src="js/jquery-1.12.3.min.js"></script>
    <script src="js/diandrag.js"></script>
    <style>
        .container{
            position: relative;
        }
        .showface-bg{
            width: 16rem;
        }
        .showface-bg img{
            width: 100%;
        }
        .uploadpic{
            width: 10rem;
            height: 10rem;
            position: absolute;
            z-index: 9;
            left:3rem;
            top:4.625rem;
            overflow: hidden;
        }
        .uploadpic input{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 9;
            opacity: 0;
        }
        .inputtxt{
            font-size: 0.6rem;
            height: 1.7rem;
            width: 9.5rem;
            position: absolute;
            background-color: transparent;
            border: 0;
            outline: none;
            color: #c47595;
        }
        .showface-name{
            top: 16.5rem;
            left: 4.675rem;
        }
        .showface-phone{
            top: 18.9rem;
            left: 4.675rem;
        }
        .showface-school{
            top: 21.2rem;
            left: 4.675rem;
        }
        .showface-major{
            top: 23.575rem;
            left: 4.675rem;
        }
        .showface-grade{
            top: 25.9rem;
            left: 4.675rem;
        }
        input::-webkit-input-placeholder {
            color: #c47595 !important;
        } /* WebKit browsers */
        .showface-btn{
            width: 10rem;
            position: absolute;
            left:3rem;
            bottom:3.2rem   ;
        }
        .uploadpic input{
        }
    </style>
    <script>
        ;(function(win, doc){
            function change(){
                doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/320+'px';
            }

            if(doc.documentElement.clientWidth>640){
                doc.documentElement.style.fontSize=20*640/320+'px';
            }else{
                change();
            }
            win.addEventListener('resize', change, false);
        })(window, document);

        $(function(){
            var file;
            getFile();
            function getFile(){
                var input = document.querySelectorAll("#file_inputs")[0];
                if(typeof FileReader==='undefined'){
//                oCon.innerHTML = "您的页面不支持 FileReader";
                    input.setAttribute('disabled','disabled');
                }else{
                    input.addEventListener('change',readFile,false);
                }

                //获取用户上传的文件以及生成缩略图
                function readFile(){
                    file = this.files;
                    for(var i=0;i<file.length;i++){
                        var reader = new FileReader();
                        reader.readAsDataURL(file[i]);
                        reader.onload = function(e){
                            var oImg=document.querySelector('.mainImg');
                            var oAdds=document.querySelector('.uploadpic');
                            oImg.src=this.result;
                            oImg.style.display='block';
                            oAdds.appendChild(oImg);
                        };
                    }
                }

            }

            function creatSchool(val){
                $.ajax({
                    url: 'http://app.missquq.com/api/school/listSchool',
                    data: {
                        name: val
                    },
                    jsonp: 'callback',    // cbName
                    dataType: 'jsonp', // 使用jsonp
                    success: function(json) {
                        var arr1=[];
                        $.each(json,function(i){
                            arr1.push(json[i].name);
                        });
                        $('#ulBox').css('height','10rem');
                        $('#ul1').html('');
                        $.each(arr1,function(i){
                            var oLi = $('<li></li>');
                            oLi.html(arr1[i]);
                            $('#ul1').append(oLi);
                        });

                        var sch;
                        $('#ul1 li').on('click',function(){
                            sch=$(this).html();
                            $('#main').css('display','block');
                            $('.showface-school').val(sch);
                            $('.search').css('display','none');
                        });

                        var lastLi=$('<div>没有找到你的学校？<p>创建你的学校</p></div>');
                        lastLi.addClass('addschool-name');
                        $('#ul1').append(lastLi);
                        $('.addschool-name').on('click',function(){
                            $('.search').css('display','none');
                            $('.addschool').css('display','block');
                        });

                        $('#ul1 li').on('click',function(){
                            var val=$(this).html();
                            $('#t1').val(val);
                        });
                    }
                });
            }

            $('.search-icon').on('click',function(){
                var val=$('#t1').val();
                $('#ul1').html('').css('transform','translateY(0)');
                $('#ulBox').css('height','')
                creatSchool(val);
            });

            $('.school-cover').on('click',function(){
                $('.search').css('display','none');
                $('.addschool').css('display','none');
            });

            $('.bt2').on('click',function(){
                var t2val=$('#t2').val();
                $.ajax({
                    url: 'http://app.missquq.com/api/school/saveSchool',
                    data: {
                        name: t2val
                    },
                    jsonp: 'callback',    // cbName
                    dataType: 'jsonp', // 使用jsonp
                    success:function(json){
                        if(json.state=='success'){
                            alert('创建学校成功');
                            $('.showface-school').val(t2val);
                            $('#main').css('display','block');
                            $('.addschool').css('display','none');
                        }
                    }
                });
            });

            $('.showface-school').on('click',function(){
                $('.addschool').css('display','none');
                $('#ul1').html('');
                $('#t1').val('');
                $('.search').css('display','block');
                var val=this.value;
                creatSchool(val);
            });

            console.log(sessionStorage.userId);
            drag();

            $('#submit-btn').on('click',function(){
                if($('.showface-name').val()==''){
                    alert('请填写姓名');
                    return false;
                }
                if($('.showface-phone').val()==''){
                    alert('请填写手机号');
                    return false;
                }
                if($('.showface-school').val()==''){
                    alert('请选择学校');
                    return false;
                }

                if($('#file_inputs').val()==''){
                    alert('请选择照片');
                    return false;
                }

                $('#form').attr('action','http://app.missquq.com/trinee/addAlbum?userId='+sessionStorage.userId);

            });

        });

    </script>
</head>
<body>
<div class="container w640" id="main">
    <div class="showface-bg">
        <a href="javascript:history.back();" class="goback"></a>
        <img src="img/showface-bg.jpg"  alt=""/>
    </div>
    <form action="" id="form"  method ="post"  enctype="multipart/form-data">
    <div class="uploadpic">
        <img src="" alt="" class="mainImg"/>
        <input type="file" accept="image/*" id="file_inputs"/>
    </div>
    <input type="text" class="inputtxt showface-name" placeholder="一定是真的呦"/>
    <input type="text" class="inputtxt showface-phone" placeholder="你辣么美，别让MissQ错过你哦~"/>
    <input type="text" class="inputtxt showface-school" name="school" readonly="readonly" placeholder="一定是真的呦"/>
    <input type="text" class="inputtxt showface-major"/>
    <input type="text" class="inputtxt showface-grade"/>
    <img src="img/showface-btn.png" alt="" class="showface-btn"/>
        <input type="submit" id="submit-btn"/>
    </form>
    <div class="search w640">
        <div class="school-cover"></div>
        <div class="t1-box">
            <input type="text" id="t1" placeholder="请输入学校名称">
            <div class="search-icon"><img src="img/school-search.png" alt=""/></div>
        </div>
        <div id="ulBox">
            <ul id="ul1"></ul>
        </div>
    </div>
    <div class="addschool w640">
        <div class="school-cover"></div>
        <div class="t2-box">
            <input type="text" id="t2" placeholder="请输入学校名称">
            <input class="bt2" type="button" value="提交"/>
        </div>
    </div>
</div>
</body>
</html>