Skip to content

L
learn-online-pc
提交 5eebf645 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

添加注册，修改课程展示

上级 e4e2815c
显示空白字符变更
内嵌 并排
正在显示 包含 462 行增加 和 1 行删除
client/src/action/OtherAction.js
浏览文件 @ 5eebf645
......@@ -56,4 +56,12 @@ export default class OtherAction extends BaseACTION {
* 调用个人信息 - 上传头像
*/
updatePic (obj) { return Other.updatePic(obj).then(res => res) }
/**
* 调用获取验证码
*/
sendCode (obj) { return Other.sendCode(obj).then(res => res) }
/**
* 注册
*/
register (obj) { return Other.register(obj).then(res => res) }
}
client/src/api/other_api.js
浏览文件 @ 5eebf645
......@@ -82,4 +82,20 @@ export default class OtherAPI extends BaseAPI {
this.post('/api/lms/v3/storage/upload/avatar', obj, {
headers: { 'Content-Type': 'multipart/form-data' }
})
/**
* 发送验证码
*/
sendCode = (obj = {}) =>
this.post('/api/usercenter/user/send-code', obj, {
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
})
/**
* 注册
*/
register = (obj = {}) =>
this.post('/api/lms/user/register', obj, {
headers: { 'Content-Type': 'multipart/form-data' }
})
}
client/src/components/beforeEnter/Before.js
浏览文件 @ 5eebf645
......@@ -10,7 +10,8 @@ export default class Before {
'login-code',
'login-forget',
'studentHelp',
'teacherHelp'
'teacherHelp',
'login-register'
]
this.isMobile = /android|iphone|ipad|ipod/i.test(UA)
}
......
client/src/pages/learn/course.vue
浏览文件 @ 5eebf645
......@@ -66,7 +66,12 @@
{{ $t('pages.learn.course.progress') }}&emsp;<el-progress :percentage="item.progress > 99.5 ? 100 : item.progress" color="#b49441"></el-progress>
</div> -->
<div class="right-sel">{{item.myStatus}}</div>
<template v-if="userInfo.is_open_course == 0">
<el-button class="in-btn" type="primary" size="small" round @click="goCourseContent" :data-cid='item.id' :data-sid='item.sid'>{{ $t('pages.learn.course.showCourse') }}</el-button>
</template>
<template v-else>
<el-button v-if="!!(userInfo.open_course_id.find(ids => { return ids == item.id }))" class="in-btn" type="primary" size="small" round @click="goCourseContent" :data-cid='item.id' :data-sid='item.sid'>{{ $t('pages.learn.course.showCourse') }}</el-button>
</template>
</div>
</li>
</template>
......@@ -86,6 +91,7 @@ export default {
components: {},
data () {
return {
userInfo: {},
filter: {
studyEarly: 'down',
selectTime: 'down'
......@@ -112,6 +118,8 @@ export default {
}
},
mounted () {
this.userInfo = UserInfo
console.log(this.userInfo, '=====')
if (this.timeInterval) {
clearInterval(this.timeInterval)
this.timeInterval = null
......
client/src/pages/login/index.vue
浏览文件 @ 5eebf645
......@@ -68,6 +68,8 @@
</div>
</normal-login>
</div>
<!-- <router-link class="new-user" active-class="router-link-active-class" :to="{ name: 'login-register' }">{{$t('Login.forgetPassword')}}</router-link> -->
<div class="new-user" @click="go">我是新用户?</div>
</div>
</div>
</template>
......@@ -104,6 +106,11 @@ export default {
}
},
methods: {
go() {
this.$router.push({
name: 'login-register'
})
},
dialogMsg () {
this.$message({
type: 'success',
......@@ -210,6 +217,14 @@ export default {
}
}
}
.new-user{
font-size: 16px;
font-weight:bold;
color:rgba(255,158,100,1);
text-align: center;
padding-top: 30px;
text-decoration: underline;
}
/* normal 登录 */
.code-login a{ float: left; cursor: pointer; color:#186AA9;text-decoration:none;}
.forget-pwd a{ float: right; cursor: pointer; color:#186AA9;}
......
client/src/pages/login/register.vue 0 → 100644
浏览文件 @ 5eebf645
<template>
<div class="login-page">
<div class="mobile-login">
<div class="title-box">
<img src="../../assets/images/mlogin-tit1.png" class="tit1">
<img src="../../assets/images/mlogin-tit2.png" class="tit2">
</div>
<div class="logo-box">
<img src="../../assets/images/mlogin-logo1.png" class="tit1">
<img src="../../assets/images/mlogin-logo2.png" class="tit2">
</div>
<div class="text-box">
<img src="../../assets/images/login-tit1.png" class="tit1">
<img src="../../assets/images/login-tit2.png" class="tit2">
<img src="../../assets/images/login-tit3.png" class="tit3">
</div>
<div class="form-box">
<ul>
<template v-for="(item, index) in form">
<li :key="index" v-if="!item.type">
<input v-model="item.value" :type="item.inputType ? item.inputType : 'text'" :placeholder="item.name">
<div :class="item.isTips ? 'tips' : 'tips none'">{{ item.tips }}</div>
</li>
<li :key="index" class="new-w" v-else>
<div class="yzm">
<input v-model="item.value" type="number" placeholder="验证码">
<div class="f-btn" @click="getVCode">{{ vCode.second == 60 ? '发送验证码' : vCode.second + 's' }}</div>
</div>
<div :class="item.isTips ? 'tips' : 'tips none'">输入信息不正确</div>
</li>
</template>
</ul>
<div class="reg-btn" @click="submitPost">注册</div>
<!-- <div class="bottom-btn">
<div class="btn">验证码登录</div>
<div class="btn r">忘记密码</div>
</div> -->
</div>
</div>
<div class="succ-pop" v-if="popShow">
<div class="pop">
<div class="title">注册成功</div>
<img src="../../assets/images/register-succ.png" alt="">
<div class="btns" @click="goLogin">去登陆</div>
</div>
</div>
</div>
</template>
<script>
import cAction from '@action'
import sLanguage from '@/components/languageSwitch/index.vue'
export default {
components: { sLanguage },
props: {
params: { type: Object, required: false, default () { return {} } },
query: { type: Object, required: false, default () { return {} } }
},
data () {
return {
popShow: false,
vCode: {
time: null,
second: 60,
flag: true
},
form: [
{
names: 'name',
name: '姓名',
value: '',
tips: '输入信息不正确',
isTips: false
},
{
names: 'organization',
name: '机构',
value: '',
tips: '输入信息不正确',
isTips: false
},
{
names: 'job',
name: '职务',
value: '',
tips: '输入信息不正确',
isTips: false
},
{
names: 'mobile',
inputType: 'number',
name: '手机',
value: '',
tips: '输入信息不正确',
isTips: false
},
{
names: 'code',
type: 1,
inputType: 'number',
name: '验证码',
value: '',
tips: '输入信息不正确',
isTips: false
},
{
names: 'email',
name: '邮箱',
value: '',
tips: '输入信息不正确',
isTips: false
},
{
names: 'password',
name: '密码',
value: '',
tips: '输入信息不正确',
isTips: false
}
]
}
},
metaInfo () {
return {
title: this.$t('Login.title'),
meta: []
}
},
mounted () {},
methods: {
goLogin() {
this.$router.push({
name: 'login-normal'
})
},
submitPost() {
this.form.map(item => {
if (item.value === '') {
item.isTips = true
} else {
switch (item.names) {
case 'mobile':
!(/^1[3456789]\d{9}$/.test(item.value))
? item.isTips = true
: item.isTips = false
break
case 'email':
!(/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(item.value))
? item.isTips = true
: item.isTips = false
break
case 'code':
item.value.length !== 4
? item.isTips = true
: item.isTips = false
break
default:
item.isTips = false
}
}
})
this.$forceUpdate()
if (!this.form.find(item => { return item.isTips === true })) {
const param = {}
this.form.map(item => {
param[item.names] = item.value
})
cAction.Other.register(param).then(res => {
if (res.code === 0) {
this.popShow = true
} else {
return new Error(JSON.stringify(res))
}
})
}
},
dialogMsg () {
this.$message({
type: 'success',
message: this.$t('Login.findPwdStr')
})
},
getVCode() {
const mobile = this.form.find(item => { return item.names === 'mobile' })
if (!(/^1[3456789]\d{9}$/.test(mobile.value))) {
mobile.isTips = true
return
}
if (this.vCode.flag) {
mobile.isTips = false
cAction.Other.sendCode({ account: mobile.value }).then(res => {
if (res.code === 0) {
this.vCode.flag = false
this.tick()
} else {
return new Error(JSON.stringify(res))
}
})
}
},
tick() {
clearInterval(this.vCode.time)
this.vCode.time = setInterval(() => {
this.vCode.second--
if (this.vCode.second === 0) {
this.vCode.second = 60
clearInterval(this.vCode.time)
this.vCode.flag = true
}
}, 1000)
}
}
}
</script>
<style lang="scss" scoped>
.login-page{
width: 100%;
}
.mobile-login{
width: 100%;
background: url('../../assets/images/mlogin-bg.png');
background-size:100% 100%;
.title-box{
padding-top: 10px;
.tit1{
width: 40%;
}
.tit2{
width: 40%;
margin-top: 10px;
}
img{
display: block;
margin-left: 13%;
}
}
.logo-box{
width: 75%;
margin: 0 auto;
margin-top:10%;
overflow: hidden;
.tit2{
float: right;
}
img{
float: left;
display: block;
width: 45%;
}
}
.text-box{
padding-top: 5%;
width: 75%;
margin: 0 auto;
img{
display: block;
width: 100%;
margin-top: 3%;
}
}
.mlogin-modules{
width: 75%;
margin: 0 auto;
}
}
.login-box{
width: 100%;
height: 100%;
background: url('../../assets/images/login-bg.png');
background-size:100% 100%;
.login-modules{
width: 100%;
position: absolute;
top: 35%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
/* normal 登录 */
.login-modules a{ cursor: pointer; color:#186AA9;text-decoration:none;}
.mlogin-modules a{ cursor: pointer; color:#186AA9;text-decoration:none;}
@media screen and (max-width: 480px){
.login-box{display: none;}
.content-s{
top: auto;
margin-top: 8%;
}
}
@media screen and (min-width: 1000px){
.mobile-login{display: none;}
}
.form-box{
padding-bottom: 50px;
ul{
width: 75%;
list-style: none;
padding: 20px 0 0 0;
margin: 0 auto;
li.new-w{
width: 100%;
}
li{
width: 95%;
input{
padding-left: 5%;
width: 100%;
border: 1px solid #186AA9;
height:40px;
font-size: 16px;
outline: none;
}
input::-webkit-input-placeholder{
color: #186AA9;
}
.tips{
padding-left: 5%;
font-size: 14px;
color: #F12828;
}
.tips.none{
visibility:hidden;
}
.yzm{
display: flex;
input{
width: 52%;
}
.f-btn{
margin-left: auto;
width:38%;
line-height: 40px;
background:rgba(0,109,191,1);
border-radius:2px;
color: #fff;
font-size: 16px;
text-align: center;
}
}
}
}
.reg-btn{
width: 75%;
height: 40px;
text-align: center;
line-height: 40px;
background:rgba(0,109,191,1);
border-radius:2px;
margin: 0px auto;
color: #fff;
font-size: 16px;
}
.bottom-btn{
width: 75%;
margin: 20px auto;
display: flex;
.btn{
color: #006DBF;
}
.btn.r{
margin-left: auto;
}
}
}
.succ-pop{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
.pop{
position:absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
width: 80%;
height: 50%;
background: #fff;
.title{
font-size: 20px;
text-align: center;
line-height: 80px;
}
img{
width: 50%;
margin: 0 auto;
display: block;
}
.btns{
border-radius:2px;
width: 90%;
height: 40px;
background: #006DBF;
margin: 40px auto 0 auto;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 14px;
}
}
}
</style>
client/src/router/routes.js
浏览文件 @ 5eebf645
......@@ -26,6 +26,12 @@ export default [
component: () => import('@/pages/login/isLogin.vue'),
props: (route) => ({ query: route.query, params: route.params })
},
{
path: '/login/register',
name: 'login-register',
component: () => import('@/pages/login/register.vue')
// props: (route) => ({ query: route.query, params: route.params })
},
/* App 内登录页面未找到时 - 指向 */
{ path: '/login/*', redirect: '/login/index' },
/* 学习系统 - 登录后，进入页面 */
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论