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.1 KiB
139 lines
3.1 KiB
<template> |
|
<view class="page"> |
|
<view class="line"> |
|
<view class="label">手机号</view> |
|
<input type="text" v-model.trim="form.email" placeholder="请填写你的邮箱" /> |
|
</view> |
|
<view class="line code-wrap not-bd"> |
|
<view class="label">验证码</view> |
|
<input class="code" type="number" v-model.trim="form.code" placeholder="请填写验证码" maxlength="6" /> |
|
<view class="send-code" @click="sendCode" :disabled="codeDisabled">{{ btnText }}</view> |
|
</view> |
|
<view class="btn" @click="submit">确认</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { bindPhoneOrEmail, sendPhoneOrEmailCode } from '@/apis/modules/user.js' |
|
export default { |
|
data() { |
|
return { |
|
userId: uni.getStorageSync('userId'), |
|
form: { |
|
email: '', |
|
code: '' |
|
}, |
|
emailOpener: '', |
|
codeDisabled: false, |
|
phoneTimer: null, |
|
btnText: '获取验证码', |
|
} |
|
}, |
|
onShow() { |
|
|
|
}, |
|
methods: { |
|
// 发送验证码 |
|
sendCode() { |
|
const { email } = this.form |
|
if (!email) return this.$util.errMsg('请输入邮箱') |
|
if (!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email) && !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email)) return this.$util.errMsg('请输入正确的请输入邮箱') |
|
sendPhoneOrEmailCode({ |
|
userId: this.userId, |
|
email, |
|
types: 1, |
|
}).then(res => { |
|
if (res.message.opener) { |
|
this.phoneCountdown() |
|
this.emailOpener = res.message.opener |
|
} |
|
}).catch(res => {}) |
|
}, |
|
// 验证码倒计时 |
|
phoneCountdown() { |
|
let count = 60 |
|
if (!this.phoneTimer) { |
|
this.codeDisabled = true |
|
this.phoneTimer = setInterval(() => { |
|
if (count > 0) { |
|
count-- |
|
this.btnText = `${count}秒后重试` |
|
} else { |
|
this.codeDisabled = false |
|
clearInterval(this.phoneTimer) |
|
this.phoneTimer = null |
|
this.btnText = `发送验证码` |
|
} |
|
}, 1000) |
|
} |
|
}, |
|
// 提交 |
|
submit() { |
|
const { email, code } = this.form |
|
if (!email) return this.$util.errMsg('请输入邮箱') |
|
if (!code) return this.$util.errMsg('请输入验证码') |
|
bindPhoneOrEmail({ |
|
userId: this.userId, |
|
email, |
|
types: 1, |
|
code, |
|
opener: this.emailOpener, |
|
}).then(res => { |
|
this.$util.sucMsg('修改成功！') |
|
setTimeout(() => { |
|
uni.navigateBack() |
|
}, 1500) |
|
}).catch(res => {}) |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.page { |
|
min-height: 100%; |
|
padding: 20px; |
|
background-color: #fff; |
|
box-sizing: border-box; |
|
.line { |
|
display: flex; |
|
align-items: center; |
|
padding: 20rpx 0; |
|
margin-bottom: 10rpx; |
|
&:not(.not-bd) { |
|
border-bottom: 1px solid #f3f3f3; |
|
} |
|
} |
|
.label { |
|
width: 200rpx; |
|
font-size: 28rpx; |
|
color: #565656; |
|
} |
|
input { |
|
font-size: 28rpx; |
|
color: #333; |
|
} |
|
|
|
.code { |
|
flex: 1; |
|
} |
|
.send-code { |
|
margin-left: 20rpx; |
|
color: #4386ff; |
|
font-size: 24rpx; |
|
line-height: 36px; |
|
} |
|
|
|
.btn { |
|
width: 300rpx; |
|
height: 60rpx; |
|
margin: 50rpx auto 0; |
|
font-size: 30rpx; |
|
text-align: center; |
|
color: #fff; |
|
line-height: 60rpx; |
|
background-color: #007EFF; |
|
border-radius: 40rpx; |
|
} |
|
} |
|
</style>
|
|
|