91 lines
2.3 KiB
Vue
91 lines
2.3 KiB
Vue
<style lang="less" scoped>
|
|
.wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.block {
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<div class="page-login" style="background:#eee; height: 100vh;">
|
|
<van-nav-bar title="登录"
|
|
left-text="返回"
|
|
left-arrow
|
|
@click-left="$router.back()" />
|
|
<div style="padding:10px;text-align:center">
|
|
<img src="./../assets/logo_128.png" alt="">
|
|
</div>
|
|
<van-form @submit="login">
|
|
<van-field
|
|
v-model="username"
|
|
name="username"
|
|
label="用户名"
|
|
placeholder="用户名"
|
|
:rules="[{ required: true, message: '请填写用户名' }]"
|
|
/>
|
|
<van-field
|
|
v-model="password"
|
|
type="password"
|
|
name="password"
|
|
label="密码"
|
|
placeholder="密码"
|
|
:rules="[{ required: true, message: '请填写密码' }]"
|
|
/>
|
|
<div style="margin: 16px;">
|
|
<van-button
|
|
round
|
|
block
|
|
type="info"
|
|
native-type="submit"
|
|
>
|
|
提交
|
|
</van-button>
|
|
</div>
|
|
</van-form>
|
|
<van-overlay :show="showLoading">
|
|
<div class="wrapper" @click.stop>
|
|
<div class="block"> <van-loading size="80" /></div>
|
|
</div>
|
|
</van-overlay>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import http from "../components/http";
|
|
import {Dialog} from 'vant';
|
|
export default {
|
|
name:'Login',
|
|
data(){
|
|
return {
|
|
username:'',
|
|
password:'',
|
|
showLoading:false
|
|
}
|
|
},
|
|
methods:{
|
|
login(){
|
|
this.showLoading = true;
|
|
http.shop.post('/login',{username:this.username,password:this.password}).then(ret=>{
|
|
this.showLoading = false;
|
|
window.localStorage.setItem('gg_user_token',ret.token)
|
|
this.$router.back();
|
|
}).catch(e=>{
|
|
this.showLoading = false;
|
|
Dialog.alert({
|
|
title: '提示',
|
|
message: e.message,
|
|
}).then(() => {
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|