hookehuyr

style(PhoneSettingPage): 调整验证码输入和按钮的样式

统一表单元素的样式,改进间距和焦点状态
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
43 43
44 <!-- 验证码输入 --> 44 <!-- 验证码输入 -->
45 <div class="mb-6"> 45 <div class="mb-6">
46 - <label for="verificationCode" class="block text-sm font-medium text-gray-700 mb-2"> 46 + <label for="verificationCode" class="block text-sm font-medium text-gray-700">
47 验证码 <span class="text-red-500">*</span> 47 验证码 <span class="text-red-500">*</span>
48 </label> 48 </label>
49 <div class="flex space-x-2"> 49 <div class="flex space-x-2">
...@@ -54,13 +54,13 @@ ...@@ -54,13 +54,13 @@
54 required 54 required
55 maxlength="6" 55 maxlength="6"
56 placeholder="请输入验证码" 56 placeholder="请输入验证码"
57 - class="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent" 57 + class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500"
58 /> 58 />
59 <button 59 <button
60 type="button" 60 type="button"
61 :disabled="countdown > 0 || !isPhoneValid" 61 :disabled="countdown > 0 || !isPhoneValid"
62 @click="sendVerificationCode" 62 @click="sendVerificationCode"
63 - class="px-4 py-3 border border-transparent text-sm font-medium rounded-lg text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap" 63 + class="mt-1 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap"
64 > 64 >
65 {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }} 65 {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
66 </button> 66 </button>
...@@ -191,11 +191,11 @@ const handlePhoneChange = async () => { ...@@ -191,11 +191,11 @@ const handlePhoneChange = async () => {
191 loading.value = true; 191 loading.value = true;
192 192
193 try { 193 try {
194 - const { code, data } = await updateUserInfoAPI({ 194 + const { code, data } = await updateUserInfoAPI({
195 mobile: formData.value.phone, 195 mobile: formData.value.phone,
196 sms_code: formData.value.verificationCode 196 sms_code: formData.value.verificationCode
197 }); 197 });
198 - 198 +
199 if (code) { 199 if (code) {
200 // 更新auth上下文中的用户信息 200 // 更新auth上下文中的用户信息
201 currentUser.value = { 201 currentUser.value = {
...@@ -204,14 +204,14 @@ const handlePhoneChange = async () => { ...@@ -204,14 +204,14 @@ const handlePhoneChange = async () => {
204 }; 204 };
205 // 更新localStorage中的用户信息 205 // 更新localStorage中的用户信息
206 localStorage.setItem('currentUser', JSON.stringify(currentUser.value)); 206 localStorage.setItem('currentUser', JSON.stringify(currentUser.value));
207 - 207 +
208 // 更新当前显示的手机号 208 // 更新当前显示的手机号
209 currentPhone.value = formData.value.phone; 209 currentPhone.value = formData.value.phone;
210 - 210 +
211 // 清空表单 211 // 清空表单
212 formData.value.phone = ''; 212 formData.value.phone = '';
213 formData.value.verificationCode = ''; 213 formData.value.verificationCode = '';
214 - 214 +
215 showToast('手机号修改成功'); 215 showToast('手机号修改成功');
216 } 216 }
217 } catch (error) { 217 } catch (error) {
......