reghao
/
devops


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
							<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
</head>
<body>
<div class="layui-form timo-compile user-info-page">
    <div class="user-info">
        <div class="user-avatar-box">
            <img class="user-avatar" th:src="@{${user.avatarUrl}}" alt="头像">
            <span class="edit-avatar" th:attr="data-url=@{/rbac/user/avatar}">修改头像</span>
        </div>
        <ul class="detail-info">
            <li>账号：<span th:text="${user.username}" th:title="${user.username}"></span></li>
            <li>昵称：<span th:text="${user.screenName}" th:title="${user.screenName}"></span></li>
            <li>电话：<span th:text="${user.mobile}" th:title="${user.mobile}"></span></li>
        </ul>
    </div>
    <form class="user-edit" th:action="@{/rbac/user/update}">
        <input type="hidden" name="userId" th:value="${user.id}"/>
        <div class="layui-form-item">
            <label class="layui-form-label">显示名</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="screenName" placeholder="请输入用户昵称" th:value="${user.screenName}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="mobile" placeholder="请输入电话号码" th:value="${user.mobile}">
            </div>
        </div>
        <!--<div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="email" placeholder="请输入邮箱" th:value="${user.email}">
            </div>
        </div>-->
        <!--<div class="layui-form-item">
            <label class="layui-form-label">选择性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="gender" value="0" title="女" checked><div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>男</div></div>
                <input type="radio" name="gender" value="1" title="男" th:checked="${user.gender} eq 1"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>女</div></div>
                <input type="radio" name="gender" value="2" title="未知" th:checked="${user.gender} eq 2"><div class="layui-unselect layui-form-radio"><i class="layui-anim layui-icon"></i><div>未知</div></div>
            </div>
        </div>-->
        <div class="layui-form-item timo-finally">
            <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
            <a class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</a>
        </div>
    </form>
    <!-- 编辑头像面板 -->
    <div class="canvas-panel">
        <img class="canvas-bg"/>
        <div class="canvas-shade"></div>
        <canvas class="canvas-crop"></canvas>
    </div>
    <div class="canvas-group layui-btn-group">
        <button class="upload-close layui-btn layui-btn-primary layui-btn-sm">取消</button>
        <button class="upload-btn layui-btn layui-btn-primary layui-btn-sm">保存</button>
    </div>
</div>
<script th:replace="/common/template :: script"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery-2.2.4.min.js}"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery.mousewheel.min.js}"></script>
<script>
    layui.use(['jquery','upload'], function () {
        var $ = layui.jquery;
        var upload = layui.upload;

        $(".user-edit").on("mousedown", function () {
            $(this).css("opacity", 1);
        });

        /* 修改头像 */
        var image = new Image();
        var panel = $(".canvas-panel");
        var bgImg = $(".canvas-bg");
        var canvas = $(".canvas-crop");

        // 激活或停止移动
        var moveEvent = false;
        var screenX = 0, screenY = 0;
        var moveTop = 0, moveLeft = 0;
        panel.on("mousedown",function (e) {
            screenX = e.screenX;
            screenY = e.screenY;
            moveTop = parseFloat(bgImg.css("top"));
            moveLeft = parseFloat(bgImg.css("left"));
            moveEvent = true;
        });
        panel.on("mouseup",function (e) {
            moveEvent = false;
        });
        panel.on("mousemove", function (e) {
            if (moveEvent){
                bgImg.css("left", moveLeft + e.screenX - screenX);
                bgImg.css("top", moveTop + e.screenY - screenY);
                renderPanel();
            }
        });
        panel.on("mousewheel", function(event, delta) {
            var dir = delta > 0 ? 'Up' : 'Down';
            var width = parseFloat(bgImg.css("width"));
            var height = parseFloat(bgImg.css("height"));
            if (dir == 'Up') {
                delta = 1;
            } else {
                delta = -1;
            }
            bgImg.css("width", width * (1 + 0.1 * delta));
            bgImg.css("height", height * (1 + 0.1 * delta));
            bgImg.css("left", parseFloat(bgImg.css("left")) - (width * 0.1 / 2) * delta);
            bgImg.css("top", parseFloat(bgImg.css("top")) - (height * 0.1 / 2) * delta);
            renderPanel();
            return false;
        });

        // 渲染画布面板
        function renderPanel() {
            canvas[0].width = 256;
            canvas[0].height = 256;
            var imgScale = image.width / bgImg.width();
            var context = canvas[0].getContext('2d');
            var sx = (bgImg.width() * imgScale / 2 ) - canvas.width() / 2 * imgScale,
                sy = (bgImg.height() * imgScale / 2) - canvas.height() / 2 * imgScale,
                sw = canvas.width() * imgScale, sh = canvas.height() * imgScale;
            var moveX = panel.width() / 2 - parseFloat(bgImg.css("left")) - bgImg.width() / 2;
            var moveY = panel.height() / 2 - parseFloat(bgImg.css("top")) - bgImg.height() / 2;
            context.drawImage(image, sx + moveX * imgScale, sy + moveY * imgScale, sw, sh, 0, 0, canvas[0].width, canvas[0].height);
        }

        var files = [];
        var uploadInst = upload.render({
            elem: '.edit-avatar'
            ,field: 'picture'
            ,url: $('.edit-avatar').data('url')
            ,exts: 'jpg|png|gif|jpeg'
            ,auto: false
            ,bindAction: ".upload-btn"
            // 选择文件回调
            ,choose: function(obj){
                obj.preview(function(index, file, result){
                    panel.show();
                    $(".canvas-group").show();
                    image.src = result;
                    image.onload = function(){
                        bgImg.attr("src", result);
                        if(bgImg.width() >= bgImg.height()){
                            bgImg.css("height", canvas.width());
                        }else {
                            bgImg.css("width", canvas.height());
                        }
                        bgImg.css("top", (panel.height() - bgImg.height()) / 2);
                        bgImg.css("left", (panel.width() - bgImg.width()) / 2);
                        renderPanel();
                    }
                });
            }
            ,before: function(obj){
                files = obj.pushFile();
                var index, file;
                for(index in files) {
                    file = files[index];
                }
                var dataurl = canvas[0].toDataURL(file.type, 0.92);
                var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while(n--){
                    u8arr[n] = bstr.charCodeAt(n);
                }
                files[index] = new File([u8arr], file.name, {type:mime});
            }
            ,done: function(res, index){
                if(res.code === 0){
                    panel.hide();
                    $(".canvas-group").hide();
                    layer.msg("修改头像成功", {offset: '15px', time: 3000, icon: 1});
                    $(".user-avatar").attr("src", canvas[0].toDataURL());
                    delete files[index];
                }else {
                    layer.msg(res.msg, {offset: '15px', time: 3000, icon: 2});
                }
            }
        });

        // 关闭裁切面板及清空文件
        $(".upload-close").on("click", function () {
            panel.hide();
            $(".canvas-group").hide();
        });
    });
</script>
</body>
</html>