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.
138 lines
3.5 KiB
138 lines
3.5 KiB
<template> |
|
<view class="page-content "> |
|
<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="boforeChange"> |
|
<view class="solid-bottom margin-bottom-lg"> |
|
<view class="cu-form-group padding-top-sm padding-bottom-sm"> |
|
<view class="title text-black ">新手机号</view> |
|
<input type="number" :maxlength="11" v-model="newPhone" placeholder="请输入手机号" name="input" /> |
|
</view> |
|
<view class="cu-form-group padding-top-sm solid-bottom padding-bottom-sm"> |
|
<view class="title text-black ">验证码</view> |
|
<input type="number" :maxlength="6" v-model="authCode" placeholder="请输入验证码" name="input" /> |
|
<text :class="frozen?'text-gray':'oil-main-color'" @tap="sendMsg">{{tips}}</text> |
|
</view> |
|
</view> |
|
<view class="margin-left padding-bottom-lg"> |
|
<text class="cuIcon-infofill padding-right-xs text-sm oil-main-color"></text> |
|
<text class="text-sm text-grey">更换成功将会重新登录</text> |
|
</view> |
|
<view class="padding-xl margin-top-lg "> |
|
<button class="bg-main-oil margin-top-lg" @tap="nextStep">提交</button> |
|
</view> |
|
</view> |
|
<!-- <view class="afterChange"> |
|
<view class=""> |
|
<view class="cu-avatar xl round margin-left bg-red"> |
|
<text class="cuIcon-roundcheck"></text> |
|
</view> |
|
</view> |
|
</view> --> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import cloudSiteApi from '@/api/cloud-site.js' |
|
import oliUserApi from '@/api/oli-user.js' |
|
export default { |
|
data() { |
|
return { |
|
oldPhone: uni.getStorageSync('oldPhone'), |
|
newPhone: '', |
|
loginUser: uni.getStorageSync('loginUser'), |
|
auth: {}, |
|
type: 'newPhone', |
|
authCode: "", |
|
tips: '获取验证码', |
|
frozen: false ,// 冷却时间 |
|
verifyCodeToken:'' |
|
} |
|
}, |
|
methods: { |
|
nextStep() { |
|
if (this.authCode) { |
|
const data3 = { |
|
phone: this.newPhone, |
|
code: this.authCode, |
|
type: this.type, |
|
verifyCodeToken : this.verifyCodeToken, |
|
id:this.loginUser.id |
|
} |
|
oliUserApi.changeNewPhone(data3).then(res => { |
|
if (res.code == 20000) { |
|
uni.showToast({ |
|
title: res.msg + '请重新登录' |
|
}) |
|
setTimeout(() => { |
|
uni.clearStorage() |
|
uni.reLaunch({ |
|
url: '/pages/login/boforeLogin/boforeLogin', |
|
fail: (err) => { |
|
console.log(err) |
|
} |
|
}) |
|
}, 1000); |
|
|
|
} |
|
}) |
|
} else { |
|
uni.showToast({ |
|
title: '请输入验证码', |
|
icon: 'none' |
|
}); |
|
} |
|
|
|
}, |
|
sendMsg() { |
|
if (!this.frozen) { |
|
if (this.newPhone) { |
|
const data2 = { |
|
phone: this.newPhone |
|
} |
|
oliUserApi.sendNewPhoneSms(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) |
|
|
|
|
|
} |
|
|
|
}) |
|
} else { |
|
uni.showToast({ |
|
title: '请输入新手机号' |
|
}); |
|
} |
|
} |
|
}, |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped> |
|
|
|
</style>
|
|
|