feat(用户设置): 添加手机号显示功能

在用户设置页面中显示用户的手机号码，从API响应中获取并绑定到模板

 <!--
 <!--
  * @Date: 2025-03-24 13:04:21
  * @Date: 2025-03-24 13:04:21
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-13 11:23:19
+ * @LastEditTime: 2025-06-13 11:41:59
  * @FilePath: /mlaj/src/views/profile/SettingsPage.vue
  * @FilePath: /mlaj/src/views/profile/SettingsPage.vue
  * @Description: 用户设置页面
  * @Description: 用户设置页面
 -->
 -->
@@ -92,7 +92,7 @@
               <div class="flex items-center justify-between">
               <div class="flex items-center justify-between">
                 <div>
                 <div>
                   <h3 class="text-base font-medium text-gray-900">修改手机号</h3>
                   <h3 class="text-base font-medium text-gray-900">修改手机号</h3>
-                  <p class="text-sm text-gray-500">修改手机号</p>
+                  <p class="text-sm text-gray-500">{{ phone }}</p>
                 </div>
                 </div>
                 <ChevronRightIcon class="w-5 h-5 text-gray-400" />
                 <ChevronRightIcon class="w-5 h-5 text-gray-400" />
               </div>
               </div>
@@ -123,6 +123,9 @@ const userAvatar = ref('');
 // 用户名
 // 用户名
 const username = ref('');
 const username = ref('');
 
 
+// 手机号
+const phone = ref('');
+
 // 获取用户信息
 // 获取用户信息
 onMounted(async () => {
 onMounted(async () => {
   try {
   try {
@@ -130,6 +133,7 @@ onMounted(async () => {
     if (response.data) {
     if (response.data) {
       userAvatar.value = response.data.user.avatar;
       userAvatar.value = response.data.user.avatar;
       username.value = response.data.user.name;
       username.value = response.data.user.name;
+      phone.value = response.data.user.mobile;
     }
     }
   } catch (error) {
   } catch (error) {
     console.error('获取用户信息失败:', error);
     console.error('获取用户信息失败:', error);