首页-绑定手机

This commit is contained in:
dong_bo0602 2020-07-02 19:03:29 +08:00
parent f1150528fa
commit de4dd4652a
4 changed files with 226 additions and 117 deletions

View File

@ -120,126 +120,10 @@ Page({
url: '../myVolunteerActivity/myVolunteerActivity',
})
},
// 判断用户是否为随机名称
isRandomName: function () {
var self = this
wx.getStorage({
key: 'isRandomUsername',
success: function (res) {
if (res.data == 1) {
wx.hideTabBar()
self.setData({
randomName: true
})
}
}
})
},
// 取消绑定手机
cancelPhone: function () {
this.setData({
showPhone: false
})
wx.showTabBar()
},
// 获取输入的手机号
phoneNum: function (res) {
this.setData({
phone: res.detail.value
})
console.log(this.data.phone)
},
// 校验手机号
testPhone: function () {
var self = this
if (self.data.phone) {
if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.data.phone)) {
wx.showToast({
title: '请输入正确的手机号',
icon: 'none',
duration: 1500
})
} else {
self.getCode()
}
} else {
wx.showToast({
title: '手机号不能为空',
icon: 'none',
duration: 1500
})
}
},
// 获取验证码
getCode: function () {
var self = this
app.restAjax.get(app.restAjax.path('{usercenterUrl}/api/sms/getverificationcode/' + self.data.phone, [app.usercenterUrl]), {}, null,
function (code, data) {
if (code == 200) {
console.log(data)
self.setData({
gotCode: true
})
self.data.timer = setInterval(function () {
var cur = self.data.restTime - 1
console.log(cur)
if (cur == 0) {
clearInterval(self.data.timer)
self.setData({
restTime: 120,
gotCode: false
})
}
self.setData({
restTime: cur
})
}, 1000)
}
},
function (code, data) {
console.log(data)
wx.showToast({
title: data.msg,
icon: 'none',
duration: 1500
})
} )
},
// 提交绑定手机
submitPhone: function () {
var self = this
app.restAjax.put(app.restAjax.path('{usercenterUrl}/app/user/updateminiappdefaultusername', [app.usercenterUrl]), {
phone: self.data.phone,
verificationCode: self.data.code
}, {
headers: {
token: self.data.token
}
}, function (code, data) {
console.log(data)
wx.setStorageSync('token', data.data);
wx.setStorageSync('isRandomUsername', 0)
clearInterval(self.data.timer)
self.setData({
showPhone: false,
restTime: 120
})
self.getUserInfo()
}, function (code, data) {
console.log(data)
})
},
// 验证码
inputCode: function (e) {
this.setData({
code: e.detail.value
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.isRandomName()
this.getToken()
},

View File

@ -4,6 +4,11 @@ Page({
* 页面的初始数据
*/
data: {
randomName: '',
showPhone: true,
gotCode: false,
restTime: 120,
timer: '',
indicatorDots: true,
autoplay: true,
token: '',
@ -26,7 +31,8 @@ Page({
live: {
liveUrl: app.liveUrl,
liveList: []
}
},
usercenterUrl: app.usercenterUrl
},
doLogin: function () {
var self = this;
@ -158,6 +164,129 @@ Page({
url: '../heritage/heritage',
})
},
// 获取输入的手机号
phoneNum: function (res) {
this.setData({
phone: res.detail.value
})
console.log(this.data.phone)
},
// 校验手机号
testPhone: function () {
var self = this
if (self.data.phone) {
if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(self.data.phone)) {
wx.showToast({
title: '请输入正确的手机号',
icon: 'none',
duration: 1500
})
} else {
self.getCode()
}
} else {
wx.showToast({
title: '手机号不能为空',
icon: 'none',
duration: 1500
})
}
},
// 获取验证码
getCode: function () {
var self = this
app.restAjax.get(app.restAjax.path('{usercenterUrl}/api/sms/getverificationcode/' + self.data.phone, [app.usercenterUrl]), {}, null,
function (code, data) {
if (code == 200) {
console.log(data)
self.setData({
gotCode: true
})
self.data.timer = setInterval(function () {
var cur = self.data.restTime - 1
console.log(cur)
if (cur == 0) {
clearInterval(self.data.timer)
self.setData({
restTime: 120,
gotCode: false
})
}
self.setData({
restTime: cur
})
}, 1000)
}
},
function (code, data) {
console.log(data)
wx.showToast({
title: data.msg,
icon: 'none',
duration: 1500
})
} )
},
// 提交绑定手机
submitPhone: function () {
var self = this
app.restAjax.put(app.restAjax.path('{usercenterUrl}/app/user/updateminiappdefaultusername', [app.usercenterUrl]), {
phone: self.data.phone,
verificationCode: self.data.code
}, {
headers: {
token: self.data.token
}
}, function (code, data) {
console.log(data)
wx.setStorageSync('token', data.data);
wx.setStorageSync('isRandomUsername', 0)
clearInterval(self.data.timer)
self.setData({
showPhone: false,
restTime: 120
})
self.getUserInfo()
}, function (code, data) {
console.log(data)
})
},
// 验证码
inputCode: function (e) {
this.setData({
code: e.detail.value
})
},
// 判断用户是否为随机名称
isRandomName: function () {
var self = this
wx.getStorage({
key: 'isRandomUsername',
success: function (res) {
if (res.data == 1) {
wx.hideTabBar()
self.setData({
randomName: true
})
}
}
})
},
// 获取用户信息
getUserInfo: function () {
var self = this
app.restAjax.get(app.restAjax.path('{usercenterUrl}/app/user/getappuser', [app.usercenterUrl]), {}, {
headers: {
token: self.data.token
}
}, function (code, data) {
self.setData({
userInfo: data
})
}, function (code, data) {
console.log(data)
})
},
/**
* 生命周期函数--监听页面加载
*/
@ -169,6 +298,7 @@ Page({
self.doGetLiveList();
self.doGetVenueList();
self.doGetActivityList();
self.isRandomName();
},
/**

View File

@ -125,4 +125,20 @@
<view class="broadcast-status" wx:else>错误</view>
</view>
</view>
</view>
<view class="set-phone" wx:if="{{randomName && showPhone}}">
<view class="set-phone-box">
<view class="tips">您还没有绑定手机号,请先绑定手机号</view>
<view class="phone-input">
<input placeholder="请输入手机号" bindinput="phoneNum" class="phone-input"></input>
</view>
<view class="code-input">
<input placeholder="请输入验证码" bindinput="inputCode"></input>
<view class="get-code" bindtap="testPhone" wx:if="{{!gotCode}}">获取验证码</view>
<view class="got-code" wx:else>{{restTime}}</view>
</view>
<view class="set-phone-btn-box">
<view class="set-phone-btn" bindtap="submitPhone">确认</view>
</view>
</view>
</view>

View File

@ -156,4 +156,83 @@
color: #fff;
font-size: 26rpx;
border-radius: 10rpx;
}
.set-phone{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .6);
z-index: 100;
}
.set-phone-box{
width: 96%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
border-radius: 10rpx;
padding: 30rpx;
box-sizing: border-box;
}
.tips{
font-size: 28rpx;
color: #000;
}
.phone-input{
margin: 25rpx 0;
}
.code-input{
display: flex;
justify-content: space-between;
margin-bottom: 25rpx;
}
.code-input input{
width: 70%;
height: 55rpx;
border: 1px solid #dedede;
border-radius: 10rpx;
padding: 0 10rpx;
box-sizing: border-box;
font-size: 28rpx;
}
.phone-input input{
width: 100%;
height: 55rpx;
border: 1px solid #dedede;
border-radius: 10rpx;
padding: 0 10rpx;
box-sizing: border-box;
font-size: 28rpx;
}
.get-code, .got-code{
font-size: 28rpx;
background: rgba(159,21,18,.1);
color: #9F1512;
width: 28%;
line-height: 55rpx;
text-align: center;
border-radius: 10rpx;
}
.got-code{
background: #fff;
color: #4a4d52;
border: 1px solid #eaeaea;
}
.set-phone-btn-box{
display: flex;
justify-content: space-between;
}
.set-phone-btn{
width: 100%;
height: 65rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #fff;
background: #9F1512;
border-radius: 10rpx;
}