init

src/pages/login/Login.vue

@@ -0,0 +1,139 @@
+<template>
+  <section>
+    <section class="content">
+      <p class="p1">欢迎来到</p>
+      <p class="p2">晟华手持系统！</p>
+      <div class="input-box">
+        <input type="text" class="allwidth" placeholder="请输入用户名" v-model="loginname">
+      </div>
+      <div class="fxrow input-box">
+        <input class="fxcol" :type="type" placeholder="请输入密码" v-model="password">
+        <i class="icon-eye" :class="type === 'password' ? 'icon-eye-close' : 'icon-eye-open'" @click="changeType"></i>
+      </div>
+      <div class="fxrow check-box">
+        <i class="icon-name-check" :class="{'icon-name-checked': memberName}" @click="Remember"></i>
+        <span class="fxcol">记住用户名</span>
+        <router-link :to="{path: '/setup'}" class="fxcol" style="text-align:right;color:#6798ef">设置</router-link>
+      </div>
+      <button class="login-btn" :disabled="disabled" @click="_Login">确认登录</button>
+    </section>
+  </section>
+</template>
+
+<script>
+import {loginApi} from '@config/getData2'
+import {encrypt} from '../../main.js'
+export default {
+  name: 'Login',
+  data () {
+    return {
+      loginname: '',
+      password: '',
+      type: 'password',
+      memberName: false,
+      disabled: false
+    }
+  },
+  created () {
+    if (this.$store.getters.userInfo !== '') {
+      this.loginname = JSON.parse(this.$store.getters.userInfo).loginname
+      this.memberName = this.loginname !== ''
+    }
+  },
+  mounted () {
+    document.getElementsByTagName('body')[0].className = 'login-bg'
+  },
+  methods: {
+    changeType () {
+      this.type = this.type === 'password' ? 'text' : 'password'
+    },
+    Remember () {
+      this.memberName = !this.memberName
+    },
+    async loginApi () {
+      try {
+        let res = await loginApi(this.loginname, encrypt(this.password))
+        if (res.code === '1') {
+          let obj = {}
+          if (this.memberName) {
+            obj = Object.assign({}, res.result.user.user, {token: res.token, loginname: this.loginname})
+          } else {
+            obj = Object.assign({}, res.result.user.user, {token: res.result.token, loginname: ''})
+          }
+          this.$store.dispatch('setUserInfo', JSON.stringify(obj))
+          this.$router.push('/home')
+        } else {
+          this.toast(res.desc)
+        }
+        this.disabled = false
+      } catch (err) {
+        this.disabled = false
+      }
+    },
+    _Login () {
+      this.disabled = true
+      if (this.loginname === '') {
+        this.toast('用户名不能为空')
+        this.disabled = false
+        return
+      }
+      if (this.password === '') {
+        this.toast('密码不能为空')
+        this.disabled = false
+        return
+      }
+      this.logintype = '01'
+      this.loginApi()
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+.p1
+  _font(.6rem,1,#444)
+  padding-top: 0.9rem
+.p2
+  _font(.5rem,1,#444)
+  padding: 0.4rem 0 0.25rem
+.input-box
+  margin-top .68rem
+  border-bottom 1px solid #e2e2e2
+  input
+    _font(.32rem,.74rem,#999)
+    padding-left .1rem
+.icon-eye
+  flex 0 0 .35rem
+  height .74rem
+.icon-eye-close
+  _bis('../../images/eyeclose.png',.35rem)
+.icon-eye-open
+  _bis('../../images/eyeopen.png',.35rem)
+.check-box
+  margin .25rem 0 .7rem
+  height .34rem
+  _font(.26rem,.34rem,#999)
+.icon-name-check
+  flex 0 0 .26rem
+  height .26rem
+  margin-right 6px
+  border 1px solid #e2e2e2
+  border-radius 50%
+.icon-name-checked
+  border none
+  _bis('../../images/select.png',.26rem)
+.login-btn
+  width 100%
+  border-radius .46rem
+  _font(.36rem,.92rem,#fff,,center)
+  background-color $red
+.login-ewm
+  margin 1.2rem auto .2rem
+  _wh(.82rem,.82rem)
+  border 1px solid #e74f1a
+  border-radius 50%
+  _bis('../../images/ewm.png',58%)
+.login-ewm-p
+  _font(.26rem,1,$red,,center)
+</style>