front/src/views/index/components/login-form-banner.vue

<template>
  <div class="fx-row fx-end-cen login-form-container" style="padding: 40px 0;"
       :style="{backgroundImage: `url(${bannerSrc})`} ">
    <div class="bg-white rd8 login-form-block">
      <el-image style="height: 70px" fit="contain" :src="require('@/assets/logo/logo.png')"/>
      <div class="f-primary text-center mt15 mb20 bold f18" style="letter-spacing: 10px;">
        WELCOME
      </div>
      <el-form v-if="!isLogin" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form"
               style="width: auto;">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon"/>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            auto-complete="off"
            placeholder="密码"
            @keyup.enter.native="login"
          >
            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon"/>
          </el-input>
        </el-form-item>
        <div class="fx-row fx-end-cen mb20">
          <label class="pointer f-999 f14" @click="handleForgetPwd">忘记密码?</label>
        </div>
        <el-form-item style="width:100%;">
          <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
                     @click.native.prevent="login">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
      <div v-if="isLogin">
        <div class="text-center">
          <div class="user-info-head">
            <img src="@/assets/images/profile.jpg" tclass="img-circle img-lg"
                 style="border-radius:50%;width:80px;"/>
          </div>
        </div>
        <div>
          <div class="text-center mt20 mb10">
            {{ currentUser.userName }}
          </div>
          <p class="text-center" style="color:#999;font-size:14px">
            <span>{{ currentUser.nickName }} {{ schoolName }}</span>
          </p>
        </div>
        <div class="mt15 fx-row fx-bet-cen f13">
          <div v-if="false" class="fx-row ai-cen">
            <img class="icon16 mr5" src="@/assets/images/icon_jifen.png" alt/>
            {{ currentUser.points || 0 }}积分
          </div>
          <div class="fx-row ai-cen pointer f-blue" @click="handleGoUserCenter">
            <img class="icon16 mr5" src="@/assets/images/icon_user.png" alt/>
            个人中心
          </div>
          <div class="fx-row ai-cen pointer f-red" @click="logout">
            <img class="icon16 mr5" src="@/assets/images/icon_back.png" alt/>
            退出
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* TODO: 22.8.23 hht 这里为节省时间，全部由依赖注入主导，没有做逻辑分割 */
import {mapGetters} from 'vuex'
import loginCheckMixin from '@/views/index/blocks/index-login-interceptor-mixin'

export default {
  mixins: [loginCheckMixin],
  name: 'login-form-banner',
  props: ['loginForm', 'loading'],
  inject: ['login', 'logout', 'handleForgetPwd'],
  data() {
    return {
      bannerSrc: require('@/assets/images/banner/index-banner.png'),
      loginRules: {
        relation: [
          {
            required: true,
            trigger: 'blur',
            message: '请选择学生端或者老师端'
          }
        ],
        grade: [
          {
            required: true,
            trigger: 'blur',
            message: '请选择学校类别'
          }
        ],
        username: [
          {
            required: true,
            trigger: 'blur',
            message: '用户名不能为空'
          }
        ],
        password: [
          {
            required: true,
            trigger: 'blur',
            message: '密码不能为空'
          }
        ],
        code: [
          {
            required: true,
            trigger: 'change',
            message: '验证码不能为空'
          }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['currentUser', 'schoolName', 'isLogin'])
  },
  methods: {
    validate: function (cb) {
      return this.$refs.loginForm.validate(cb)
    },
    async handleGoUserCenter() {
      await this.loginCheck()
      this.$router.push('/user/info/userinfo')
    }
  }
}
</script>

<style scoped>
.login-form-container {
  background: no-repeat center center;
  background-size: cover;
}

.login-form-block {
  width: 350px;
  height: 360px;
  padding: 15px 40px;
  margin-right: calc(50vw - 600px);
}
</style>