uni-app 賬號密碼和手機驗證碼 切換登錄 功能制作

視圖層的功能都已經做好了，包括賬號密碼登錄、手機驗證碼登陸，登錄信息合法性校驗。還沒有和后台進行數據對接，后台的數據交互還沒有做全，后期做完微信QQ等三方登錄后再貼一篇。

整體功能僅做參考，如有問題可進一步留言溝通，代碼制作參考了以下兩位同學的內容：

https://blog.csdn.net/weixin_43487066/article/details/106033315    https://www.jianshu.com/p/c10557859601

html代碼

<template>
    <view>
        <view class="img-wrap">
            <img src="@/static/images/logo.png" alt="" mode="widthFix">
        </view>
        <view class="input-wrap">
            <view v-if="isShow">
                <input type="text" placeholder="手機號/用戶名" v-model="userName">
                <input type="text" placeholder="密碼" v-model="userPwd">
            </view>
            <view v-if="!isShow" class="login-phone">
                <input type="text" placeholder="手機號" v-model="userNamePhone">
                <input type="text" placeholder="驗證碼" v-model="userPwdPhone">
                <view class="phone-code" @tap="getPhonecode">{{codeBtn.codeText}}</view>
            </view>
            <view>
                <view class="input-switch" @click="loginSwitch">{{loginWay}}</view>
                <view class="input-forget">忘記密碼</view>
            </view>
        </view>
        <view class="login" @tap="submit" v-if="isShow">
            登錄
        </view>
        <view class="login" @tap="submitPhone" v-if="!isShow">
            登錄
        </view>
        <view class="register">
            注冊
        </view>
        <view class="wechat-login" @tap="wechatLogin">
            <img src="@/static/images/wechat.png" alt="" mode="widthFix">
            <view>微信登錄</view>
        </view>
    </view>
</template>

js代碼

<script>
    export default {
        data() {
            return {
                isShow: true,
                loginWay: "短信驗證碼登陸",
                //用戶輸入內容
                userName: "",
                userPwd: "",
                userNamePhone: "",
                userPwdPhone: "",
                //驗證規則
                rules: {
                    userName: {
                        rule:/\S/,
                        msg: "賬號不能為空"
                    },
                    userPwd: {
                        rule: /^[0-9a-zA-Z]{6,16}$/,
                        msg: "密碼應該為6-16位"
                    },
                    userNamePhone: {
                        rule: /^1[3456789]\d{9}$/,
                        msg: "手機號格式錯誤"
                    },
                    userPwdPhone: {
                        rule: /^[0-9]{6}$/,
                        msg: "請輸入6位數字驗證碼"
                    }
                },
                //驗證碼按鈕
                codeBtn: {
                    codeTime: 60,
                    codeText: "獲取驗證碼",
                    codeStatus: true
                }
            }
        },
        methods:{
            //切換登錄方式
            loginSwitch() {
                this.isShow = !this.isShow
                if(this.isShow) {
                    this.loginWay = "短信驗證碼登陸"
                }else{
                    this.loginWay = "賬號密碼登陸"
                }
            },
            //賬號密碼點擊登錄
            submit() {
                if(!this.validate('userName')) return;
                if(!this.validate("userPwd"))  return;
                uni.showLoading({
                    title:"登錄中..."
                });
                //向服務器發送登陸請求
                setTimeout(()=>{
                    //隱藏登錄狀態
                    uni.hideLoading();
                    uni.navigateBack({
                        delta:1
                    })
                },2000)
            },
            //判斷驗證是否符合要求，合法性校驗
            validate(key){
                let bool=true;
                if(!this.rules[key].rule.test(this[key])){
                    //提示信息
                    uni.showToast({
                        title:this.rules[key].msg,
                    })
                    //取反
                    bool=false;
                    return false;
                }
                return bool;
            },
            //手機驗證碼登錄    
            submitPhone() {
                if(!this.validate('userNamePhone')) return;
                if(!this.validate("userPwdPhone"))  return;
                //向服務器發送登陸請求
                uni.request({
                    url: 'http://.....',//接口地址
                    data: {
                        user_MobilePhone: this.userNamePhone,
                        user_Password: this.userPwdPhone
                    },
                    method: "POST",
                    success: (res) => {
                        console.log("之前的數據狀態" + "賬號：" + this.userNamePhone + "密碼：" + this.userPwdPhone)
                        let list = JSON(stringify(res.data))
                        console.log("數據狀態:" + list)
                        if(list == "[]"){
                            uni.showToast({
                                icon: 'none',
                                title: '用戶名密碼錯誤'
                            })
                            return
                        }
                        uni.showToast({
                            icon: "none",
                            title: "登陸成功"
                        })
                        uni.switchTab({
                            url: "../course/index"
                        })
                    },
                    fail: () => {
                        uni.showToast({
                            icon: "none",
                            title: "網絡異常，請稍后再試"
                        })
                    }
                })
            },
            //獲取驗證碼按鈕點擊計時事件
            getPhonecode() {
                if(this.validate('userNamePhone') && this.codeBtn.codeStatus) {
                    this.codeBtn.codeStatus = false
                    let timerId = setInterval(() => {
                        let codetime = this.codeBtn.codeTime
                        codetime--
                        this.codeBtn.codeTime = codetime
                        this.codeBtn.codeText = codetime + "s"
                        if(codetime < 1) {
                            clearInterval(timerId)
                            this.codeBtn.codeText = "重新獲取"
                            this.codeBtn.codeTime = 60
                            this.codeBtn.codeStatus = true
                        }
                    },1000)
                }
            },
            //微信登錄
            // wechatLogin() {
                
            // }
        }
    }
</script>