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;
                }
                window.routerme = this.$router;  //TODO: 考虑 encodeURIComponent(this.password)
                BasicFunction.get_data("ajaxlogin?u=" + this.phone + "&p=" + this.password, function (response) {
                    console.log("------ Data Rcvd in Login --------");
                    console.log(response);
                    if(response.ret === "10000"){
                        // userId
                        localStorage.setItem("frontend-userid", response.model.userId);
                        window.routerme.push('index');
                    } else {
                        // 密码错误的处理
                        console.warn("登录失败");
                    }
                }, {});
            },
            Register() {
                    this.$router.push('verify');
            },
            SendOTP() {
                BasicFunction.get_data("ajaxsendotp?u=" + this.phone, function (response) {
                    console.log('------ sms Rcvd in Login --------');
                    console.log(response);
                }, {})
            }
        }
    }

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

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

    */
</script>

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