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

<template>
  <div>
    <div class="login">
      <img src="@/assets/images/login-bg.png" 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="password" placeholder="请输入密码" v-model="loginInfo.password">
        <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 class="loading" v-if="isLoading">
      <div class="loading-box">
        <img src="@/assets/images/loading.gif" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import common from '@/common/components/common.js'
import md5 from 'md5'
import layer from 'vue-layer'
export default {
  name: 'Login',
  data () {
    return {
      loginInfo: {
        username: '',
        password: ''
      },
      restTime: 120,
      wait: false,
      isLoading: false,
      url: common.url
    }
  },
  methods: {
    submitLogin: function () {
      var self = this
      self.isLoading = true
      axios.post(self.url + 'app/sign/default', {
        username: self.loginInfo.username,
        password: md5(md5(md5(self.loginInfo.password)))
      }, {
        headers: {
          'Access-Control-Allow-Origin': '*'
        }
      }).then(function (res) {
        if (res.status === 200) {
          self.isLoading = false
          window.sessionStorage.setItem('token', res.data.data)
          self.$layer.msg('登录成功')
          setTimeout(function () {
            self.$router.go(-1)
          }, 1000)
        }
      }).catch(function (error) {
        self.$layer.msg(error.response.data.msg)
        self.isLoading = false
      })
    },
    getVerificationCode: function () {
      var self = this
      self.isLoading = true
      if (self.loginInfo.username) {
        axios.get(self.url + 'usercenter/api/sms/getverificationcode/' + self.loginInfo.username).then(function (res) {
          if (res.status === 200) {
            self.wait = true
            self.isLoading = false
            var timer = setInterval(function () {
              self.restTime--
              if (self.restTime === 0) {
                self.wait = false
                self.restTime = 120
                clearInterval(timer)
              }
            }, 1000)
          }
        })
      } else {
        alert('请输入手机号')
      }
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "~styles/public.styl"
.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 $main-color
      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
.loading
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background rgba(0,0,0,0.6)
  .loading-box
    padding 50px
    background rgba(255,255,255,0.6)
    border-radius 10px
    position absolute
    top 50%
    left 50%
    transform translate(-50%, -50%)
input[type="number"]{ -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; }
</style>