个人中心

front/src/views/fore/profile.vue

@@ -22,6 +22,10 @@
               <el-form-item label="邮箱">
                 <el-input v-model="profileInfo.email" placeholder="请输入邮箱"></el-input>
               </el-form-item>
+              <el-form-item label="手机号">
+                <el-input v-model="profileInfo.phone" placeholder="请输入手机号"></el-input>
+                <el-button type="primary" @click="bindPhone">绑定手机号</el-button>
+              </el-form-item>
             </el-form>
           </div>
         </div>
@@ -30,11 +34,6 @@
         <div class="profile-details">
           <el-form ref="profileDetailsForm" :model="profileInfo" label-width="80px">
             <el-row>
-              <el-col :span="12">
-                <el-form-item label="手机号">
-                  <el-input v-model="profileInfo.phone" placeholder="请输入手机号"></el-input>
-                </el-form-item>
-              </el-col>
               <el-col :span="12">
                 <el-form-item label="性别">
                   <el-select v-model="profileInfo.gender" placeholder="请选择性别">
@@ -43,13 +42,13 @@
                   </el-select>
                 </el-form-item>
               </el-col>
-            </el-row>
-            <el-row>
               <el-col :span="12">
                 <el-form-item label="出生日期">
                   <el-date-picker v-model="profileInfo.birthday" type="date" placeholder="选择日期"></el-date-picker>
                 </el-form-item>
               </el-col>
+            </el-row>
+            <el-row>
               <el-col :span="12">
                 <el-form-item label="地址">
                   <el-input v-model="profileInfo.address" placeholder="请输入地址"></el-input>
@@ -110,8 +109,7 @@ const profileInfo = ref({
   address: '北京市朝阳区某某街道',
 });
 
-
+// 读取 localStorage 中保存 的地址数据
-// 读取 localStorage 中保存的地址数据
 const loadAddresses = () => {
   const savedData = localStorage.getItem('addresses');
   return savedData ? JSON.parse(savedData) : [];
@@ -211,12 +209,21 @@ const copyAddress = (address) => {
   ElMessage.success('地址已复制到剪贴板');
 };
 
-
 const logout = () => {
   router.push({ name: 'login' });
-}
+};
+
+const bindPhone = () => {
+  if (!profileInfo.value.phone) {
+    ElMessage.error('手机号不能为空');
+    return;
+  }
+  // 这里可以添加手机号绑定的逻辑，比如发送请求到后端
+  ElMessage.success('手机号绑定成功！');
+};
 
 </script>
+
 <style scoped>
 .profile-list-container {
   position: fixed;
@@ -259,6 +266,7 @@ const logout = () => {
   margin-top: 20px;
 }
 
+
 .address-card {
   background-color: #fff;
   border-radius: 8px;