uni-app 之 短信验证码登录

image.png

image.png

<template>
    <view style="width: 100%; display: flex; flex-direction:column; align-items:center;">

        <view style="width: 300px; margin-top: 100px;">

            <!-- // -->
            <!-- 1，输入手机号码，获取验证码 -->
            <view style="display: flex; ">
                <u-input placeholder="请输入手机号码" v-model="logon_phone" />
                <button @click="getphoneurl">验证码</button>
            </view>

            <!-- // -->
            <!-- 2，输入验证码，登录 -->
            <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>