uni-app 之短信验证码登录

叁歲伎倆 2023-10-16 15:19 45阅读 0赞

uni-app 之 短信验证码登录

![format_png][]

image.png

![format_png 1][]

image.png

<template>
        <view style="width: 100%; display: flex; flex-direction:column; align-items:center;">
    
            <view style="width: 300px; margin-top: 100px;">
    
                
                
                <view style="display: flex; ">
                    <u-input placeholder="请输入手机号码" v-model="logon_phone" />
                    <button @click="getphoneurl">验证码</button>
                </view>
    
                
                
                <u-input placeholder="请输入验证码" v-model="logon_code" />
                <button @click="getcodeurl">登录</button>
    
            </view>
    
            
            <text>retCode={
       {urlretCode}}; </text>
            <text>retMsg={
       {curlretMsg}}; </text>
            <text>retdata={
       {curlretdata}}; </text>
    
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
    
                    // 返回參數
                    urlretCode: "",
                    curlretMsg: "",
                    curlretdata: "",
    
                    // 輸入框内容
                    logon_phone: "",
                    logon_code: "",
    
                };
            },
    
            methods: {
                // 按钮点击后执行的方法
    
                ///
                // 1，输入手机号码，获取验证码
                getphoneurl() {
                    // uni.showLoading({
                    //  title: "加载中" // 加个进度条
                    // })
    
                    console.log("111 111 logon_phone 打印", this.logon_phone)
    
                    uni.request({
    
                        url: "https://api.xxx.com/sms/SendSms/" + this.logon_phone,
                        success: res => {
                            console.log("111 111 res 打印", res) // log打印获取的数据
                            this.urlretCode = res.data.retCode
                            this.curlretMsg = res.data.retMsg
                            // uni.hideLoading() // 加载出来后，关闭进度条
                        }
                    })
                },
    
                ///
                // 2，输入验证码，登录
                getcodeurl() {
                    // uni.showLoading({
                    //  title: "加载中" // 加个进度条
                    // })
    
                    let params = {
                        // "phone": "177128xxxxx",
                        // "verificationCode": "5546",
                        "phone": this.logon_phone,
                        "verificationCode": this.logon_code,
                    }
    
                    console.log("222 222 params 打印", params) // log打印获取的数据
    
                    uni.request({
                        method: 'post',
                        url: "https://api.xxx.com/cusInfo/login",
                        data: params,
                        success: res => {
                            console.log("222 222 res 打印", res) // log打印获取的数据
                            this.urlretCode = res.data.retCode
                            this.curlretMsg = res.data.retMsg
                            this.curlretdata = res.data.data
    
                            // 存储返回的token
                            uni.setStorageSync('s_token', res.data.data);
                            uni.setStorageSync('s_retCode', res.data.retCode);
    
                            // 打印存储的token
                            const token = uni.getStorageSync('s_token'); //获取token
                            const g_phone = uni.getStorageSync('s_phone'); //获取token
                            console.log("333 333 token>>>", token, g_phone) // log打印获取的数据
    
                            if (token) {
                                //存在则关闭前页面
                                uni.navigateBack({
                                    //关闭当前页面，返回上一页面或多级页面。
                                    delta: 1
                                });
    
                            } else {
                                //不存在则跳转至登录页
                                // uni.reLaunch({
                                //  url: "/pages/ldy_logon/ldy_logon",
                                //  success: () => {
                                //      plus.navigator.closeSplashscreen();
                                //  }
                                // })
                            }
                        }
                    })
                },
    
            },
    
            onLoad() {
                // 页面刚进去就初始化的方法
    
                // this.getphoneurl(),
                // this.getcodeurl()
            },
    
        }
    </script>
    
    
    <style lang="scss">
    
    </style>

[format_png]: https://img-blog.csdnimg.cn/img_convert/2118e0ea50377ee3671163d7dfc80e3a.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/281f5ec28a2201aa9f6fdb048c38e9e8.webp?x-oss-process=image/format,png