登录登出

master
significative 3 months ago
parent 18d5d1ee0b
commit d163857af6
  1. 28
      teaching_integration_platform_admin_template/src/layout/tabbar/setting/index.vue
  2. 214
      teaching_integration_platform_admin_template/src/views/login/index.vue

@ -11,18 +11,11 @@
/> -->
<el-button size="small" icon="refresh" circle @click="refresh" />
<el-button size="small" icon="FullScreen" circle @click="fullScreen" />
<el-button v-if="userStore.userInfo.roleId[0] === '1'" size="small" icon="Setting" circle @click="$router.push('/configurationPage')" />
<el-button
size="small"
icon="Link"
circle
@click="openWeb"
/>
<img
:src="userStore.data.icon || defImg"
alt=""
style="width: 24px; height: 24px; margin: 0 10px; border-radius: 50%"
/>
<el-button v-if="userStore.userInfo.roleId[0] === '1'" size="small" icon="Setting" circle
@click="$router.push('/configurationPage')" />
<el-button size="small" icon="Link" circle @click="openWeb" />
<img :src="userStore.data.icon || defImg" alt=""
style="width: 24px; height: 24px; margin: 0 10px; border-radius: 50%" />
<!-- <img
src="@/assets/images/default.jpg
alt=""
@ -48,11 +41,11 @@
// import { useDark, useToggle } from '@vueuse/core'
import useLayoutSettingStoe from '@/store/modules/setting'
import useUserStore from '@/store/modules/user'
import { onMounted,ref } from 'vue'
import { onMounted, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
// import default from '@/assets/images/default.jpg'
import defImg from '@/assets/images/default.png'
import {getSysSettingApi} from '@/api/configuration'
import { getSysSettingApi } from '@/api/configuration'
// import { Moon, Sunny } from '@element-plus/icons-vue'
const useStore = useLayoutSettingStoe()
@ -75,7 +68,7 @@ const refresh = () => {
}
const setting = ref()
const getSysSettingApiEvent = async () => {
const res =await getSysSettingApi()
const res = await getSysSettingApi()
setting.value = res.data
console.log(res);
@ -99,10 +92,13 @@ onMounted(() => {
userStore.getUserInfo()
// console.log(userStore.data.icon, 'icon')
})
const channel = new BroadcastChannel('logout')
channel.onmessage = () => location.reload()
const logout = () => {
// console.log($route)
channel.postMessage('')
userStore.logout()
$router.push({
path: '/login',
query: { redirect: $route.path },

@ -22,23 +22,13 @@
</el-col>
</el-row>
<el-row>
<el-col
:span="12"
:xs="24"
style="
<el-col :span="12" :xs="24" style="
width: 100%;
height: 100%;
display: flex;
justify-content: center;
"
>
<el-form
class="loin_form"
:model="formModel"
ref="form"
:rules="rules"
v-if="isRegister"
>
">
<el-form class="loin_form" :model="formModel" ref="form" :rules="rules" v-if="isRegister">
<h1>课图开源智慧课程管理系统</h1>
<div class="taggle">
<h2 @click="isToggle = true">账号</h2>
@ -47,31 +37,14 @@
<!-- 账号登录 -->
<div v-if="isToggle">
<el-form-item prop="username">
<el-input
v-model="formModel.username"
:prefix-icon="User"
size="large"
placeholder="请输入账号"
></el-input>
<el-input v-model="formModel.username" :prefix-icon="User" size="large" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="formModel.password"
type="password"
:prefix-icon="Lock"
size="large"
placeholder="请输入密码"
show-password
></el-input>
<el-input v-model="formModel.password" type="password" :prefix-icon="Lock" size="large"
placeholder="请输入密码" show-password></el-input>
</el-form-item>
<el-form-item>
<el-button
:loading="isBtnLoading"
size="large"
class="login-btn"
type="primary"
@click="login"
>
<el-button :loading="isBtnLoading" size="large" class="login-btn" type="primary" @click="login">
登录
</el-button>
</el-form-item>
@ -79,44 +52,21 @@
<!-- 手机号登录 -->
<div v-else>
<el-form-item prop="phone" class="content">
<el-input
type="text"
v-model="formModel.phone"
:prefix-icon="Phone"
placeholder="请输入手机号"
size="large"
style="flex: 1"
/>
<el-input type="text" v-model="formModel.phone" :prefix-icon="Phone" placeholder="请输入手机号" size="large"
style="flex: 1" />
</el-form-item>
<el-form-item prop="code" class="content">
<el-input
type="text"
v-model="formModel.code"
placeholder="请输入验证码"
@click="userCodeLogin"
size="large"
style="flex: 1"
/>
<el-input type="text" v-model="formModel.code" placeholder="请输入验证码" @click="userCodeLogin" size="large"
style="flex: 1" />
<div class="p" v-if="countdown > 0">
<p>{{ countdown }} </p>
</div>
<el-button
class="code"
v-if="countdown <= 0"
:disabled="countdown > 0"
@click="codeSubmit"
>
<el-button class="code" v-if="countdown <= 0" :disabled="countdown > 0" @click="codeSubmit">
发送验证码
</el-button>
</el-form-item>
<el-form-item>
<el-button
:loading="isBtnLoading"
size="large"
class="login-btn"
type="primary"
@click="phoneLogin"
>
<el-button :loading="isBtnLoading" size="large" class="login-btn" type="primary" @click="phoneLogin">
登录
</el-button>
</el-form-item>
@ -128,13 +78,7 @@
</el-form-item>
</el-form>
<!-- 注册 -->
<el-form
class="loin_form"
:model="formModel"
ref="form"
:rules="rules"
v-else
>
<el-form class="loin_form" :model="formModel" ref="form" :rules="rules" v-else>
<h1>Hello</h1>
<div class="taggle">
<h2 @click="isToggle = true">账号</h2>
@ -143,51 +87,24 @@
<!-- 账号注册 -->
<div v-if="isToggle">
<el-form-item prop="username">
<el-input
v-model="formModel.username"
placeholder="请输入用户名"
:prefix-icon="User"
size="large"
></el-input>
<el-input v-model="formModel.username" placeholder="请输入用户名" :prefix-icon="User" size="large"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="formModel.password"
placeholder="请输入密码"
type="password"
:prefix-icon="Lock"
size="large"
show-password
></el-input>
<el-input v-model="formModel.password" placeholder="请输入密码" type="password" :prefix-icon="Lock"
size="large" show-password></el-input>
</el-form-item>
<el-form-item prop="repassword">
<el-input
v-model="formModel.repassword"
placeholder="请再次输入密码"
type="password"
:prefix-icon="Check"
size="large"
show-repassword
@change="checkPasswordMatch"
></el-input>
<el-input v-model="formModel.repassword" placeholder="请再次输入密码" type="password" :prefix-icon="Check"
size="large" show-repassword @change="checkPasswordMatch"></el-input>
</el-form-item>
<el-form-item>
<el-button
size="large"
class="login-btn"
type="primary"
@click="handleSubmit"
>
<el-button size="large" class="login-btn" type="primary" @click="handleSubmit">
注册
</el-button>
</el-form-item>
<el-form-item class="flex">
<el-link
type="info"
:underline="false"
@click="isRegister = true"
>
<el-link type="info" :underline="false" @click="isRegister = true">
登录
</el-link>
</el-form-item>
@ -196,99 +113,58 @@
<div v-else>
<div v-if="isinfo">
<el-form-item prop="phone">
<el-input
v-model="formModel.phone"
:prefix-icon="Phone"
size="large"
placeholder="请输入手机号"
></el-input>
<el-input v-model="formModel.phone" :prefix-icon="Phone" size="large" placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item prop="code" class="content">
<el-input
type="text"
v-model="formModel.code"
placeholder="请输入验证码"
size="large"
style="
<el-input type="text" v-model="formModel.code" placeholder="请输入验证码" size="large" style="
flex: 1;
/* height: 40px;
line-height: 40px;
border: 1px solid #dcdfe6;
width: 50%;
color: #dcdfe6; */
"
/>
" />
<div class="p" v-if="countdown > 0">
<p>{{ countdown }} </p>
</div>
<el-button
class="code1"
v-if="countdown <= 0"
@click="codeSubmit"
:disabled="countdown > 0"
>
<el-button class="code1" v-if="countdown <= 0" @click="codeSubmit" :disabled="countdown > 0">
发送验证码
</el-button>
</el-form-item>
<el-form-item>
<el-button
size="large"
class="login-btn"
type="primary"
@click="phoneChange"
>
<el-button size="large" class="login-btn" type="primary" @click="phoneChange">
注册
</el-button>
</el-form-item>
</div>
<div v-else>
<el-form-item prop="password">
<el-input
v-model="formModel.password"
type="password"
:prefix-icon="Lock"
size="large"
placeholder="请输入密码"
show-password
></el-input>
<el-input v-model="formModel.password" type="password" :prefix-icon="Lock" size="large"
placeholder="请输入密码" show-password></el-input>
</el-form-item>
<el-form-item>
<div
style="display: flex; justify-content: space-between; flex: 1"
>
<el-button
class="code"
@click="phoneReturn"
style="
<div style="display: flex; justify-content: space-between; flex: 1">
<el-button class="code" @click="phoneReturn" style="
background-color: #5577ff;
color: #fff;
justify-content: center;
"
>
">
返回
</el-button>
</div>
<div style="display: flex; justify-content: end; flex: 1">
<el-button
class="code"
@click="phoneSubmit"
style="
<el-button class="code" @click="phoneSubmit" style="
background-color: #5577ff;
color: #fff;
justify-content: center;
"
>
">
确认
</el-button>
</div>
</el-form-item>
</div>
<el-form-item class="flex">
<el-link
type="info"
:underline="false"
@click="isRegister = true"
>
<el-link type="info" :underline="false" @click="isRegister = true">
登录
</el-link>
</el-form-item>
@ -323,6 +199,7 @@ const goToPage = (event) => {
// window.open('https:www.baidu.com', '_blank')
window.location.href = 'https:www.baidu.com'
}
const fold = ref(false)
const LayoutSettingStoe = useLayoutSettingStoe()
//
@ -330,6 +207,10 @@ let userStore = useUserStore()
//
const $router = useRouter()
const $route = useRoute()
const channel = new BroadcastChannel('login')
channel.onmessage = () => location.reload()
const isBtnLoading = ref<boolean>(false)
//
//model,form
@ -524,10 +405,13 @@ const login = async () => {
await userStore.userLogin(formModel.value).then(() => {
isBtnLoading.value = false
$router.push('/curriculumCenter/basicCourseInformation')
channel.postMessage('')
if ($route.query.redirect) {
$router.push($route.query.redirect as string)
channel.postMessage('')
} else {
$router.push('/')
channel.postMessage('')
}
})
} catch (error) {
@ -548,10 +432,13 @@ const phoneLogin = async () => {
.then(() => {
isBtnLoading.value = false
$router.push('/curriculumCenter/basicCourseInformation')
channel.postMessage('')
if ($route.query.redirect) {
$router.push($route.query.redirect as string)
channel.postMessage('')
} else {
$router.push('/')
channel.postMessage('')
}
})
.catch((error) => {
@ -597,15 +484,18 @@ onUnmounted(() => {
height: 100vh;
position: absolute;
top: 0;
.logo {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 35px 0px 20px;
.logo_main {
display: flex;
align-items: center;
}
.font {
font-size: 20px;
font-family: 'YourChosenArtisticFont', sans-serif;
@ -615,6 +505,7 @@ onUnmounted(() => {
margin-left: 5px;
}
}
// background: url('../../assets/images/background.jpg') no-repeat;
.loin_form {
position: relative;
@ -629,32 +520,39 @@ onUnmounted(() => {
padding: 40px;
border-radius: 10px;
box-shadow: 7px 7px 42px rgba(0, 0, 0, 0.17);
.taggle {
display: flex;
justify-content: space-between;
}
h1 {
font-size: 40px;
color: #5577ff;
}
h2 {
font-size: 20px;
color: #5577ff;
margin: 20px 0;
}
.login-btn {
width: 100%;
}
.p {
height: 40px;
text-align: center;
line-height: 40px;
width: 90px;
}
.codeVerify {
display: flex;
justify-content: end;
}
.code,
.code1 {
height: 40px;

Loading…
Cancel
Save