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

<template>
    <div>
        <img src="../assets/login_background.png"
             style="max-width: 100%"
        />
        <div class="card">
            <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
                >
                    <van-button slot="button" size="small" type="primary" disabled>发送验证码</van-button>
                </van-field>
            </van-cell-group>
        </div>

        <div style="position: fixed; bottom: 5px; width:100%">
            <van-button type="primary" size="large" class='login' @click="Login">登录</van-button>
            <van-button type="default" size="large" class='register' @click="Register">注册</van-button>
        </div>
    </div>
</template>

<script>
    import 'whatwg-fetch';
    import { BasicFunction } from '../connector/basic-service';
    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;
                // }
                // 检查手机号有无验证
                // BasicFunction.get_data("smartUsers/list", function(data) { console.log(data.model.list); } );
                BasicFunction.get_data("ajaxlogin", function(response){
                    console.log("------ Data Rcvd in Login --------");
                    console.log(response);
                    if(response.ret === "10000"){
                        // 不需要 设置 SessionID， 已经自动保存在jSessionID中
                        this.$router.push('index');
                    } else {
                        // 密码错误的处理
                        console.warn("登录失败");
                    }
                }, { u: this.phone, p : this.passWord });
                // this.$router.push('index');
            },
            Register() {
                BasicFunction.get_data("ajaxlogin", function(response){
                    console.log("------ Data Rcvd in Login --------");
                    console.log(response);
                    if(response.ret === "10000"){
                        // 不需要 设置 SessionID， 已经自动保存在jSessionID中
                        this.$router.push('verify');
                    } else {
                        // 注册失败的处理
                        console.warn("注册失败");
                    }
                }, { u: this.phone, p : this.passWord });
            }
        }
    }

    /** Post JSON **/
    /*
    // 怎么把一段放到另一个文件？

    fetch('/users', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            name: 'Hubot',
            login: 'hubot',
        })
    })

    */
</script>

<style scoped>
    .card {
        margin: 20px;
        border: solid 1px #e4e4e4;
    }
    .login {
        margin-bottom: 10px;
        width: 85%;
        background-color: #fd6740;
        border-color: #fd6740;
    }
    .register {
        margin-bottom: 5px;
        width: 85%;
    }
</style>