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.
114 lines
2.5 KiB
114 lines
2.5 KiB
2 years ago
|
<template>
|
||
|
|
<view class="page">
|
||
|
|
<view class="input">
|
||
|
|
<uni-easyinput v-model="form.email" placeholder="请填写你的邮箱" :clearable="false" />
|
||
|
|
</view>
|
||
|
|
<view class="input code-wrap">
|
||
|
|
<uni-easyinput class="code" v-model="form.code" placeholder="验证码" :clearable="false" />
|
||
|
|
<view class="send-code" @click="sendCode" :disabled="codeDisabled">{{ btnText }}</view>
|
||
|
|
</view>
|
||
|
|
<button type="primary" @click="submit">确认</button>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
2 years ago
|
import { updateMyEmail, mailCodeSend } from '@/apis/modules/user.js'
|
||
|
2 years ago
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
userId: '',
|
||
|
|
form: {
|
||
|
|
email: '',
|
||
|
|
code: ''
|
||
|
|
},
|
||
|
|
codeDisabled: false,
|
||
|
|
phoneTimer: null,
|
||
|
|
btnText: '发送验证码',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
2 years ago
|
|
||
|
2 years ago
|
},
|
||
|
|
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('请输入正确的请输入邮箱')
|
||
|
2 years ago
|
mailCodeSend({
|
||
|
2 years ago
|
email,
|
||
|
2 years ago
|
platformId: 4
|
||
|
|
}).then(res => {
|
||
|
|
this.phoneCountdown()
|
||
|
2 years ago
|
}).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('请输入验证码')
|
||
|
2 years ago
|
updateMyEmail({
|
||
|
2 years ago
|
email,
|
||
|
|
code,
|
||
|
2 years ago
|
platformId: 4
|
||
|
2 years ago
|
}).then(res => {
|
||
|
|
this.$util.sucMsg('修改成功！')
|
||
|
|
setTimeout(() => {
|
||
|
2 years ago
|
uni.navigateBack()
|
||
|
2 years ago
|
}, 1500)
|
||
|
|
}).catch(res => {})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.page {
|
||
|
|
padding: 20px;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
/deep/.input {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
.is-input-border {
|
||
|
|
border-color: #dedede !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.input {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.code-wrap {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.code {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
.send-code {
|
||
|
|
width: 100px;
|
||
|
|
margin-left: 20px;
|
||
|
|
text-align: center;
|
||
|
|
color: #4386ff;
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 36px;
|
||
|
|
border: 1px solid #4386ff;
|
||
|
|
border-radius: 5px;
|
||
|
|
}
|
||
|
|
</style>
|