|
|
@@ -1,20 +1,29 @@
|
|
|
<template>
|
|
|
<div v-show="showLogin" class="share-exercise">
|
|
|
<div class="login">
|
|
|
+ <div class="title">登录后开始{{ isEditLink ? '编辑' : '答题' }}</div>
|
|
|
<div class="login-type">
|
|
|
<div :class="['login-type-item', { active: 'TEACHER' === form.user_type }]" @click="form.user_type = 'TEACHER'">
|
|
|
- 教师
|
|
|
+ 我是教师
|
|
|
</div>
|
|
|
- <div :class="['login-type-item', { active: 'STUDENT' === form.user_type }]" @click="form.user_type = 'STUDENT'">
|
|
|
- 学生
|
|
|
+ <div
|
|
|
+ v-if="!isEditLink"
|
|
|
+ :class="['login-type-item', { active: 'STUDENT' === form.user_type }]"
|
|
|
+ @click="form.user_type = 'STUDENT'"
|
|
|
+ >
|
|
|
+ 我是学生
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-form ref="loginForm" :model="form" :rules="rules" label-position="right">
|
|
|
<el-form-item prop="user_name">
|
|
|
- <el-input v-model="form.user_name" />
|
|
|
+ <el-input v-model="form.user_name" placeholder="邮箱地址">
|
|
|
+ <SvgIcon slot="prefix" size="24" icon-class="email" />
|
|
|
+ </el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="password">
|
|
|
- <el-input v-model="form.password" type="password" show-password />
|
|
|
+ <el-input v-model="form.password" type="password" show-password>
|
|
|
+ <SvgIcon slot="prefix" size="24" icon-class="key" />
|
|
|
+ </el-input>
|
|
|
</el-form-item>
|
|
|
<el-form-item prop="verification_code_image_text" class="verification-code">
|
|
|
<el-input v-model="form.verification_code_image_text" placeholder="验证码" @keyup.enter.native="signIn" />
|
|
|
@@ -24,19 +33,26 @@
|
|
|
@click="updateVerificationCode"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item class="remember">
|
|
|
+ <el-checkbox v-model="is_remember">记住我</el-checkbox>
|
|
|
+ <span class="forgot-password">忘记密码？</span>
|
|
|
+ </el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button class="submit" type="primary" @click="signIn">登录</el-button>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item class="user-agreement">
|
|
|
+ <el-checkbox v-model="is_agreement">我已阅读并同意</el-checkbox>
|
|
|
+ <span class="link">本用户协议</span>
|
|
|
+ </el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
- <div class="tip">{{ tip }}</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { GetShareRecordInfo, PageQueryExerciseList } from '@/api/exercise';
|
|
|
+import { GetShareRecordInfo } from '@/api/exercise';
|
|
|
import md5 from 'md5';
|
|
|
-import { GetVerificationCodeImage, GetLogo } from '@/api/app';
|
|
|
+import { GetVerificationCodeImage, GetLogo, ParseAccessToken } from '@/api/app';
|
|
|
import { setConfig } from '@/utils/auth';
|
|
|
|
|
|
export default {
|
|
|
@@ -54,6 +70,8 @@ export default {
|
|
|
exercise_id: '',
|
|
|
},
|
|
|
showLogin: false,
|
|
|
+ is_remember: false, // 记住我
|
|
|
+ is_agreement: true, // 用户协议
|
|
|
// 登录表单
|
|
|
form: {
|
|
|
user_type: 'STUDENT',
|
|
|
@@ -84,11 +102,9 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- tip() {
|
|
|
- if (this.share_record.access_popedom === -1) return '正在加载...';
|
|
|
- return this.share_record.access_popedom === 1
|
|
|
- ? '分享链接为练习题编辑链接，登录后可以开始编辑练习题'
|
|
|
- : '分享链接为练习题答题链接，登录后可以开始答题';
|
|
|
+ // 是否编辑链接
|
|
|
+ isEditLink() {
|
|
|
+ return this.share_record.access_popedom === 1;
|
|
|
},
|
|
|
},
|
|
|
created() {
|
|
|
@@ -109,17 +125,22 @@ export default {
|
|
|
})
|
|
|
.then(({ share_record }) => {
|
|
|
this.share_record = share_record;
|
|
|
+ if (this.share_record.access_popedom === 1) {
|
|
|
+ this.form.user_type = 'TEACHER';
|
|
|
+ }
|
|
|
})
|
|
|
.then(() => {
|
|
|
- PageQueryExerciseList({ page_capacity: 0, cur_page: 1, store_type: 0, search_content: '' })
|
|
|
- .then(() => {
|
|
|
- this.exerciseLink();
|
|
|
+ ParseAccessToken({ access_token: this.$store.state.user.access_token })
|
|
|
+ .then(({ is_effective }) => {
|
|
|
+ if (is_effective === 'true') {
|
|
|
+ this.exerciseLink();
|
|
|
+ } else {
|
|
|
+ this.updateVerificationCode();
|
|
|
+ this.getLogo();
|
|
|
+ this.showLogin = true;
|
|
|
+ }
|
|
|
})
|
|
|
- .catch(() => {
|
|
|
- this.updateVerificationCode();
|
|
|
- this.getLogo();
|
|
|
- this.showLogin = true;
|
|
|
- });
|
|
|
+ .catch(() => {});
|
|
|
})
|
|
|
.catch(() => {});
|
|
|
},
|
|
|
@@ -180,84 +201,154 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+$basic-color: #f90;
|
|
|
+
|
|
|
.share-exercise {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- padding-top: 15%;
|
|
|
+ padding-top: 5%;
|
|
|
background-color: $content-color;
|
|
|
|
|
|
.login {
|
|
|
- width: 50vw;
|
|
|
- max-width: 1200px;
|
|
|
- padding: 24px;
|
|
|
+ width: 465px;
|
|
|
+ padding: 48px 64px;
|
|
|
margin: auto;
|
|
|
- background-color: #f0f0f0;
|
|
|
+ background-color: #fff;
|
|
|
border: $border;
|
|
|
border-radius: 4px;
|
|
|
|
|
|
+ .title {
|
|
|
+ margin-bottom: 32px;
|
|
|
+ font-size: 20px;
|
|
|
+ color: $basic-color;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
&-type {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- width: 400px;
|
|
|
padding: 2px;
|
|
|
margin: 0 auto;
|
|
|
- margin-bottom: 12px;
|
|
|
- background-color: #fafafa;
|
|
|
+ margin-bottom: 24px;
|
|
|
+ background-color: #f0f0f0;
|
|
|
border-radius: 4px;
|
|
|
|
|
|
&-item {
|
|
|
- width: 200px;
|
|
|
+ flex: 1;
|
|
|
height: 36px;
|
|
|
line-height: 36px;
|
|
|
- color: $text-color;
|
|
|
+ color: #a6a6a6;
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
|
|
|
&.active {
|
|
|
- color: $main-color;
|
|
|
- background-color: $fill-color;
|
|
|
+ color: $basic-color;
|
|
|
+ background-color: #fff;
|
|
|
border-radius: 4px;
|
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 10%);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- :deep(.el-form) {
|
|
|
+ :deep .el-form {
|
|
|
max-width: 400px;
|
|
|
margin: 0 auto;
|
|
|
|
|
|
+ &-item--small.el-form-item {
|
|
|
+ margin-bottom: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-checkbox__input.is-checked {
|
|
|
+ + .el-checkbox__label {
|
|
|
+ color: #2c2c2c;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-checkbox__inner {
|
|
|
+ background-color: #fff;
|
|
|
+ border-color: #2c2c2c;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ color: #2c2c2c;
|
|
|
+ border-color: #2c2c2c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ &__inner {
|
|
|
+ height: 48px;
|
|
|
+ padding-left: 60px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 48px;
|
|
|
+ background-color: #fff !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__prefix {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.verification-code {
|
|
|
.el-input {
|
|
|
- width: calc(100% - 90px);
|
|
|
+ width: calc(100% - 138px);
|
|
|
margin-right: 10px;
|
|
|
|
|
|
&__inner {
|
|
|
+ padding-left: 15px;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.el-image {
|
|
|
- height: 30px;
|
|
|
+ height: 48px;
|
|
|
vertical-align: bottom;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .remember {
|
|
|
+ .el-form-item__content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ .forgot-password {
|
|
|
+ font-weight: bold;
|
|
|
+ color: $basic-color;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::before,
|
|
|
+ &::after {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-agreement {
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+ .el-checkbox__label {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .link {
|
|
|
+ font-size: 16px;
|
|
|
+ color: $basic-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.submit {
|
|
|
width: 100%;
|
|
|
+ height: 48px;
|
|
|
+ background-color: $basic-color;
|
|
|
+ border-color: $basic-color;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .tip {
|
|
|
- width: 100%;
|
|
|
- padding: 8px 0;
|
|
|
- margin-top: 40px;
|
|
|
- text-align: center;
|
|
|
- background-color: #fff;
|
|
|
- border-top: $border;
|
|
|
- border-bottom: $border;
|
|
|
- }
|
|
|
}
|
|
|
</style>
|
