uni-app 之 短信验证码登录
image.png文章来源地址https://www.toymoban.com/news/detail-730627.html
文章来源:https://www.toymoban.com/news/detail-730627.html
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>
到了这里,关于uni-app 之 短信验证码登录的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!