hawind/gdoo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

创建版本

Browse Source
This commit is contained in:
hawind
2021-02-22 12:17:00 +08:00
commit af555f49c3
2332 changed files with 369202 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Gdoo/User/views/profile/avatar.blade.php
+128
View File
@@ -0,0 +1,128 @@
<div class="wrapper-sm">
<div class="avatar-form">
<div class="col-sm-9">
<div class="image-box">
<img id="image" class="hide">
</div>
</div>
<div class="col-sm-3">
<div class="preview-box" style="width:150px;height:150px;">
<div class="preview" style="width:148px;height:148px;"></div>
</div>
<div class="preview-box" style="width:98px;height:98px;">
<div class="preview" style="width:96px;height:96px;"></div>
</div>
<div class="preview-box" style="width:50px;height:50px;">
<div class="preview" style="width:48px;height:48px;"></div>
</div>
</div>
<div class="clearfix"></div>
<div class="btn-avatar">
<input class="hide" id="avatarInput" name="image" type="file">
<a class="btn btn-info" onclick="$('#avatarInput').click();"><i class="fa fa-cloud-upload"></i> 上传文件</a>
<a class="btn btn-success" id="avatarCrop"><i class="fa fa-crop"></i> 裁剪</a>
</div>
</div>
</div>
<style>
.avatar-form {
position: relative;
}
.btn-avatar {
position:absolute;
bottom: 0;
right: 46px;
}
.preview-box {
border: 1px solid #eee;
padding: 0;
margin-bottom: 10px;
}
.preview {
display: block;
overflow: hidden;
}
.image-box {
border: 1px solid #eee;
height: 420px;
background-image: url(/assets/images/wf_canvas_bg.png);
background-position: -1px -1px;
}
#image {
max-width: 100%;
height: 420px;
border: 1px solid #eee;
display: block;
}
.col-sm-9 {
padding-left: 5px;
}
</style>
<link href="{{$asset_url}}/vendor/cropper/cropper.min.css" rel="stylesheet" type="text/css" />
<script src="{{$asset_url}}/vendor/cropper/cropper.min.js" type="text/javascript"></script>
<script>
$(function () {
var options = {
aspectRatio: 1,
autoCropArea: 0.5,
preview: '.preview',
}
var $image = $('#image').cropper(options);
var $inputImage = $('#avatarInput');
var uploadedImageURL = null;
if (URL) {
$inputImage.on('change', function () {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
uploadedImageName = file.name;
uploadedImageType = file.type;
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
}
uploadedImageURL = URL.createObjectURL(file);
$image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
$inputImage.val('');
} else {
window.alert('请选择图片文件');
}
}
});
} else {
$inputImage.prop('disabled', true).parent().addClass('disabled');
}
$('#avatarCrop').on('click', function() {
$image.cropper('getCroppedCanvas', {width: 128, height: 128}).toBlob(function (blob) {
var formData = new FormData();
formData.append('image', blob);
$.ajax('{{url()}}', {
method: "post",
data: formData,
processData: false,
contentType: false,
success: function (res) {
$('#user-avatar').attr('src', app.url('uploads/avatar/' + res.data) + '?s=' + Math.random());
toastrSuccess('头像上传成功。');
$('#modal-avatar-dialog').dialog('close');
},
error: function () {
toastrError('头像上传失败。');
}
});
});
});
});
</script>
app/Gdoo/User/views/profile/index.blade.php
+137
View File
@@ -0,0 +1,137 @@
<form method="post" action="{{url()}}" id="profile" name="profile">
<div class="panel">
<div class="panel-heading tabs-box">
<ul class="nav nav-tabs">
<li class="@if(Request::action() == 'index') active @endif">
<a class="text-sm" href="{{url('index')}}">我的资料</a>
</li>
<li class="@if(Request::action() == 'password') active @endif">
<a class="text-sm" href="{{url('password')}}">修改密码</a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-2">
<div class="text-center">
<span class="thumb-lg w-auto-folded avatar m-t-sm">
<a href="javascript:avatar();" class="hinted" title="修改头像"><img src="{{avatar(Auth::user()->avatar)}}" id="user-avatar" class="img-full" alt="{{Auth::user()->name}}"></a>
<div class="h4 font-thin m-t-sm">{{Auth::user()->login}}</div>
</span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">主题</label>
<select id="change-theme" class="form-control input-sm" name="theme" id="theme">
<?php $themes = ['primary' => '原色', 'blue2' => '科技蓝', 'blue' => '经典蓝', 'wood' => '木质纸', 'purple' => '个性紫', 'green' => '绿色', 'lilac' => '淡紫色']; ?>
@if($themes)
@foreach($themes as $theme_key => $theme)
<option value="{{$theme_key}}" @if($user->theme == $theme_key) selected @endif>{{$theme}}</option>
@endforeach
@endif
</select>
</div>
<div class="form-group">
<label class="control-label">
头像显示
</label>
<select id="avatar_show" class="form-control input-sm" name="avatar_show">
<?php $avatar_shows = ['1' => '显示', '0' => '隐藏']; ?>
@if($avatar_shows)
@foreach($avatar_shows as $k => $v)
<option value="{{$k}}" @if($user->avatar_show == $k) selected @endif>{{$v}}</option>
@endforeach
@endif
</select>
</div>
<div class="form-group">
<label class="control-label">安全密钥</label>
<strong>{{$user->auth_secret}}</strong>
<span class="qrcodeTotp" style="display:none;">
<div id="qrcode_canvas"></div>
<div id="qrcode_img"></div>
</span>
<a href="javascript:;" onclick="qrcodeTotp();">
<i class="fa fa-qrcode"></i>
</a>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="col-sm-offset-2">
<button type="button" onclick="history.back();" class="btn btn-default">返回</button>
<button type="button" id="profile-form-submit" class="btn btn-success"><i class="fa fa-check-circle"></i> 提交</button>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="{{$asset_url}}/vendor/jquery.qrcode.min.js"></script>
<script>
function qrcodeTotp() {
$.messager.alert("二次验证二维码", '<div align="center">' + $("#qrcode_img").prop("outerHTML") + '</div>');
}
function qrcodeMake(qrcode_canvas, qrcode_image) {
$("#" + qrcode_canvas).qrcode({
render: "canvas",
text: "{{$secretURL}}",
correctLevel: 1,
width: 220,
height: 220
});
var canvas = $('#' + qrcode_canvas).find('canvas')[0];
var image = new Image();
image.src = canvas.toDataURL("image/png");
$('#' + qrcode_image).append(image);
}
$(function() {
// 生成二维码
qrcodeMake('qrcode_canvas', 'qrcode_img');
// 主题修改
$('#change-theme').on('change', function() {
var e = $(this).val();
$('body').attr('class', 'theme-' + e);
top.$('body').attr('class', 'theme-' + e);
});
ajaxSubmit('profile', function(res) {
if (res.status) {
toastrSuccess(res.data);
} else {
toastrError(res.data);
}
});
});
function avatar() {
viewDialog({
title: '修改头像',
url: '{{url("avatar")}}',
dialogClass: 'modal-lg',
id: 'avatar-dialog',
buttons: [{
text: "确定",
'class': "btn-default",
click: function() {
$(this).dialog("close");
}
}]
});
}
</script>
app/Gdoo/User/views/profile/password.blade.php
+84
View File
@@ -0,0 +1,84 @@
<form method="post" action="{{url()}}" id="password" name="password">
<div class="panel">
<div class="panel-heading tabs-box">
<ul class="nav nav-tabs">
<li class="@if(Request::action() == 'index') active @endif">
<a class="text-sm" href="{{url('index')}}">我的资料</a>
</li>
<li class="@if(Request::action() == 'password') active @endif">
<a class="text-sm" href="{{url('password')}}">修改密码</a>
</li>
</ul>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-2">
<div class="text-center">
<span class="thumb-lg w-auto-folded avatar m-t-sm">
<a href="javascript:avatar();" class="hinted" title="修改头像"><img src="{{avatar(Auth::user()->avatar)}}" id="user-avatar" class="img-full" alt="{{Auth::user()->name}}"></a>
<div class="h4 font-thin m-t-sm">{{Auth::user()->login}}</div>
</span>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label class="control-label">旧密码</label>
<input type="password" class="form-control input-sm" id="old_password" name="old_password" placeholder="请输入旧密码">
</div>
<div class="form-group">
<label class="control-label">新密码</label>
<input type="password" class="form-control input-sm" id="new_password" name="new_password" placeholder="请输入新密码">
</div>
<div class="form-group">
<label class="control-label">确认新密码</label>
<input type="password" id="new_password_confirmation" name="new_password_confirmation" class="form-control input-sm" placeholder="请输入再次输入新密码">
</div>
</div>
</div>
</div>
<div class="panel-footer">
<div class="col-sm-offset-2">
<button type="button" onclick="history.back();" class="btn btn-default">返回</button>
<button type="submit" id="password-form-submit" class="btn btn-success"><i class="fa fa-check-circle"></i> 提交</button>
</div>
</div>
</div>
</form>
<script>
ajaxSubmit('password', function(res) {
if (res.status) {
toastrSuccess(res.data);
} else {
toastrError(res.data);
}
});
function avatar() {
viewDialog({
title: '修改头像',
url: '{{url("avatar")}}',
dialogClass: 'modal-lg',
id: 'avatar-dialog',
buttons: [{
text: "确定",
'class': "btn-default",
click: function() {
$(this).dialog("close");
}
}]
});
}
</script>