mirror of https://github.com/1099438829/apeblog
431 lines
19 KiB
HTML
431 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
|
||
<title>个人信息 - {:system_config('title')}后台管理系统</title>
|
||
<link rel="icon" href="{:system_config('favicon')}" type="image/ico">
|
||
<meta name="keywords" content="{:system_config('keywords')}">
|
||
<meta name="description" content="{:system_config('description')}">
|
||
<meta name="author" content="{:system_config('author')}">
|
||
<link href="/static/admin/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="/static/admin/css/materialdesignicons.min.css" rel="stylesheet">
|
||
<link href="/static/admin/css/style.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="/static/admin/js/jconfirm/jquery-confirm.min.css">
|
||
<link href="/static/admin/css/cropper.min.css" rel="stylesheet">
|
||
<style type="text/css">
|
||
/* 裁剪样式 */
|
||
.image-wrapper {
|
||
height: 364px;
|
||
width: 100%;
|
||
box-shadow: inset 0 0 3px rgba(0, 0, 0, .075);
|
||
background-color: #fcfdfe;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.image-preview {
|
||
float: left;
|
||
margin-bottom: 0.5rem;
|
||
margin-right: 0.5rem;
|
||
border: 1px solid #f1f2f3;
|
||
border-radius: 2px;
|
||
background-color: #fff;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.image-preview img {
|
||
vertical-align: top;
|
||
}
|
||
|
||
.preview-lg {
|
||
height: 9rem;
|
||
width: 16rem;
|
||
}
|
||
|
||
.preview-md {
|
||
height: 4.5rem;
|
||
width: 8rem;
|
||
}
|
||
|
||
.preview-sm {
|
||
height: 2.25rem;
|
||
width: 4rem;
|
||
}
|
||
|
||
.preview-xs {
|
||
height: 1.125rem;
|
||
margin-right: 0;
|
||
width: 2rem;
|
||
}
|
||
|
||
@media (max-width: 991px) {
|
||
#image-modal .image-btns {
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
|
||
/* loading样式 - 可整体替换之前的loading */
|
||
@-webkit-keyframes spinner-border {
|
||
to {
|
||
-webkit-transform: rotate(360deg);
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes spinner-borderspinner-border {
|
||
to {
|
||
-webkit-transform: rotate(360deg);
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
.spinner-border {
|
||
display: inline-block;
|
||
vertical-align: text-bottom;
|
||
border: 0.125em solid currentColor;
|
||
border-right-color: transparent;
|
||
border-radius: 50%;
|
||
-webkit-animation: spinner-border .75s linear infinite;
|
||
animation: spinner-border .75s linear infinite;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container-fluid p-t-15">
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<div class="edit-avatar">
|
||
<img src="{$info.avatar}" alt="{$info.name}" class="img-avatar">
|
||
<div class="avatar-divider"></div>
|
||
<div class="edit-avatar-content">
|
||
<button class="btn btn-default trigger-btn">修改头像</button>
|
||
<p class="m-0">选择一张你喜欢的图片，裁剪后会自动生成264x264大小，上传图片大小不能超过2M。</p>
|
||
</div>
|
||
</div>
|
||
<hr>
|
||
<form class="site-form">
|
||
<input type="hidden" class="form-control" name="avatar" id="avatar" value="{$info.avatar}"/>
|
||
<div class="form-group">
|
||
<label for="name">用户名</label>
|
||
<input type="text" class="form-control" name="name" id="name" value="{$info.name}"
|
||
disabled="disabled"/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="realname">真实姓名</label>
|
||
<input type="text" class="form-control" name="realname" id="realname"
|
||
value="{$info.realname}" disabled="disabled"/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="nickname">昵称</label>
|
||
<input type="text" class="form-control" name="nickname" id="nickname"
|
||
value="{$info.nickname}"/>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="tel">电话</label>
|
||
<input type="tel" class="form-control" name="tel" id="tel" placeholder="输入您的昵称"
|
||
value="{$info.tel}">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="mail">邮箱</label>
|
||
<input type="email" class="form-control" name="mail" id="mail" aria-describedby="emailHelp"
|
||
placeholder="请输入正确的邮箱地址" value="{$info.mail}">
|
||
<small id="emailHelp" class="form-text text-muted">请保证您填写的邮箱地址是正确的。</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="remark">简介</label>
|
||
<textarea class="form-control" name="remark" id="remark" rows="3">{$info.remark|default="这家伙很懒，什么也没留下"}</textarea>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">保存</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--图片裁剪START-->
|
||
<div class="modal fade" id="image-modal" aria-hidden="true" aria-labelledby="image-modal-label" role="dialog"
|
||
tabindex="-1">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button class="close" data-dismiss="modal" type="button">×</button>
|
||
<h4 class="modal-title" id="image-modal-label">上传图片</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="image-body">
|
||
<div class="image-upload m-b-15">
|
||
<button class="btn btn-primary" type="button" onclick="$('input[id=imageInput]').click();">
|
||
请选择图片
|
||
</button>
|
||
<span class="image-name"></span>
|
||
<input type="file" class="image-input hide" id="imageInput" name="file"
|
||
accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-9 m-b-15">
|
||
<div class="image-wrapper"></div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<div class="image-previews clearfix">
|
||
<div class="image-preview preview-lg"></div>
|
||
<div class="image-preview preview-md"></div>
|
||
<div class="image-preview preview-sm"></div>
|
||
<div class="image-preview preview-xs"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-4 image-btns">
|
||
<button class="btn btn-primary mdi mdi-rotate-left" data-method="rotate" data-option="-45"
|
||
type="button" title="向左旋转-45度"></button>
|
||
<button class="btn btn-primary mdi mdi-rotate-right" data-method="rotate" data-option="45"
|
||
type="button" title="向右旋转45度"></button>
|
||
<button type="button" class="btn btn-primary mdi mdi-magnify-plus-outline"
|
||
data-method="zoom" data-option="0.1" title="放大图片"></button>
|
||
<button type="button" class="btn btn-primary mdi mdi-magnify-minus-outline"
|
||
data-method="zoom" data-option="-0.1" title="缩小图片"></button>
|
||
<button type="button" class="btn btn-primary mdi mdi-cached" data-method="reset"
|
||
title="重置图片"></button>
|
||
</div>
|
||
<div class="col-md-5 image-btns toggles-btns">
|
||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||
<label class="btn btn-primary">
|
||
<input type="radio" name="aspectRatio" id="aspectRatio1" value="1.7777777777777777">
|
||
<span>16:9</span>
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="radio" name="aspectRatio" id="aspectRatio2" value="1.3333333333333333">
|
||
<span>4:3</span>
|
||
</label>
|
||
<label class="btn btn-primary active">
|
||
<input type="radio" name="aspectRatio" id="aspectRatio3" value="1" checked>
|
||
<span>1:1</span>
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="radio" name="aspectRatio" id="aspectRatio4" value="0.6666666666666666">
|
||
<span>2:3</span>
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="radio" name="aspectRatio" id="aspectRatio5" value="NaN">
|
||
<span>自适应</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3">
|
||
<button class="btn btn-primary btn-block upload-btn mdi mdi-content-save" type="submit">
|
||
保存修改
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--图片裁剪END-->
|
||
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
|
||
<script type="text/javascript" src="/static/admin/js/bootstrap.min.js"></script>
|
||
<script type="text/javascript" src="/static/admin/js/main.min.js"></script>
|
||
<script type="text/javascript" src="/static/admin/js/cropper.min.js"></script>
|
||
<script type="text/javascript" src="/static/admin/js/bootstrap-notify.min.js"></script>
|
||
<script type="text/javascript" src="/static/admin/js/lightyear.js"></script>
|
||
<script type="text/javascript" src="/static/admin/js/jquery.lyear.loading.js"></script>
|
||
<script src="/static/admin/js/jconfirm/jquery-confirm.min.js"></script>
|
||
<script>
|
||
$(".site-form").submit(function () {
|
||
if ($("input[name='nickname']").val() == '') lightyear.notify('昵称不能为空', 'danger', 3000, 'mdi mdi-emoticon-neutral', 'top', 'center');
|
||
else if ($("input[name='avatar']").val() == '') lightyear.notify('头像不能为空', 'danger', 3000, 'mdi mdi-emoticon-neutral', 'top', 'center');
|
||
else if ($("input[name='tel']").val() == '') lightyear.notify('电话不能为空', 'danger', 3000, 'mdi mdi-emoticon-neutral', 'top', 'center');
|
||
else if ($("input[name='email']").val() == '') lightyear.notify('邮箱不能为空', 'danger', 3000, 'mdi mdi-emoticon-neutral', 'top', 'center');
|
||
else
|
||
$.post(url = "/admin/admin/changProfile", {
|
||
"nickname": $("input[name='nickname']").val(),
|
||
"avatar": $("input[name='avatar']").val(),
|
||
"tel": $("input[name='tel']").val(),
|
||
"mail": $("input[name='email']").val(),
|
||
"remark": $("textarea[name='remark']").val()
|
||
}, function (res) {
|
||
if (res.status === 200) lightyear.notify(res.msg, 'success', 3000, 'mdi mdi-emoticon-happy', 'top', 'center');
|
||
else lightyear.notify(res.msg, 'danger', 3000, 'mdi mdi-emoticon-neutral', 'top', 'center');
|
||
});
|
||
return false;
|
||
})
|
||
</script>
|
||
<script>
|
||
function cropImage() {
|
||
this.$triggerBtn = $('.trigger-btn'); // 上传按钮
|
||
//this.$imageText = this.$triggerBtn.parent().prev('.image-src'); // 图片地址输入框
|
||
this.$imageModal = $('#image-modal'); // 弹出框
|
||
this.$imageName = this.$imageModal.find('.image-name') // 图片名称
|
||
this.$imageInput = this.$imageModal.find('.image-input'); // file上传文件
|
||
this.$imageUpload = this.$imageModal.find('.image-upload'); // file所在元素
|
||
this.$imageBtns = this.$imageModal.find('.image-btns'); // 图片调整按钮(旋转、放大等)
|
||
this.$imageWrapper = this.$imageModal.find('.image-wrapper'); // 图片处理区域
|
||
this.$imagePreview = this.$imageModal.find('.image-preview'); // 图片裁剪预览区域
|
||
this.$uploadBtn = this.$imageModal.find('.upload-btn'); // 上传按钮
|
||
this.$togglesBtns = this.$imageModal.find('.toggles-btns'); // 比例切换按钮
|
||
this.URL = window.URL || window.webkitURL;
|
||
this.$options = {
|
||
aspectRatio: 1 / 1,
|
||
preview: '.image-preview'
|
||
}; // 配置
|
||
this.init();
|
||
}
|
||
|
||
cropImage.prototype = {
|
||
constructor: cropImage,
|
||
init: function () {
|
||
this.initModal();
|
||
this.addListener();
|
||
},
|
||
initModal: function () {
|
||
this.$imageModal.modal({
|
||
show: false
|
||
});
|
||
|
||
if (!URL) {
|
||
this.$imageInput.prop('disabled', true);
|
||
}
|
||
},
|
||
addListener: function () {
|
||
// 绑定事件
|
||
this.$triggerBtn.on('click', $.proxy(this.click, this));
|
||
this.$imageInput.on('change', $.proxy(this.change, this));
|
||
this.$togglesBtns.on('change', $.proxy(this.choose, this));
|
||
this.$uploadBtn.on('click', $.proxy(this.ajaxUpload, this));
|
||
this.$imageBtns.on('click', $.proxy(this.rotate, this));
|
||
},
|
||
click: function (e) {
|
||
// 点击上传按钮
|
||
this.$imageText = $(e.target).parent().prev('.image-src');
|
||
this.$imageModal.modal('show');
|
||
this.initPreview();
|
||
},
|
||
initPreview: function () {
|
||
this.active = false;
|
||
this.$imageInput.val('');
|
||
this.$imageName.text('');
|
||
this.$imageWrapper.empty();
|
||
// 如果已有图片地址，初始化图片预览区域
|
||
this.$imagePreview.empty();
|
||
// var url = this.$imageText.val();
|
||
// url != "" && this.$imagePreview.html('<img src="' + url + '">');
|
||
},
|
||
change: function () {
|
||
// 选择图片
|
||
var files, file;
|
||
files = this.$imageInput.prop('files');
|
||
|
||
if (files && files.length > 0) {
|
||
file = files[0];
|
||
if (this.isImageFile(file)) {
|
||
this.$imageType = file.type;
|
||
this.$imageName.text(file.name);
|
||
if (this.imageUrl) {
|
||
this.URL.revokeObjectURL(this.imageUrl);
|
||
}
|
||
this.imageUrl = this.URL.createObjectURL(file);
|
||
this.startCropper();
|
||
}
|
||
}
|
||
},
|
||
startCropper: function () {
|
||
// 选择图片后初始化
|
||
if (this.active) {
|
||
this.$image.cropper('replace', this.url);
|
||
} else {
|
||
this.$image = $('<img src="' + this.imageUrl + '">');
|
||
this.$imageWrapper.empty().html(this.$image);
|
||
this.$image.cropper('destroy').cropper(this.$options);
|
||
|
||
this.active = true;
|
||
}
|
||
},
|
||
isImageFile: function (file) {
|
||
// 判断是否图片格式
|
||
if (file.type) {
|
||
return /^image\/\w+$/.test(file.type);
|
||
} else {
|
||
return /\.(jpg|jpeg|png|gif|bmp|tiff)$/.test(file);
|
||
}
|
||
},
|
||
choose: function (e) {
|
||
var $this = $(e.target);
|
||
var name = $this.attr('name');
|
||
|
||
if (!this.active) {
|
||
return;
|
||
}
|
||
|
||
this.$options[name] = $this.val();
|
||
this.$image.cropper('destroy').cropper(this.$options);
|
||
},
|
||
rotate: function (e) {
|
||
// 调整图片操作
|
||
var data;
|
||
if (this.active) {
|
||
data = $(e.target).data();
|
||
if (data.method) {
|
||
this.$image.cropper(data.method, data.option);
|
||
}
|
||
}
|
||
},
|
||
stopCropper: function () {
|
||
// 裁剪上传完成后重置
|
||
if (this.active) {
|
||
this.$image.cropper('destroy');
|
||
this.$image.remove();
|
||
this.$imageModal.modal('hide');
|
||
this.$imageInput.val('');
|
||
this.$imageName.text('');
|
||
this.$togglesBtns.find('#aspectRatio3').attr('checked', true);
|
||
this.active = false;
|
||
}
|
||
},
|
||
ajaxUpload: function () {
|
||
var cas = this.$image.cropper('getCroppedCanvas'),
|
||
base64Data = cas.toDataURL(this.$imageType),
|
||
_this = this,
|
||
$loading;
|
||
|
||
// ajax上传
|
||
$.ajax("/admin/files/baseToImage", {
|
||
type: 'post',
|
||
data: {"image": base64Data},
|
||
dataType: 'json',
|
||
beforeSend: function () {
|
||
_this.$uploadBtn.prop('disabled', true);
|
||
$loading = $('.upload-btn').lyearloading({
|
||
opacity: 0.2,
|
||
spinnerSize: 'nm'
|
||
});
|
||
},
|
||
success: function (data) {
|
||
if ($.isPlainObject(data) && (data.state === 200 || data.status === 200 || data.code === 200)) {
|
||
$("#avatar").val(data.data.src);
|
||
$(".img-avatar").attr("src", data.data.src);
|
||
_this.$imageText.val(data.data.src);
|
||
_this.stopCropper();
|
||
} else {
|
||
lightyear.notify(data.message, 'danger', 3000);
|
||
}
|
||
},
|
||
error: function (XMLHttpRequest, textStatus, errorThrown) {
|
||
console.log(textStatus);
|
||
},
|
||
complete: function () {
|
||
_this.$uploadBtn.prop('disabled', false);
|
||
$loading.destroy();
|
||
}
|
||
});
|
||
}
|
||
};
|
||
$(document).ready(function () {
|
||
new cropImage();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |