You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
125 lines
3.1 KiB
125 lines
3.1 KiB
2 years ago
|
<template>
|
||
|
|
<view class="page-content my-bg">
|
||
|
|
<cu-custom :isBack="true" class="main-topbar bg-main-oil" bgColor="bg-main-oil">
|
||
|
|
<block slot="content">手机短信验证</block>
|
||
|
|
<block slot="backText">返回</block>
|
||
|
|
</cu-custom>
|
||
|
|
<view class="bg-white cu-card margin-bottom-lg">
|
||
|
|
<view class="text-gray text-lg padding-top-lg padding-bottom-lg margin-bottom margin-top-lg text-center">
|
||
|
|
请输入 <text class="text-black">
|
||
|
|
{{loginUser.userPhone}}
|
||
|
|
</text> 收到的短信验证码
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="cu-form-group padding-top-sm padding-bottom-sm">
|
||
|
|
<view class="title text-black ">验证码</view>
|
||
|
|
<input type="number" :maxlength="6" v-model="code" placeholder="填写验证码" name="input" />
|
||
|
|
<text class="mini-left-border" :class="frozen?'text-gray':'oil-main-color'" @tap="sendMsg">{{tips}}</text>
|
||
|
|
</view>
|
||
|
|
<view class="padding margin-top-lg padding-top-lg">
|
||
|
|
<button class="bg-main-oil" @tap="nextStep">下一步</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import cloudSiteApi from '@/api/cloud-site.js'
|
||
|
|
import oliUserApi from '@/api/oli-user.js'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
odphone:'',
|
||
|
|
oldPhone: uni.getStorageSync('oldPhone'),
|
||
|
|
loginUser: uni.getStorageSync('loginUser'),
|
||
|
|
auth: {},
|
||
|
|
type: 'oldPhone',
|
||
|
|
code: "",
|
||
|
|
tips: '获取验证码',
|
||
|
|
frozen: false ,// 冷却时间
|
||
|
|
verifyCodeToken:''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
let phones = uni.getStorageSync('loginUser')
|
||
|
|
this.odphone =phones.userPhone
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
nextStep() {
|
||
|
|
if (this.code) {
|
||
|
|
const data3 = {
|
||
|
|
phone: this.loginUser.userPhone,
|
||
|
|
code: this.code,
|
||
|
|
type: this.type,
|
||
|
|
verifyCodeToken : this.verifyCodeToken
|
||
|
|
}
|
||
|
|
oliUserApi.checkOldPhoneCode(data3).then(res => {
|
||
|
|
if (res.code == 20000) {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.msg
|
||
|
|
})
|
||
|
|
setTimeout(() => {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/packageSecurity/changePhone/changePhone',
|
||
|
|
fail: (err) => {
|
||
|
|
console.log(err)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}, 800);
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: '请输入验证码',
|
||
|
|
icon: 'none'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
sendMsg() {
|
||
|
|
if (!this.frozen) {
|
||
|
|
const data2 = {
|
||
|
|
phone: this.loginUser.userPhone
|
||
|
|
}
|
||
|
|
oliUserApi.sendOldPhoneSms(data2).then(res => {
|
||
|
|
console.log('res', res)
|
||
|
|
this.verifyCodeToken = res.data.verifyCodeToken
|
||
|
|
uni.showToast({
|
||
|
|
title: res.msg,
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
if (res.code == 20000) {
|
||
|
|
this.frozen = true
|
||
|
|
let second = 60
|
||
|
|
this.tips = `${second}秒后重发`
|
||
|
|
setTimeout(() => {
|
||
|
|
this.frozen = false
|
||
|
|
clearInterval(timer)
|
||
|
|
this.tips = `发送验证码`
|
||
|
|
}, 1000 * 60);
|
||
|
|
|
||
|
|
const timer = setInterval(() => {
|
||
|
|
second--
|
||
|
|
if (second) {
|
||
|
|
this.tips = `${second}秒后重发`
|
||
|
|
} else {
|
||
|
|
this.tips = `发送验证码`
|
||
|
|
}
|
||
|
|
}, 1000)
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.mini-left-border {
|
||
|
|
border-left: 1px solid #999;
|
||
|
|
padding-left: 1rem;
|
||
|
|
}
|
||
|
|
</style>
|