xzrkz-web/src/pages/Login/Login.vue

<template>
  <div>
    <div class="login">
      <img src="@/assets/images/login-bg.jpg" alt="">
    </div>
    <div class="login-box">
      <img src="@/assets/images/logo.png" alt="">
      <div class="login-info">
        <input type="number" placeholder="请输入手机号" v-model="loginInfo.username">
        <input type="number" placeholder="请输入验证码" v-model="loginInfo.verificationCode" class="yzm">
        <button class="get-yzm" @click="getVerificationCode" v-if="!wait">获取验证码</button>
        <button v-else class="get-yzm wait">{{restTime}}秒后重新获取</button>
        <button @click="submitLogin">登录</button>
        <div class="forget-register">
          <router-link to="/">忘记密码>></router-link>
          <router-link to="/register" class="register">立即注册>></router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import layer from 'vue-layer'
export default {
  name: 'Login',
  data () {
    return {
      loginInfo: {
        username: '',
        verificationCode: ''
      },
      restTime: 120,
      wait: false
    }
  },
  methods: {
    submitLogin: function () {
      var self = this
      axios.post('http://192.168.0.113:7001/usercenter/app/sign/loginphone', {
        username: self.loginInfo.username,
        verificationCode: self.loginInfo.verificationCode
      }, {
        headers: {
          'Access-Control-Allow-Origin': '*'
        }
      }).then(function (res) {
        if (res.status === 200) {
          localStorage.setItem('token', res.data.data)
          self.$layer.msg('登录成功')
          setTimeout(function () {
            self.$router.go(-1)
          }, 1500)
        }
      })
    },
    getVerificationCode: function () {
      var self = this
      if (self.loginInfo.username) {
        axios.get('http://192.168.0.113:7001/usercenter/api/sms/getverificationcode/' + self.loginInfo.username).then(function (res) {
          console.log(res)
          if (res.status === 200) {
            self.wait = true
            var timer = setInterval(function () {
              self.restTime--
              if (self.restTime === 0) {
                self.wait = false
                clearInterval(timer)
              }
            }, 1000)
          }
        })
      } else {
        alert('请输入手机号')
      }
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.login
  width 100%
  min-width 1200px
  img
    width 100%
    height 434px
.login-box
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  background #fff
  border-radius 10px
  box-shadow 0 0 2px 2px #e0e0e0
  padding 35px 70px
  width 540px
  box-sizing border-box
  img
    width 100%
  .login-info
    width 336px
    margin 15px auto 0
    border-top 1px solid #e0e0e0
    padding-top 20px
    input
      width 100%
      height 40px
      padding 0 10px
      box-sizing border-box
      border-radius 6px
      border solid 1px #e0e0e0
      color #333
      font-size 14px
      margin-bottom 10px
      &.yzm
        width 53%
    button
      width 100%
      height 40px
      border-radius 6px
      background #3498eb
      color #ffffff
      font-size 20px
      border none
      outline none
      cursor pointer
      &.get-yzm
        width: 42%
        margin-left 3%
        vertical-align middle
        font-size 16px
      &.wait
        background #eeeeee
        color #fff
    .forget-register
      margin-top 20px
      a
        color #999
        font-size 16px
        &.register
          float right
input[type="number"]{ -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }
</style>