You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
157 lines
4.4 KiB
157 lines
4.4 KiB
<template>
|
|
<div class="content">
|
|
<van-nav-bar
|
|
title="登录"
|
|
left-arrow
|
|
@click-left="onClickLeft"
|
|
@click-right="onClickRight"
|
|
/>
|
|
<div class="login_top">
|
|
<van-image class="user_av"
|
|
width="60px"
|
|
height="60px"
|
|
:src=app.logo>
|
|
<template v-slot:loading>
|
|
<van-loading type="spinner" size="20"/>
|
|
</template>
|
|
</van-image>
|
|
<div class="van-ellipsis">{{app.name}}</div>
|
|
</div>
|
|
|
|
<div class="login_form">
|
|
<van-field
|
|
ref="username"
|
|
v-model="login.phone"
|
|
placeholder="请填写手机号"
|
|
:left-icon="icon_user"
|
|
@input="onInput"
|
|
:rules="[{ required: true, message: '请填写手机号' }]"
|
|
/>
|
|
<van-field
|
|
ref="password"
|
|
v-model="login.password"
|
|
type="password"
|
|
:left-icon="icon_password"
|
|
placeholder="请填写密码"
|
|
@input="onInput"
|
|
:rules="[{ required: true, message: '请填写密码' }]"
|
|
/>
|
|
<div style="margin: 16px;">
|
|
<van-button :disabled="disabled" redround block type="info" @click="onLogin">登录
|
|
</van-button>
|
|
</div>
|
|
</div>
|
|
<!-- 右对齐 -->
|
|
<van-row class="login_register" type="flex">
|
|
<van-col @click="goRegister">无登录账号?快速注册</van-col>
|
|
</van-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {Login} from '@/api/user'
|
|
import {Toast} from 'vant';
|
|
import core from '@/core'
|
|
import {isEmpty} from '@/utils/common'
|
|
import md5 from 'js-md5';
|
|
import {icon_password, icon_user} from '@/core/icons'
|
|
|
|
|
|
export default {
|
|
name: "Login",
|
|
data() {
|
|
return {
|
|
icon_password: icon_password,
|
|
icon_user: icon_user,
|
|
disabled: true,
|
|
app: {
|
|
logo: core.info.logo,
|
|
name: core.info.name,
|
|
},
|
|
login: {
|
|
phone: "",
|
|
password: "",
|
|
password1: "",
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
onClickLeft() {
|
|
this.$router.go(-1)
|
|
},
|
|
onClickRight() {
|
|
},
|
|
onInput() {
|
|
if (isEmpty(this.login.phone) || isEmpty(this.login.password)) {
|
|
this.disabled = true;
|
|
} else {
|
|
this.disabled = false;
|
|
}
|
|
},
|
|
onLogin() {
|
|
window.console.log(JSON.stringify(this.login));
|
|
const params = {
|
|
'phone': this.login.phone,
|
|
'password': md5('sunaliyun_'+this.login.password),
|
|
}
|
|
window.console.log(JSON.stringify(params));
|
|
|
|
Login(params).then(response => {
|
|
window.console.log(response)
|
|
window.console.log(response.data)
|
|
window.console.log(response.data.token)
|
|
|
|
Toast.fail("登录成功")
|
|
window.console.log(response)
|
|
localStorage.setItem('UserInfo', JSON.stringify(response.data))
|
|
localStorage.setItem('ACCESS_TOKEN', response.data.token)
|
|
this.$router.back();
|
|
}
|
|
)
|
|
},
|
|
goRegister() {
|
|
this.$router.push('register');
|
|
}
|
|
}, setup() {
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
body {
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.content {
|
|
background: white;
|
|
height: 100%;
|
|
}
|
|
|
|
.login_top {
|
|
height: 140px;
|
|
padding: 10px;
|
|
background: white;
|
|
text-align: center;
|
|
}
|
|
|
|
.user_av {
|
|
display: inline-block;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.login_form {
|
|
margin-left: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.login_register {
|
|
margin-right: 40px;
|
|
float: right;
|
|
}
|
|
|
|
|
|
</style>
|
|
|