用户修改个人信息
This commit is contained in:
pushuo
parent
c9e0822075
commit
4e6bcceba3
|
|
@ -0,0 +1,26 @@
|
|||
<?php
|
||||
/**
|
||||
* AccountController.php
|
||||
*
|
||||
* @copyright 2022 opencart.cn - All Rights Reserved
|
||||
* @link http://www.guangdawangluo.com
|
||||
* @author TL <mengwb@opencart.cn>
|
||||
* @created 2022-06-23 20:22:54
|
||||
* @modified 2022-06-23 20:22:54
|
||||
*/
|
||||
|
||||
namespace Beike\Shop\Http\Controllers\Account;
|
||||
|
||||
use Beike\Models\Customer;
|
||||
use Beike\Shop\Http\Controllers\Controller;
|
||||
use http\Env\Request;
|
||||
|
||||
class EditController extends Controller
|
||||
{
|
||||
public function index()
|
||||
{
|
||||
$customer = auth(Customer::AUTH_GUARD)->user();
|
||||
$data['customer'] = $customer;
|
||||
return view('account/edit', $data);
|
||||
}
|
||||
}
|
||||
|
|
@ -17,6 +17,7 @@ use Beike\Shop\Http\Controllers\Account\LoginController;
|
|||
use Beike\Shop\Http\Controllers\Account\OrderController;
|
||||
use Beike\Shop\Http\Controllers\Account\LogoutController;
|
||||
use Beike\Shop\Http\Controllers\Account\AddressController;
|
||||
use Beike\Shop\Http\Controllers\Account\EditController;
|
||||
use Beike\Shop\Http\Controllers\Account\AccountController;
|
||||
use Beike\Shop\Http\Controllers\Account\RegisterController;
|
||||
use Beike\Shop\Http\Controllers\Account\ForgottenController;
|
||||
|
|
@ -76,6 +77,7 @@ Route::prefix('/')
|
|||
->group(function () {
|
||||
Route::get('/', [AccountController::class, 'index'])->name('account.index');
|
||||
Route::resource('addresses', AddressController::class);
|
||||
Route::get('edit', [EditController::class, 'index'])->name('account.edit.index');
|
||||
Route::get('orders', [OrderController::class, 'index'])->name('account.order.index');
|
||||
Route::get('orders/{number}', [OrderController::class, 'show'])->name('account.order.show');
|
||||
Route::post('update', [AccountController::class, 'update'])->name('account.update');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
/*!
|
||||
* Cropper.js v1.5.12
|
||||
* https://fengyuanchen.github.io/cropperjs
|
||||
*
|
||||
* Copyright 2015-present Chen Fengyuan
|
||||
* Released under the MIT license
|
||||
*
|
||||
* Date: 2021-06-12T08:00:11.623Z
|
||||
*/.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{image-orientation:0deg;display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width: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}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -21,7 +21,7 @@
|
|||
<x-shop-sidebar/>
|
||||
|
||||
<div class="col-12 col-md-9">
|
||||
<div class="card account-card">
|
||||
<div class="card h-min-600">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title">我的地址</h5>
|
||||
</div>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<div class="addresses-wrap" v-cloak>
|
||||
<div class="row">
|
||||
<div class="col-6" v-for="address, index in addresses" :key="index" v-if="addresses.length">
|
||||
<div :class="['item', address.default ? 'active' : '']" >
|
||||
<div class="item">
|
||||
<div class="name-wrap">
|
||||
<span class="name">@{{ address.name }}</span>
|
||||
<span class="phone">@{{ address.phone }}</span>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,155 @@
|
|||
@extends('layout.master')
|
||||
|
||||
@section('body-class', 'page-account-edit')
|
||||
|
||||
@push('header')
|
||||
{{-- <script src="{{ asset('vendor/vue/2.6.14/vue.js') }}"></script> --}}
|
||||
<script src="{{ asset('vendor/cropper/cropper.min.js') }}"></script>
|
||||
<link rel="stylesheet" href="{{ asset('vendor/cropper/cropper.min.css') }}">
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="container" id="address-app">
|
||||
<nav aria-label="breadcrumb">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Library</li>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
<div class="row">
|
||||
<x-shop-sidebar/>
|
||||
|
||||
<div class="col-12 col-md-9">
|
||||
<div class="card h-min-600">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h5 class="card-title">修改个人信息</h5>
|
||||
</div>
|
||||
<div class="card-body h-600">
|
||||
<form>
|
||||
<div class="bg-light rounded-3 p-4 mb-4" style="background: #f6f9fc;">
|
||||
<div class="d-flex align-items-center">
|
||||
<img class="rounded-3" id="avatar" src="{{ image_resize($customer->avatar, 200, 200) }}" width="90">
|
||||
<div class="ps-3">
|
||||
<label class="btn btn-light shadow-sm bg-body mb-2" data-toggle="tooltip" title="Change your avatar">
|
||||
<i class="bi bi-arrow-repeat"></i> 修改头像
|
||||
<input type="file" class="d-none" id="update-btn" name="avatar" accept="image/*">
|
||||
</label>
|
||||
<div class="p mb-0 fs-ms text-muted">上传JPG、GIF或PNG图片。需要300 x 300。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row gx-4 gy-3">
|
||||
<div class="col-sm-6">
|
||||
<label class="form-label">名称</label>
|
||||
<input class="form-control" type="text" name="name" value="{{ $customer->name }}">
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label class="form-label">邮箱</label>
|
||||
<input class="form-control" type="email" name="email" value="{{ $customer->email }}">
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<label class="form-label">密码</label>
|
||||
<input class="form-control" type="password" placeholder="留空则保持原密码不变" name="password" value="">
|
||||
</div>
|
||||
<div class="col-12 mt-4">
|
||||
<button class="btn btn-primary mt-sm-0" type="button">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="modal" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">裁剪</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="img-container">
|
||||
<img id="cropper-image" src="{{ image_resize('/') }}" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button type="button" class="btn btn-primary cropper-crop">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('add-scripts')
|
||||
<script>
|
||||
var avatar = document.getElementById('avatar');
|
||||
var image = document.getElementById('cropper-image');
|
||||
var cropper;
|
||||
var $modal = $('#modal');
|
||||
|
||||
$('#update-btn').change(function(e) {
|
||||
var files = e.target.files;
|
||||
var done = function (url) {
|
||||
$(this).val('');
|
||||
// $('#c-image').prop('src', url);
|
||||
image.src = url;
|
||||
$('#modal').modal('show');
|
||||
};
|
||||
|
||||
var reader;
|
||||
var file;
|
||||
var url;
|
||||
|
||||
if (files && files.length > 0) {
|
||||
file = files[0];
|
||||
|
||||
if (URL) {
|
||||
done(URL.createObjectURL(file));
|
||||
} else if (FileReader) {
|
||||
reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
done(reader.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$modal.on('shown.bs.modal', function () {
|
||||
cropper = new Cropper(image, {
|
||||
aspectRatio: 1,
|
||||
viewMode: 3,
|
||||
});
|
||||
}).on('hidden.bs.modal', function () {
|
||||
cropper.destroy();
|
||||
cropper = null;
|
||||
});
|
||||
|
||||
$('.cropper-crop').click(function(event) {
|
||||
var initialAvatarURL;
|
||||
var canvas;
|
||||
|
||||
$modal.modal('hide');
|
||||
|
||||
if (cropper) {
|
||||
canvas = cropper.getCroppedCanvas({
|
||||
width: 200,
|
||||
height: 200,
|
||||
});
|
||||
initialAvatarURL = avatar.src;
|
||||
avatar.src = canvas.toDataURL();
|
||||
canvas.toBlob(function (blob) {
|
||||
var formData = new FormData();
|
||||
|
||||
formData.append('avatar', blob, 'avatar.png');
|
||||
console.log(formData)
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
|
|
@ -1,13 +1,15 @@
|
|||
<div class="col-12 col-md-3">
|
||||
<div class="account-sides-info">
|
||||
<div class="head">
|
||||
<div class="portrait"><img src="{{ $customer->avatar }}" class="img-fluid"></div>
|
||||
<div class="portrait"><img src="{{ image_resize($customer->avatar, 200, 200) }}" class="img-fluid"></div>
|
||||
<div class="account-name">{{ $customer->name }}</div>
|
||||
<div class="account-email">{{ $customer->email }}</div>
|
||||
</div>
|
||||
<nav class="list-group account-links">
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center active" href="{{ shop_route('account.index') }}">
|
||||
<span>个人中心</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('account.edit.index') }}">
|
||||
<span>修改个人信息</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('account.order.index') }}">
|
||||
<span>我的订单</span><span class="px-3 badge rounded-pill bg-dark">5</span></a>
|
||||
<a class="list-group-item d-flex justify-content-between align-items-center" href="{{ shop_route('addresses.index') }}">
|
||||
|
|
|
|||
Loading…
Reference in New Issue