<template>
|
<div class="loginPage">
|
<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>
|
</div>
|
<el-image :src="dialogRightImg" class="rightImg" />
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
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: ''
|
})
|
|
const rules = reactive({
|
username: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
|
password: [{ required: true, message: '请填写密码', trigger: 'blur' }]
|
})
|
|
const loading = ref(false)
|
|
const submitForm = async (formEl) => {
|
if (!formEl) return
|
await formEl.validate((valid, fields) => {
|
if (valid) {
|
loading.value = true
|
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.replace({
|
path: '/home',
|
query: { bookId: localStorage.getItem('bookId') }
|
})
|
}
|
} else if (res.data.isError) {
|
ElMessage.error(res.data.errorDescription)
|
loading.value = false
|
}
|
})
|
.catch((errorMsg) => {
|
ElMessage.error(errorMsg)
|
loading.value = false
|
})
|
}
|
})
|
}
|
|
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">
|
.loginPage {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
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;
|
}
|
}
|
}
|
.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>
|
