@{
    string guid = Html.Guid();
    var isDialog = StringHelper.Format<int>(Request.QueryString["isDialog"]);
    CurrentUser currentUser = ViewBag.CurrentUser;
    string memberData = JsonHelper.JsonParse<dynamic>(ViewBag.MemberData);
}
<style>
  .avatar-box .el-upload--picture-card, .avatar-box .el-upload-list--picture-card .el-upload-list__item {
        width: 80px;
        height: 80px;
        line-height: 80px;
        border-radius: 40px
    }
        .avatar-box .el-upload--picture-card i {
            font-size: 16px
        }

    .avatar-box .el-upload-list--picture-card .el-upload-list__item-thumbnail {
        width: 100px;
        height: 100px;
    }

    .avatar-box .el-dialog {
        width: 300px;
        height: 300px;
        max-width: 100%;
        max-height: 100%
    }
        .avatar-box .el-dialog a img {
            max-height: 220px !important
        }
    .avatar-box .el-upload-list__item.is-success .el-upload-list__item-status-label {
        display: none
    }
</style>
<div class="main" id="main" v-cloak>
    <div class="breadcrumb-box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-s-home"></i><a href="javascript:void(0)" onclick="location.href=location.href">基本资料</a></el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-form ref="form" label-width="130px" label-position="left" style="max-width:1000px;width:80%">
        <el-form-item label="用户名">
            <span>{{formData.Username}}</span>
            <span class="help-block"></span>
        </el-form-item>
        <el-form-item label="显示昵称">
            <el-input type="text" v-model="formData.NickName" maxlength="16" class="" v-validate="{data:formData.NickName,dataType:'*',getLengthByByte:true,minLength:4,maxLength:16,nullMsg:'请填写昵称',ignoreEmpty:true}"></el-input>
            <span class="help-block">长度控制为4-16个字符之间，中文占两个字符</span>
        </el-form-item>
        <el-form-item label="头像">
            <ui-picture-upload class="avatar-box" action="/e/uploadApi/" :file-list="avatarOptions" v-model="formData.Avatar" return-type="string" :limit="1" :max-size="2048" list-type="picture-card" :file-list='[]' accept=".jpg,.jpeg,.gif,.png" :data="{tableName:'pa_member',fieldName:'Avatar',detailId:@currentUser.Uid,fileType:'image',watermark:'false',thumbnail:'true',thumbnailWidth:'200',thumbnailHeight:'200'}">
                <i class="el-icon-plus"></i>
            </ui-picture-upload>
            <span class="help-block">上传图片控制在2M以内。</span>
        </el-form-item>
        @{
            string beforeSubmitJs = "";
            var data = new ViewDataDictionary();
            data.Add("from", PageAdmin.Common.FromEnum.Member);
            data.Add("guid", guid);
            data.Add("currentUser", currentUser);
            data.Add("detailId", currentUser.Uid);
            data.Add("fieldPrefix", "formData");
            data.Add("i", 0);
            IEnumerable<dynamic> FieldData = ViewBag.FieldData;
            int i = 0;
            if (FieldData != null)
            {
                foreach (var row in FieldData)
                {
                    data["i"] = i;
                    beforeSubmitJs += row.BeforeSubmitJs;
                    Html.RenderPartial("~/Areas/E/Views/CustomForm/FormPartial.cshtml", (object)row, data);
                    i++;
                }
            }
        }
        <el-form-item label="">
            <el-button size="small" type="primary" v-on:click="postSubmit">提交保存</el-button>
            <el-button size="small" onclick="history.back()" v-show="isDialog==0">返回</el-button>
        </el-form-item>
    </el-form>
</div>
<script type="text/javascript">
    //vue实例化
    var formData =@Html.RawModel(memberData);
    formData.MustFillInformation = "1";
    formData.Guid = "@guid";
    var vue = new Vue({
        el: "#main",
        data: {
            isDialog:@isDialog,
            avatarOptions:[],
            formData: formData
        },
        created: function ()
        {
            var avatar = this.formData.Avatar;
            if (!isNullOrEmpty(avatar)) {
                this.avatarOptions.push({ name: "", url: avatar, thumbnail: avatar });
            }
        },
        methods: {
            postSubmit: function () {
                var validated = this.validateForm({ beforeSubmit: "BeforeSubmit()"});//jquery表单验证
                if (validated) {
                    this.submit({ url: "@Url.ActionUrl("ModifyInfo")", data: formData, success: "PostBack()" });
                }
            }
        }
    });
    function BeforeSubmit() {
        @Html.Raw(beforeSubmitJs)
        return true;
    }
    function PostBack() {
        if (vue.isDialog==1) {
            closeSelf();
        }
    }
</script>