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.
124 lines
3.1 KiB
124 lines
3.1 KiB
<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>
|
|
|