editmaterial.html 8.9 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_890739_ujzttcsgpt.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/personcenter.css">
    <link rel="stylesheet" href="__TMPL__/public/assets/css/base.css">

    <title>编辑资料</title>
    <script type="text/javascript" src="__TMPL__/public/assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="__TMPL__/public/assets/js/base.js" charset="utf-8"></script>
</head>
<body>
<div class="editmaterwrapper" style="display:none">
    <div class="editpop">
        <div class="materialname">姓名</div>
        <div class="tail_name">
            <input type="text" placeholder="向昱筱" class="editnametail changename">
        </div>
        <div class="materialbtn">
            <p class="materialcancel">取消</p>
            <p class="materialsure">保存</p>
        </div>
    </div>
</div>
<div class="materialcontainer">


<div class="materialistimg">
    <div id="preview" class="headimg">
        <img id="imghead" border="0" src="{$list.wx_pic}" style="width:100%;height:100%" onclick="$('#previewImg').click();">
    </div>
    <input type="file" onchange="previewImage(this)" style="display: none;" id="previewImg" />
    <div class="editheadimg" onclick="$('#previewImg').click();">
        <p class="editname">编辑头像</p>
        <p class="iconfont icon-right"></p>
    </div>
</div>

    <div class="namelist" data_id="0">
        <p class="editname">姓名</p>
        <div class="nameinfo">
            <p class="editnameinfo name">{$list.name}</p>
            <p class="iconfont icon-right"></p>
        </div>
    </div>
    <div class="namelist" data_id="1">
        <p class="editname">昵称</p>
        <div class="nameinfo">
            <p class="editnameinfo wx_name">{$list.wx_name}</p>
            <p class="iconfont icon-right"></p>
        </div>
    </div>

    <div class="line"></div>
    <div class="namelist" data_id="2">
        <p class="editname">手机号</p>
        <div class="nameinfo">
            <p class="editnameinfo tel">{$list.tel}</p>
            <p class="iconfont icon-right"></p>
        </div>
    </div>
    <div class="namelist" data_id="3">
        <p class="editname">身份证号</p>
        <div class="nameinfo">
            <p class="editnameinfo card_num">{$list.card_num}</p>
            <p class="iconfont icon-right"></p>
        </div>
    </div>
    <div class="save">保存</div>

</div>
<!--begin:提示弹层-->
<div class="pop_fn"></div>
<script>
    var nameVal = $('.name').text();
    var wx_name = $('.wx_name').text();
    var tel = $('.tel').text();
    var card_num = $('.card_num').text();
   $(".materialcancel").click(function(){
       $(".editmaterwrapper").css("display","none");
   });
   // 每个弹框保存
    $(".materialsure").click(function(){
        // var a = $('.changetel').val();
        // console.log(a);
        $.ajax({
            type: 'POST',
            url: "{:url('Member/change')}",
            data: {
                'wx_name': $('.changeWxname').val(),
                'name': $('.changename').val(),
                'tel': $('.changetel').val(),
                'card_num': $('.changenum').val()
            },
            success: function (res) {
                if(res.code == 1){
                    popup('修改成功');
                    setTimeout(function(){
                        location.reload();
                    },2000);

                }else{
                    popup('修改失败1')
                }
                console.log(res);
            },
            error: function (res) {
                console.log(res);
            }
         });


        $(".editmaterwrapper").css("display","none");
    })

    $(".namelist").click(function(){
        var dataid=$(this).attr("data_id");
        console.log(dataid);
        if(dataid==0){
            $(".editmaterwrapper").css("display","block");
            $(".materialname").html("姓名");
            $(".editnametail").val(nameVal);

        }else if(dataid==1){
           $(".editmaterwrapper").css("display","block");
           $(".materialname").html("昵称");
           $(".editnametail").val(wx_name)
            $(".editnametail").removeClass('changename');
            $(".editnametail").addClass('changeWxname');
        }else if(dataid==2){
            $(".editmaterwrapper").css("display","block");
            $(".editnametail").attr("placeholder","13111111111");
            $(".materialname").html("手机号");
            $(".editnametail").val(tel)
            $(".editnametail").removeClass('changename');
            $(".editnametail").addClass('changetel');
        }else if(dataid==3){
            $(".editmaterwrapper").css("display","block");
            $(".editnametail").attr("placeholder","xxxxx");
            $(".materialname").html("身份证号");
            $(".editnametail").val(card_num)
            $(".editnametail").removeClass('changename');
            $(".editnametail").addClass('changenum');
        }
    });


   function clacImgZoomParam(maxWidth, maxHeight, width, height) {
       var param = {
           top: 0,
           left: 0,
           width: width,
           height: height
       };
       if(width > maxWidth || height > maxHeight) {
           rateWidth = width / maxWidth;
           rateHeight = height / maxHeight;

           if(rateWidth > rateHeight) {
               param.width = maxWidth;
               param.height = Math.round(height / rateWidth);
           } else {
               param.width = Math.round(width / rateHeight);
               param.height = maxHeight;
           }
       }
       param.left = Math.round((maxWidth - param.width) / 2);
       param.top = Math.round((maxHeight - param.height) / 2);
       return param;
   }
    function previewImage(file) {
        $(".uploadfront").css("display","none")
        var MAXWIDTH = 50;
        var MAXHEIGHT = 50;
        var div = document.getElementById('preview');
        if(file.files && file.files[0]) {
            div.innerHTML = '<img id=imghead onclick=$("#previewImg").click()>';
            var img = document.getElementById('imghead');
            img.onload = function() {
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.width = rect.width;
                img.height = rect.height;
                //                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top + 'px';
            }
            var reader = new FileReader();
            reader.onload = function(evt) {
                img.src = evt.target.result;
            }
            reader.readAsDataURL(file.files[0]);
        } else //兼容IE
        {
            var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
            div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
        }

    }



    $('.save').click(function () {
        var file = document.getElementById("previewImg").files[0];
        // console.log(file);
        if(file != undefined ){
            var formData = new FormData();
            formData.append('file',file);
            $.ajax({
                url: "{:url('Member/change')}",
                type: "POST",
                data: formData,
                /**
                 *必须false才会自动加上正确的Content-Type
                 */
                contentType: false,
                /**
                 * 必须false才会避开jQuery对 formdata 的默认处理
                 * XMLHttpRequest会对 formdata 进行正确的处理
                 */
                processData: false,
                success: function (data) {
                    if(data.code == 1){
                        $('#imghead').attr('src',data.data[0]);
                        popup('上传成功');
                    }else{
                        popup(data.message)
                    }
                    console.log(data);
                },
                error: function () {
                    alert("上传失败!");
                }
            });
        }else{
            popup('修改成功');
        }

    })

</script>
</body>
</html>