uni login

<template>
    <view class="content">
        <view class="avatorWrapper">
            <view class="avator">
                <image class="img" src="../../static/logo.png" mode="widthFix"></image>
            </view>
        </view>
        <view class="form">
            <view class="inputWrapper">
                <input class="input" type="text" v-model="loginname" placeholder="请输入用户名"/>
            </view>
            <view class="inputWrapper">
                <input class="input" type="password" v-model="password" placeholder="请输入密码"/>
            </view>
            <view class="loginBtn" @click="formSubmit()">
                <text class="btnValue">登录</text>
            </view>
            <view class="uni-inline-item forgotBtn">                
                <view class="uni-inline-item">
                    <text>注册</text>
                </view>
                <view class="uni-inline-item">
                    <text>找回密码</text>
                </view>
            </view>
            
            
        </view>
    </view>
</template>

<script>
    import common_ from '../../common/commons.js';
    export default {
        onLoad: function(option) {
            
        },
        data() {
            return {
                title: 'User login',
                hasSetBg: true,
                loginname:'',
                password:''
            }
        },
        methods: {
            testclick:function()
            {
                uni.showToast({
                    title:"wolegequ"
                })
            },
            formSubmit: function(e) {                
                var userdata = {    
                        userName: this.loginname,
                        passWord: this.password                    
                };
                console.log("url:"+common_.webServiceUrl);
                uni.request({
                    header: {
                        "Content-Type": "application/json;charset=utf-8"  //api的header格式；
                    },
                    url: common_.webServiceUrl, //地址放在公用js里
                    method: 'POST',
                    data: JSON.stringify(userdata),
                    success: (res) => {
                        if (res.data.result == "0") {
                            var data = res.data;
                            var setUserInfo = {                                
                                token: data.token,
                                loginName: data.LoginName
                            };

                            uni.setStorage({    //异步保存用户信息 （setStorageSync 为同步信息）
                                key: 'userinfo',
                                data: setUserInfo
                            });
                             uni.reLaunch({
                                 url: '../Vehicle/Index',   //跳转
                             }); 
                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: 'Username or password error'
                            });
                        }
    },
                    fail: () => {
                        uni.showToast({
                            icon: 'none',
                            title: 'Network exception, please try again later'
                        });
                    }
                })
            },
            formReset: function(e) {
                console.log('clear data')
                this.chosen = ''
            }
        }
    }
</script>

<style>
    .content {
        background: #377EB4;
        width: 100vw;
        height: 100vh;
    }
    .avatorWrapper{
        height: 30vh;
        width: 100vw;
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }
    .avator{
        width: 200upx;
        height: 200upx;
        overflow: hidden;
    }
    .avator .img{
        width: 100%
    }
    .form{
        padding: 0 100upx;
        margin-top: 80px;
    }
    .inputWrapper{
        width: 100%;
        height: 80upx;
        background: white;
        border-radius: 20px;
        box-sizing: border-box;
        padding: 0 20px;
        margin-top: 25px;
    }
    .inputWrapper .input{
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: 15px;
    }
    .loginBtn{
        width: 100%;
        height: 80upx;
        background: #77B307;
        border-radius: 50upx;
        margin-top: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }
    .loginBtn .btnValue{
        color: white;
    }
    .forgotBtn{
        color: #EAF6F9;
        font-size: 15px;
        margin-top: 20px;
    }
    
</style>