Skip to content

G
gs1
Commit a3ded428 by tang
Options

feat: 登录功能

parent 2581f4ba
Showing with 117 additions and 106 deletions
src/axios/api.js
...@@ -22,6 +22,7 @@ import search from "./module/search.js" ...@@ -22,6 +22,7 @@ import search from "./module/search.js"
import service from "./module/service.js" import service from "./module/service.js"
import knowledge from "./module/knowledge.js" import knowledge from "./module/knowledge.js"
import news from "./module/news.js" import news from "./module/news.js"
import user from "./module/user.js"
const api = { const api = {
home, home,
...@@ -32,6 +33,7 @@ const api = { ...@@ -32,6 +33,7 @@ const api = {
knowledge, knowledge,
news, news,
getCaptcha, getCaptcha,
user,
} }
export default api export default api
src/axios/module/user.js 0 → 100644
import {
POST
} from "../fetch.js"
const Prefix = process.env.NODE_ENV === 'development' ? '/gs1' : '';
// 用户登录
const login = (params = {}) => {
return POST(`${Prefix}/office/loglogin/api/login`, params)
}
export default {
login,
}
src/views/User/index.vue
...@@ -62,7 +62,7 @@ export default { ...@@ -62,7 +62,7 @@ export default {
display: flex; display: flex;
flex: 0 0 112px; flex: 0 0 112px;
justify-content: center; justify-content: center;
padding-top: 58px; //padding-top: 58px;
width: 100%; width: 100%;
text-align: left; text-align: left;
...@@ -123,7 +123,7 @@ export default { ...@@ -123,7 +123,7 @@ export default {
.gs-entry { .gs-entry {
.header{ .header{
flex: 0 0 60px; flex: 0 0 60px;
padding-top: 20px; //padding-top: 20px;
padding-bottom: 10px; padding-bottom: 10px;
.content { .content {
......
src/views/User/login.vue
<template> <template>
<EntryCard title="网站用户登录"> <EntryCard title="网站用户登录">
<div class="login"> <div class="login">
<el-tabs v-model="activeName" class="tab-no-bottom"> <div class="entry-login-title">用户名登录</div>
<el-tab-pane label="用户名登录" name="first"> <el-form :model="userForm" status-icon ref="userLoginFormRef">
<el-form :model="userForm" status-icon ref="userLoginFormRef"> <el-form-item prop="userName"
<el-form-item prop="userName" :rules="[{ required: true, message: '请输入用户名/条码卡号', trigger: 'blur' }]"
:rules="[{ required: true, message: '请输入用户名/条码卡号', trigger: 'blur' }]" >
> <el-input v-model="userForm.userName"
<el-input v-model="userForm.userName" placeholder="请输入用户名/条码卡号"></el-input>
placeholder="请输入用户名/条码卡号(test)"></el-input> </el-form-item>
</el-form-item>
<el-form-item prop="passWord"
<el-form-item prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
:rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]" >
> <el-input type="password"
<el-input type="password" v-model="userForm.passWord"
v-model="userForm.password" placeholder="请输入密码"
placeholder="请输入密码(test)" autocomplete="off"></el-input>
autocomplete="off"></el-input> </el-form-item>
</el-form-item>
<el-form-item class="validate-append"
<el-form-item class="validate-append" prop="verification"
prop="validateCode" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]"
:rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]" >
> <el-input
<el-input v-model="userForm.verification"
v-model="userForm.validateCode" placeholder="请输入验证码"
placeholder="请输入验证码" >
> <template slot="append"><img :src="captchaPath" style="cursor: pointer" @click="getCaptcha" alt="">
<template slot="append"><img src="../../assets/image/validate.jpg" alt=""></template> </template>
</el-input> </el-input>
</el-form-item> </el-form-item>
<div v-if="showUserLoginError" class="login-error"> <div v-if="showUserLoginError" class="login-error">
{{ userLoginError }} {{ userLoginError }}
</div> </div>
<el-form-item> <el-form-item>
<el-button type="primary" @click="loginByUser" style="width: 100%">登 录</el-button> <el-button type="primary" @click="loginByUser" style="width: 100%">登 录</el-button>
</el-form-item> </el-form-item>
<el-form-item class="bottom-btn"> <el-form-item class="bottom-btn">
<el-button type="text" @click="$router.push({name:'reset-pass'})">忘记密码</el-button> <el-button type="text" @click="$router.push({name:'reset-pass'})">忘记密码</el-button>
<el-divider direction="vertical"></el-divider> <el-divider direction="vertical"></el-divider>
<el-button type="text" @click="$router.push({name:'register'})">注册</el-button> <el-button type="text" @click="$router.push({name:'register'})">注册</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-tab-pane>
<el-tab-pane label="手机号登录" name="second">
<el-form :model="mobileForm" status-icon>
<el-form-item>
<el-input v-model="mobileForm.mobile"
placeholder="请输入手机号"></el-input>
</el-form-item>
<el-form-item>
<el-input
v-model="mobileForm.validateCode"
placeholder="请输入短信验证码"
>
<template slot="append">
<el-button v-if="!hasSent" type="primary" @click.stop="sendValidateCode">发送验证码</el-button>
<el-button disabled v-else>
发送验证码({{ time }}S)
</el-button>
</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loginByMobile" style="width: 100%">登 录</el-button>
</el-form-item>
<el-form-item class="bottom-btn">
<el-button type="text" @click="$router.push({name:'register'})">注册</el-button>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div> </div>
</EntryCard> </EntryCard>
</template> </template>
<script>import EntryCard from './entry-card.vue' <script>
import EntryCard from './entry-card.vue'
import {getUUID} from "@/utils/utils";
export default { export default {
name: "login", name: "login",
...@@ -99,37 +68,58 @@ export default { ...@@ -99,37 +68,58 @@ export default {
activeName: 'first', activeName: 'first',
userForm: { userForm: {
userName: '', userName: '',
password: '', passWord: '',
validateCode: '' verification: ''
},
mobileForm: {
mobile: '',
validateCode: ''
}, },
captchaPath: '',
uuid: '',
captcha: '',
errorMsg: '',
} }
}, },
created() {
this.getCaptcha();
},
methods: { methods: {
getCaptcha() {
this.uuid = getUUID()
const query = {
uuid: this.uuid
};
this.$api.getCaptcha(query).then((res) => {
this.captchaPath = window.URL.createObjectURL(res.body);
});
},
loginByUser() { loginByUser() {
this.$refs['userLoginFormRef'].validate((valid) => { this.$refs['userLoginFormRef'].validate((valid) => {
if (valid) { if (valid) {
if (this.userForm.validateCode.toLowerCase() === 'kjjj') { // if (this.userForm.validateCode.toLowerCase() === 'kjjj') {
if (this.userForm.userName === 'test' && this.userForm.password === 'test') { // if (this.userForm.userName === 'test' && this.userForm.password === 'test') {
localStorage.setItem('gs-user', JSON.stringify({type: 'unVerify'})) // localStorage.setItem('gs-user', JSON.stringify({type: 'unVerify'}))
this.$router.push({path: '/MyManage/UnVerify/index'}) // this.$router.push({path: '/MyManage/UnVerify/index'})
} else if (this.userForm.userName === 'test1' && this.userForm.password === 'test1') { // } else if (this.userForm.userName === 'test1' && this.userForm.password === 'test1') {
localStorage.setItem('gs-user', JSON.stringify({type: 'verify'})) // localStorage.setItem('gs-user', JSON.stringify({type: 'verify'}))
this.$router.push({path: '/MyManage/SystemMember/index'}) // this.$router.push({path: '/MyManage/SystemMember/index'})
} else if (this.userForm.userName === 'admin' && this.userForm.password === 'admin') { // } else if (this.userForm.userName === 'admin' && this.userForm.password === 'admin') {
localStorage.setItem('gs-user', JSON.stringify({type: 'admin'})) // localStorage.setItem('gs-user', JSON.stringify({type: 'admin'}))
this.$router.push({path: '/MyManage/admin/check'}) // this.$router.push({path: '/MyManage/admin/check'})
} else { // } else {
this.userLoginError = '用户名或密码不正确！' // this.userLoginError = '用户名或密码不正确！'
// this.showUserLoginError = true;
// }
// } else {
// this.userLoginError = '验证码不正确！'
// this.showUserLoginError = true;
// }
this.$api.user.login({
...this.userForm
}).then(res => {
console.log(res)
if (!res.success) {
this.userLoginError = res.returnMsg || '用户名或密码不正确！'
this.showUserLoginError = true; this.showUserLoginError = true;
} }
} else { })
this.userLoginError = '验证码不正确！'
this.showUserLoginError = true;
}
} else { } else {
console.log('error submit!!'); console.log('error submit!!');
return false; return false;
...@@ -137,9 +127,6 @@ export default { ...@@ -137,9 +127,6 @@ export default {
}); });
}, },
loginByMobile() {
},
sendValidateCode() { sendValidateCode() {
if (this.mobileForm.mobile === '') { if (this.mobileForm.mobile === '') {
this.$message({type: 'error', message: '请输入手机号码'}); this.$message({type: 'error', message: '请输入手机号码'});
...@@ -163,6 +150,14 @@ export default { ...@@ -163,6 +150,14 @@ export default {
.login { .login {
width: 360px; width: 360px;
.entry-login-title {
font-size: 16px;
font-weight: 500;
color: $theme-color1;
margin-bottom: 44px;
text-align: center;
}
.el-form { .el-form {
.validate-append .el-input-group__append { .validate-append .el-input-group__append {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment