更新layui，新增个人信息修改

2021-04-01 23:51:41 +08:00
parent 3e98b4e656
commit b9301046da
426 changed files with 164950 additions and 82432 deletions
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+<head>
+        <link rel="stylesheet" href="{{ url_for('static', filename='/admin/component/pear/css/pear.css') }}" />
+        <link rel="stylesheet" href="{{ url_for('static', filename='/admin/admin/css/other/console1.css') }}" />
+</head>
+<body class="pear-container">
+<div class="layui-row layui-col-space15">
+    <div class="layui-col-xs9">
+        <div style="height:325px;background-color: rgb(247, 247, 247);">
+            <img id="sourceImage" src="">
+        </div>
+    </div>
+    <div class="layui-col-xs3" style="padding-left:0px;">
+        <div id="previewImage" style="width:210px;height:210px;border: 1px solid rgb(200, 200, 200);border-radius: 50%;overflow:hidden;">
+        </div>
+    </div>
+</div>
+<div class="layui-row">
+    <div class="layui-form-item">
+        <div class="layui-input-inline layui-btn-container" style="width: auto;vertical-align:top;">
+            <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-left" cropper-event="rotate" data-option="-15" title="左旋15°"></button>
+            <button class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-right" cropper-event="rotate" data-option="15" title="右旋15°"></button>
+            <button class="pear-btn pear-btn-sm pear-btn-danger layui-icon layui-icon-refresh" cropper-event="reset" title="重置"></button>
+            <label for="uploadPicture" class="pear-btn pear-btn-sm pear-btn-primary layui-icon layui-icon-upload" title="选择图片"></label>
+            <input class="layui-upload-file" id="uploadPicture" type="file" value="选择图片">
+        </div>
+        <div class="layui-form-mid layui-word-aux">建议:图片的尺寸宽高比为1:1,大小在5m以内。</div>
+    </div>
+</div>
+</body>
+<script src="{{ url_for('static', filename='admin/component/layui/layui.js') }}"></script>
+<script src="{{ url_for('static', filename='admin/component/pear/pear.js') }}"></script>
+<script>
+    layui.use(['jquery','layer','cropper','popup'], function () {
+        let $ = layui.jquery;
+        let layer = layui.layer;
+        let cropper = layui.cropper;
+        let popup = layui.popup;
+
+        let options = {
+            aspectRatio: 1 / 1, // 裁剪框比例
+            preview: '#previewImage', // 预览div
+            viewmode: 1
+        };
+
+        $("#sourceImage").attr("src", parent.layui.$("#avatar").attr("src"));
+        $("#sourceImage").cropper(options);
+
+        window.submitForm = function () {
+            $("#sourceImage").crossOrigin = 'anonymous';//解决跨域图片问题
+            $("#sourceImage").cropper("getCroppedCanvas", {
+                width: 280,
+                height: 140
+            }).toBlob(function (blob) {
+                let timeStamp = Date.parse(new Date());
+                let fileName = timeStamp + '.jpg';
+                let formData = new FormData();
+                formData.append('file', blob, fileName);
+                formData.append('fileName', fileName);
+                formData.append('fileToken', timeStamp);
+                $.ajax({
+                     method: "post",
+                     url: "/admin/file/upload", //用于文件上传的服务器端请求地址
+                     data: formData,
+                     processData: false,
+                     contentType: false,
+                     success: function (result) {
+                         if(result.success){
+                                 // 修改 avatar 字段
+                                 $.ajax({
+                                     method:"put",
+                                     url: "/admin/user/updateAvatar",
+                                     data: JSON.stringify({avatar:result.data}),
+                                     dataType: "json",
+                                     contentType: 'application/json',
+                                     success:function(resu){
+                                         if(resu.success){
+                                             // 关闭当前弹层
+                                             parent.layui.$("#avatar").attr("src", result.data.src);
+                                             top.layui.$("#avatar").attr("src", result.data.src);
+                                             parent.layer.close(parent.layer.getFrameIndex(window.name));
+                                         }else{
+                                             popup.failure("上传失败")
+                                         }
+                                     }
+                                 })
+                         }else{
+                             popup.failure("上传失败")
+                         }
+                     }
+                });
+            });
+        }
+
+        $(".pear-btn").on('click', function () {
+            let event = $(this).attr("cropper-event");
+            if (event === 'rotate') {
+                let option = $(this).attr('data-option');
+                $("#sourceImage").cropper('rotate', option);
+            } else if (event === 'reset') {
+                $("#sourceImage").cropper('reset');
+            }
+            $("#uploadPicture").change(function () {
+                let r = new FileReader();
+                let f = this.files[0];
+                let uploadFileSize = f.size / 1024;
+                if (uploadFileSize > 5120) {
+                    parent.layer.msg("上传文件不得超过5m", { icon: 5 });
+                    return false;
+                }
+                r.readAsDataURL(f);
+                r.onload = function (e) {
+                    $("#sourceImage")
+                        .cropper('destroy')
+                        .attr('src', this.result)
+                        .cropper(options);
+                };
+            });
+        });
+    });
+</script>