add_information.html 11.8 KB
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>学考无忧-个人信息</title>
    <link rel="stylesheet" href="__TMPL__/public/assets/css/reset.css" />
    <link rel="stylesheet" href="__TMPL__/public/assets/css/log.css" />
</head>

<body>
<div class="log_top_second">
    <!-- 顶部 -->
    <div class="ad_top" style="background-color:white;">
        <a href="javascript:history.back(-1)">
            <img class="ad_topImg" src="__TMPL__/public/assets/images/left.png" alt="" />
        </a>
        <h1>个人信息</h1>
    </div>
</div>
<div class="log_two_input">
    <div class="log_two_input_one">
        <div class="log_two_input_title">
            姓名
        </div>
        <div class="log_two_input_contant">
            <input type="text" placeholder="请输入姓名" id="name" />
        </div>
    </div>
    <div class="log_two_input_one">
        <div class="log_two_input_title">
            手机号
        </div>
        <div class="log_two_input_contant">
            <input style="width:3rem" type="text" placeholder="请输入手机号" maxlength="11" name="phone" id="phone" />
        </div>
        <div class="log_two_input_btn">
            <input type="button" class="btn" id="code" value="获取验证码" onclick="codeButton()">
        </div>
    </div>
    <div class="log_two_input_one">
        <div class="log_two_input_title">
            输入验证码
        </div>
        <div class="log_two_input_contant">
            <input type="text" placeholder="请输入验证码" id="mycode" />
        </div>
    </div>
    <div class="log_two_input_one">
        <div class="log_two_input_title">
            身份证号
        </div>
        <div class="log_two_input_contant">
            <input type="text" placeholder="请输入身份证号" id="id_num" />
        </div>
    </div>
</div>
<div class="log_two_picture">
    <div class="log_two_picture_title">
        上传证件照
    </div>
    <div class="log_two_picture_img">
        <div class="log_two_pi_one">
            <div class="log_two_pi_one_icon" onclick="zhengmian()">
                <img src="__TMPL__/public/assets/images/jiahao.png" id="img0" alt="" />
            </div>
            <div class="log_two_pi_one_p">
                正面
            </div>
            <div class="input_file">
                <!--<input type="file" id="personal-photo" name="avatar"/>-->
            </div>
        </div>
        <div class="log_two_pi_one log_two_pi_two">
            <div class="log_two_pi_one_icon" onclick="fanmian()">
                <img src="__TMPL__/public/assets/images/jiahao.png" id="img1" alt="" />
            </div>
            <div class="log_two_pi_one_p">
                反面
            </div>
            <div class="input_file">
                <!--<input type="file" id="img2_file" name="avatar" />-->
            </div>
        </div>
    </div>
    <div class="log_two_picture_state">
        <div class="log_two_ps_one">
            拍照示范
        </div>
        <div class="log_two_ps_two">
            <img src="__TMPL__/public/assets/images/88.png" alt="" class="img1" />
            <img src="__TMPL__/public/assets/images/89.png" alt="" class="img2" />
        </div>
        <div class="log_two_ps_three">
            请稳定拍摄,保证照片中的<span>证件完整</span>,字体清晰,亮度均匀,可以高通过率
        </div>
    </div>
</div>
<!-- 保存 -->
<!--<div class="log_two_bottom_btn" onclick="auditadd()">
    保存
</div>-->
<button class="log_two_bottom_btn" onclick="auditadd()" >保存</button>
<script src="__TMPL__/public/assets/js/base.js"></script>
<script src="__TMPL__/public/assets/js/jquery-3.2.1.min.js"></script>
<script src="__TMPL__/public/assets/js/uploadfile.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    function zhengmian(){

        wx.config({$jssdk});
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original'], // 指定是原图还是压缩图,默认都有
            sourceType: ['album', 'camera'], // 指定来源是相册还是相机,默认都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片

                wx.uploadImage({
                    localId: localIds.toString(), // 需要上传的图片的ID,由chooseImage接口获得
                    isShowProgressTips: 1, // 进度提示
                    success: function (res) {
                        var mediaId = res.serverId; // 返回图片的服务器端ID,即mediaId
                        //将获取到的 mediaId 传入后台 方法savePicture
                        $.post("{:url('Salesmangoods/savePicture')}",{"mediaId":mediaId},function(res){
                            //填写你自己的业务逻辑
                            res = JSON.parse(res);
                            $('#img0').attr("src",res.filename);
                            $(".log_six_pictyre_img").addClass("log_six_pictyre_imgs");
                            $(".log_six_pictyre_title").addClass("log_six_pictyre_titles");
                        });

                    },
                    fail: function (res) {
                        alertModal('图片上传失败,请重试');
                    }
                });
            }
        });

    }

    function fanmian(){
        wx.config({$jssdk});
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original'], // 指定是原图还是压缩图,默认都有
            sourceType: ['album', 'camera'], // 指定来源是相册还是相机,默认都有
            success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片

                wx.uploadImage({
                    localId: localIds.toString(), // 需要上传的图片的ID,由chooseImage接口获得
                    isShowProgressTips: 1, // 进度提示
                    success: function (res) {
                        var mediaId = res.serverId; // 返回图片的服务器端ID,即mediaId
                        //将获取到的 mediaId 传入后台 方法savePicture
                        $.post("{:url('Salesmangoods/savePicture')}",{"mediaId":mediaId},function(res){
                            //填写你自己的业务逻辑
                            res = JSON.parse(res);
                            $('#img1').attr("src",res.filename);
                            $(".log_six_pictyre_img").addClass("log_six_pictyre_imgs");
                            $(".log_six_pictyre_title").addClass("log_six_pictyre_titles");
                        });

                    },
                    fail: function (res) {
                        alertModal('图片上传失败,请重试');
                    }
                });
            }
        });
    }
</script>
<script>
    /**
     *保存提交审核信息
     */
    function auditadd(){
        if($('#name').val() == ''){
            alert('姓名不能为空');
        }else if($('#phone').val() == ''){
            alert('手机号不能为空');
        }else if($('#mycode').val() == ''){
            alert('验证码不能为空');
        }else if($('#id_num').val() == ''){
            alert('身份证号不能为空');
        }else{
            $('.log_two_bottom_btn').text('提交中').attr('disabled',true);
            name = $('#name').val();
            phone = $('#phone').val();
            code = $('#mycode').val();
            id_num = $('#id_num').val();
            img0 = $('#img0')[0].src;
            img1 = $('#img1')[0].src;
            $.post("{:url('Personalcenter/add_audit')}",{name:name,phone:phone,code:code,id_num:id_num,img0:img0,img1:img1},function(data){
            if(data == 3){
                $('.log_two_bottom_btn').text('提交').attr('disabled',false);
                alert('验证码错误');
            }else if(data == 2){
                $('.log_two_bottom_btn').text('提交').attr('disabled',false);
                alert('提交失败');
            }else if(data == 4){
                alert('已提交');
            }else if(data == 1){
                window.location.href = "{:url('Personalcenter/personal_center')}";
            }
            });
        }
    }
</script>
<script>
    // 上传图片
    //上传图片
   /* $(function() {
        $("#personal-photo").change(function() {
            var img_size = $(this).get(0).files[0].size;
            if(img_size > 1024000) {
                alert("上传图片过大,请上传小于1M的图片");
            } else {
                $.ajaxFileUpload({
                    url: '/portal/Personalcenter/image_one_up', //用于文件上传的服务器端请求地址
                    secureuri: false, //是否需要安全协议,一般设置为false
                    fileElementId: 'personal-photo', //文件上传域的ID
                    dataType: 'json', //返回值类型 一般设置为json
                    success: function(data) { //服务器成功响应处理函数
                       $('#img0').attr("src","/uploads/"+data.data);
                        $(".log_two_pi_one").addClass("log_two_pi_ones");
                        $(".log_two_pi_one_p").addClass("log_two_pi_one_ps");
                        $(".log_two_pi_one_icon").addClass("log_two_pi_one_icons");
                    }
                });
            }
        });

        $("#img2_file").change(function() {
            var img_size = $(this).get(0).files[0].size;
            if(img_size > 1024000) {
                alert("上传图片过大,请上传小于1M的图片");
            } else {
                $.ajaxFileUpload({
                    url: "{:url('Personalcenter/image_one_up')}", //用于文件上传的服务器端请求地址
                   secureuri: false, //是否需要安全协议,一般设置为false
                    fileElementId: 'img2_file', //文件上传域的ID
                   dataType: 'json', //返回值类型 一般设置为json
                    success: function(data) { //服务器成功响应处理函数
                        $('#img1').attr("src","/uploads/"+data.data);
                        $(".log_two_pi_one").addClass("log_two_pi_ones");
                        $(".log_two_pi_one_p").addClass("log_two_pi_one_ps");
                        $(".log_two_pi_one_icon").addClass("log_two_pi_one_icons");
                    }
                });
            }
        });
    });*/

    //短信验证码
    function codeButton() {
        phone = $("input[name='phone']").val();
        if(phone == ''){
            alert('手机号不能为空');
        }else{
            $.post("{:url('Personalcenter/send_message')}",{phone:phone},function(data){
                if(data){
                    var code = $("#code");
                    code.attr("disabled", "disabled");
                    setTimeout(function() {
                        code.css("opacity", "0.8");
                    }, 1000)
                    var time = 60;
                    var set = setInterval(function() {
                        code.val("(" + --time + ")秒后重新获取");
                    }, 1000);
                    setTimeout(function() {
                        code.attr("disabled", false).val("重新获取验证码");
                        clearInterval(set);
                    }, 60000);
                }else{
                    alert('发送失败!');
                }
            });
        }

    }
</script>
</body>

</html>