sileya-ai
/
vr-shopxo-source
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

用户头像

feat/task1-c-wallet
gongfuxiang 2018-10-16 01:58:32 +08:00
parent f5284c28d4
commit 07d6be704a
13 changed files with 2454 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
service/Application/Home/View/Default/Public/Footer.html
View File

@ -22,6 +22,9 @@
<js href="__PUBLIC__/Common/Lib/amazeui-chosen/amazeui.chosen.min.js?v={{:MyC('home_static_cache_version')}}" />
<js href="__PUBLIC__/Common/Lib/amazeui-dialog/amazeui.dialog.min.js?v={{:MyC('home_static_cache_version')}}" />
<!-- 图像裁剪插件 -->
<js href="__PUBLIC__/Common/Lib/cropper/cropper.min.js?v={{:MyC('home_static_cache_version')}}" />
<!-- ueditor 编辑器 -->
<js href="__PUBLIC__/Common/Lib/ueditor/ueditor.config.js?v={{:MyC('home_static_cache_version')}}" />
<js href="__PUBLIC__/Common/Lib/ueditor/ueditor.all.js?v={{:MyC('home_static_cache_version')}}" />

1
service/Application/Home/View/Default/Public/Header.html
View File

@ -14,6 +14,7 @@
<css href="__PUBLIC__/Common/Lib/assets/css/amazeui.css?v={{:MyC('home_static_cache_version')}}" />
<css href="__PUBLIC__/Common/Lib/amazeui-switch/amazeui.switch.css?v={{:MyC('home_static_cache_version')}}" />
<css href="__PUBLIC__/Common/Lib/amazeui-chosen/amazeui.chosen.css?v={{:MyC('home_static_cache_version')}}" />
<css href="__PUBLIC__/Common/Lib/cropper/cropper.min.css?v={{:MyC('home_static_cache_version')}}" />
<css href="__PUBLIC__/Common/Css/Common.css?v={{:MyC('home_static_cache_version')}}" />
<css href="__PUBLIC__/Home/{{$default_theme}}/Css/Common.css?v={{:MyC('home_static_cache_version')}}" />

42
service/Application/Home/View/Default/Public/UserMenu.html
View File

@ -26,4 +26,44 @@
</ul>
</div>
</div>
<a href="javascript:;" class="am-icon-btn am-icon-th-list am-show-sm-only user-menu" data-am-offcanvas="{target: '#user-offcanvas'}"></a>
<a href="javascript:;" class="am-icon-btn am-icon-th-list am-show-sm-only user-menu" data-am-offcanvas="{target: '#user-offcanvas'}"></a>
<!-- 头像修改 -->
<div class="am-popup common-cropper-popup" id="user-head-popup">
<div class="am-popup-inner">
<div class="am-popup-hd meila-radius">
<h4 class="am-popup-title">头像上传</h4>
<span data-am-modal-close class="am-close">&times;</span>
</div>
<div class="am-popup-bd">
<form enctype="multipart/form-data" method="post" action="<{$__ROOT__}>index.php?g=Update&c=UserInfo&f=Head">
<input type="hidden" name="MAX_FILE_SIZE" value="<{$max_file_size}>" />
<div class="cropper-images-view">
<div class="img-container am-fl user-head-img-container">
<img src="__PUBLIC__/Home/{{$default_theme}}/Images/default-user-avatar.jpg" alt="Picture" />
</div>
<div class="img-preview preview-lg am-fl am-radius user-head-img-preview am-hide-sm-only"></div>
<div class="img-preview preview-md am-fl am-radius user-head-img-preview "></div>
<div class="img-preview preview-sm am-fl am-radius user-head-img-preview "></div>
<input type="hidden" name="img_x" id="user-head-img_x" />
<input type="hidden" name="img_y" id="user-head-img_y" />
<input type="hidden" name="img_width" id="user-head-img_width" />
<input type="hidden" name="img_height" id="user-head-img_height" />
<input type="hidden" name="img_rotate" id="user-head-img_rotate" />
</div>
<div class="submit-operation">
<button type="button" class="am-btn am-btn-default am-fl am-icon-search-plus am-icon-sm am-btn-xs am-radius" data-method="zoom" data-option="0.1"></button>
<div class="am-form-group am-form-file am-fl">
<button type="button" class="am-btn am-btn-default am-btn-sm cropper-input-images-submit">
<i class="am-icon-cloud-upload"></i> 选择图片</button>
<input type="file" name="file" multiple accept="image/gif,image/jpeg,image/jpg,image/png" />
</div>
<button type="button" class="am-btn am-btn-default am-fl am-icon-search-minus am-icon-sm am-btn-xs am-radius" data-method="zoom" data-option="-0.1"></button>
</div>
<button type="submit" class="am-btn am-btn-primary am-btn-sm am-radius head-submit">确认提交</button>
<span class="from-text-tips ml-cr-f00 none">请上传图片</span>
</form>
</div>
</div>
</div>

2
service/Application/Home/View/Default/User/Index.html
View File

@ -34,7 +34,7 @@
<p class="user-name">{{$user.user_name_view}}</p>
</div>
<div class="items">
<a href="{{:U('Home/Personal/Avatar')}}" class="am-icon-camera-retro"> 修改头像</a>
<a href="javascript:;" class="am-icon-camera-retro" data-am-modal="{target:'#user-head-popup'}"> 修改头像</a>
<a href="{{:U('Home/Personal/SaveInfo')}}" class="am-icon-edit"> 修改资料</a>
<a href="{{:U('Home/UserAddress/Index')}}" class="am-icon-street-view"> 我的地址</a>
</div>

248
service/Public/Common/Lib/cropper/cropper.css Executable file
View File

@ -0,0 +1,248 @@
/*!
* Cropper v0.9.2
* https://github.com/fengyuanchen/cropper
*
* Copyright (c) 2014-2015 Fengyuan Chen and contributors
* Released under the MIT license
*
* Date: 2015-04-18T04:35:01.500Z
*/
.cropper-container {
position: relative;
overflow: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
}
.cropper-container img {
display: block;
width: 100%;
min-width: 0 !important;
max-width: none !important;
height: 100%;
min-height: 0 !important;
max-height: none !important;
image-orientation: 0deg !important;
}
.cropper-canvas,
.cropper-drag-box,
.cropper-crop-box,
.cropper-modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.cropper-drag-box {
background-color: #fff;
filter: alpha(opacity=0);
opacity: 0;
}
.cropper-modal {
background-color: #000;
filter: alpha(opacity=50);
opacity: .5;
}
.cropper-view-box {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
outline: 1px solid #69f;
outline-color: rgba(102, 153, 255, .75);
}
.cropper-dashed {
position: absolute;
display: block;
filter: alpha(opacity=50);
border: 0 dashed #fff;
opacity: .5;
}
.cropper-dashed.dashed-h {
top: 33.33333333%;
left: 0;
width: 100%;
height: 33.33333333%;
border-top-width: 1px;
border-bottom-width: 1px;
}
.cropper-dashed.dashed-v {
top: 0;
left: 33.33333333%;
width: 33.33333333%;
height: 100%;
border-right-width: 1px;
border-left-width: 1px;
}
.cropper-face,
.cropper-line,
.cropper-point {
position: absolute;
display: block;
width: 100%;
height: 100%;
filter: alpha(opacity=10);
opacity: .1;
}
.cropper-face {
top: 0;
left: 0;
cursor: move;
background-color: #fff;
}
.cropper-line {
background-color: #69f;
}
.cropper-line.line-e {
top: 0;
right: -3px;
width: 5px;
cursor: e-resize;
}
.cropper-line.line-n {
top: -3px;
left: 0;
height: 5px;
cursor: n-resize;
}
.cropper-line.line-w {
top: 0;
left: -3px;
width: 5px;
cursor: w-resize;
}
.cropper-line.line-s {
bottom: -3px;
left: 0;
height: 5px;
cursor: s-resize;
}
.cropper-point {
width: 5px;
height: 5px;
background-color: #69f;
filter: alpha(opacity=75);
opacity: .75;
}
.cropper-point.point-e {
top: 50%;
right: -3px;
margin-top: -3px;
cursor: e-resize;
}
.cropper-point.point-n {
top: -3px;
left: 50%;
margin-left: -3px;
cursor: n-resize;
}
.cropper-point.point-w {
top: 50%;
left: -3px;
margin-top: -3px;
cursor: w-resize;
}
.cropper-point.point-s {
bottom: -3px;
left: 50%;
margin-left: -3px;
cursor: s-resize;
}
.cropper-point.point-ne {
top: -3px;
right: -3px;
cursor: ne-resize;
}
.cropper-point.point-nw {
top: -3px;
left: -3px;
cursor: nw-resize;
}
.cropper-point.point-sw {
bottom: -3px;
left: -3px;
cursor: sw-resize;
}
.cropper-point.point-se {
right: -3px;
bottom: -3px;
width: 20px;
height: 20px;
cursor: se-resize;
filter: alpha(opacity=100);
opacity: 1;
}
.cropper-point.point-se:before {
position: absolute;
right: -50%;
bottom: -50%;
display: block;
width: 200%;
height: 200%;
content: " ";
background-color: #69f;
filter: alpha(opacity=0);
opacity: 0;
}
@media (min-width: 768px) {
.cropper-point.point-se {
width: 15px;
height: 15px;
}
}
@media (min-width: 992px) {
.cropper-point.point-se {
width: 10px;
height: 10px;
}
}
@media (min-width: 1200px) {
.cropper-point.point-se {
width: 5px;
height: 5px;
filter: alpha(opacity=75);
opacity: .75;
}
}
.cropper-bg {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC");
}
.cropper-invisible {
filter: alpha(opacity=0);
opacity: 0;
}
.cropper-hide {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: auto!important;
min-width: 0!important;
max-width: none!important;
height: auto!important;
min-height: 0!important;
max-height: none!important;
filter: alpha(opacity=0);
opacity: 0;
}
.cropper-hidden {
display: none !important;
}
.cropper-move {
cursor: move;
}
.cropper-crop {
cursor: crosshair;
}
.cropper-disabled .cropper-drag-box,
.cropper-disabled .cropper-face,
.cropper-disabled .cropper-line,
.cropper-disabled .cropper-point {
cursor: not-allowed;
}

1980
service/Public/Common/Lib/cropper/cropper.js Executable file
View File

File diff suppressed because it is too large Load Diff

9
service/Public/Common/Lib/cropper/cropper.min.css vendored Executable file
View File

@ -0,0 +1,9 @@
/*!
* Cropper v0.9.2
* https://github.com/fengyuanchen/cropper
*
* Copyright (c) 2014-2015 Fengyuan Chen and contributors
* Released under the MIT license
*
* Date: 2015-04-18T04:35:01.500Z
*/.cropper-container{position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.cropper-container img{display:block;width:100%;min-width:0!important;max-width:none!important;height:100%;min-height:0!important;max-height:none!important;image-orientation:0deg!important}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal{position:absolute;top:0;right:0;bottom:0;left:0}.cropper-drag-box{background-color:#fff;filter:alpha(opacity=0);opacity:0}.cropper-modal{background-color:#000;filter:alpha(opacity=50);opacity:.5}.cropper-view-box{display:block;width:100%;height:100%;overflow:hidden;outline:#69f solid 1px;outline-color:rgba(102,153,255,.75)}.cropper-dashed{position:absolute;display:block;filter:alpha(opacity=50);border:0 dashed #fff;opacity:.5}.cropper-dashed.dashed-h{top:33.33333333%;left:0;width:100%;height:33.33333333%;border-top-width:1px;border-bottom-width:1px}.cropper-dashed.dashed-v{top:0;left:33.33333333%;width:33.33333333%;height:100%;border-right-width:1px;border-left-width:1px}.cropper-face,.cropper-line,.cropper-point{position:absolute;display:block;width:100%;height:100%;filter:alpha(opacity=10);opacity:.1}.cropper-face{top:0;left:0;cursor:move;background-color:#fff}.cropper-line{background-color:#69f}.cropper-line.line-e{top:0;right:-3px;width:5px;cursor:e-resize}.cropper-line.line-n{top:-3px;left:0;height:5px;cursor:n-resize}.cropper-line.line-w{top:0;left:-3px;width:5px;cursor:w-resize}.cropper-line.line-s{bottom:-3px;left:0;height:5px;cursor:s-resize}.cropper-point{width:5px;height:5px;background-color:#69f;filter:alpha(opacity=75);opacity:.75}.cropper-point.point-e{top:50%;right:-3px;margin-top:-3px;cursor:e-resize}.cropper-point.point-n{top:-3px;left:50%;margin-left:-3px;cursor:n-resize}.cropper-point.point-w{top:50%;left:-3px;margin-top:-3px;cursor:w-resize}.cropper-point.point-s{bottom:-3px;left:50%;margin-left:-3px;cursor:s-resize}.cropper-point.point-ne{top:-3px;right:-3px;cursor:ne-resize}.cropper-point.point-nw{top:-3px;left:-3px;cursor:nw-resize}.cropper-point.point-sw{bottom:-3px;left:-3px;cursor:sw-resize}.cropper-point.point-se{right:-3px;bottom:-3px;width:20px;height:20px;cursor:se-resize;filter:alpha(opacity=100);opacity:1}.cropper-point.point-se:before{position:absolute;right:-50%;bottom:-50%;display:block;width:200%;height:200%;content:" ";background-color:#69f;filter:alpha(opacity=0);opacity:0}@media (min-width:768px){.cropper-point.point-se{width:15px;height:15px}}@media (min-width:992px){.cropper-point.point-se{width:10px;height:10px}}@media (min-width:1200px){.cropper-point.point-se{width:5px;height:5px;filter:alpha(opacity=75);opacity:.75}}.cropper-bg{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC)}.cropper-invisible{filter:alpha(opacity=0);opacity:0}.cropper-hide{position:fixed;top:0;left:0;z-index:-1;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;min-height:0!important;max-height:none!important;filter:alpha(opacity=0);opacity:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}

10
service/Public/Common/Lib/cropper/cropper.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

27
service/Public/Home/Default/Css/Common.css
View File

@ -688,4 +688,29 @@ background:url(../Images/ibar_sprites.png) no-repeat;background-position:0px -23
.user-main { padding-top: 10px; }
.more-icon-rotate {-webkit-transform: rotate(-90deg);transform: rotate(-90deg);-webkit-transition: all 300ms;transition: all 300ms;}
button { outline: none !important;}
button { outline: none !important;}
/**
* 公共头像样式
*/
.common-cropper-popup .cropper-images-view,
.common-cropper-popup .img-preview,
.common-cropper-popup .submit-operation { overflow:hidden; }
.common-cropper-popup .img-container { width:200px; height:200px; margin-bottom:5px; }
.common-cropper-popup .cropper-input-images-submit { width:104px; margin:0px 5px 0px 2px; height: 32px; }
.common-cropper-popup .preview-lg { width:180px; height:180px; }
.common-cropper-popup .preview-md { width:100px; height:100px; }
.common-cropper-popup .preview-sm { width:50px; height:50px; }
.common-cropper-popup .img-preview { margin-left:20px; border: 1px solid #eee; background-color: #f9f9f9; }
.common-cropper-popup .cropper-container, .cropper-input-images-submit { border-radius:2px; }
.common-cropper-popup .am-form-file input[type="file"] { margin-top: 0; }
@media only screen and (max-width:641px){
.common-cropper-popup .img-preview { margin-left:10px; }
.common-cropper-popup .preview-md,
.common-cropper-popup .preview-sm { margin:0 0 5px 8px; }
.common-cropper-popup .preview-md { width:90px; height:90px; }
.common-cropper-popup .preview-sm { width:50px; height:50px; }
}

2
service/Public/Home/Default/Css/User.Index.css
View File

@ -63,7 +63,7 @@ ul.user-base-icon {
vertical-align: bottom;
}
.order-nav .nav-name i.order-icon {
background-image: url(../images/user-index-nav-order-icon.png);
background-image: url(../Images/user-index-nav-order-icon.png);
}
.order-nav .icon-tips, .order-base a {
color: #888;

BIN
service/Public/Home/Default/Images/default-user-avatar-s.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
service/Public/Home/Default/Images/default-user-avatar.jpg Executable file → Normal file
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

134
service/Public/Home/Default/Js/Common.js
View File

@ -150,5 +150,139 @@ $(function()
store.set(store_user_menu_key, value);
}
});
var $image = $('.user-head-img-container > img'),
$dataX = $('#user-head-img_x'),
$dataY = $('#user-head-img_y'),
$dataHeight = $('#user-head-img_height'),
$dataWidth = $('#user-head-img_width'),
$dataRotate = $('#user-head-img_rotate'),
options = {
// strict: false,
// responsive: false,
// checkImageOrigin: false
// modal: false,
// guides: false,
// highlight: false,
// background: false,
// autoCrop: false,
// autoCropArea: 0.5,
// dragCrop: false,
// movable: false,
// resizable: false,
// rotatable: false,
// zoomable: false,
// touchDragZoom: false,
// mouseWheelZoom: false,
// minCanvasWidth: 320,
// minCanvasHeight: 180,
// minCropBoxWidth: 160,
// minCropBoxHeight: 90,
// minContainerWidth: 320,
// minContainerHeight: 180,
// build: null,
// built: null,
// dragstart: null,
// dragmove: null,
// dragend: null,
// zoomin: null,
// zoomout: null,
aspectRatio: 1 / 1,
preview: '.user-head-img-preview',
crop: function (data) {
$dataX.val(Math.round(data.x));
$dataY.val(Math.round(data.y));
$dataHeight.val(Math.round(data.height));
$dataWidth.val(Math.round(data.width));
$dataRotate.val(Math.round(data.rotate));
}
};
$image.on({}).cropper(options);
// Methods
$(document.body).on('click', '[data-method]', function () {
var data = $(this).data(),
$target,
result;
if (data.method) {
data = $.extend({}, data); // Clone a new one
if (typeof data.target !== 'undefined') {
$target = $(data.target);
if (typeof data.option === 'undefined') {
try {
data.option = JSON.parse($target.val());
} catch (e) {
console.log(e.message);
}
}
}
result = $image.cropper(data.method, data.option);
if (data.method === 'getCroppedCanvas') {
$('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
}
if ($.isPlainObject(result) && $target) {
try {
$target.val(JSON.stringify(result));
} catch (e) {
console.log(e.message);
}
}
}
}).on('keydown', function (e) {});
// 头像图片上传
var $inputimage = $('.common-cropper-popup input[type="file"]'),
URL = window.URL || window.webkitURL,
blobURL;
if (URL) {
$inputimage.change(function () {
var files = this.files,
file;
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
blobURL = URL.createObjectURL(file);
$image.one('built.cropper', function () {
URL.revokeObjectURL(blobURL); // Revoke when load complete
}).cropper('reset', true).cropper('replace', blobURL);
//$inputimage.val('');
} else {
Prompt('Please choose an image file.');
}
}
});
} else {
$inputimage.parent().remove();
}
// 图片裁剪提交确认
$('.common-cropper-popup button[type="submit"]').on('click', function()
{
var v = $inputimage.val();
if(v.length == 0)
{
$(this).parents('.common-cropper-popup').find('.from-text-tips').removeClass('none');
Prompt('请上传图片');
return false;
}
});
});