crowd-test-service-frontend/src/pages/Homepage/LoginCard.vue

<template>
  <el-card class="login-card">
    <div class="login-welcome">
      <img :src="this.userImg==null?defaultValue.image:this.userImg" alt="welcome-img"
           class="pull-left welcome-img">
<!--      <img v-else src="../../assets/img/logo-project.png" alt="welcome-img" class="pull-left welcome-img">-->
      <div style="margin-left: 46px">
        <div class="welcome-title">
          hi，欢迎使用群智众测平台
        </div>
        <div class="welcome-content">
          众测群智，不一样的深度测试
        </div>
      </div>
      <div class="welcome-btn">
        <a :href="loginUrl">
          <el-button type="primary" size="mini" class="pull-left login-btn" v-if="!isLogin">登录</el-button>
        </a>
        <el-button type="danger" size="mini" class="pull-right cancel-btn" v-if="isLogin" @click.native="userLogout()">
          登出
        </el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
  import Http from '@/js/http.js'
  import Apis from '@/js/api.js'
  import {storageGet,logout,defaultValue} from '@/js/index.js'

  export default {
    name: "LoginCard",
    data() {
      return {
        isLogin: false,
        user: {},
        loginUrl: process.env.LOGIN_URL,
        userImg:require('../../assets/img/logo-project.png')
      }
    },
    methods: {
      loadData() {
        if (storageGet('user') != null) {
          this.isLogin = true;
          this.user = storageGet('user');
        }
      },
      userLogout() {
        this.isLogin = false
        logout().then((res) => {
          this.$router.go(0)
        })
      },
      getUserImg() {
        if (this.user == null) {
          this.userImg = null
        }else{
          Http.get(`/api/user/image/${this.user.userVO.id}`).then((res)=>{
            if(res.data){
              this.userImg = res.data;
            }
          })
        }

      }
    },
    mounted() {
      this.loadData();
      this.getUserImg();
    }
  }
</script>

<style scoped lang="less">
  .login-card {
    margin-bottom: 13px;

    .welcome-img {
      width: 40px;
      height: 40px;
      display: inline-block;
      margin: 2px 0;
    }

    .welcome-title {
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
    }

    .welcome-content {
      font-size: 13px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
    }

    .welcome-btn {
      width: 100%;
      height: 28px;
      margin-top: 20px;

      .login-btn {
        background-color: rgba(0, 118, 203, 1);

        &:hover {
          background-color: rgba(0, 118, 203, 0.8);
        }
      }

      .cancel-btn {
        background-color: rgba(217, 92, 93, 1);

        &:hover {
          background-color: rgba(217, 92, 93, 0.8);
        }
      }
    }
  }
</style>