web

litian

2024-06-13 2887cde644b586ceff61201705a5c4bdfe7e2b31

 src/views/login.vue

@@ -1,40 +1,55 @@
<template>
  <div class="loginPage">
    <div class="loginForm">
      <p>数字教材阅读器</p>
      <el-form ref="ruleFormRef" :model="loginData" :rules="rules" label-width="80px">
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="loginData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input type="password" v-model="loginData.password"></el-input>
        </el-form-item>
        <div class="btnBox">
          <el-button
            style="width: 120px"
            type="primary"
            @click="submitForm(ruleFormRef)"
            :loading="loading"
            >登 录</el-button
          >
    <div class="loginBox">
      <div class="loginForm">
        <div class="singUpPhone">
          <h2>密码登录</h2>
          <el-form ref="ruleFormRef" :model="loginData" :rules="rules" class="">
            <el-form-item prop="username">
              <!-- <el-input v-model="loginData.username"></el-input> -->
              <el-input v-model="loginData.username" placeholder="请输入手机号" size="large">
                <template #prepend>
                  <el-select v-model="select" placeholder="Select" class="selectPhone">
                    <el-option label="中国+86" value="86" />
                  </el-select>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="loginData.password"
                placeholder="请输入密码"
              ></el-input>
            </el-form-item>
            <div class="btnBox">
              <el-button
                class="logInBtn"
                type="primary"
                @click="submitForm(ruleFormRef)"
                :loading="loading"
                >登 录</el-button
              >
            </div>
          </el-form>
        </div>
      </el-form>
      </div>
      <el-image :src="dialogRightImg" class="rightImg" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, inject } from 'vue'
import { ref, reactive, inject, onBeforeMount } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

import dialogRightImg from '@/assets/images/content/dialogRightImg.png'
const MG: any = inject('MG')
const route = useRoute()
const router = useRouter()

const request = inject('request')

const ruleFormRef = ref()

const select = ref<string>('中国+86')
const loginData = ref({
  username: '',
  password: ''
@@ -52,24 +67,25 @@
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      request({
        url: '/identity/api/LoginByPassword',
        method: 'post',
        data: {
      MG.identity
        .loginByPassword({
          appRefCode: 'jingshieke',
          loginName: loginData.value.username,
          password: loginData.value.password,
          platform: 'string'
        }
      })
        })
        .then((res) => {
          console.log(res)
          if (res.token != null) {
            localStorage.setItem('token', res.token)
            getUserInfo()
            if (route.query.redirect) {
              router.push(route.query.redirect)
            } else {
              router.push('/')
              router.replace({
                path: '/home',
                query: { bookId: localStorage.getItem('bookId') }
              })
            }
          } else if (res.data.isError) {
            ElMessage.error(res.data.errorDescription)
@@ -83,6 +99,34 @@
    }
  })
}

const getUserInfo = () => {
  MG.identity.getCurrentAppUser().then((res) => {
    console.log(res, '用户信息')
    if (res) {
      let teacherRole = res.roleLinks.find((item) => item.role.refCode == 'teacher')
      let teacherInfos = res.infoList.find((item) => item.type == 'teacherInfo')
      let phoneInfo = res.secretList.find((item) => item.type == 'MobilePhone')
      let nameAndPassword = res.secretList.find((item) => item.type == 'LoginNameAndPassword')

     if (teacherRole && teacherInfos) {
        let userInfo = {
          ...teacherInfos,
          name: teacherInfos.name,
          role: 'Teacher',
          roleId: teacherRole.role.id
        }
        localStorage.setItem('userInfo', JSON.stringify(userInfo))
      } else if (phoneInfo) {
        let userInfo = {
          ...phoneInfo,
          name: phoneInfo.credential
        }
        localStorage.setItem('userInfo', JSON.stringify(userInfo))
      }
    }
  })
}
</script>

<style lang="less">
@@ -90,27 +134,78 @@
  width: 100%;
  height: 100%;
  position: relative;
  .loginForm {
    width: 400px;
    height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -200px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    p {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  .loginBox {
    width: 800px;
    height: 540px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    background: #ffffff;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
    .loginForm {
      width: 410px;
      padding: 40px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .singUpPhone {
        height: 400px;
        display: flex;
        flex-direction: column;
        align-items: center;

        h2 {
          padding-top: 35px;
          font-size: 20px;
          color: #000;
          font-weight: 700;
          text-align: center;
        }
        .el-form {
          margin-top: 26px;
        }
        .selectPhone {
          background: #fff;
        }
      }
    }
    .btnBox {
      text-align: center;
      margin-top: 50px;
    .leftImg {
      box-sizing: border-box;
      width: 403px;
    }
    .el-input {
      height: 40px;
    }
    .el-select {
      width: 100px;
      height: 40px;
      .el-select__wrapper {
        height: 100% !important;
        .el-input--suffix {
          height: 100% !important;
          background-color: #fff;
        }
      }
    }

    .logInBtn {
      width: 304px;
      height: 40px;
      margin-top: 10px;
      margin-bottom: 20px;
      border-radius: 3px;
      color: #fff;
      font-size: 14px;
    }
  }
}
@media screen and (max-width: 450px) {
  .rightImg {
    display: none;
  }
}
</style>