fix(ui): ensure proper visibility toggle for device change and login steps

- hide login step and show device change option when switching to device change flow
- reset ui to show login step and hide device change elements on form reset
- update step indicator to skip step 1 when showing device change option
This commit is contained in:
Abner
2025-08-02 00:00:23 +08:00
parent 7559508858
commit 64842b97c4
3 changed files with 31 additions and 5 deletions

View File

@@ -199,7 +199,7 @@ const response = await fetch('https://appapi.simyo.nl/simyoapi/api/v1/sessions',
method: 'POST',
headers: createHeaders(false),
body: JSON.stringify({
phoneNumber: '0613715742',
phoneNumber: '0613123712',
password: 'your_password'
})
});

View File

@@ -628,7 +628,7 @@
<div class="mb-4">
<label for="phoneNumber" class="form-label">手机号码:</label>
<input type="text" id="phoneNumber" class="form-control" placeholder="例如: 0613715742" maxlength="15">
<input type="text" id="phoneNumber" class="form-control" placeholder="例如: 0613123712" maxlength="15">
</div>
<div class="mb-4">
@@ -997,6 +997,22 @@
// 重置UI
showSection(1);
updateSteps(1);
// 确保显示登录步骤,隐藏设备更换相关界面
const step1 = document.getElementById('step1');
if (step1) {
step1.style.display = 'block';
}
const deviceChangeOption = document.getElementById('deviceChangeOption');
if (deviceChangeOption) {
deviceChangeOption.style.display = 'none';
}
const deviceChangeSteps = document.getElementById('deviceChangeSteps');
if (deviceChangeSteps) {
deviceChangeSteps.style.display = 'none';
}
// 重置所有表单
document.querySelectorAll('input').forEach(input => {
@@ -1491,10 +1507,20 @@
// 显示设备更换选项
function showDeviceChangeOption() {
// 隐藏登录步骤
const step1 = document.getElementById('step1');
if (step1) {
step1.style.display = 'none';
}
// 显示设备更换选项
const deviceChangeOption = document.getElementById('deviceChangeOption');
if (deviceChangeOption) {
deviceChangeOption.style.display = 'block';
}
// 更新步骤指示器跳过步骤1
updateSteps(2);
}
// 开始设备更换流程

View File

@@ -226,7 +226,7 @@
<div class="mock-data">
<h6>Simyo 账户</h6>
<input type="text" class="mock-input" id="mockPhoneNumber"
placeholder="手机号码" value="0613715742">
placeholder="手机号码" value="0613123712">
<input type="text" class="mock-input" id="mockPassword"
placeholder="密码" value="test_password">
</div>
@@ -414,7 +414,7 @@
result: {
activationCode: "1$esim.simyo.nl$mock_activation_abcdef123456",
status: "READY",
phoneNumber: "0613715742",
phoneNumber: "0613123712",
iccid: "8931088123456789012",
createdAt: "2024-01-15T10:30:00Z"
}
@@ -560,7 +560,7 @@
async function testPhoneValidation() {
await testFramework.runTest('phone-validation', async () => {
// 测试有效的荷兰手机号
testFramework.assertTrue(mockValidatePhoneNumber('0613715742'), 'Should accept valid Dutch mobile number');
testFramework.assertTrue(mockValidatePhoneNumber('0613123712'), 'Should accept valid Dutch mobile number');
testFramework.assertTrue(mockValidatePhoneNumber('0687654321'), 'Should accept another valid number');
// 测试无效的手机号