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.
139 lines
3.5 KiB
139 lines
3.5 KiB
2 years ago
|
<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>
|