platform-b2c/src/main/webapp/resources/view/vendor/modal/updateUserEmail.html

<style>
    .userEmail .modal-body .row {
        line-height: 34px;
        font-size: 14px;
        color: #666
    }
    .modal-content {
        width: 409px;
    }
    .modal-header {
        background: #5078cb;
        text-align: center;
    }
    .modal-header p {
        color: #fff;
    }
    .modal-header i {
        font-size: 12px;
        position: absolute;
        right: 7px;
        top: 7px;
        color: #fff;
        cursor: pointer;
    }
    .userEmail .modal-body .row >label {
        padding: 0;
    }
    .userEmail .modal-body .row .col-md-8 {
        padding-left: 0;
    }
    .userEmail .modal-body .row .col-md-8 input {
        border-radius: 0;
    }
    .userEmail .modal-body .row.validate-code .col-md-8 .input-sm {
        width: 162px;
        display: inline-block;
    }
    .userEmail .modal-body .row.validate-code .col-md-8 .code-btn {
        width: 94px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        vertical-align: middle;
        display: inline-block;
        margin-left: -4px;
        border-left: none;
        border-right: 1px solid rgb( 204, 204, 204 );
        border-bottom: 1px solid rgb( 204, 204, 204 );
        border-top: 1px solid rgb( 204, 204, 204 );
        background: #5078cb;
        color: #fff;
        cursor: pointer;
    }
    .userEmail .modal-body .row.validate-code .col-md-8 .code-btn[disabled] {
        cursor: not-allowed;
        background: rgb( 227, 227, 227 );
        color: #666;
    }
    .modal-footer >button {
        width: 90px;
        height: 28px;
        border: 1px solid #5078cb;
        line-height: 28px;
        text-align: center;
    }
    .modal-footer >button[disabled] {
        cursor: not-allowed;
    }
    .modal-footer >button:first-child {
        background: #fff;
        color: #5078cb;
        margin-right: 10px;
    }
    .modal-footer {
        text-align: center;
        border: none;
        padding: 0 0 25px 0;
    }
    .modal-footer >button:last-child {
        background: #5078cb;
        color: #fff;
    }
    .userEmail .warn-style {
        color: #cc0000;
        font-size: 14px;
        margin-left: 85px;
        margin-bottom: 10px;
    }
</style>
<div class="modal-header">
    <img src="static/img/user/images/valid-email.png" alt="">
    <p>邮箱验证</p>
    <i class="glyphicon glyphicon-remove" ng-click="cancel()"></i>
</div>
<form class="userEmail" name="sampleSendForm" ng-submit="ok()">
    <input type="hidden" ng-model="pageToken"/>
    <div class="modal-body">
        <div class="row line" ng-hide="userInfo.userEmail==null?true:false" ng-class="{'has-success': checkSuccess, 'has-error': checkFailed}">
            <label class="col-md-3 col-sm-3 col text-right">原邮箱地址：</label>
            <div class="col-md-8 col-sm-8 col"><input ng-model="user.userEmail" class="form-control input-sm"
                                                      type="userEmail" ng-blur="checkUserEmail(user.userEmail)" required
                                                      placeholder="当前邮箱地址"></div>
            <div class="col">
                <img ng-show="checkSuccess" src="static/img/user/images/input-check-yes.png" alt="">
                <!--<i ng-show="checkSuccess" class="fa fa-check" style="color:#339933"></i>-->
                <i ng-show="checkFailed" class="fa fa-close" style="color:#CC3333;"></i>
            </div>
        </div>
        <div class="row">
            <label class="col-md-3 col-sm-3 col text-right" ng-hide="userInfo.userEmail==null?true:false">新邮箱地址：</label>
            <label class="col-md-3 col-sm-3 col text-right" ng-show="userInfo.userEmail==null?true:false">邮箱地址：</label>
            <div class="col-md-8 col-sm-8 col">
                <input ng-model="user.newUserEmail"
                       class="form-control input-sm" type="newUserEmail" required ng-blur="emailEnable(user.newUserEmail)" placeholder="新邮箱地址">
                <!-- <div>密码复杂度</div> -->
            </div>
            <div class="col">
                <img ng-show="checkSuccess1" src="static/img/user/images/input-check-yes.png" alt="">
                <!--<i ng-show="checkSuccess1" class="fa fa-check" style="color:#339933"></i>-->
                <!--<i ng-show="checkFailed1" class="fa fa-close" style="color:#cc3333;"></i>-->
            </div>
        </div>
        <div class="warn-style"  ng-show="checkFailed1">请输入正确的邮箱</div>
        <div class="row validate-code">
            <label class="col-md-3 col-sm-3 col text-right">验证码：</label>
            <div class="col-md-8 col-sm-8 col">
                <input ng-model="checkCode"
                       class="form-control input-sm" ng-disabled="!codeSuccess" type="checkCode" ng-blur="validCheckCode(checkCode)" required>
                <input ng-click="sendCheckCode(user.newUserEmail)" ng-disabled="!sendSuccess" ng-init="paracont='获取验证码'" class="code-btn" ng-model="paracont"/>
            </div>
        </div>
        <div class="warn-style" ng-show="codeFailed">验证码错误</div>
    </div>
    <div class="modal-footer">
        <button ng-click="cancel()" type="button">取消</button>
        <button ng-disabled="!validSuccess || !checkSuccess || !checkSuccess1" type="submit">确定</button>
    </div>
</form>