登录功能

2025-02-19 12:29:44 +08:00
parent 50efbc29bc
commit 306e434234
11 changed files with 154 additions and 30 deletions
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
-    <title>山东金宝一体机</title>
+    <title>纽迪希亚ACS系统</title>
  </head>
  <body>
    <div id="app"></div>
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -42,6 +42,7 @@ export default {
          document.msExitFullscreen()
        }
      }
+      this.$store.dispatch('delUserInfo', '')
      this.$router.push('/setup')
    },
    toHome () {
--- a/src/config/getData.js
+++ b/src/config/getData.js
@@ -1,5 +1,10 @@
 import {post} from '@config/http.js'

+// 登录
+export const handLogin = (user, password) => post('mobile/auth/login', {
+  username: user,
+  password: password
+})
 // 查询设备
 export const queryDevices = () => post('api/pda/queryDevices', {})
 // 工单查询
--- a/src/config/mork.js
+++ b/src/config/mork.js
@@ -15,3 +15,10 @@ export const queryWorks = () => {
  let res = [{mfg_order_name: '001', work_code: 'aaaa'}, {mfg_order_name: '2'}, {mfg_order_name: '3'}, {mfg_order_name: '4'}]
  return res
 }
+export const handLogin = (user, password) => {
+  let res = {
+    user: {user: {person_name: 'admin'}},
+    token: 'aaaaattttt'
+  }
+  return res
+}
--- a/src/images/bg_logo.png
+++ b/src/images/bg_logo.png
--- a/src/images/form_bg.png
+++ b/src/images/form_bg.png
--- a/src/images/login_tab_active.png
+++ b/src/images/login_tab_active.png
--- a/src/images/login_tabs_bg.png
+++ b/src/images/login_tabs_bg.png
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -1,7 +1,10 @@
 <template>
  <div class="contianer">
    <jxHeader type="1" title="工单明细"></jxHeader>
-    <div class="contianer content">
+    <div class="welcome_text_wraper">
+      <div class="welcome_text">{{userName}}, 欢迎进入纽迪希亚ACS系统！</div>
+    </div>
+    <div class="contianer content contianer-1">
      <div class="zd-row jccenter contianer content_wraper">
        <div class="nav" v-for="(e, i) in  menu" :key="i" @click="toPage(e)">
          <img class="nav_icon" :src="require('../images/menu/' + e.icon + '.png')" alt="e.title" :style="{'background-color': ['#ff814a', '#4982fd'][i]}">
@@ -21,6 +24,7 @@ export default {
  },
  data () {
    return {
+      userName: this.$store.getters.userInfo !== '' ? JSON.parse(this.$store.getters.userInfo).person_name : '',
      menu: [
        {title: '工单管理', icon: 'RF1', path: 'index'},
        {title: '退桶任务', icon: 'RF2', path: 'calltask'}
@@ -51,4 +55,18 @@ export default {
 .nav_txt
  _font(.4rem, .4rem, #fff,,center)
  margin-top .6rem
+.welcome_text_wraper
+  height .7rem
+  margin 1.07rem 0.4rem 0.4rem 0.4rem
+.welcome_text
+  font-size .3rem
+  line-height .7rem
+  color  #F6F9FE
+  font-family: 'YouSheBiaoTiHei'
+  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(49,190,255,0.9) 0%, rgba(239,252,254,1) 40%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+.contianer-1
+  height calc(100% - 2.17rem)
+  padding-top 0
 </style>
--- a/src/pages/setup.vue
+++ b/src/pages/setup.vue
@@ -2,31 +2,63 @@
  <div class="zd-row jccenter contianer">
    <div class="header-wrap"><h1>ACS</h1></div>
    <div class="setup-wrap">
-      <div class="zd-row filter-item">
-        <div class="zd-col-6 filter-label">域名地址</div>
-        <input type="text" class="zd-col-18 filter-value" v-model="baseUrl">
-      </div>
-      <!-- <div class="zd-row filter-item">
-        <div class="zd-col-6 filter-label">刷新时间(秒)</div>
-        <input type="number" class="zd-col-18 filter-value" v-model="setTime">
-      </div> -->
-      <div class="zd-row jccenter button-wrap">
-        <button class="button btn-primary" @click="_config">配置</button>
+      <div class="setup-wrap-i">
+        <div class="zd-row jcflexstart login_tab">
+          <div class="login_tab_item" :class="{'login_tab_active': drift === 0}" @click="_tabChange(0)">登录</div>
+          <div class="login_tab_item" :class="{'login_tab_active': drift === 50}" @click="_tabChange(50)">配置</div>
+        </div>
+        <div class="login_cnt drift" :style="{'left': '-'+drift*2+'%'}">
+          <div class="login_card">
+            <div class="zd-row filter-item">
+              <div class="zd-col-6 filter-label">用户名</div>
+              <input type="text" class="zd-col-18 filter-value" v-model="loginname">
+            </div>
+            <div class="zd-row filter-item">
+              <div class="zd-col-6 filter-label">密&nbsp;&nbsp;码</div>
+              <input type="password" class="zd-col-18 filter-value" v-model="password">
+            </div>
+            <div class="zd-row jccenter button-wrap">
+              <button class="button btn-primary" :disabled="disabled" @click="toLogin">登录</button>
+            </div>
+          </div>
+          <div class="login_card">
+            <div class="zd-row filter-item">
+              <div class="zd-col-6 filter-label">域名地址</div>
+              <input type="text" class="zd-col-18 filter-value" v-model="baseUrl">
+            </div>
+            <!-- <div class="zd-row filter-item">
+              <div class="zd-col-6 filter-label">刷新时间(秒)</div>
+              <input type="number" class="zd-col-18 filter-value" v-model="setTime">
+            </div> -->
+            <div class="zd-row jccenter button-wrap button-wrap-1">
+              <button class="button btn-primary" @click="_config">配置</button>
+            </div>
+          </div>
+        </div>
      </div>
    </div>
  </div>
 </template>

 <script>
+import { encrypt } from '../main.js'
+import {handLogin} from '@config/getData.js'
 export default {
  name: 'setup',
  data () {
    return {
+      drift: 0,
+      loginname: '',
+      password: '',
      baseUrl: this.$store.getters.baseUrl,
-      setTime: this.$store.getters.setTime / 1000
+      setTime: this.$store.getters.setTime / 1000,
+      disabled: false
    }
  },
  methods: {
+    _tabChange (num) {
+      this.drift = num
+    },
    _viewport () {
      this.viewportWidth = window.screen.width
      this.viewportHeight = window.screen.height
@@ -51,19 +83,47 @@ export default {
        setTime: this.setTime * 1000
      }
      this.$store.dispatch('setConfig', obj)
-      this.$router.push('/home')
-      let element = document.documentElement
-      if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
-        if (element.requestFullscreen) {
-          element.requestFullscreen()
-        } else if (element.webkitRequestFullScreen) {
-          element.webkitRequestFullScreen()
-        } else if (element.mozRequestFullScreen) {
-          element.mozRequestFullScreen()
-        } else if (element.msRequestFullscreen) {
-          // IE11
-          element.msRequestFullscreen()
+      this._tabChange(0)
+    },
+    async toLogin () {
+      this.disabled = true
+      if (this.loginname === '') {
+        this.$message({
+          message: '用户名不能为空',
+          type: 'warning'
+        })
+        this.disabled = false
+        return
+      }
+      if (this.password === '') {
+        this.$message({
+          message: '密码不能为空',
+          type: 'warning'
+        })
+        this.disabled = false
+        return
+      }
+      try {
+        let res = await handLogin(this.loginname, encrypt(this.password))
+        this.$store.dispatch('saveUserInfo', JSON.stringify(res.user.user))
+        this.$store.dispatch('saveToken', res.token)
+        this.disabled = false
+        this.$router.push('/home')
+        let element = document.documentElement
+        if (!(document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement)) {
+          if (element.requestFullscreen) {
+            element.requestFullscreen()
+          } else if (element.webkitRequestFullScreen) {
+            element.webkitRequestFullScreen()
+          } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen()
+          } else if (element.msRequestFullscreen) {
+            // IE11
+            element.msRequestFullscreen()
+          }
        }
+      } catch (e) {
+        this.disabled = false
      }
    }
  }
--- a/src/style/layout.styl
+++ b/src/style/layout.styl
@@ -34,10 +34,40 @@

 // login
 .setup-wrap
-  width 8.85rem
-  background linear-gradient(45deg, rgba(28, 95, 161, 70%), rgba(20, 67, 120, 70%))
-  border 1px solid #6fc4e2
-  padding .49rem .48rem
+  width 9rem
+  height 7.02rem
+  padding .86rem .85rem 1.12rem .98rem
+  background: url('~@/images/form_bg.png') center / 100% no-repeat
+.setup-wrap-i
+  width 100%
+  height 100%
+  overflow: hidden
+.login_tab
+  width 100%
+  height 1.07rem
+  background: url('~@/images/login_tabs_bg.png') center / 100% no-repeat
+  align-items: flex-start
+.login_tab_item
+  width 2.7rem
+  height .73rem
+  font-size .4rem
+  line-height .73rem
+  text-align: center
+  color #99B1DD
+  font-family 'YouSheBiaoTiHei'
+.login_tab_active
+  color #fff
+  background: url('~@/images/login_tab_active.png') center / 100% no-repeat
+.login_cnt
+  position relative
+  width 200%
+  overflow hidden
+.login_card
+  width 50%
+  float left
+  padding 0 .41rem
+.drift
+	transition left .3s linear
 .contianer
  _wh(100%, 100%)
 .header-wrap
@@ -50,7 +80,10 @@
    _font(.8rem, 1rem, #CF6A46,,center)
    font-family "YouSheBiaoTiHei"
 .button-wrap {
-  margin-top: .2rem;
+  margin-top: .52rem;
+}
+.button-wrap-1 {
+  margin-top: 1.64rem;
 }
 .button {
  width: 3.36rem;