diff --git a/.eslintrc.js b/.eslintrc.js
index 0707f20..8064f26 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -21,7 +21,7 @@ module.exports = {
     "no-multi-spaces": ["error", { "ignoreEOLComments": true }],
     "no-underscore-dangle": "warn",
     "no-control-regex": "warn",
-    "no-use-before-define": "error",
+    "no-use-before-define": "warn",
     "no-restricted-globals": "warn",
     "indent": ["error", 2],
     "max-nested-callbacks": ["error", { "max": 3 }],
diff --git a/src/config.js b/src/config.js
index df68feb..67b15eb 100644
--- a/src/config.js
+++ b/src/config.js
@@ -4,6 +4,8 @@
 
   win.RongSeal.Config = {
     TOKEN_URL: 'https://apiqa.rongcloud.net/user/get_token_new',
+    GET_SMS_CODE_URL: 'http://10.12.8.105:8585/user/send_code_yp',
+    VERIFY_SMS_CODE_URL: 'http://10.12.8.105:8585/user/verify_code_yp_t',
     DOWNLOAD_SHARE_PLUGIN_URL: 'plugin/screenshare-addon.zip',
     APP_ID: 'c9kqb3rdkbb8j',
     NAVI: 'navqa.cn.ronghub.com'
diff --git a/src/css/main.css b/src/css/main.css
index 1b1623f..b68ad1f 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -17,6 +17,14 @@ ul, li {
   list-style: none;
 }
 
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+}
+input[type="number"]{
+    -moz-appearance: textfield;
+}
+
 .rong-wrap {
   position: absolute;
   top: 0;
@@ -223,7 +231,71 @@ ul, li {
   margin: 3px 45px 3px 5px;
   vertical-align: middle;
 }
+.rong-login .rong-login-roomjoin {
+  display: none;
+}
+.rong-login-telverify .rong-login-sms-tip {
+  color: #fff;
+  font-size: 15px;
+  margin-bottom: -20px;
+}
+.rong-login-telverify .rong-login-telNum  {
+  display: block;
+  margin: 40px 0;
+  padding: 10px 20px;
+  width: 100%;
+  height: 48px;
+  border: 1px #DDDDDD solid;
+  border-radius: 40px;
+  background-color: white;
+  text-align: left;
+  font-size: 15px;
+  color: #777;
+  box-sizing: border-box;
+}
+.rong-login-telverify .rong-login-verifyCode {
+  display: block;
+  float:left;
+  padding: 10px 20px;
+  width: 60%;
+  height: 48px;
+  border: 1px #DDDDDD solid;
+  border-radius: 40px;
+  background-color: white;
+  text-align: left;
+  font-size: 15px;
+  color: #777;
+  box-sizing: border-box;
+}
 
+.rong-login-telverify .rong-login-verifyBtn {
+  float: right;
+  width: 33%;
+  height: 50px;
+  border-radius: 40px;
+  border: 1px #475163 solid;
+  background: #475163;
+  font-size: 15px;
+  color: #FFFFFF;
+  cursor: pointer;
+}
+.rong-login-telverify .rong-btn-verifyLogin {
+  float: left;
+  width: 100%;
+  height: 50px;
+  margin: 30px 0;
+  border-radius: 40px;
+  border: 1px #28d6f6 solid;
+  background: #28d6f6;
+  font-size: 15px;
+  color: #FFFFFF;
+  cursor: pointer;
+}
+.rong-login-telverify .rong-login-verifyTips {
+  text-align: left;
+  padding-left: 20px;
+  color: red;
+}
 .rong-rtc {
   display: none;
   overflow: hidden;
diff --git a/src/index.html b/src/index.html
index 6fbc351..8c59825 100644
--- a/src/index.html
+++ b/src/index.html
@@ -22,19 +22,31 @@
     <div class="rong-login-content">
       <img class="rong-login-logo" src="./css/img/logo.png">
       <h3 class="rong-login-title">SealRTC v2.0.0</h3>
-      <input id="roomId" class="rong-login-input" type="text" lang-placeholder="roomId">
-      <input id="userId" class="rong-login-input" type="text" lang-placeholder="userId">
-      <div class="rong-opt-stream">
-        <div class="rong-opt-checkbox">
-          <input type="checkbox" id="isCloseVideo" name="isCloseVideo"><label for="isCloseVideo"></label><span lang-textContent="closeVideo"></span>
+      <div class="rong-login-roomjoin">
+        <input id="roomId" class="rong-login-input" type="text" lang-placeholder="roomId">
+        <input id="userId" class="rong-login-input" type="text" lang-placeholder="userId">
+        <div class="rong-opt-stream">
+          <div class="rong-opt-checkbox">
+            <input type="checkbox" id="isCloseVideo" name="isCloseVideo"><label for="isCloseVideo"></label><span lang-textContent="closeVideo"></span>
+          </div>
+          <!-- <div class="rong-opt-checkbox">
+            <input type="checkbox" id="isCloseAudio" name="isCloseAudio"><label for="isCloseAudio"></label><span lang-textContent="closeAudio"></span>
+          </div> -->
+        </div>
+        <input id="start" class="rong-btn-start" type="button" lang-value="startRTC">
+        <div class="rong-btn-loading">
+          <img src="./css/img/loading.gif"> 加载中...
         </div>
-        <!-- <div class="rong-opt-checkbox">
-          <input type="checkbox" id="isCloseAudio" name="isCloseAudio"><label for="isCloseAudio"></label><span lang-textContent="closeAudio"></span>
-        </div> -->
       </div>
-      <input id="start" class="rong-btn-start" type="button" lang-value="startRTC">
-      <div class="rong-btn-loading">
-        <img src="./css/img/loading.gif"> 加载中...
+      <div class="rong-login-telverify">
+        <p class="rong-login-sms-tip" lang-textContent="phoneTips"></p>
+        <input id="telNumber" class="rong-login-telNum" type="text" lang-placeholder="phoneNumber">
+        <div class="rong-login-codeline">
+          <input id="verifyCode" class="rong-login-verifyCode" type="number" lang-placeholder="verifyCode">
+          <input id="verifyCodeBtn" class="rong-login-verifyBtn" type="button" lang-value="sendVerifyCode">
+        </div>
+        <!-- <p class="rong-login-verifyTips">tips</p> -->
+        <input id="verifyLogin" class="rong-btn-verifyLogin" type="button" lang-value="verifyLogin">
       </div>
     </div>
     <div class="rong-opt-resolution">
diff --git a/src/js/locale/zh.js b/src/js/locale/zh.js
index 5672c16..2eda708 100644
--- a/src/js/locale/zh.js
+++ b/src/js/locale/zh.js
@@ -13,6 +13,10 @@
       userIdEmpty: '用户 ID 不能为空',
       roomIdIllegal: '会议室 ID 只能包含大小写字母、阿拉伯数字、+、=、-、_ 且长度不能超过 64 个字符',
       networkError: '网络已断开',
+      phoneNumberErr: '手机号格式非法',
+      verifyCodeErr: '请输入手机验证码',
+      verifyCodeIncorrect: '验证码错误',
+      verifyCodeExpired: '验证码过期',
 
       getTokenError: '获取 token 失败',
       rtcError: '初始化 RTC 失败',
@@ -33,7 +37,9 @@
     },
     placeholder: {
       roomId: '请输入会议室 ID',
-      userId: '请输入用户 ID'
+      userId: '请输入用户 ID',
+      phoneNumber: '手机号',
+      verifyCode: '手机验证码'
     },
     textContent: {
       closeVideo: '加入时关闭摄像头',
@@ -43,12 +49,15 @@
       screenshareBusy: '正在分享屏幕',
       videoClosed: '摄像头已关闭',
       otherVideoClosed: '对方已关闭摄像头',
-      alertTitle: '提示'
+      alertTitle: '提示',
+      phoneTips: '请输入手机号验证登录，目前只支持中国区',
     },
     value: {
       startRTC: '开始会议',
       cancel: '取消',
-      conform: '确定'
+      conform: '确定',
+      sendVerifyCode: '发送验证码',
+      verifyLogin: '验证登录'
     },
     title: {
       hangup: '挂断',
diff --git a/src/js/login.js b/src/js/login.js
index a16c0a4..49381a4 100644
--- a/src/js/login.js
+++ b/src/js/login.js
@@ -11,7 +11,7 @@
     Config = RongSeal.Config;
 
   // var randomUserId;
-  var userId;
+  var userId,rongIMToken;
   // console.log('randomUserId: ', typeof randomUserId);
 
   var locale = RongSeal.locale[common.lang],
@@ -21,12 +21,201 @@
     userDom = getDomById('userId'),
     startBtnDom = getDomById('start'),
     inputDomList = Dom.getList('.rong-login-input');
+  var telDom = getDomById('telNumber'),
+    verifyCodeDom = getDomById('verifyCode'),
+    verifyCodeBtnDom = getDomById('verifyCodeBtn'),
+    verifyLoginDom = getDomById('verifyLogin');
 
   var StorageKeys = {
     RoomId: 'rong-sealv2-roomid',
-    Resolution: 'rong-sealv2-resolution'
+    Resolution: 'rong-sealv2-resolution',
+    IMToken: 'rong-im-token'
   };
+  /**
+   * 获取手机验证码 
+   * @param {object} params 
+   * @param {object} params.getSmsCodeUrl 获取 手机验证码 的 url
+   * @param {object} params.tel 获取手机号
+   * @param {object} params.region 获取
+   */
+  function getSmsCode(params, callback) {
+    callback = callback || utils.noop;
+    var url = RongSeal.Config.GET_SMS_CODE_URL;
+    return new Promise(function (resolve, reject) {
+      utils.ajax({
+        url: url,
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        method: 'POST',
+        body: JSON.stringify({
+          phone: params.tel,
+          region: params.region
+        }),
+        success: function (result) {
+          result = JSON.parse(result);
+          callback(null, result);
+          resolve(result);
+        },
+        fail: function (error) {
+          callback(error);
+          reject(error);
+        }
+      });
+    });
+  }
+  /**
+   * 验证手机验证码 
+   * @param {object} params 
+   * @param {object} params.tokenUrl 验证手机验证码er的 url
+   * @param {object} params.tel 手机号
+   * @param {object} params.region 国际区号
+   * @param {object} params.code 手机验证码
+   * @param {object} params.key ???
+   */
+  function verifySmsCode(params, callback) {
+    callback = callback || utils.noop;
+    var url = RongSeal.Config.VERIFY_SMS_CODE_URL;
+    return new Promise(function (resolve, reject) {
+      utils.ajax({
+        url: url,
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        method: 'POST',
+        body: JSON.stringify({
+          phone: params.tel,
+          region: params.region,
+          code: params.code,
+          key: params.key
+        }),
+        success: function (result) {
+          result = JSON.parse(result);
+          callback(null, result);
+          resolve(result);
+        },
+        fail: function (error) {
+          callback(error);
+          reject(error);
+        }
+      });
+    });
+  }
+  var setVerifyCodeBtnEnable = function() {
+    verifyCodeBtnDom.style.background = '#28d6f6';
+    verifyCodeBtnDom.style.border = '#28d6f6';
+    verifyCodeBtnDom.onclick = sendSmsCode;
+  }
+  var setVErifyCodeBtnDisable = function() {
+    verifyCodeBtnDom.style.background = '#475163';
+    verifyCodeBtnDom.style.border = '#475163';
+    verifyCodeBtnDom.onclick = function () {};
+  }
+  var setCountDownTimer = function (countDown) {
+    if(countDown === 0) {
+      verifyCodeBtnDom.value = '发送验证码';
+      countDown = 60;
+      setVerifyCodeBtnEnable();
+      return ;
+    }else {
+      countDown --;
+      setVErifyCodeBtnDisable();
+    }
+    setTimeout(function(){
+      verifyCodeBtnDom.value = countDown+'s后重新发送';
+      setCountDownTimer(countDown)
+    },1000)
+  }
+  var sendSmsCode = function () {
+    var telReg=/^[1][3,4,5,7,8][0-9]{9}$/; 
+    if(telReg.test(telDom.value)){
+      console.log(telDom.value);
+      var params = {
+        tel: telDom.value,
+        region: 86
+      }
+      getSmsCode(params).then(function(data){
+        console.log('data',data)
+      }).catch(function(err) {
+        console.log('getSMSCodeERR:',err)
+      })
+      var countDown = 60;
+      setCountDownTimer(countDown);
+    }else {
+      sealAlert(localeData.phoneNumberErr);
+    }
+    
+  }
+  var verifyLogin = function () {
+    var tel = telDom.value,
+      code = verifyCodeDom.value;
+    if(tel && code) {
+      //发送验证码
+      var params = {
+        tel: tel,
+        region: '86',
+        code: code,
+        key: 'lzp'
+      };
+      verifySmsCode(params).then(function(data){
+        //验证正确：
+        // var resData = data;
+        if(data.code === 200){
+          rongIMToken = data.result.token;
+          if(rongIMToken){
+            Cache.set(StorageKeys.IMToken,rongIMToken)
+          }else{
+            console.log('IM token 为空----')
+          }
+          //join room 页面
+          Dom.showByClass('rong-login-roomjoin')
+          Dom.hideByClass('rong-login-telverify')
+        }else if(data.code === 1000 ){
+          sealAlert(localeData.verifyCodeIncorrect)
+        }else if(data.code === 2000 ){
+          sealAlert(localeData.verifyCodeExpired)
+        }
+      }).catch(function(err){
+        console.log('veriyCodeErr:',err)
+      })
 
+    }else {
+      sealAlert(localeData.verifyCodeErr)
+    }
+
+  }
+  var bindCodeFn = function () {
+    verifyLoginDom.onclick = verifyLogin;
+    telDom.onkeyup = function (){
+      var telLength = telDom.value.length;
+      if(telLength === 11){
+        //可点击
+        setVerifyCodeBtnEnable()
+      }else {
+        //不可点击
+        setVErifyCodeBtnDisable();
+      }
+    }
+  }
+  var  hasIMToken = function() {
+    var IMToken = Cache.get(StorageKeys.IMToken);
+    if(IMToken) {
+      return true;
+    }else {
+      return false;
+    }
+  }
+  var RTCEnterLogic = function () {
+    if(hasIMToken()){
+      // join room page
+      Dom.showByClass('rong-login-roomjoin')
+      Dom.hideByClass('rong-login-telverify')
+    }else {
+      // verify tel page
+      Dom.hideByClass('rong-login-roomjoin')
+      Dom.showByClass('rong-login-telverify')
+    }
+  }
   var setDefaultRTCInfo = function () {
     var roomId = Cache.get(StorageKeys.RoomId);
     if (roomId) {
@@ -80,7 +269,7 @@
       audioEnable: true
     };
   };
-
+  
   var clear = function () {
     common.UI.backLoginPage();
     RongSeal.videoTimer.stop();
@@ -153,19 +342,23 @@
     Dom.hideByClass('rong-btn-start');
     Dom.showByClass('rong-btn-loading');
     userId = userDom.value;
+    connect({
+      userId: userId,
+      token: rongIMToken
+    })
     // randomUserId = new Date().getTime().toString();
-    common.getIMToken({
-      // id: randomUserId
-      id: userId
-    }).then(function (user) {
-      connect(user);
-    }, function (error) {
-      console.log(error)
-      sealAlert(localeData.networkError);
-      Dom.hideByClass('rong-btn-loading');
-      Dom.showByClass('rong-btn-start');
-      RongSeal.im.instance().logout();
-    });
+    // common.getIMToken({
+    //   // id: randomUserId
+    //   id: userId
+    // }).then(function (user) {
+    //   connect(user);
+    // }, function (error) {
+    //   console.log(error)
+    //   sealAlert(localeData.networkError);
+    //   Dom.hideByClass('rong-btn-loading');
+    //   Dom.showByClass('rong-btn-start');
+    //   RongSeal.im.instance().logout();
+    // });
   };
 
   var checkRoomIdValue = function () {
@@ -191,6 +384,8 @@
   (function init() {
     setDefaultRTCInfo();
     checkRoomIdValue();
+    bindCodeFn();
+    RTCEnterLogic();
     roomDom.onkeyup = checkRoomIdValue;
     startBtnDom.onclick = startRTC;
     utils.forEach(inputDomList, function (dom) {
diff --git a/src/js/main.js b/src/js/main.js
index f3b625c..c632b89 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -221,24 +221,24 @@
     var closeAudio = isSelf ? streamBox.closeAudioBySelf : streamBox.closeAudioByOther;
     var openAudio = isSelf ? streamBox.openAudioBySelf : streamBox.openAudioByOther;
     switch (type) {
-      case StreamType.AUDIO:
-        closeVideo.apply(streamBox);
-        openAudio.apply(streamBox);
-        break;
-      case StreamType.VIDEO:
-        openVideo.apply(streamBox);
-        closeAudio.apply(streamBox);
-        break;
-      case StreamType.AUDIO_AND_VIDEO:
-        openVideo.apply(streamBox);
-        openAudio.apply(streamBox);
-        break;
-      case StreamType.NONE:
-        closeVideo.apply(streamBox);
-        closeAudio.apply(streamBox);
-        break;
-      default:
-        break;
+    case StreamType.AUDIO:
+      closeVideo.apply(streamBox);
+      openAudio.apply(streamBox);
+      break;
+    case StreamType.VIDEO:
+      openVideo.apply(streamBox);
+      closeAudio.apply(streamBox);
+      break;
+    case StreamType.AUDIO_AND_VIDEO:
+      openVideo.apply(streamBox);
+      openAudio.apply(streamBox);
+      break;
+    case StreamType.NONE:
+      closeVideo.apply(streamBox);
+      closeAudio.apply(streamBox);
+      break;
+    default:
+      break;
     }
   }
 
@@ -653,7 +653,6 @@
     sealToast.destroy();
     RongSeal.destroyRongRTCPage();
     rongRTCRoom.leave().then(function () {
-      // win.location.reload();
       console.log('quit---')
     }, function () {
       // leave error