135 lines
2.6 KiB
Plaintext
135 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="number" placeholder="请输入新手机号" v-model="phone" maxlength="11" />
|
|
</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 phone = ref('')
|
|
const code = ref('')
|
|
const counting = ref(false)
|
|
const count = ref(60)
|
|
|
|
const sendCode = () => {
|
|
if (counting.value) return
|
|
if (!phone.value || phone.value.length !== 11) {
|
|
uni.showToast({
|
|
title: '请输入正确的手机号',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
counting.value = true
|
|
count.value = 60
|
|
|
|
const timer = setInterval(() => {
|
|
count.value--
|
|
if (count.value <= 0) {
|
|
clearInterval(timer)
|
|
counting.value = false
|
|
}
|
|
}, 1000)
|
|
|
|
uni.showToast({
|
|
title: '验证码已发送',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
|
|
const handleSubmit = () => {
|
|
if (!phone.value || !code.value) {
|
|
uni.showToast({
|
|
title: '请填写完整信息',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
// TODO: Call API to bind phone
|
|
uni.showLoading({ title: '提交中...' })
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '绑定成功',
|
|
icon: 'success'
|
|
})
|
|
|
|
// 更新本地存储的用户信息
|
|
const userInfo = uni.getStorageSync('userInfo')
|
|
if (userInfo) {
|
|
// @ts-ignore
|
|
userInfo.phone = phone.value
|
|
uni.setStorageSync('userInfo', userInfo)
|
|
}
|
|
|
|
setTimeout(() => {
|
|
uni.navigateBack()
|
|
}, 1500)
|
|
}, 1000)
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.page-container {
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.form-group {
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
padding: 0 15px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.input-item {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 50px;
|
|
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;
|
|
}
|
|
|
|
.code-btn {
|
|
color: #007aff;
|
|
font-size: 14px;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.submit-btn {
|
|
background-color: #007aff;
|
|
color: #fff;
|
|
border-radius: 25px;
|
|
font-size: 16px;
|
|
}
|
|
</style> |