优化

4 年之前 · 7b41617aa5
--- 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>