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

<style>
    .userTel .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;
    }
    .userTel .modal-body .row >label {
        padding: 0;
    }
    .userTel .modal-body .row .col-md-8 {
        padding-left: 0;
    }
    .userTel .modal-body .row .col-md-8 input {
        border-radius: 0;
    }
    .userTel .modal-body .row.validate-code .col-md-8 .input-sm {
        width: 162px;
        display: inline-block;
    }
    .userTel .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;
        float: right;
        margin-top: 3px;
    }
    .userTel .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;
    }
    .userTel .warn-style {
        color: #cc0000;
        font-size: 14px;
        margin-left: 85px;
        margin-bottom: 10px;
    }
</style>
<div class="modal-header">
    <img src="static/img/user/images/phonecheck.png" alt="">
    <p>手机验证</p>
    <i class="glyphicon glyphicon-remove" ng-click="cancel()"></i>
</div>
<form class="userTel" name="sampleSendForm" ng-submit="ok()">
    <input type="hidden" ng-model="pageToken"/>
    <div class="modal-body">
        <div class="row line" 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.userTel" class="form-control input-sm"
                                                      type="userTel"  ng-blur="checkUserTel(user.userTel)"
                                                      ></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" ng-class="{'has-success': checkSuccess1, 'has-error': checkFailed1}">
            <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.newUserTel"
                       class="form-control input-sm" type="newUserTel" ng-blur="telEnable(user.newUserTel)">
                <!-- <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="warn-style" ng-show="checkFailed1_1">该手机号已存在</div>
        <div class="row validate-code">
            <label class="col-md-3 col-sm-3 col text-right">验证码：</label>
            <span class="col-md-8 col-sm-8 col">
                <input ng-model="telCheckCode"
                       class="form-control input-sm" placeholder="请输入验证码"  type="telCheckCode" ng-blur="validTelCheckCode(telCheckCode)">
                <input class="code-btn" ng-click="sendTelCheckCode(user.newUserTel)" ng-init="paracont='获取验证码'" ng-disabled="!sendSuccess" ng-model="paracont" />
            </span>
            <div class="col">
                <img ng-show="checkSuccess2" 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="checkFailed2">验证码错误</div>
    </div>
    <div class="modal-footer">
        <button ng-click="cancel()" type="button">取消</button>
        <button type="submit">确定</button>
    </div>
</form>