chat/_src/components/login/loginBox2.vue

<template>
  <div class="c-loginBox">
    <el-button
      type="primary"
      class="login-btn"
      @click="handleLogin"
      v-if="!isLogin">
      {{$t('login.login')}}
    </el-button>
    <el-button
      type="primary"
      class="login-btn"
      :loading="true"
      v-else>
      {{$t('login.autoLogin')}}
    </el-button>
    <p>{{$t('login.loginWithScatter')}}</p>
    <a class="tip" href="https://get-scatter.com/" target="_blank" v-if="!scatter">{{$t('login.loadScatter')}}</a>
  </div>
</template>

<script>
import Vue from 'vue'
import { Button } from 'element-ui'
import { mapState } from 'vuex'
import { constants } from 'fs'

Vue.component(Button.name, Button)

export default {
  name: 'loginBox2',
  created () {

  },
  computed: {
    ...mapState([
      'account',
      'scatter'
    ]),
    isLogin () {
      return this.$store.state.chat.isLogin
    }
  },
  methods: {
    async handleLogin () {
      try {
        await this.$store.dispatch('doScatterLogin', this.$router)
        await this.$store.dispatch('doContractLogin')
        this.$store.commit('chatAppLogin', true)
        this.$store.commit('toApp', true)
      } catch (error) {
        this.$store.commit('chatAppLogin', false)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.c-loginBox{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -100px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background-color: #fff;
  width: 400px;
  height: 200px;
  box-shadow: 0 2px 10px #999;
  -moz-box-shadow: #999 0 2px 10px;
  -webkit-box-shadow: #999 0 2px 10px;
  text-align: center;
  p{
    text-align: center;
    color: #a3a3a3;
    font-size: 15px;
    padding: 0 40px;
    line-height: 1.8;
  }
  .login-btn{
    margin-top: 50px;
    margin-bottom: 30px;
    min-width: 150px;
    font-size: 20px;
  }
  .tip{
    display: block;
    color: #f93c3c;
    font-size: 12px;
  }
}
</style>