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.
 
 
 
sliyun-web-h5/src/view/user/Login.vue

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>