89 lines
2.1 KiB
Vue
89 lines
2.1 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="card flex-col-g20">
|
|
<view class="flex-row-g20">
|
|
<label for="">手机号:</label>
|
|
<up-input placeholder="请输入绑定的手机号" border="surround" v-model="bind.phone" />
|
|
</view>
|
|
|
|
<view class="flex-row-g20">
|
|
<label for="">验证码:</label>
|
|
<up-input placeholder="验证码" v-model="bind.code">
|
|
<template #suffix>
|
|
<up-button @tap="getCode" :text="codeText" type="success" :disabled="cooldown > 0"></up-button>
|
|
</template>
|
|
</up-input>
|
|
</view>
|
|
|
|
<view class="btn">
|
|
<up-button type="primary" @tap="bindPhone">绑定手机号</up-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from 'vue';
|
|
import { authApi } from '@/api/index.js';
|
|
|
|
let bind = reactive({
|
|
phone: '',
|
|
code: ''
|
|
});
|
|
|
|
let cooldown = ref(0);
|
|
let codeText = ref('获取验证码');
|
|
let timer = null;
|
|
|
|
const getCode = async () => {
|
|
if (!bind.phone) {
|
|
uni.showToast({ title: '请输入手机号', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
if (!/^1[3-9]\d{9}$/.test(bind.phone)) {
|
|
uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const data = await authApi.sendCode(bind.phone, 'bind_phone');
|
|
cooldown.value = data.cooldown_seconds || 60;
|
|
codeText.value = `${cooldown.value}s`;
|
|
|
|
timer = setInterval(() => {
|
|
cooldown.value--;
|
|
if (cooldown.value <= 0) {
|
|
clearInterval(timer);
|
|
codeText.value = '获取验证码';
|
|
} else {
|
|
codeText.value = `${cooldown.value}s`;
|
|
}
|
|
}, 1000);
|
|
|
|
uni.showToast({ title: '验证码已发送', icon: 'success' });
|
|
} catch (e) {
|
|
console.error('发送验证码失败', e);
|
|
}
|
|
};
|
|
|
|
const bindPhone = async () => {
|
|
if (!bind.phone || !bind.code) {
|
|
uni.showToast({ title: '手机号和验证码都不能为空', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await authApi.bindPhone(bind.phone, bind.code);
|
|
uni.showToast({ title: '绑定成功', icon: 'success' });
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1500);
|
|
} catch (e) {
|
|
console.error('绑定手机号失败', e);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style> |