152 lines
4.0 KiB
Vue
152 lines
4.0 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="card">
|
|
<view class="form-item">
|
|
<view class="label">原手机号</view>
|
|
<up-input placeholder="请输入原手机号" border="surround" v-model="form.oldPhone" />
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="label">验证码</view>
|
|
<up-input placeholder="请输入原手机号验证码" border="surround" v-model="form.oldCode">
|
|
<template #suffix>
|
|
<up-button @tap="sendOldCode" :text="oldCodeText" type="success" size="small" :disabled="oldCooldown > 0"></up-button>
|
|
</template>
|
|
</up-input>
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="label">新手机号</view>
|
|
<up-input placeholder="请输入新手机号" border="surround" v-model="form.newPhone" />
|
|
</view>
|
|
|
|
<view class="form-item">
|
|
<view class="label">验证码</view>
|
|
<up-input placeholder="请输入新手机号验证码" border="surround" v-model="form.newCode">
|
|
<template #suffix>
|
|
<up-button @tap="sendNewCode" :text="newCodeText" type="success" size="small" :disabled="newCooldown > 0"></up-button>
|
|
</template>
|
|
</up-input>
|
|
</view>
|
|
|
|
<view class="btn-wrapper">
|
|
<up-button type="primary" @click="submit">确认更换</up-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive, ref } from 'vue';
|
|
import { authApi } from '@/api/index.js';
|
|
|
|
const form = reactive({
|
|
oldPhone: '',
|
|
oldCode: '',
|
|
newPhone: '',
|
|
newCode: ''
|
|
});
|
|
|
|
let oldCooldown = ref(0);
|
|
let newCooldown = ref(0);
|
|
let oldCodeText = ref('获取验证码');
|
|
let newCodeText = ref('获取验证码');
|
|
let oldTimer = null;
|
|
let newTimer = null;
|
|
|
|
const sendOldCode = async () => {
|
|
if (oldCooldown.value > 0) return;
|
|
if (!form.oldPhone) {
|
|
uni.showToast({ title: '请输入原手机号', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const data = await authApi.sendCode(form.oldPhone, 'change_phone_old');
|
|
oldCooldown.value = data.cooldown_seconds || 60;
|
|
oldCodeText.value = `${oldCooldown.value}s`;
|
|
|
|
oldTimer = setInterval(() => {
|
|
oldCooldown.value--;
|
|
if (oldCooldown.value <= 0) {
|
|
clearInterval(oldTimer);
|
|
oldCodeText.value = '获取验证码';
|
|
} else {
|
|
oldCodeText.value = `${oldCooldown.value}s`;
|
|
}
|
|
}, 1000);
|
|
|
|
uni.showToast({ title: '验证码已发送', icon: 'success' });
|
|
} catch (e) {
|
|
console.error('发送验证码失败', e);
|
|
}
|
|
};
|
|
|
|
const sendNewCode = async () => {
|
|
if (newCooldown.value > 0) return;
|
|
if (!form.newPhone) {
|
|
uni.showToast({ title: '请输入新手机号', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const data = await authApi.sendCode(form.newPhone, 'change_phone_new');
|
|
newCooldown.value = data.cooldown_seconds || 60;
|
|
newCodeText.value = `${newCooldown.value}s`;
|
|
|
|
newTimer = setInterval(() => {
|
|
newCooldown.value--;
|
|
if (newCooldown.value <= 0) {
|
|
clearInterval(newTimer);
|
|
newCodeText.value = '获取验证码';
|
|
} else {
|
|
newCodeText.value = `${newCooldown.value}s`;
|
|
}
|
|
}, 1000);
|
|
|
|
uni.showToast({ title: '验证码已发送', icon: 'success' });
|
|
} catch (e) {
|
|
console.error('发送验证码失败', e);
|
|
}
|
|
};
|
|
|
|
const submit = async () => {
|
|
if (!form.oldPhone || !form.oldCode) {
|
|
uni.showToast({ title: '请填写原手机号信息', icon: 'none' });
|
|
return;
|
|
}
|
|
if (!form.newPhone || !form.newCode) {
|
|
uni.showToast({ title: '请填写新手机号信息', icon: 'none' });
|
|
return;
|
|
}
|
|
|
|
try {
|
|
await authApi.changePhone(form.oldPhone, form.oldCode, form.newPhone, form.newCode);
|
|
uni.showToast({ title: '更换成功', icon: 'success' });
|
|
setTimeout(() => {
|
|
uni.navigateBack();
|
|
}, 1500);
|
|
} catch (e) {
|
|
console.error('更换手机号失败', e);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
.card {
|
|
.form-item {
|
|
margin-bottom: var(--space-lg);
|
|
.label {
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
margin-bottom: var(--space-sm);
|
|
}
|
|
}
|
|
.btn-wrapper {
|
|
margin-top: var(--space-xl);
|
|
}
|
|
}
|
|
}
|
|
</style> |