137 lines
2.6 KiB
Plaintext
137 lines
2.6 KiB
Plaintext
<template>
|
|
<view class="page-container">
|
|
<view class="form-group">
|
|
<view class="input-item">
|
|
<text class="label">邮箱</text>
|
|
<input class="input" type="text" placeholder="请输入邮箱地址" v-model="email" />
|
|
</view>
|
|
<view class="input-item">
|
|
<text class="label">验证码</text>
|
|
<input class="input" type="number" placeholder="请输入验证码" v-model="code" maxlength="6" />
|
|
<text class="code-btn" @click="sendCode">{{ counting ? `${count}s` : '获取验证码' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<button class="submit-btn" @click="handleSubmit">确认绑定</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue'
|
|
|
|
const email = ref<string>('')
|
|
const code = ref<string>('')
|
|
const counting = ref<boolean>(false)
|
|
const count = ref<number>(60)
|
|
let timer: number = 0
|
|
|
|
const sendCode = async (): Promise<void> => {
|
|
if (counting.value) return
|
|
if (email.value == '' || email.value.includes('@') == false) {
|
|
uni.showToast({
|
|
title: '请输入正确的邮箱',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.showLoading({ title: '发送中...' })
|
|
|
|
uni.hideLoading()
|
|
|
|
counting.value = true
|
|
count.value = 60
|
|
|
|
timer = setInterval(() => {
|
|
count.value--
|
|
if (count.value <= 0) {
|
|
clearInterval(timer)
|
|
counting.value = false
|
|
}
|
|
}, 1000)
|
|
|
|
uni.showToast({
|
|
title: '验证码已发送',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
const handleSubmit = async (): Promise<void> => {
|
|
if (email.value == '' || code.value == '') {
|
|
uni.showToast({
|
|
title: '请填写完整信息',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
uni.showLoading({ title: '绑定中...' })
|
|
|
|
uni.hideLoading()
|
|
|
|
uni.showToast({
|
|
title: '绑定成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1500)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page-container {
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
flex: 1;
|
|
}
|
|
|
|
.form-group {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.input-item {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding: 15px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.input-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.label {
|
|
width: 70px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.code-btn {
|
|
font-size: 12px;
|
|
color: #ff4444;
|
|
padding: 5px 10px;
|
|
border: 1px solid #ff4444;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.submit-btn {
|
|
background-color: #ff4444;
|
|
color: white;
|
|
font-size: 16px;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
</style>
|