From 7b41617aa58a8a5e41e1cc10fbd5d90d122cae27 Mon Sep 17 00:00:00 2001
From: liuminjian <xxb_lmj@jiajiayue.com.cn>
Date: Mon, 8 Mar 2021 13:37:33 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/login.vue | 348 ++++++++++++++++++++++++++------------------
 1 file changed, 205 insertions(+), 143 deletions(-)

diff --git a/src/views/login.vue b/src/views/login.vue
index 574dd63e..6ce460e7 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,164 +1,226 @@
 <template>
-    <div class="login_page">
-        <div class="focus-logo">
-            <img src="@/assets/images/login-logo.png" />
-        </div>
-    
-        <ul class="head_nav clear">
-           <li  @click="isSmsLogin=false" :class="{active:!isSmsLogin}">
-               账号登录
-           </li>
-           <li @click="isSmsLogin=true" :class="{active:isSmsLogin}">
-               验证码登录
-           </li>
-        </ul>
+  <div class="login_page">
+    <div class="focus-logo">
+      <img src="@/assets/images/login-logo.png" />
+    </div>
+
+    <ul class="head_nav clear">
+      <li @click="isSmsLogin = false" :class="{ active: !isSmsLogin }">
+        账号登录
+      </li>
+      <li @click="isSmsLogin = true" :class="{ active: isSmsLogin }">
+        验证码登录
+      </li>
+    </ul>
 
-        <div class="form_main">
-            <van-form @submit="handleLogin">
-                <van-field
-                    v-model="formData.username"
-                    name="username"
-                    label="用户名"
-                    placeholder="用户名"
-                    v-if="!isSmsLogin"
-                />
-                <van-field
-                    v-model="formData.password"
-                    type="password"
-                    name="password"
-                    label="密码"
-                    placeholder="密码"
-                    v-if="!isSmsLogin"
-                />
-                <van-field
-                    v-model="formData.code"
-                    center
-                    clearable
-                    label="验证码"
-                    placeholder="请输入图形验证码"
-                    v-if="!isSmsLogin"
-                    >
-                    <template #button>
-                        <img  class="code-img" :src="codeUrl"  @click="getCode"/>
-                    </template>
-                </van-field>
-                <van-field v-model="formData.mobile" v-if="isSmsLogin"  label="手机号" placeholder="请输入手机号码"/>
-                <van-field
-                    v-model="formData.smsCode"
-                    center
-                    clearable
-                    label="短信验证码"
-                    placeholder="请输入短信验证码"
-                    v-if="isSmsLogin"
-                    >
-                    <template #button>
-                        <van-button size="small" type="primary"  @click.native.prevent="getSmsCode">{{computeTime>0 ? `(${computeTime}s)已发送` : '获取验证码'}}</van-button>
-                    </template>
-                </van-field>
+    <div class="form_main">
+      <van-form @submit="handleLogin">
+        <van-field
+          v-model="formData.username"
+          name="username"
+          label="用户名"
+          placeholder="用户名"
+          v-if="!isSmsLogin"
+        />
+        <van-field
+          v-model="formData.password"
+          type="password"
+          name="password"
+          label="密码"
+          placeholder="密码"
+          v-if="!isSmsLogin"
+        />
+        <van-field
+          v-model="formData.code"
+          center
+          clearable
+          label="验证码"
+          placeholder="请输入图形验证码"
+          v-if="!isSmsLogin"
+        >
+          <template #button>
+            <img class="code-img" :src="codeUrl" @click="getCode" />
+          </template>
+        </van-field>
+        <van-field
+          v-model="formData.mobile"
+          v-if="isSmsLogin"
+          label="手机号"
+          placeholder="请输入手机号码"
+        />
+        <van-field
+          v-model="formData.smsCode"
+          center
+          clearable
+          label="短信验证码"
+          placeholder="请输入短信验证码"
+          v-if="isSmsLogin"
+        >
+          <template #button>
+            <van-button
+              size="small"
+              type="primary"
+              @click.native.prevent="getSmsCode"
+              >{{
+                computeTime > 0 ? `(${computeTime}s)已发送` : "获取验证码"
+              }}</van-button
+            >
+          </template>
+        </van-field>
 
-                <div class="form-submit">
-                    <van-button round block type="info" native-type="submit">登录</van-button>
-                </div>
-            </van-form>
+        <div class="form-submit">
+          <van-button
+            round
+            block
+            type="info"
+            native-type="submit"
+            :loading="loading"
+            >登录</van-button
+          >
         </div>
+      </van-form>
     </div>
+  </div>
 </template>
 
 <script>
-import { getCodeImg , getSmsCode , smsLogin } from "@/api/login";
+import { getCodeImg, getSmsCode, smsLogin } from "@/api/login";
+import Cookies from "js-cookie";
 export default {
-    name: 'login',
-    data () {
-        return {
-            formData:{
-                username: null, //账号
-                password:null, //密码
-                code:null,  //图片验证码
-                uuid:null,  //识别uuid
-                mobile:null, //手机号
-            },
-            codeUrl:'', //验证码
-            isSmsLogin: false, //是否手机验证码
-            computeTime: 0,
-        }
+  name: "login",
+  data() {
+    return {
+      formData: {
+        username: "admin", //账号
+        password: "admin123", //密码
+        code: null, //图片验证码
+        uuid: null, //识别uuid
+        mobile: null, //手机号
+        smsCode: null, //短信验证码
+      },
+      loading: false,
+      codeUrl: "", //验证码
+      isSmsLogin: false, //是否手机验证码
+      computeTime: 0,
+    };
+  },
+  created() {
+    this.getCode();
+  },
+  methods: {
+    getCode() {
+      getCodeImg().then((res) => {
+        this.formData.uuid = res.uuid;
+        this.codeUrl = "data:image/gif;base64," + res.img;
+      });
     },
-    created(){
-        this.getCode()
+    getSmsCode() {
+      if (!this.computeTime) {
+        let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
+        if (!myreg.test(this.formData.mobile)) {
+          this.$notify({ type: "warning", message: "手机号格式不正确" });
+          return false;
+        }
+        getSmsCode(this.formData.mobile).then((res) => {
+          if (res.code === 200) {
+            this.$notify({ type: "success", message: "验证码已发送" });
+            this.loginForm.uuid = res.uuid;
+            this.computeTime = 60;
+            this.timer = setInterval(() => {
+              this.computeTime--;
+              if (this.computeTime <= 0) {
+                clearInterval(this.timer);
+              }
+            }, 1000);
+          }
+        });
+      }
     },
-    methods:{
-        getCode(){
-            getCodeImg().then(res=>{
-                this.formData.uuid = res.uuid;
-                this.codeUrl = "data:image/gif;base64," + res.img;
-            })
-        },
-        getSmsCode(){
-            if (!this.computeTime) {
-                    getSmsCode(this.formData.mobile).then(res =>{
-                        if(res.code === 200){
-                            Notify({ type: 'success', message: '验证码已发送' });
-                            this.loginForm.uuid = res.uuid;
-                            this.computeTime = 60;
-                            this.timer = setInterval(() => {
-                                this.computeTime--;
-                                if (this.computeTime <= 0) {
-                                    clearInterval(this.timer)
-                                }
-                            }, 1000);
-                        }
-                    })
-               
-                }
-        },
-        handleLogin(values){
-            if(this.isSmsLogin){ //短信登录
-
-            }else{ //账号密码登录
-
-            }
-            // this.$store.dispatch("Login",this.formData).then((res) =>{
-            //     console.log(res)
-            // })
+    handleLogin(values) {
+      if (this.isSmsLogin) {
+        //短信登录
+        let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
+        if (!myreg.test(this.formData.mobile)) {
+          this.$notify({ type: "warning", message: "手机号格式不正确" });
+          return false;
+        } else if (this.formData.smsCode == "") {
+          this.$notify({ type: "warning", message: "短信验证码不能为空" });
+          return false;
         }
-    }
-}
+        this.loading = true;
+        this.$store
+          .dispatch("SmsLogin", this.formData)
+          .then(() => {
+            this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+          })
+          .catch(() => {
+            this.loading = false;
+          });
+      } else {
+        //账号密码登录
+        if (this.formData.username == "") {
+          this.$notify({ type: "warning", message: "账号不能为空" });
+          return false;
+        } else if (this.formData.password == "") {
+          this.$notify({ type: "warning", message: "密码不能为空" });
+          return false;
+        } else if (this.formData.code == "") {
+          this.$notify({ type: "warning", message: "图片验证码不能为空" });
+          return false;
+        }
+        this.$store
+          .dispatch("Login", this.formData)
+          .then(() => {
+            this.$router.push({ path: this.redirect || "/" }).catch(() => {});
+          })
+          .catch(() => {
+            this.loading = false;
+            this.getCode();
+          });
+      }
+    },
+  },
+};
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
 .login_page {
-  .focus-logo{
-      width: 310px;
-      margin:0 auto 40px;
-      padding-top: 60px;
-      img{
-          width: 100%;
-      }
+  .focus-logo {
+    width: 310px;
+    margin: 0 auto 40px;
+    padding-top: 60px;
+    img {
+      width: 100%;
+    }
   }
 
-   .head_nav{
-       li{
-           width: 50%;
-           float: left;
-           height: 90px;
-           line-height: 90px;
-           text-align: center;
-           font-size: 30px;
-           background:#fff;
-           border-bottom: 2px solid #fff;
-           &.active{
-               background: #F5F5F5;
-               border-bottom:2px solid #2386EE;
-               color: #2386EE;
-           }
-       }
-       border-bottom: 1px solid #B3BBD1;
-       border-top: 1px solid #eee;
-   }
-   .form_main{
-       .form-submit{margin: 40px 40px 0;}
-       .code-img{width: 220px;}
-   }
-
+  .head_nav {
+    li {
+      width: 50%;
+      float: left;
+      height: 90px;
+      line-height: 90px;
+      text-align: center;
+      font-size: 30px;
+      background: #fff;
+      border-bottom: 2px solid #fff;
+      &.active {
+        background: #f5f5f5;
+        border-bottom: 2px solid #2386ee;
+        color: #2386ee;
+      }
+    }
+    border-bottom: 1px solid #b3bbd1;
+    border-top: 1px solid #eee;
+  }
+  .form_main {
+    .form-submit {
+      margin: 40px 40px 0;
+    }
+    .code-img {
+      width: 220px;
+    }
+  }
 }
 </style>
\ No newline at end of file