登录配置

src/pages/modules/login/login.vue

@@ -9,28 +9,131 @@
         </div>
       </div>
       <div class="login-content">
-        <div class="login-content_wraper">
+        <div v-show="tab === 0" class="login-content_wraper">
           <div class="dl">登录</div>
           <div class="login-items-wraper">
             <div class="login-item">
-              <input type="text" class="login-input">
+              <div class="login-label" @click="toFocus(1)">用户名</div>
+              <input type="text" class="login-input" ref="input1" v-model="username">
             </div>
             <div class="login-item">
-              <input type="password" class="login-input">
+              <div class="login-label" @click="toFocus(2)">密码</div>
+              <input type="password" class="login-input" ref="input2" v-model="password">
             </div>
           </div>
-          <div class="login-buttons-wraper">
-            <button class="button button--primary button-login">登录</button>
-          </div>
-          <div class="login-forget-wraper">
+          <div class="login-setup-wraper">
+            <div class="setup-info pointer" @click="toSetup">配置信息</div>
             <router-link to="/home">忘记密码</router-link>
           </div>
+          <div class="login-buttons-wraper">
+            <button class="button button--primary button-login" :disabled="disabled" @click="saveLogin">登录</button>
+          </div>
+        </div>
+        <div v-show="tab === 1" class="login-content_wraper">
+          <div class="dl">配置</div>
+          <div class="login-items-wraper">
+            <div class="login-item">
+              <div class="login-label" @click="toFocus(3)">域名地址</div>
+              <input type="text" class="login-input" ref="input3" v-model="baseUrl">
+            </div>
+            <div class="login-item">
+              <div class="login-label" @click="toFocus(4)">刷新时间（秒）</div>
+              <input type="number" class="login-input" ref="input4" v-model="setTime">
+            </div>
+          </div>
+          <div class="login-setup-wraper login-setup-wraper__r">
+            <div class="setup-info pointer" @click="toLogin">立即登录</div>
+          </div>
+          <div class="login-buttons-wraper">
+            <button class="button button--primary button-login" @click="saveSetup">配置</button>
+          </div>
         </div>
       </div>
     </div>
   </div>
 </template>
 
+<script>
+import {authlogin} from '@config/getData2.js'
+import {encrypt} from '../../../main.js'
+export default {
+  data () {
+    return {
+      tab: 0,
+      username: '',
+      password: '',
+      baseUrl: this.$store.getters.baseUrl,
+      setTime: this.$store.getters.setTime / 1000,
+      disabled: false
+    }
+  },
+  mounted () {
+    // 点对点项目分辨率 1024 * 768
+    // alert(document.body.clientWidth, 'a')
+    // alert(document.body.clientHeight, 'b')
+    // alert(window.screen.width, 'c')
+    // alert(window.screen.height, 'd')
+  },
+  methods: {
+    toFocus (i) {
+      switch (i) {
+        case 1:
+          this.$refs.input1.focus()
+          break
+        case 2:
+          this.$refs.input2.focus()
+          break
+        case 3:
+          this.$refs.input3.focus()
+          break
+        case 4:
+          this.$refs.input4.focus()
+          break
+      }
+    },
+    toSetup () {
+      this.tab = 1
+    },
+    toLogin () {
+      this.tab = 0
+    },
+    saveSetup () {
+      let obj = {
+        baseUrl: this.baseUrl,
+        setTime: this.setTime * 1000
+      }
+      this.$store.dispatch('setConfig', obj)
+      this.toLogin()
+    },
+    saveLogin () {
+      this.disabled = true
+      if (!this.username) {
+        this.toast('请输入用户名')
+        this.disabled = false
+        return
+      }
+      if (!this.password) {
+        this.toast('请输入密码')
+        this.disabled = false
+        return
+      }
+      this._authlogin()
+    },
+    async _authlogin () {
+      try {
+        let res = await authlogin(this.username, encrypt(this.password))
+        let obj = {}
+        obj = Object.assign({}, res)
+        this.$store.dispatch('userInfo', JSON.stringify(obj))
+        this.$router.push('/homehome')
+      } catch (err) {
+        this.disabled = false
+      }
+    }
+  }
+}
+</script>
+
 <style lang="stylus" scoped>
 @import '~@style/mixin'
 .login-container
@@ -40,7 +143,7 @@
   _fj(center)
 .login-wraper
   _fj()
-  _wh(80vw, 65vh)
+  _wh(70vw, 65vh)
   padding 20px
   background-color #fff
   border-radius 20px
@@ -64,36 +167,49 @@
   padding 20px
 .login-content_wraper
   width 100%
-  max-width 200px
+  max-width 260px
   margin 0 auto
   _fj(center,,column)
 .dl
   width 100%
   _font(16px, 28px, #333, bold, center)
-  margin-bottom 10px
+  margin-bottom 30px
 .login-items-wraper
   width 100%
 .login-item
-  width 100%
+  _fj()
+  _wh(100%, 42px)
+  background-color #fff
+  padding 5px 12px
+  border 1px solid $gray2
+  border-radius 20px
   +.login-item
     margin-top 20px
+.login-label
+  width 102px
+  line-height 30px
+  _font(14px, 30px, $gray1,,)
 .login-input
+  width calc(100% - 102px)
+  line-height 30px
+  _font(14px, 30px, $gray1,,)
+.login-setup-wraper
   width 100%
-  height 40px
-  border 1px solid $gray2
-  padding 5px 12px
-  _font(14px, 16px, #323232,,)
-  border-radius 6px
-.login-forget-wraper
-  width 100%
-  margin-top 15px
-  text-align right
+  margin-top 10px
+  _fj()
   a
     _font(14px, 20px, $red1,,)
+.login-setup-wraper__r
+  justify-content flex-end
+  .setup-info
+    color $red1
+.setup-info
+  _font(14px, 20px, $fc1,,)
 .login-buttons-wraper
   width 100%
-  margin-top 20px
+  margin-top 10px
 .button-login
   width 100%
-  border-radius 12px
+  border-radius 20px
+  letter-spacing 5px
 </style>