131 lines
6.5 KiB
HTML
131 lines
6.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>头像设置 - 后台管理</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="/assets/layui/css/layui.css">
|
|
<link rel="stylesheet" href="/assets/ywxapp/modules/cropper/cropper.css">
|
|
<style>
|
|
body { background: #f2f3f5; }
|
|
.uc-head { background: #fff; border-bottom: 1px solid #eee; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
|
|
.uc-head .title { font-size: 16px; font-weight: 700; }
|
|
.uc-wrap { max-width: 960px; margin: 16px auto; padding: 0 14px; }
|
|
.readyimg { background: #f7f7f7; height: 420px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
|
|
.readyimg img { max-width: 100%; max-height: 100%; display: block; }
|
|
.img-preview { width: 150px; height: 150px; overflow: hidden; border-radius: 50%; border: 1px solid #eee; background: #f7f7f7; }
|
|
.img-preview img { width: 100%; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="uc-wrap">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">设置头像</div>
|
|
<div class="layui-card-body">
|
|
<div class="layui-form-item">
|
|
<button type="button" class="layui-btn layui-btn-primary" id="pickBtn">
|
|
<i class="layui-icon"></i> 选择图片
|
|
</button>
|
|
<input id="avatarImgUpload" type="file" accept="image/*" name="file" style="display:none">
|
|
<div class="layui-form-mid layui-word-aux">支持 jpg / png / gif，建议尺寸 150x150 以上，大小 4M 以内</div>
|
|
</div>
|
|
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md9">
|
|
<div class="readyimg"><img id="cropImage" src=""></div>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<div class="layui-form-mid">预览：</div>
|
|
<div class="img-preview" style="margin-top:8px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-row layui-col-space15" style="margin-top:14px;">
|
|
<div class="layui-col-md9">
|
|
<button type="button" class="layui-btn" id="rotateLeft"><i class="layui-icon layui-icon-left"></i> 向左旋转</button>
|
|
<button type="button" class="layui-btn" id="rotateRight"><i class="layui-icon layui-icon-right"></i> 向右旋转</button>
|
|
<button type="button" class="layui-btn" id="resetImg"><i class="layui-icon layui-icon-refresh"></i> 重置</button>
|
|
</div>
|
|
<div class="layui-col-md3">
|
|
<button type="button" class="layui-btn layui-btn-fluid" id="confirmSave">保存修改</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/assets/layui/layui.js"></script>
|
|
<script>
|
|
layui.config({ base: '/assets/ywxapp/modules/' }).extend({ cropper: 'cropper/cropper' });
|
|
|
|
layui.use(['jquery', 'layer', 'cropper', 'http'], function () {
|
|
var $ = layui.$;
|
|
var layer = layui.layer;
|
|
var http = layui.http;
|
|
var $image = $('#cropImage');
|
|
var options = { aspectRatio: 1 / 1, preview: '.img-preview', viewMode: 1 };
|
|
var cropped = false;
|
|
|
|
$('#pickBtn').on('click', function () { $('#avatarImgUpload').click(); });
|
|
$('#avatarImgUpload').on('change', function () {
|
|
var file = this.files[0];
|
|
if (!file) return;
|
|
var reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
$image.attr('src', e.target.result);
|
|
$image.off('load.crop').on('load.crop', function () {
|
|
if (cropped) { $image.cropper('destroy'); }
|
|
$image.cropper(options);
|
|
cropped = true;
|
|
});
|
|
};
|
|
reader.readAsDataURL(file);
|
|
this.value = '';
|
|
});
|
|
|
|
$('#rotateLeft').on('click', function () { if (cropped) $image.cropper('rotate', -15); });
|
|
$('#rotateRight').on('click', function () { if (cropped) $image.cropper('rotate', 15); });
|
|
$('#resetImg').on('click', function () { if (cropped) $image.cropper('reset'); });
|
|
|
|
$('#confirmSave').on('click', function () {
|
|
if (!cropped) { layer.msg('请先选择图片', { icon: 2 }); return; }
|
|
var canvas = $image.cropper('getCroppedCanvas', { width: 300, height: 300 });
|
|
if (!canvas) { layer.msg('裁剪失败，请重试', { icon: 2 }); return; }
|
|
layer.load(1, { shade: [0.3, '#fff'] });
|
|
canvas.toBlob(function (blob) {
|
|
var fd = new FormData();
|
|
fd.append('file', blob, 'avatar.png');
|
|
fd.append('type', 'avatar');
|
|
http.post("{:url('Profile/avatar')}", fd).then(function (res) {
|
|
layer.closeAll('loading');
|
|
if (res.code === 0 && res.data && res.data.src) {
|
|
layer.msg(res.msg || '头像上传成功', { icon: 1 });
|
|
refreshTopAvatar(res.data.src);
|
|
} else {
|
|
layer.msg(res.msg || '上传失败', { icon: 2 });
|
|
}
|
|
}).catch(function () {
|
|
layer.closeAll('loading');
|
|
layer.msg('网络错误，上传失败', { icon: 2 });
|
|
});
|
|
}, 'image/png');
|
|
});
|
|
|
|
function refreshTopAvatar(src) {
|
|
try {
|
|
if (window !== top && parent.layui && parent.layui.ywxapp) {
|
|
var ts = '?t=' + Date.now();
|
|
parent.document.querySelectorAll('img.layui-nav-img').forEach(function (im) {
|
|
im.src = src + ts;
|
|
});
|
|
setTimeout(function () { parent.layui.ywxapp.closeThisTabs(); }, 700);
|
|
return;
|
|
}
|
|
} catch (e) { /* 跨域等情况忽略 */ }
|
|
setTimeout(function () { location.href = '/admin/index/index'; }, 700);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|