修改

front-vue/src/views/login.vue

@@ -42,20 +42,21 @@
                                 </el-form-item>
                             </el-tab-pane>
                             <el-tab-pane label="手机验证码" name="second">
-                                
-						<dl><dd><input name="phone" type="text" id="phone" placeholder="您的手机号码" /></dd></dl>
+   <div :class="{on: loginWay}">
+                 <section class="login_message">
+                     <dl><dd><input name="phone" type="tel" id="phone" placeholder="您的手机号码"  maxlength="11"/></dd></dl>
 						<!-- <dl id="yz-code" style="display: none;">
 						<dd><input type="text" id="txtCode2" name="txtCode2" style="width: 133px; margin-right: 10px;" placeholder="验证码" /><img id="Img1" src="" width="90" height="34" title="点击换一个" style="vertical-align: middle; margin-top: -4px;" onclick="this.src='/ImgCode.aspx?t='+Math.random()*100" /></dd>
 						</dl> -->
 						<dl>
-							<dd><input type="text" id="dynamicPWD" onkeydown="enterHandler(event)" style="width: 100px;" placeholder="短信验证码" /><input type="button" id="btn" class="btn_mfyzm" value="获取动态密码" onclick="Sendpwd(this)" /></dd>
+							<dd><input type="text" id="dynamicPWD" onkeydown="enterHandler(event)" style="width: 120px;" placeholder="短信验证码" /><input type="button" id="btn" class="btn_mfyzm" value="获取动态密码" onclick="Sendpwd(this)" /></dd>
 						</dl>
-						<div class="remember">
-							<input type="checkbox" id="issave1" checked /><label for="issave1">下次自动登录</label>
-						</div>
-						<div class="tishi"></div>
-						<button type="button" id="dynamicLogon" style="outline:none">登 录</button>
-					
+                 </section>
+            </div>
+             <el-button :loading="loading" size="medium" type="primary" @click.native.prevent="handleLogin" style="width: 190px;border-radius: 50px;margin-left:10%;margin-top:40px">
+                                        <span v-if="!loading">登 录</span>
+                                        <span v-else>登 录 中...</span>
+                                    </el-button>
                             </el-tab-pane>
                         </el-tabs>
 
@@ -68,7 +69,6 @@
     </div>
 </template>
 <script>
-// import {myfun} from '@/api/tests'; //注意路径
 import { getCodeImg, listSscDomain } from "@/api/login";
 import { wxImg } from "@/api/system/weChat";
 import Cookies from "js-cookie";
@@ -77,6 +77,17 @@ export default {
     name: "Login",
     data() {
         return {
+            //验证码
+             loginWay:false,//true代表短信登陆, false代表密码
+      phone:'',//手机号,
+      computeTime: 0,
+      code:'',//验证码
+      timer:null,
+      showPwd:false,
+      captcha:'',
+      pwd:'',
+      name,
+
             //默认背景图
             activeName: "first",
             baseImg: require("../assets/images/logi_bg1.jpg"),
@@ -129,11 +140,49 @@ export default {
         },
     },
     created() {
+        
         this.getCode();
         this.getCookie();
         this.getlistDomain();
+        
     },
     methods: {
+//验证码
+        getCode(){
+      if(!this.computeTime){
+        this.computeTime = 30;
+        this.timer = setInterval(() => {
+            this.computeTime --;
+            if( this.computeTime <= 0){
+              clearInterval(this.timer)
+            }
+        }, 1000);
+      }
+    },
+    login(){
+      //短信验证
+      if(this.loginWay){
+         console.log(this.rightPhone);
+        if(!this.rightPhone){
+        alert('手机号不正确');
+         }else if(!/^\d{6}$/.test(this.code)){
+         alert('验证码必须是6位')
+        }
+      }else{
+        //密码验证
+        if(!/^[\u4E00-\u9FA5]{2,4}$/.test(this.name)){
+           alert('用户名必须是2-4个汉字');
+        }else if(!/^\d{6}$/.test(this.pwd)){
+          alert('密码必须是6位');
+        }else if(!this.captcha){
+          alert('图片验证码不正确');
+        }
+      }
+     
+      console.log(111);
+    },
+
+
         //标签页
         handleClick(tab, event) {
             console.log(tab, event);
@@ -165,25 +214,24 @@ export default {
                     rememberMe === undefined ? false : Boolean(rememberMe),
             };
         },
-        // 查询域名
-        //     getlistDomain() {
-        //         var sscDomain = document.location.hostname;
-        //         this.loginForm.sscDomain = document.location.hostname;
-        //         listSscDomain(sscDomain).then(response => {
-        //         if(response && response.data.lenth > 0){
-        //         const sscConfig = response.data[0].sscConfig;
-        //         const companyId = response.data[0].sscCompanyId;
-        //         console.log(companyId)
-        //         const imgForm = JSON.parse(sscConfig);
-        //         if(imgForm){
-        //         this.BackgroundImg = imgForm.BackgroundImg;
-        //         this.logo = imgForm.logo;
-        //         }
-        //         console.log(this.logo)
-        //         }
-        //   });
-        //     },
-
+    sendcodeItem () {
+      loginVerify({
+        mobile: this.phoneNum,  // 请求接口的参数  手机号
+        smsCode: this.verifyNum // 验证码
+      })
+        .then(res => {
+          sessionStorage.setItem( // 请求时将后台返给我的token 存在了sessionStorage中。后续每次请求都需要携带token
+            'token',
+            'Bearer ' + res.tokenData.access_token  // token的格式
+          )
+          this.uid = res.uid  // 将个人的uid根据 路由传参方式传给首页
+          this.$router.push({ path: '/index', query: { uid: this.uid } }) // 路由跳转 跳转到首页 
+        })
+        .catch(error => {
+          Toast(error.data.errMessage) // 返回一下错误信息
+          // 返回错误信息
+        })
+    },
         handleLogin() {
             this.$refs.loginForm.validate((valid) => {
                 if (valid) {
@@ -320,4 +368,148 @@ export default {
 .remember input[type=checkbox] { vertical-align: middle; margin-right: 5px; }
 .remember label { color: #999; }
 .tishi { line-height: 26px; color: #f60; margin-top: 10px; }
+.loginContainer {
+  width: 100%;
+  height: 100%;
+  background: #fff;
+}
+.loginInner {
+  width: 80%;
+  margin: 0 auto;
+  padding-top: 60px;
+}
+.loginInner .login_header .login_logo {
+  color: #02a774;
+  font-weight: bolder;
+  font-size:40px;
+  text-align:center;
+}
+.login_header .login_header_title{
+  text-align:center;
+  padding-top:40px;
+}
+.login_header_title a{
+  text-decoration: none;
+  font-size:14px;
+  color:#333;
+  padding-bottom:4px;
+}
+.login_header_title a:first-child{
+  margin-right:40px;
+}
+.login_header_title a.on{
+  color :#02a774;
+  font-weight: bolder;
+  border-bottom:2px solid #02a774;
+}
+.login_content form div{
+   display:none;
+}
+.login_content form div.on{
+  display:block;
+}
+.login_content form  input{
+  width:100%;
+  height:100%;
+  border: 1px solid #ddd;
+  border-radius :4px;
+  outline: none;
+  padding-left:10px;
+  box-sizing: border-box;
+ 
+}
+.login_content form  input:focus{
+   border: 1px solid #02a774;
+}
+.login_message{
+   position:relative;
+   margin-top:16px;
+   height:48px;
+   font-size:14px;
+   background:#fff;
+}
+.login_message .get_verification{
+ position:absolute;
+ top:50%;
+ right:10px;
+ transform: translateY(-50%);
+ border:none;
+ color:#ccc;
+ background :transparent;
+ font-size:14px;
+}
+.login_message .get_verification.right_phone{
+ color:#000;
+}
+.login_hint{
+  color:#999;
+  margin-top:12px;
+  font-size:14px;
+  line-height:20px;
+}
+.login_hint a{
+  text-decoration: none;
+   color :#02a774;
+}
+ 
+.login_verification{
+  position:relative;
+  margin-top:16px;
+  height:48px;
+  font-size:14px;
+  background:#fff;
+}
+.login_verification .switch_button{
+  border:1px solid #ddd;
+  width:30px;
+  height:16px;
+  position:absolute;
+  top:50%;
+  right:10px;
+  transform: translateY(-50%);
+  border-radius:8px;
+  padding:0 6px;
+  line-height:16px;
+  font-size:12px;
+  transition:  background-color 0.3s;
+  
+}
+.login_verification .switch_button.on{
+   background :#02a774;
+}
+.login_verification .switch_button.off{
+ background:#fff;
+}
+.switch_button .switch_circle{
+    background:#fff;
+    border:1px solid #ddd;
+    border-radius:50%;
+    width:16px;
+    height:16px;
+    position:absolute;
+    left:-1px;
+    top:-1px;
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
+}
+.switch_button .switch_circle.right{
+  transform :translateX(30px);
+}
+.switch_button  .switch_text{
+   color: #ddd;
+   float:right;
+}
+.login_submit{
+  display:block;
+  width:100%;
+  height:42px;
+  margin-top:30px;
+  background :#4cd96f;
+  border-radius:4px;
+  font-size:16px;
+  line-height:42px;
+  color:#fff;
+  text-align:center;
+  border:none;
+}
+ 
 </style>