<template>
|
<view class="box">
|
<view class="box-info">
|
<text>验证当前登录手机号</text>
|
<text v-if="status === 1">请输入 {{phone1}} 收到的短信验证码</text>
|
<text v-if="status === 2">换绑新手机号之后，可以用新的手机号登录</text>
|
</view>
|
<view class="list">
|
<view class="input" v-if="status === 2">
|
<view class="input-label">手机号</view>
|
<input type="number" v-model="newPhone" placeholder="请输入手机号" />
|
</view>
|
<view class="input">
|
<view class="input-label">短信验证码</view>
|
<input type="number" v-model="code" placeholder="请输入验证码" />
|
<view class="input-send" @click="send" v-if="num === 0">获取验证码</view>
|
<view class="input-send" v-else>{{num}}</view>
|
</view>
|
</view>
|
<view class="btn" @click="submit">下一步</view>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
import { formatPhoneStar } from '@/utils/utils.js'
|
export default {
|
computed: {
|
...mapState(['userInfo'])
|
},
|
data() {
|
return {
|
status: 1,
|
phone: '',
|
phone1: '',
|
newPhone: '',
|
code: '',
|
timer: null,
|
num: 0
|
};
|
},
|
onLoad() {
|
this.phone = this.userInfo.phone
|
this.phone1 = this.returnPhone(this.userInfo.phone)
|
},
|
methods: {
|
returnPhone(phone) {
|
return formatPhoneStar(phone)
|
},
|
// 下一步
|
submit() {
|
if (this.status === 1) {
|
this.$u.api.verifyCode({
|
code: this.code,
|
phone: this.phone
|
}).then(res => {
|
if (res.code === 200) {
|
this.status = 2
|
this.code = ''
|
this.num = 0
|
}
|
})
|
} else if (this.status === 2) {
|
this.$u.api.updateUserPhone({
|
code: this.code,
|
phone: this.newPhone
|
}).then(res => {
|
if (res.code === 200) {
|
this.num = 0
|
uni.showToast({
|
title: '换绑成功!',
|
icon: 'none'
|
})
|
uni.navigateBack({ delta: 1 });
|
}
|
})
|
}
|
if (this.timer) {
|
clearInterval(this.timer)
|
this.timer = null
|
}
|
},
|
// 发送验证码
|
send() {
|
if (this.status === 1) {
|
this.$u.api.sendSmsCode({
|
phone: this.phone
|
}).then(res => {
|
if (res.code === 200) {
|
uni.showToast({
|
title: '验证码发送成功',
|
icon: 'none'
|
})
|
this.jishi()
|
}
|
})
|
} else {
|
this.$u.api.sendSmsCode({
|
phone: this.newPhone
|
}).then(res => {
|
if (res.code === 200) {
|
uni.showToast({
|
title: '验证码发送成功',
|
icon: 'none'
|
})
|
this.jishi()
|
}
|
})
|
}
|
},
|
jishi() {
|
this.num = 60
|
this.timer = setInterval(() => {
|
if (this.num > 0) {
|
this.num--
|
} else {
|
clearInterval(this.timer)
|
this.timer = null
|
}
|
}, 1000)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
padding: 38rpx 30rpx;
|
box-sizing: border-box;
|
.btn {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #FFFFFF;
|
background: #004096;
|
border-radius: 44rpx;
|
margin-top: 60rpx;
|
}
|
.list {
|
width: 100%;
|
margin-top: 50rpx;
|
.input {
|
width: 100%;
|
height: 100rpx;
|
display: flex;
|
align-items: center;
|
border-bottom: 1rpx solid #E5E5E5;
|
.input-label {
|
width: 180rpx;
|
flex-shrink: 0;
|
font-weight: 600;
|
font-size: 28rpx;
|
color: #111111;
|
margin-right: 30rpx;
|
}
|
input {
|
flex: 1;
|
height: 100%;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #111111;
|
}
|
.input-send {
|
flex-shrink: 0;
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #004096;
|
margin-left: 30rpx;
|
}
|
}
|
}
|
.box-info {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
text {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 40rpx;
|
color: #111111;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #999999;
|
margin-top: 20rpx;
|
}
|
}
|
}
|
}
|
</style>
|
