@{
    Layout = "~/Areas/Member/Views/_LoginLayoutPage.cshtml";
    ViewBag.Title = "用户登录";
    var supportMobileLogin = ViewBag.SupportMobileLogin;
    var redirectURL = Request.QueryString["redirectURL"];
    var openId = Request.QueryString["openId"];
    int open = ViewBag.Open;
}
<style>.login-box .el-form {padding-top: 18px}</style>
<div class="login-box" id="login" v-cloak>
    <a class="login-logo" href="@ViewBag.HomeLink"><img src="/Areas/Member/Css/images/Loginlogo.png"/></a>
    <div class="login-sign clearfix">
        @if (supportMobileLogin == 1 && open==1)
        {
            <span :class="{active:!formData.SmsLogin}" v-on:click="formData.SmsLogin=false">账号密码登录</span>
            <span :class="{active:formData.SmsLogin}" v-on:click="formData.SmsLogin=true">手机验证码登录</span>
        }
        else
        {
            <text>用户登录</text>
        }
    </div>
    <div v-if="open==0">对不起，用户登录功能已关闭！</div>
    <div v-if="open==1">
        <el-form ref="form" label-width="0px" label-position="left">
            <!--解决浏览器自动填充账户-->
            <input type="text" style="position:fixed;bottom:-9999px" />
            <input type="password" style="position:fixed;bottom:-9999px" />
            <el-form-item v-show="!formData.SmsLogin">
                <el-input v-model.trim="formData.Account" autocomplete="off" placeholder="用户名/邮箱/手机号" maxlength="50" v-validate="{data:formData.Account,dataType:'*',nullMsg:'请填写登录账号',ignore:formData.SmsLogin==1}"></el-input>
                <span class="help-block validate-tips-box"></span>
            </el-form-item>

            <el-form-item v-show="!formData.SmsLogin">
                <el-input type="password" v-model.trim="formData.Password" autocomplete="off" placeholder="登录密码" maxlength="50" v-validate="{data:formData.Password,dataType:'password',nullMsg:'请填写登录密码',ignore:formData.SmsLogin==1}"></el-input>
                <span class="help-block validate-tips-box"></span>
            </el-form-item>

            <el-form-item v-show="formData.SmsLogin">
                <el-input v-model.trim="formData.Mobile" id="mobile" autocomplete="off" placeholder="手机号" maxlength="50" v-validate="{data:formData.Mobile,dataType:'mobile',nullMsg:'请填写手机号',ignore:formData.SmsLogin==0}"></el-input>
                <span class="help-block validate-tips-box"></span>
            </el-form-item>

            <el-form-item v-show="formData.SmsLogin">
                <ui-input-code placeholder="短信验证码" v-model.trim="formData.SmsCode" type="mobile" focus-target="#mobile" maxlength="6" :account="formData.Mobile" url-api="/E/SmsCode/Send" v-validate="{data:formData.SmsCode,dataType:'numeric',minLength:6,minLengthErrorMsg:'验证码为6位数字！',nullMsg:'请填写短信验证码',ignore:formData.SmsLogin==0}"></ui-input-code>
                <span class="help-block validate-tips-box"></span>
            </el-form-item>

            @if (ViewBag.VerificationCode == 1)
            {
                <el-form-item>
                    <el-input v-model.trim="formData.VerificationCode" ref="verificationCode" autocomplete="off" maxlength="4" placeholder="图形验证码" v-validate="{data:formData.VerificationCode,dataType:'*',minLength:4,minLengthErrorMsg:'验证码最少4个字符',nullMsg:'请填写验证码!'}">
                        <template slot="append">
                            <ui-verification-code-image ref="verificationCodeImage" src="/E/VerificationCode/?width=100&height=30"></ui-verification-code-image>
                        </template>
                    </el-input>
                </el-form-item>
            }
            <el-form-item>
                <div class="controls clearfix">
                    <el-checkbox v-model="formData.SaveCookie">记住登录信息</el-checkbox>
                    <a href="@Url.ActionUrl("Index","FindPassword")" class="pull-right">忘记密码?</a>
                </div>
            </el-form-item>
            <el-form-item>
                <div class="controls">
                    <el-button type="primary" v-on:click="postSubmit">登录</el-button>
                </div>
            </el-form-item>
        </el-form>
        @if (ViewBag.Oauth2Open)
        {
            <div class="form-group quickLogin">
                <h5>使用合作账户登录</h5>
                <div class="oauth2-login">
                    <a href="/P/PA-Oauth2/QQNotice/LoginUrl/?redirectURL=@Server.UrlEncode(redirectURL)" class="oauth2-login-item quick-login-icon qq-icon" title="QQ登录"></a>
                    <a href="/P/PA-Oauth2/WXNotice/LoginUrl/?redirectURL=@Server.UrlEncode(redirectURL)" class="oauth2-login-item quick-login-icon weixin-icon" title="微信登录"></a>
                    <a href="/P/PA-Oauth2/AlipayNotice/LoginUrl/?redirectURL=@Server.UrlEncode(redirectURL)" class="oauth2-login-item quick-login-icon alipay-icon" title="支付宝登录"></a>
                </div>
            </div>
        }
        <div class="login-footer">没有账户？<a href="@Url.ActionUrl("Index","Reg")" class="text-primary">去注册</a></div>
    </div>
</div>

<script type="text/javascript">
    var supportMobileLogin=@supportMobileLogin;
    if (self != top) { top.location = self.location; };
    var formData = {SmsLogin:false,Account:"",Username:"",Password:"",Mobile:"",SmsCode:"",VerificationCode: "", SaveCookie: false };
    var localStorageKey = "memberLogin40101";
    var saveInfo = getLocalStorage(localStorageKey);
    if (saveInfo!= ""){
        formData = JSON.parse(saveInfo);
        if (supportMobileLogin == 0){
            formData.SmsLogin = false;
        }
        formData.VerificationCode = "";
        formData.SmsCode = "";
    }
    //vue实例化
    var vue = new Vue({
        el: "#login",
        data: {
            formData: formData,
            open:@open,
        },
        methods: {
            postSubmit: function ()
            {
                var _this = this;
                var validated = this.validateForm();//基础数据验证
                if (validated)
                {
                  this.formData.Username = this.formData.Account; //兼容老版本和插件
                  this.submit({ url: "@Url.ActionUrl()", data: formData, success: loginSuccess, showFailMsg: false, showSuccessMsg: false, failCallback: failLogin, });
                }
            },
        },
    });
    function loginSuccess() {
        if (formData.SaveCookie) {
            setLocalStorage(localStorageKey, JSON.stringify(formData));
        }
        else {
            removeLocalStorage(localStorageKey);
        }
        vue.$message.success("登录成功!")
        var loadingInstance = vue.$loading();
        var redirectURL = request("redirectURL");
        if (isNullOrEmpty(redirectURL)) {
            redirectURL = "@Url.ActionUrl("Index","Default")";
        }
        location.href = redirectURL;
    }
    function failLogin(data) {
        vue.$message.error(data.Msg);
        if (vue.$refs.verificationCodeImage != undefined)
        {
           vue.$refs.verificationCodeImage.change(); //修改验证码
        }
    }

    addEvent(window, 'keyup', function (event) {
        if (event.keyCode == 13) {
            vue.postSubmit();
        }
    });
</script>