<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://www.thymeleaf.org ">
<head>
    <title>采美365网-资料修改-中国美业全方位线上交易服务互动平台，做美业，上采美</title>
    <template th:replace="components/head-link"></template>
    <link th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/user-center/setting/phone.css(v=${version})}" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 引用头部 -->
<template th:replace="components/header"></template>
<!-- 修改资料 -->
<div id="phonePage">
    <div class="navLayout" v-cloak>
        <div v-if="isPC" class="crumbs">
            <span>账户设置</span>
            <span>&gt;</span>
            <span>更换手机号</span>
        </div>
        <div class="wrap clear">
            <!--左侧导航-->
            <template th:replace="user-center/components/tableft"></template>
            <div class="right">
                <div class="header">
                    <div class="header-p">本操作更换的是机构联系人的手机号，不是运营人员的手机号！</div>
                </div>
                <div class="container clear">
                    <div class="title"><span>*</span>原手机号:{{form.contractMobile2}}</div>
                    <form>
                        <div class="formLine code">
                            <p><em>*</em>原手机号验证码：</p>
                            <input type="text" v-model.trim="form.mobileCode" autocomplete="off" placeholder="请输入原手机号验证码" :rule="rule.code"  maxlength="6" @blur="blurHandle($event)" needverify>
                            <i class="checked icon mIcon"></i>
                            <span class="errTips icon mIcon" tips="请输入原手机号验证码"></span>
                            <a class="getCode" href="javascript:void(0);" @click="getMobileCodeFn" :class="[isMobileDisabled  ? 'disabled' : '']">{{ mobileCodeText }}</a>
                        </div>
                        <div class="formLine" >
                            <p><em>*</em>新手机号：</p>
                            <input  class="massageBtn"  type="text" v-model.trim="form.contractMobile" placeholder="请输入新手机号码" :rule="rule.phone" maxlength="11" @blur="blurHandle($event)" needverify>
                            <i class="checked icon mIcon"></i>
                            <span class="errTips icon mIcon" tips="请输入新手机号码"></span>
                        </div>
                        <div class="formLine code">
                            <p><em>*</em>新手机号验证码：</p>
                            <input type="text" v-model.trim="form.newMobileCode" autocomplete="off" placeholder="请输入新手机号验证码" :rule="rule.code"  maxlength="6" @blur="blurHandle($event)" needverify>
                            <i class="checked icon mIcon"></i>
                            <span class="errTips icon mIcon" tips="请输入新手机号验证码"></span>
                            <a class="getCode" href="javascript:void(0);" @click="getNewMobileCodeFn" :class="[isNewMobileDisabled  ? 'disabled' : '']">{{ newMobileCodeText }}</a>
                        </div>
                        <div class="subLine">
                            <button class="btn" type="button" :class="loginLoading ? 'disabled':''"  @click="bindMobileCheck()">确认更换</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 引入底部 -->
<template th:replace="components/footer"></template>
<template th:replace="components/foot-link"></template>
<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/user.service.js(v=${version})}"></script>
<script charset="utf-8" type="text/javascript" th:src="@{/js/user-center/setting/phone.js(v=${version})}"></script>
</body>
</html>
