LegalServiceV1/SourceCode/V2/ContractService/ContractService.Web/Views/Home/UserProfile.cshtml


@using ContractService.Authorization
@using ContractService.Views.Shared.Modals
@model ContractService.Controllers.UserProfileViewModel
@{
    ViewBag.ActiveMenu = PermissionNames.Pages;
    ViewBag.Title = L("UserProfileTitle");
    var userImagePath = string.IsNullOrEmpty(Model.ImagePath) ? "/Content/Image/user.png" : Model.ImagePath;
    var accountType = AbpSession.AccountType;
}
@section styles
{
    <link href="~/Content/Libs/avatar-cropper/cropper.min.css" rel="stylesheet" />
    <style>
        .form-control {
            border-radius: .2rem!important;
        }

        .avatar-view {
            height: auto;
        }

            .avatar-view img {
                width: 100%;
                cursor: pointer;
            }

        .avatar-body {
            padding-right: 15px;
            padding-left: 15px;
        }

        .avatar-form {
            font-size: inherit;
        }

        .avatar-upload {
            overflow: hidden;
        }

            .avatar-upload label {
                display: block;
                float: left;
                clear: left;
                width: 100px;
                color: #fff!important;
            }

            .avatar-upload input {
                display: block;
                margin-left: 110px;
            }

        .avater-alert {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .avatar-wrapper {
            height: 364px;
            width: 100%;
            margin-top: 15px;
            box-shadow: inset 0 0 5px #000000;
            box-shadow: inset 0 0 5px rgba(0,0,0,.25);
            background-color: #f6f6f6;
            background-color: #f6f6f6;
            border: 1px solid var(--mc);
            overflow: hidden;
        }

            .avatar-wrapper img {
                display: block;
                height: auto;
                max-width: 100%;
            }

        .avatar-preview {
            float: left;
            margin-top: 15px;
            margin-right: 15px;
            border: 1px solid #ddd;
            border-radius: 50%;
            background-color: #f5f5f5;
            overflow: hidden;
            cursor: pointer;
        }

            .avatar-preview img {
                width: 100%;
            }

            .avatar-preview:hover {
                box-shadow: 0 0 5px #000000;
                box-shadow: 0 0 5px rgba(0,0,0,.15);
            }

        .preview-lg {
            height: 184px;
            width: 184px;
            margin-top: 15px;
        }

        .preview-md {
            height: 100px;
            width: 100px;
        }

        .preview-sm {
            height: 45px;
            width: 45px;
        }

        .avatar-input, .avatar-src, .avatar-data {
            display: none !important;
        }

        .avatar-btns {
            margin-top: 30px;
            margin-bottom: 15px;
        }

       

            .avatar-btns .btn-group {
                margin-right: 5px;
            }

        @@media (min-width: 992px) {
            .avatar-preview {
                float: none;
            }
        }
    </style>
}
<div class="container iwb-info-box">
    <div class="row box-header">@(L("UserProfile"))</div>
    <div class="row">
        <div id="crop-avatar" class="col-md-4">
            <div class="avatar-view" title="@(L("UpdateAvatar"))">
                <img src="@userImagePath" alt="@(L("UpdateAvatar"))" style="width: 100%">
            </div>
        </div>
        <div class="col-md-8 profile-box">
            <form id="profile-info" class="form-horizontal">
                @Html.HiddenFor(a => a.UserId)
                @Html.HiddenFor(a => a.UserName)
                <div class="form-group row">
                    <label class="iwb-label col-md-2">@(L("AccountNo"))：</label>
                    <div class="col-md-10">
                        <div class="input-group input-group-sm">
                            <span class="form-control-static">@Model.UserName</span>
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="iwb-label control-label col-md-2 control-label" for="RealName">@(L("realName"))：</label>
                    <div class="col-md-10">
                        <div class="input-group input-group-sm">
                            <span class="form-control-static">@Model.RealName <span class="iconfont icon-edit edit" onclick="EditInfo(this)"></span></span>
                            <input class="form-control" id="RealName" name="RealName" placeholder="@(L("PlaceholderHeader"))..." value="@Model.RealName" style="display: none" type="text">
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="iwb-label   col-md-2 " for="EmailAddress">@(L("emailAddress"))：</label>
                    <div class="col-md-10">
                        <div class="input-group input-group-sm">
                            <span class="form-control-static">@Model.EmailAddress <span class="iconfont icon-edit edit" onclick="EditInfo(this)"></span></span>
                            <input class="form-control" id="EmailAddress" name="EmailAddress" placeholder="@(L("PlaceholderHeader"))..." value="@Model.EmailAddress" style="display: none" type="text">
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="iwb-label   col-md-2 " for="PhoneNumber">@(L("phoneNumber"))：</label>
                    <div class="col-md-10">
                        <div class="input-group input-group-sm">
                            <span class="form-control-static">@Model.PhoneNumber <span class="iconfont icon-edit edit" onclick="EditInfo(this)"></span></span>
                            <input class="form-control" id="PhoneNumber" name="PhoneNumber" placeholder="@(L("PlaceholderHeader"))..." value="@Model.PhoneNumber" style="display: none" type="text">
                        </div>
                    </div>
                </div>
                @if (accountType != 1)
                {
                    string birthday = Model.Birthday != null ? Convert.ToDateTime(Model.Birthday).ToString("yyyy-MM-dd") : "";
                    <div class="form-group row">
                        <label class="iwb-label col-md-2 " for="PhoneNumber2">@(L("PhoneNumber2"))：</label>
                        <div class="col-md-10">
                            <div class="input-group input-group-sm">
                                <span class="form-control-static">@Model.PhoneNumber2 <span class="iconfont icon-edit edit" onclick="EditInfo(this)"></span></span>
                                <input class="form-control" id="PhoneNumber2" name="PhoneNumber2" placeholder="@(L("PlaceholderHeader"))..." value="@Model.PhoneNumber2" style="display: none" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="iwb-label   col-md-2 " for="IdCard">@(L("IdCard"))：</label>
                        <div class="col-md-10">
                            <div class="input-group input-group-sm">
                                <span class="form-control-static">@Model.IdCard <span class="iconfont icon-edit edit" onclick="EditInfo(this)"></span></span>
                                <input class="form-control" id="IdCard" name="IdCard" placeholder="@(L("PlaceholderHeader"))..." value="@Model.IdCard" style="display: none" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="iwb-label col-md-2" for="Birthday">@(L("Birthday"))：</label>
                        <div>
                            <div class="input-group input-group-sm">
                                <span class="form-control-static">@birthday <span class="iconfont icon-edit edit" onclick="EditInfo(this)"></span></span>
                                <input class="form-control  iwb-date" id="Birthday" name="Birthday" placeholder="@(L("PlaceholderHeader"))..." value="@birthday " style="display: none" type="text">
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="iwb-label col-md-2" for="Profile">@(L("Profile"))：</label>
                        <div class="col-md-10">
                            <div class="input-group input-group-sm">
                                <span class="form-control-static">@Model.Profile <span class="iconfont icon-edit edit" onclick="EditInfo(this)"></span></span>
                                <textarea class="form-control" id="Profile" name="Profile" placeholder="@(L("PlaceholderHeader"))..." value="@Model.Profile" style="display: none"></textarea>
                            </div>
                        </div>
                    </div>
                }
            </form>
        </div>
    </div>
    <div class="row box-footer" style="display: none">
        <button class="btn btn-iwb" type="button" id="Save" onclick="UpdateProfile()">@(L("SaveInfo"))</button>
        <p style="font-size: 12px; color: #aaa;margin-top: 10px">@(L("SaveInfoTip"))</p>
    </div>

</div>

@section modal
{
    <div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form class="avatar-form" action="@Url.Action("UpdateAvatar")" enctype="multipart/form-data" method="post">

                    @Html.Partial("~/Views/Shared/Modals/_ModalHeader.cshtml", new ModalHeaderViewModel(L("UpdateAvatar"), ""))

                    <div class="modal-body">
                        <div class="avatar-body">

                            <div class="row">
                                <div class="col-md-9">
                                    <div class="avatar-wrapper"></div>
                                </div>
                                <div class="col-md-3">
                                    <div class="avatar-preview preview-lg"></div>
                                    <div class="avatar-preview preview-md"></div>
                                    <div class="avatar-preview preview-sm"></div>
                                </div>
                            </div>
                            <div class="row avatar-btns">
                                <div class="col-md-3">
                                    <div class="avatar-upload">
                                        <input class="avatar-src" name="avatar_src" type="hidden">
                                        <input class="avatar-data" name="avatar_data" type="hidden">
                                        <label class="btn avatar-btn btn-iwb" for="avatarInput">@(L("AvatarSelectFile"))</label>
                                        <input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="btn-group">
                                        <button class="btn btn-default" data-method="rotate" data-option="-90" type="button" title="向左旋转"> @(L("AvatarTurnLeft"))</button>
                                    </div>
                                    <div class="btn-group">
                                        <button class="btn btn-default" data-method="rotate" data-option="90" type="button" title="向右旋转"> @(L("AvatarTurnRight"))</button>
                                    </div>
                                </div>

                                <div class="col-md-3">
                                    <button class="btn btn-block  btn-iwb avatar-btn avatar-save" type="button"><i class="iconfont icon-save"></i> @(L("UpdateAvatar"))</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
}
@section scripts
{
    <script src="~/Content/libs/jquery.form/jquery.form.min.js"></script>
    <script src="~/Content/libs/avatar-cropper/cropper.min.js"></script>
    <script src="~/Content/libs/avatar-cropper/sitelogo.js"></script>
    <script>

        function EditInfo(that) {
            var $that = $(that).parent();
            var text = $that.css("display", "none").text();
            $that.next().val(text).css("display", "table-cell").focus();
            $(".box-footer").css("display", "block");
        }
        function UpdateProfile() {
            $.iwbAjax({
                url: '@Url.Action("UpdateUserProfile")',
                form: $("#profile-info"),
                success: function () {
                    window.location.reload();
                }
            });
        }
    </script>
}