huoran
/
FE_occupationlab_client
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

登录修改

Browse Source
UI_2022-02-10
张 4 years ago
parent d27e2cd02a
commit 1b5a269b7f
2 changed files with 86 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/assets/css/main.css
  2. 143
      src/components/page/Login.vue

6
src/assets/css/main.css
Unescape View File

@ -224,7 +224,7 @@ li {
opacity: 0; opacity: 0;
} }
.ms-login .el-tabs__item{ .ms-login .el-tabs__item{
padding: 0 90px; padding: 0 20px;
color: #999; color: #999;
} }
.ms-login .el-tabs__item:hover{ .ms-login .el-tabs__item:hover{
@ -243,12 +243,12 @@ li {
justify-content: center; justify-content: center;
} }
.ms-login .el-input__inner{ /* .ms-login .el-input__inner{
height: 80px; height: 80px;
line-height: 80px; line-height: 80px;
border:1px solid rgba(220,220,220,1); border:1px solid rgba(220,220,220,1);
border-radius:2px; border-radius:2px;
} } */
.header_tab .el-tabs__nav-wrap::after{ .header_tab .el-tabs__nav-wrap::after{
background-color: #fff; background-color: #fff;

143
src/components/page/Login.vue
Unescape View File

@ -27,40 +27,48 @@
<div class="back" v-show="isReg" @click="toReg(false)"> <div class="back" v-show="isReg" @click="toReg(false)">
<i class="el-icon-back"></i> <i class="el-icon-back"></i>
</div> </div>
<div v-if="!isReg"> <div v-if="!isReg" class="ms-login">
<h2>账号登录</h2> <el-tabs v-model="activeName">
<el-form :model="loginForm" :rules="loginRules" ref="login" label-width="0px"> <el-tab-pane label="账号登录" name="0">
<el-form-item prop="username"> <el-form :model="loginForm" :rules="loginRules" ref="loginForm" style="margin-top: 20px">
<p class="label">用户名</p> <el-form-item label="用户名" prop="username">
<el-input v-model="loginForm.username" placeholder="请输入账号/手机号" @keyup.enter.native="getSchool()"></el-input> <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
</el-form-item> </el-form-item>
<el-form-item prop="password"> <el-form-item label="密码" prop="password">
<p class="label">密码</p> <el-input
<el-input type="password"
type="password" placeholder="请输入密码"
placeholder="请输入密码" v-model="loginForm.password"
v-model="loginForm.password" @keyup.enter.native="getSchool('loginForm')"
@keyup.enter.native="getSchool" >
> </el-input>
</el-input> </el-form-item>
</el-form-item> <el-button class="submit" type="primary" @click="getSchool('loginForm')">登录</el-button>
<el-button class="submit" type="primary" @click="getSchool">登录</el-button> </el-form>
<div class="links flex-between"> </el-tab-pane>
<el-button type="text" class="ques" @click="toReg(true)">前往注册</el-button>
<el-button type="text" class="forget" @click="forget">忘记密码？</el-button> <el-tab-pane label="手机号/邮箱登录" name="1">
</div> <el-form :model="phoneParam" :rules="phoneRules" ref="phoneParam" style="margin-top: 20px">
<!-- <p class="login-tips">其他登陆方式</p> <el-form-item label="手机号/邮箱" prop="userphone">
<div class="thirdParty"> <el-input v-model="phoneParam.userphone" placeholder="请输入手机号/邮箱"></el-input>
<div class="item"> </el-form-item>
<img src="../../assets/img/icon_wechat.png" alt=""> <el-form-item label="密码" prop="phonePassword">
微信扫码登录 <el-input
</div> type="password"
<div class="item"> placeholder="请输入密码"
<img src="../../assets/img/icon_qq.png" alt=""> v-model="phoneParam.phonePassword"
QQ一键登录 @keyup.enter.native="getSchool('phoneParam')"
</div> >
</div> --> </el-input>
</el-form> </el-form-item>
<el-button class="submit" type="primary" @click="getSchool('phoneParam')">登录</el-button>
</el-form>
</el-tab-pane>
</el-tabs>
<div class="links flex-between">
<el-button type="text" class="ques" @click="toReg(true)">前往注册</el-button>
<el-button type="text" class="forget" @click="forget">忘记密码？</el-button>
</div>
</div> </div>
<register v-else :isReg.sync="isReg" @updateInfo="updateInfo"></register> <register v-else :isReg.sync="isReg" @updateInfo="updateInfo"></register>
</div> </div>
@ -74,7 +82,8 @@
</div> </div>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="cancleRoleDia">取 消</el-button> <el-button @click="cancleRoleDia">取 消</el-button>
<el-button type="primary" @click="roleSure">确 定</el-button> <el-button v-if="activeName == '0'" type="primary" @click="roleSure('loginForm')">确 定</el-button>
<el-button v-else type="primary" @click="roleSure('phoneParam')">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
@ -130,6 +139,7 @@ import register from './RegisterForm';
export default { export default {
data: function() { data: function() {
return { return {
activeName: '0',
isReg: false, isReg: false,
loginForm: { loginForm: {
// username: '18818574533', // username: '18818574533',
@ -140,6 +150,14 @@ export default {
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
}, },
phoneParam: {
userphone: '',
phonePassword: ''
},
phoneRules: {
userphone: [{ required: true, message: '请输入手机号/邮箱', trigger: 'blur' }],
phonePassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],
},
roleDialog: false, roleDialog: false,
userId: '', userId: '',
schoolId: '', schoolId: '',
@ -174,13 +192,14 @@ export default {
}) })
}, },
methods: { methods: {
getSchool() { getSchool(form) {
this.$refs.login.validate(valid => { this.$refs[form].validate(valid => {
if (valid) { if (valid) {
let data = { let data = {
account: this.loginForm.username, account: this.activeName == '0' ? this.loginForm.username : this.phoneParam.userphone,
password: this.loginForm.password, password: this.activeName == '0' ? this.loginForm.password : this.phoneParam.phonePassword,
schoolId: 2105 schoolId: 2105,
source: this.activeName
}; };
this.$get(this.api.loginSchool, data) this.$get(this.api.loginSchool, data)
.then(res => { .then(res => {
@ -194,7 +213,7 @@ export default {
this.schoolId = this.schoolList[0].schoolId this.schoolId = this.schoolList[0].schoolId
this.userId = this.schoolList[0].userId this.userId = this.schoolList[0].userId
this.studentId = this.schoolList[0].studentId this.studentId = this.schoolList[0].studentId
this.getRole() this.getRole(form)
}else{ }else{
this.$message.error('账号不存在') this.$message.error('账号不存在')
} }
@ -206,7 +225,7 @@ export default {
} }
}); });
}, },
getRole() { getRole(form) {
// this.userId = this.schoolList.find((n,k) => { // this.userId = this.schoolList.find((n,k) => {
// return n.schoolId == this.schoolId // return n.schoolId == this.schoolId
// }).userId // }).userId
@ -236,10 +255,12 @@ export default {
} }
}) })
if(this.roleList.length > 1) { if(this.roleList.length > 1) {
console.log('role:true')
this.roleDialog = true this.roleDialog = true
}else{ }else{
console.log('role:false')
this.roleId = this.roleList[0].roleId this.roleId = this.roleList[0].roleId
this.submitForm() this.submitForm(form)
} }
}) })
.catch(res => {}); .catch(res => {});
@ -248,15 +269,15 @@ export default {
this.loginForm.username = data.username this.loginForm.username = data.username
this.loginForm.password = data.password this.loginForm.password = data.password
}, },
roleSure(){ roleSure(form){
if(this.roleId){ if(this.roleId){
this.submitForm() this.submitForm(form)
}else{ }else{
this.$message.error('请选择角色！'); this.$message.error('请选择角色！');
} }
}, },
submitForm() { submitForm(form) {
this.$refs.login.validate(valid => { this.$refs[form].validate(valid => {
if (valid) { if (valid) {
let data = { let data = {
roleId: this.roleId, roleId: this.roleId,
@ -524,25 +545,14 @@ export default {
.submit{ .submit{
width: 100%; width: 100%;
height: 48px; height: 48px;
margin-top: 60px; margin-top: 40px;
line-height: 48px; line-height: 48px;
padding: 0; padding: 0;
font-size: 20px; font-size: 18px;
background-color: #9278ff; background-color: #9278ff;
border-radius: 6px; border-radius: 6px;
border: 0; border: 0;
} }
.links{
margin: 20px 0 20px;
}
.ques{
color: #9278ff;
font-size: 14px;
}
.forget{
color: #ffa94e;
font-size: 14px;
}
.login-tips{ .login-tips{
margin-bottom: 20px; margin-bottom: 20px;
font-size: 16px; font-size: 16px;
@ -576,4 +586,17 @@ export default {
color: #9076FF; color: #9076FF;
} }
} }
.links{
width: 70%;
margin-left: 15%;
margin-top: 20px;
}
.ques{
color: #9278ff;
font-size: 14px;
}
.forget{
color: #ffa94e;
font-size: 14px;
}
</style> </style>
Write Preview
Loading…
Cancel
Save