短信验证码登录

src/views/pages/login.vue

@@ -10,14 +10,18 @@
             <!--<h3 class="login-title">{{ $t('login.title') }}</h3>-->
             <img src="~@/assets/img/logo.png" style="width:50%;margin-bottom: 40px;">
             <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" status-icon>
-              <el-form-item prop="username">
+              <el-form-item v-if="showUsername" prop="username">
                 <el-input v-model="dataForm.username" :placeholder="$t('login.username')">
                   <span slot="prefix" class="el-input__icon">
                     <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-user"></use></svg>
                   </span>
                 </el-input>
               </el-form-item>
-              <el-form-item prop="password">
+              <el-form-item v-if="showOnPhone" prop="phoneNum">
+                <el-input  v-model="dataForm.phoneNum" placeholder="请输入手机号">
+                </el-input>
+              </el-form-item>
+              <el-form-item v-if="showUsername" prop="password">
                 <el-input v-model="dataForm.password" type="password" show-password :placeholder="$t('login.password')">
                   <span slot="prefix" class="el-input__icon">
                     <svg class="icon-svg" aria-hidden="true"><use xlink:href="#icon-lock"></use></svg>
@@ -38,9 +42,20 @@
                   </el-col>
                 </el-row>
               </el-form-item>
+              <el-form-item v-if="showOnPhone" prop="VerificationCode" >
+                <el-input v-model="dataForm.VerificationCode"  placeholder="请输入验证码">
+                  <template #append> <div class="verView" @click="verCodeClick()">{{codeTitle}}</div></template>        
+                </el-input>
+              </el-form-item>
               <el-form-item>
                 <el-button type="primary" @click="dataFormSubmitHandle()" class="w-percent-100">{{ $t('login.title') }}</el-button>
               </el-form-item>
+              <div class="do">
+                <div v-if="showOnPhone" class="phone" @click="onUserName()">用户名登录</div>
+                <div v-if="showUsername" class="phone" @click="onPone()">手机号登录</div>
+                <!-- <a href="../../../onenettest.html"  class="phone" > 证书登录</a> -->
+                <!-- <div  class="phone" @click="CertLogin()">证书登录1</div> -->
+              </div>
             </el-form>
           </div>
         </el-col>
@@ -54,16 +69,24 @@ import Cookies from 'js-cookie'
 import debounce from 'lodash/debounce'
 import { messages } from '@/i18n'
 import { getUUID } from '@/utils'
+// import {oneNetHelper} from './onenethelper'
 export default {
   data () {
     return {
       i18nMessages: messages,
+      showOnPhone: false,
+      showUsername: true,
+      codeTitle:"获取验证码",
+      time_count:60,
+      timer:null,
       captchaPath: '',
       dataForm: {
         username: '',
         password: '',
         deviceId: '',
-        validCode: ''
+        validCode: '',
+        phoneNum:'',
+        VerificationCode:'',
       }
     }
   },
@@ -91,6 +114,50 @@ export default {
       this.dataForm.deviceId = getUUID()
       this.captchaPath = `${window.SITE_CONFIG['apiURL']}/validata/code/${this.dataForm.deviceId}`
     },
+    // 获取手机验证码
+    verCodeClick () {
+      if(!this.timer) {
+        this.timer = setInterval ( () => {
+          if(this.time_count>0) {
+          this.time_count--
+          this.codeTitle = this.time_count +'秒后重新获取'
+        }
+        else {
+          this.codeTitle = '获取验证码'
+          clearInterval(this.timer)
+          this.timer = null
+          this.time_count = 60
+        }
+        },1000)
+       
+      }
+    },
+    onUserName () {
+      this.showUsername = true
+      this.showOnPhone = false
+    },
+    // 手机号登录
+    onPone () {
+      this.showOnPhone = true
+      this.showUsername = false
+    },
+    // CertLogin () {
+    //       if(oneNetHelper.IsAddonAvailable())
+    //     {
+    //       console.log('1111')
+    //     }
+    //     else
+    //     {	
+    //       alert("请先安装插件！")
+    //   //(5) 当onenethelper插件不可用时，调用通知接口加载插件
+    //       oneNetHelper.AddonAvailableNotify(AddonAvailableCb);
+    //     }
+
+    // },
+     AddonAvailableCb(ob) {
+      console.log(ob.addon,'ob.addon')
+      // form1.T01.value=ob.addon;
+     },
     // 表单提交
     dataFormSubmitHandle: debounce(function () {
       this.$refs['dataForm'].validate((valid) => {
@@ -122,4 +189,33 @@ export default {
 .aui-page__login .aui-content{
   padding: 0!important;
 }
-</style>
+.do {
+            margin-top: 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+          
+}
+.cert {
+              cursor: pointer;
+              display: flex;
+              align-items: center;
+              font-size: 16px;
+              color: #3E8EF7;
+              margin-right: 24px;
+}
+.phone {
+              font-family: MicrosoftYaHei;
+              font-size: 16px;
+              font-weight: normal;
+              font-stretch: normal;
+              letter-spacing: 0px;
+              color: #3E8EF7;
+              cursor: pointer;
+              margin-left: 24px;
+            }
+.verView {
+  color: #3E8EF7;
+ cursor: pointer;
+}
+</style>