85 lines
2.2 KiB
Vue
85 lines
2.2 KiB
Vue
<template>
|
|
<!-- 我的/设置/绑定邮箱 -->
|
|
<view class="bind-email wrap-card">
|
|
<u-input prefixIcon="email" class="mb-20" v-model="form.email" placeholder="请输入你要绑定的邮箱">
|
|
<template slot="suffix">
|
|
<u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒后重新获取" keepRunning
|
|
uniqueKey="bind-email"></u-code>
|
|
<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
|
|
</template>
|
|
</u-input>
|
|
<u--input prefixIcon="warning" class="mb-20" v-model="form.code" placeholder="请输入验证码"></u--input>
|
|
<!-- 底部操作 -->
|
|
<view class="wrap-bottom-bar">
|
|
<view class="bar-placeholder"></view>
|
|
<view class="bar-content">
|
|
<u-button :customStyle="btnStyle" :ripple="true" shape="circle" @click="submit">绑定
|
|
</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tips: '',
|
|
form: {
|
|
email: '',
|
|
code: ''
|
|
},
|
|
// 按钮配置
|
|
btnStyle: {
|
|
width: "90%",
|
|
height: "75rpx",
|
|
background: "linear-gradient(-45deg,#01906c,#34D399)",
|
|
color: "#FFFFFF",
|
|
fontSize: "30rpx",
|
|
},
|
|
}
|
|
},
|
|
computed: {
|
|
// 禁用按钮
|
|
disabled() {
|
|
return this.form.email === '' || this.form.code === ''
|
|
}
|
|
},
|
|
methods: {
|
|
// 验证码改变
|
|
codeChange(text) {
|
|
this.tips = text
|
|
},
|
|
// 获取验证码
|
|
getCode() {
|
|
if (this.$refs.uCode.canGetCode) {
|
|
// 模拟向后端请求验证码
|
|
uni.showLoading({
|
|
title: '正在发送验证码'
|
|
})
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
// 这里此提示会被this.start()方法中的提示覆盖
|
|
uni.$u.toast('验证码已发送')
|
|
// 通知验证码组件内部开始倒计时
|
|
this.$refs.uCode.start()
|
|
}, 2000)
|
|
} else {
|
|
uni.$u.toast('请倒计时结束后再发送')
|
|
}
|
|
},
|
|
// 提交
|
|
submit() {
|
|
// 验证
|
|
if(this.form.email === '' || this.form.code === '') return uni.$u.toast('请输入邮箱和验证码')
|
|
const rule = /[a-zA-Z0-9]+([-_.][A-Za-zd]+)*@([a-zA-Z0-9]+[-.])+[A-Za-zd]{2,5}$/
|
|
if(!rule.test(this.form.email)) return uni.$u.toast('请输入合法的电子邮箱')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bind-email {}
|
|
</style>
|