peridata.html 15.2 KB

原文件审查历史永久链接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/weui.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link href="css/common.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="css/tanchu.css" />

    <script type="text/javascript">

    </script>
    <title>个人中心</title>
    <style>
        .perbut{
            position: fixed;
            bottom: 0;
            width:100%;
        }
        .perp .specp img{
            width: 0.5rem;
        }
        .txt,#input_file{
            width: 100%;
            height: 100%;
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
        }
        .specp{
            position: relative;
        }
    </style>
</head>

<body style="background-color:#fff;">
    <div class="perheader center">
        <div class="left perback">
            <a href="#" onClick="javascript:history.back(-1);">
                <img src="images/care_03.jpg" />
            </a>
        </div>
        <div class="headertext">个人资料</div>
    </div>
    <div class="perpart1">
        <div id="datePlugin"></div>
        <div class="perp" id="square">
            <span>头像</span>
            <a href="#">
                <span class="right">
                    <img src="images/pergo_03.jpg" />
                </span>
                <span class="specp">
                    <form id="uploadimage">
                    <input type="file" name="file" id="input_file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" onchange="imgPreview(this)">
                    </form>
                    <img src="images/cali_05.jpg" id="preview"/>
                </span>
            </a>
        </div>

        <div class="perp">
            <span>姓名</span>
            <span class="right">
                <input type="text" placeholder="请输入姓名" id="p_name" />
                <img src="images/pergo_03.jpg" />
            </span>
        </div>

        <div class="infup">
            <span style="color:#999797">性别 </span>
            <span class="right sex">
                <input type="radio" id="male" name="sex" />
                <label for="male">男</label>
                <input type="radio" id="female" name="sex" />
                <label for="female">女</label>
            </span>
        </div>

        <div class="perp">
            <span>手机</span>
            <span class="right phonesp" id="phonesp">18611022356
                <img src="images/pergo_03.jpg" />
            </span>
        </div>

        <div class="perp">
            <span>生日</span>
            <span class="right">
                <input id="beginTime" placeholder="1985-12-02" />
                <img src="images/pergo_03.jpg" />
            </span>
        </div>

        <div class="perp">
            <span>身份证号</span>
            <span class="right">
                <input type="text" placeholder="输入身份证号" maxlength="18" id="id_card" />
                <img src="images/pergo_03.jpg" />
            </span>
        </div>

        <div class="perp">
            <span>身高</span>
            <span class="right">
                <input type="text" class="select-value9" id="person_height" placeholder="174cm" />
                <img src="images/pergo_03.jpg" />
            </span>
        </div>

        <div class="perp">
            <span>体重</span>
            <span class="right">
                <input type="text" class="select-value4" id="weight" placeholder="79.0kg" />
                <img src="images/pergo_03.jpg" />
            </span>
        </div>

        <div class="perp">
            <span>婚姻状况</span>
            <span class="right">
                <input type="text" class="select-value12" id="marry"  placeholder="已婚" />
                <img src="images/pergo_03.jpg" />
                 <!--<a href="javascript:;" class="weui-btn weui-btn_default" id="showPicker">单列选择器</a>-->
            </span>
        </div>

        <div class="perp culture_btn">
            <span>文化程度</span>
            <span class="right">
                <input type="text" class="select-value13" id="culture_name" placeholder="研究生以上" />
                <img src="images/pergo_03.jpg" />
            </span>
        </div>

        <div class="perp medical_btn">
            <span>职业</span>
            <span class="right">
                <input type="text" class="select-value14" id="job" placeholder="国家公务员" />
                <img src="images/pergo_03.jpg" />
            </span>
        </div>

        <div class="perp">
            <span>医保类型</span>
            <span class="right">
                <input type="text" class="select-value15" id="medical_name" placeholder="城镇居民医保" />
                <img src="images/pergo_03.jpg" />
            </span>
        </div>
    </div>
    <div>
        <button type="button" class="perbut" />保存</div>
    <div class="mPicker hide">
        <div class="mPicker-mask hide"></div>
    </div>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript" src="js/common.js"/>
    <script type="text/javascript" src="js/weui.js"/>
    <script type="text/javascript" src="js/date.js"></script>
    <script type="text/javascript" src="js/iscroll.js"></script>
    <script src="js/base.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/per.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            getMedical()
            getCulture()
            //上传图片
            // var obj = document.getElementById('#input_file')
            // imgPreview(obj)
            // 获取个人信息
            getinfo()
        })
        $(function () {
            $('#beginTime').date();
            $('#endTime').date({ theme: "datetime" });
        });
        // 获取个人信息
        function getinfo(){
            $.ajax({
                type:"POST",
                url: baseUrl+"user/index/getUserinfo",
                dataType:"json",
                headers:{
                    "XX-Device-Type":"1",
                    "XX-Token":"1",
                },
                data:{
                    rid:"0"
                },
                success:function (res) {
                    console.log(res)
                    var data = res.data;
                    $('#p_name').val('')
                    $('#p_name').val(data.name)
                    if (data.sex==1){
                        $('#male').attr('checked','true')
                    }else{
                        $('#female').attr('checked','true')
                    }
                    $('#phonesp').html(`${data.mobile}
                            <img src="images/pergo_03.jpg" />`)
                    $('#beginTime').val(data.birthday)
                    $('#id_card').val(data.idcard)
                    $('#person_height').val(data.height)
                    if (data.marry==1){
                        $('#marry').val(`已婚`)
                    }
                    $('#culture_name').val(data.culture_name)
                    $('#job').val(data.job)
                    $('#medical_name').val(data.medical_name)
                }
            })
        }

        function imgPreview(fileDom) {
            //判断是否支持FileReader
            if(window.FileReader) {
                var reader = new FileReader();
            } else {
                alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
            }
            //获取文件
            var file = fileDom.files[0];
            console.log(file)
            var imageType = /^image\//;
            //是否是图片
            if(!imageType.test(file.type)) {
                alert("请选择图片！");
                return;
            }
            //读取完成
            reader.onload = function(e) {
                //获取图片dom
                var img = document.getElementById("preview");
                //图片路径设置为读取的图片
                img.src = e.target.result;
                var formData = new FormData(document.getElementById('uploadimage'));
                // var formData = $('#uploadimage').submit();
                //
                // formData.append('file',file ); //添加图片信息的参数
                // formData.append('fileType','image' ); //添加图片信息的参数
                //图片上传

                    var imgurl = document.getElementById("input_file").value;

                    $.ajax({
                        type:"POST",
                        url: baseUrl+'user/index/upAvatar',
                        dataType: 'json', //返回值类型 一般设置为json
                        headers:{
                            "XX-Device-Type":"1",
                            "XX-Token":"1",
                        },
                        success: function(data) {
                            alert(data.code + " " + data.msg);
                            if(data.code == 200) {
                                $("#headPic").attr("src", "/market/images/image.png");
                                //将图片换成默认的+图片
                            }
                        }

                    });

                //建立一個可存取到該file的url
                function getObjectURL(file) {
                    var url = null;
                    if(window.createObjectURL != undefined) { // basic
                        url = window.createObjectURL(file);
                    } else if(window.URL != undefined) { // mozilla(firefox)
                        url = window.URL.createObjectURL(file);
                    } else if(window.webkitURL != undefined) { // webkit or chrome
                        url = window.webkitURL.createObjectURL(file);
                    }
                    return url;
                }
            };
            reader.readAsDataURL(file);
        }
        // function up_pic(img) {
        //     // var formData = new FormData();
        //     // var file=$('#input_file').files[0];
        //     formData.append('file',file ); //添加图片信息的参数
        //     formData.append('sizeid', 123); //添加其他参数
        //     $.ajax({
        //         url: baseUrl+'user/index/upAvatar',
        //         type: 'POST',
        //         cache: false, //上传文件不需要缓存
        //         data:formData,
        //         headers:{
        //             "XX-Device-Type":"1",
        //             "XX-Token":"1",
        //         },
        //         dataType: 'json',
        //         processData: false, // 告诉jQuery不要去处理发送的数据
        //         contentType: false, // 告诉jQuery不要去设置Content-Type请求头
        //         success: function(data) {
        //             alert('上传成功')
        //         },
        //         error: function(data) {
        //             // alert("上传失败");
        //         }
        //     })
        // }
        var level13;
        var level14;
        //获取文化程度接口
        function getCulture(){
            $.ajax({
                type:"POST",
                url: baseUrl+'user/index/getCulture',
                dataType:"json",
                headers:{
                    "XX-Device-Type":"1",
                    "XX-Token":"1",
                },
                success:function (res) {
                    level13 = []
                    console.log(res.data)
                    // var temp = [1,2,3]
                    for ( key in res.data){
                        level13.push({
                            "name": res.data[key].culture_name,
                            "value": res.data[key].id,
                        })
                    }
                    console.log(level13)
                    /**文化程度**/
                    var method3 = $('.select-value13').mPicker({
                        level: 1,
                        dataJson: level13,
                        Linkage: false,
                        rows: 6,
                        idDefault: true,
                        header: '<div class="mPicker-header">文化程度</div>',
                        confirm: function() {
                            //console.info($('.select-value3').data('id1'));
                        },
                        cancel: function() {
                            //console.info($('.select-value3').data('id1'));
                        }
                    })
                },

            })
        }

        //获取文化程度接口
        function getMedical(){
            $.ajax({
                type:"POST",
                url: baseUrl+'user/index/getMedical',
                dataType:"json",
                headers:{
                    "XX-Device-Type":"1",
                    "XX-Token":"1",
                },
                success:function (res) {
                    level14 = []
                    console.log(res.data)
                    // var temp = [1,2,3]
                    for ( key in res.data){
                        level14.push({
                            "name": res.data[key].medical_name,
                            "value": res.data[key].id,
                        })
                    }
                    console.log(level14)
                    /**文化程度**/
                    var method3 = $('.select-value14').mPicker({
                        level: 1,
                        dataJson: level14,
                        Linkage: false,
                        rows: 6,
                        idDefault: true,
                        header: '<div class="mPicker-header">文化程度</div>',
                        confirm: function() {
                            //console.info($('.select-value3').data('id1'));
                        },
                        cancel: function() {
                            //console.info($('.select-value3').data('id1'));
                        }
                    })
                },
            })
        }

        /**医保类型**/
        var method3 = $('.select-value15').mPicker({
            level: 1,
            dataJson: level15,
            Linkage: false,
            rows: 6,
            idDefault: true,
            header: '<div class="mPicker-header">医保类型</div>',
            confirm: function() {
                //console.info($('.select-value3').data('id1'));
            },
            cancel: function() {
                //console.info($('.select-value3').data('id1'));
            }
        })

        // 点击保存接口
        $('.perbut').click(function () {
            setPersonal()
        })
        // 保存
        function setPersonal() {
            $.ajax({

            })
        }
    </script>
</body>