<template>
    <view>
        <view class="login-form">
            <input class="input-row js-input-numer" v-model="account" type="number" maxlength="11" placeholder="输入手机号"/>
            <input class="input-row" v-model="password" @confirm="bindLogin" type="password" maxlength="20" placeholder="输入密码" confirm-type="登录"/>
            <button type="button" class="btn login-btn" @click="bindLogin">登录</button>
            <view class="bot flex-box">
                <navigator class="sign" hover-class="none">立即注册</navigator>
                <navigator class="forget" hover-class="none">忘记密码?</navigator>
            </view>
        </view>
        <view class="auth-row" v-if="hasProvider">
            <view class="auth-image" v-for="provider in providerList" :key="provider.value">
                <!-- #ifdef APP-PLUS -->
                <image class="img" :src="provider.image" @click="authLogin(provider.value)"></image>
                <!-- #endif -->
                <!-- 小程序处理 -->
                <!-- #ifdef MP-WEIXIN -->
                <button v-if="provider.value == 'weixin'" class="log-btn" open-type="getUserInfo" @getuserinfo="getUserInfo">
                    <image class="img" :src="provider.image"></image>
                </button>
                <!-- #endif -->
            </view>
        </view>
    </view>
</template>
<script>

export default {
    data() {
        return {
            hasProvider: false, // 是否有服务商平台可登录
            providerList: [],
            account: '',
            password: ''
        };
    },
    onReady() {
        this.getProvider();
        // #ifdef H5
        this.$nextTick(() => {
            document.querySelector('.js-input-numer input').setAttribute("pattern", "[0-9]*")
        })
        // #endif
    },
    methods: {
        // 获取服务供应商
        getProvider() {
            const  providerList = ['weixin', 'qq', 'sinaweibo'];
            // 判断是否用某种登录工具登录
            uni.getProvider({
                service: 'oauth',
                success: res => {
                    if (res.provider && res.provider.length) {
                        for (let i = 0; i < res.provider.length; i++) {
                            var tempProvider = res.provider[i];
                            if (~providerList.indexOf(tempProvider)) {
                                this.providerList.push({
                                    value: tempProvider,
                                    image: '../../static/image/login/' + tempProvider + '.png'
                                });
                            }
                        }
                        this.hasProvider = true;
                    }
                },
                fail: err => {
                    console.error('获取服务供应商失败：' + JSON.stringify(err));
                }
            });
        },
        // 账号登录
        bindLogin() {
            /**
             * 客户端对账号信息进行一些必要的校验。
             * 实际开发中，根据业务需要进行处理，这里仅做示例。
             */
            const account = this.account.trim()
            const password = this.password.trim()
            if (account == '') {
                this.alert('请输入手机号')
                return;
            }
            if(!(/^1[3456789]\d{9}$/.test(account))){
                this.alert("手机号码有误，请重填");
                return false;
            }
            if (password.length < 6) {
                uni.showToast({
                    icon: 'none',
                    title: '密码最短为 6 个字符'
                });
                return;
            }

            uni.showLoading({
                title: '登录中'
            });

            const params = {
                phone: this.account,
                password: this.password
            };
            // 登录请求业务
            //
            // ...
        },
        // 授权登录
        authLogin(value) {
            uni.login({
                provider: value,
                success: res => {
                    uni.getUserInfo({
                        provider: value,
                        success: infoRes => {
                            c