szugift-fe/sourcecode/h5app/vue/src/views/login.vue

<template>
    <div>
        <h1>登录</h1>
        <van-cell-group>
            <van-field
                    v-model="phone"
                    required
                    clearable
                    label="手机号"
                    placeholder="请输入手机号"
                    :error="phoneError"
                    @click="phoneError=false"
            />
            <van-field
                    v-model="password"
                    required
                    clearable
                    type="password"
                    label="密码"
                    placeholder="请输入密码"
                    :error="passError"
                    @click="passError=false"
            />

            <van-field
                    v-model="sms"
                    center
                    clearable
                    label="短信验证码"
                    placeholder="请输入短信验证码（暂时不用）"
                    required
                    disabled=false
            >
                <van-button slot="button" size="small" type="primary" disabled=false>发送验证码</van-button>
            </van-field>
        </van-cell-group>
        <div style="position: fixed; bottom: 5px; width:100%">
            <van-button type="default" size="large" class='submit' @click="Login">登录</van-button>
            <van-button type="default" size="large" class='submit' @click="Register">注册</van-button>
        </div>
    </div>
</template>

<script>
    import {
        Field,
        CellGroup,
        Button,
    } from 'vant';
    export default {
        components: {
            [Field.name]: Field,
            [CellGroup.name]: CellGroup,
            [Button.name]: Button
        },
        data() {
            return {
                phone: '',
                phoneError: false,
                sms: '',
                password: '',
                passError: false
            }
        },
        methods: {
            Login() {
                // 检查输入
                if(this.phone.length !== 11) {
                    this.phoneError = true;
                    return;
                } else if(this.password.length < 8) {
                    this.passError = true;
                    return;
                }
                // 检查手机号有无注册

                // let API = "http://south.niimei.com:8866/server";
                // let GETUSERINFO = "/smartUsers/list";
                // this.$http.get(API+GETUSERINFO).then((data) => {
                //     // 响应成功回调
                //     console.log(data);
                // }, (err) => {
                //     // 响应错误回调
                //     console.log(err);
                //     console.log(this);
                // });
                // let login_info = {
                //     phone: this.phone,
                //     pass: this.password
                // };
                // if(get_data(login_info)) {
                //     this.$router.push('index');
                // } else {
                //     this.phoneError = true;
                //     this.passError = true;
                // }
                this.$router.push('index');
            },
            Register() {
                this.$router.push('verify');
            }
        }
    }
</script>

<style scoped>
.submit {
    margin-top: 10px;
}
</style>