<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>

