theluyuan/litemall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore[litemall-vue]: 简化登录组件，同时添加测试账号提醒信息

Browse Source
This commit is contained in:
Junling Bu
2019-04-20 23:31:22 +08:00
parent d1f82f2e1a
commit 8d262f8b45
4 changed files with 200 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
litemall-vue/src/views/login/login-footer.vue
View File

@@ -1,18 +0,0 @@
<template>
<div class="text-desc text-center bottom_positon">技术支持: litemall</div>
</template>
<script>
export default {
name: 'login-footer'
};
</script>
<style scoped>
.bottom_positon {
position: absolute;
bottom: 30px;
width: 100%;
}
</style>

29
litemall-vue/src/views/login/login-header.vue
View File

@@ -1,29 +0,0 @@
<template>
<div class="store_header">
<div class="store_avatar">
<img src="../../assets/images/avatar_default.png" alt="头像" width="55" height="55">
</div>
<div class="store_name">litemall-vue</div>
</div>
</template>
<script>
export default {
name: 'login-header'
};
</script>
<style lang="scss" scoped>
.store_header {
text-align: center;
padding: 30px 0;
.store_avatar img {
border-radius: 50%;
}
.store_name {
padding-top: 5px;
font-size: 16px;
}
}
</style>

182
litemall-vue/src/views/login/login-request.vue
View File

@@ -1,182 +0,0 @@
<template>
<div>
<md-field-group>
<md-field
v-model="account"
icon="username"
placeholder="随便输"
right-icon="clear-full"
v-validate="'required'"
name="user"
data-vv-as="帐号"
@right-click="clearText"
/>
<md-field
v-model="password"
icon="lock"
placeholder="随便输"
:type="visiblePass ? 'text' : 'password'"
:right-icon="visiblePass ? 'eye-open' : 'eye-close'"
v-validate="'required'"
data-vv-as="密码"
name="password"
@right-click="visiblePass = !visiblePass"
/>
<div class="clearfix">
<div class="float-r">
<router-link to="/login/forget">忘记密码</router-link>
</div>
</div>
<van-button size="large" type="danger" :loading="isLogining" @click="loginSubmit">登录</van-button>
</md-field-group>
<div class="register clearfix">
<div class="float-l connect">
<!-- <span @click="showKefu = true">联系客服</span> -->
</div>
<div class="float-r">
<router-link to="/login/registerGetCode">免费注册</router-link>
</div>
</div>
<van-popup v-model="showKefu">
<md-kefu mobile="16454193338"/>
</van-popup>
</div>
</template>
<script>
import field from '@/vue/components/field/';
import fieldGroup from '@/vue/components/field-group/';
import md_kefu from '@/vue/components/md-kefu/';
import { USER_LOGIN, USER_PROFILE } from '@/api/user';
import { setLocalStorage } from 'core/utils/local-storage';
import { emailReg, mobileReg } from '@/core/regexp';
import { Popup, Toast } from 'vant';
export default {
name: 'login-request',
data() {
return {
account: '',
password: '',
visiblePass: false,
showKefu: false,
isLogining: false,
userInfo: {}
};
},
methods: {
clearText() {
this.account = '';
},
async validate() {
const result = await this.$validator.validate();
if (!result) {
const errMsg = this.errors.items[0].msg;
Toast(errMsg);
throw new Error(`表单验证: ${errMsg}`);
}
},
async login() {
let loginData = this.getLoginData();
let { data } = await this.$reqPost(USER_LOGIN, loginData);
this.userInfo = data.data.userInfo;
console.log(this.userInfo);
setLocalStorage({
Authorization: data.data.token
});
this.getUserProfile();
},
async loginSubmit() {
this.isLogining = true;
try {
await this.validate();
await this.login();
this.isLogining = false;
} catch (err) {
console.log(err.message);
this.isLogining = false;
}
},
getUserProfile() {
// const {
// data: { data }
// } = await this.$reqGet(USER_PROFILE);
setLocalStorage({
avatar: this.userInfo.avatarUrl,
// user_id: data.user_id,
// background_image: data.background_image,
nickName: this.userInfo.nickName
});
this.routerRedirect();
},
routerRedirect() {
// const { query } = this.$route;
// this.$router.replace({
// name: query.redirect || 'home',
// query: query
// });
window.location = '#/user/';
},
getLoginData() {
const password = this.password;
const username = this.getUserType(this.account);
return {
username: this.account,
password: password
};
},
getUserType(account) {
const accountType = mobileReg.test(account)
? 'mobile'
: emailReg.test(account)
? 'email'
: 'username';
return accountType;
}
},
components: {
[field.name]: field,
[fieldGroup.name]: fieldGroup,
[md_kefu.name]: md_kefu,
[Popup.name]: Popup
}
};
</script>
<style lang="scss" scoped>
@import '../../assets/scss/mixin';
.register {
padding-top: 40px;
color: $font-color-gray;
a {
color: $font-color-gray;
}
> div {
width: 50%;
box-sizing: border-box;
padding: 0 20px;
}
.connect {
@include one-border(right);
text-align: right;
}
}
</style>

229
litemall-vue/src/views/login/login.vue
View File

@@ -1,29 +1,200 @@
<template>
<div class="login">
<login-header />
<login-request />
<login-footer />
</div>
</template>
<script>
import loginHeader from './login-header';
import loginRequest from './login-request';
import loginFooter from './login-footer';
export default {
components: {
[loginHeader.name]: loginHeader,
[loginRequest.name]: loginRequest,
[loginFooter.name]: loginFooter
}
};
</script>
<style lang="scss" scoped>
.login {
position: relative;
background-color: #fff;
}
</style>
<template>
<div class="login">
<div class="store_header">
<div class="store_avatar">
<img src="../../assets/images/avatar_default.png" alt="头像" width="55" height="55">
</div>
<div class="store_name">litemall-vue</div>
</div>
<md-field-group>
<md-field
v-model="account"
icon="username"
placeholder="请输入测试账号 user123"
right-icon="clear-full"
v-validate="'required'"
name="user"
data-vv-as="帐号"
@right-click="clearText"
/>
<md-field
v-model="password"
icon="lock"
placeholder="请输入测试密码 user123"
:type="visiblePass ? 'text' : 'password'"
:right-icon="visiblePass ? 'eye-open' : 'eye-close'"
v-validate="'required'"
data-vv-as="密码"
name="password"
@right-click="visiblePass = !visiblePass"
/>
<div class="clearfix">
<div class="float-l">
<router-link to="/login/registerGetCode">免费注册</router-link>
</div>
<div class="float-r">
<router-link to="/login/forget">忘记密码</router-link>
</div>
</div>
<van-button size="large" type="danger" :loading="isLogining" @click="loginSubmit">登录</van-button>
</md-field-group>
<div class="text-desc text-center bottom_positon">技术支持: litemall</div>
</div>
</template>
<script>
import field from '@/vue/components/field/';
import fieldGroup from '@/vue/components/field-group/';
import { USER_LOGIN, USER_PROFILE } from '@/api/user';
import { setLocalStorage } from 'core/utils/local-storage';
import { emailReg, mobileReg } from '@/core/regexp';
import { Toast } from 'vant';
export default {
name: 'login-request',
components: {
[field.name]: field,
[fieldGroup.name]: fieldGroup,
Toast
},
data() {
return {
account: '',
password: '',
visiblePass: false,
isLogining: false,
userInfo: {}
};
},
methods: {
clearText() {
this.account = '';
},
async validate() {
const result = await this.$validator.validate();
if (!result) {
const errMsg = this.errors.items[0].msg;
Toast(errMsg);
throw new Error(`表单验证: ${errMsg}`);
}
},
async login() {
let loginData = this.getLoginData();
let { data } = await this.$reqPost(USER_LOGIN, loginData);
this.userInfo = data.data.userInfo;
console.log(this.userInfo);
setLocalStorage({
Authorization: data.data.token
});
this.getUserProfile();
},
async loginSubmit() {
this.isLogining = true;
try {
await this.validate();
await this.login();
this.isLogining = false;
} catch (err) {
console.log(err.message);
this.isLogining = false;
}
},
getUserProfile() {
// const {
// data: { data }
// } = await this.$reqGet(USER_PROFILE);
setLocalStorage({
avatar: this.userInfo.avatarUrl,
// user_id: data.user_id,
// background_image: data.background_image,
nickName: this.userInfo.nickName
});
this.routerRedirect();
},
routerRedirect() {
// const { query } = this.$route;
// this.$router.replace({
// name: query.redirect || 'home',
// query: query
// });
window.location = '#/user/';
},
getLoginData() {
const password = this.password;
const username = this.getUserType(this.account);
return {
username: this.account,
password: password
};
},
getUserType(account) {
const accountType = mobileReg.test(account)
? 'mobile'
: emailReg.test(account)
? 'email'
: 'username';
return accountType;
}
}
};
</script>
<style lang="scss" scoped>
@import '../../assets/scss/mixin';
.login {
position: relative;
background-color: #fff;
}
.store_header {
text-align: center;
padding: 30px 0;
.store_avatar img {
border-radius: 50%;
}
.store_name {
padding-top: 5px;
font-size: 16px;
}
}
.register {
padding-top: 40px;
color: $font-color-gray;
a {
color: $font-color-gray;
}
> div {
width: 50%;
box-sizing: border-box;
padding: 0 20px;
}
.connect {
@include one-border(right);
text-align: right;
}
}
.bottom_positon {
position: absolute;
bottom: 30px;
width: 100%;
}
</style>