|
|
|
|
@ -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,17 @@ 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 +436,16 @@ 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 +491,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 +512,7 @@ onUnmounted(() => { |
|
|
|
|
margin-left: 5px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// background: url('../../assets/images/background.jpg') no-repeat; |
|
|
|
|
.loin_form { |
|
|
|
|
position: relative; |
|
|
|
|
@ -629,32 +527,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; |
|
|
|
|
|
fwb
2 months ago