安全设置页面已进行如下更新：- 添加了修改手机号码的功能，包括发送验证码、验证验证码和提交新手机号码的流程。

-引入了相应的API调用，如发送验证码、验证验证码和更新手机号码。
- 优化了页面布局，使用卡片式设计区分登录密码和手机号码修改区域。
- 引入了新的状态管理手机号码修改流程的可见性。
- 样式调整，以匹配新增的布局和功能。

BREAKING CHANGE: 页面组件和相关API的结构已进行重大调整，可能影响依赖于先前页面结构的客户端代码。请确保在更新前备份并测试相关功能。

src/api/system/user.js

@@ -108,6 +108,15 @@ export function delUser(userId) {
   })
 }
 
+
+//修改手机号
+export function updatePhone(data) {
+  return request({
+    url: '/system/user/profile/updatePhonenumber/'+data,
+    method: 'POST'
+  })
+}
+
 // 用户密码重置
 export function resetUserPwd(userId, password) {
   const data = {

src/views/management/secure/index.vue

@@ -2,9 +2,59 @@
   <div>
     <h1 style="text-align: center; margin-bottom: 30px;">安全设置</h1>
     <el-divider></el-divider>
-    <label>登录密码</label>
-    <label>安全性高的密码可以使帐号更安全</label>
-    <button @click="openModal">修改密码</button>
+
+    <div class="container">
+      <div class="card left-card">
+        <el-card style="margin-top: 50px;">
+          <h2>登录密码</h2>
+          <div class="container">
+            <label>安全性高的密码可以使帐号更安全.建议你定期更换密码,设置6-20位登录密码</label>
+            <div class="button-wrapper">
+              <button @click="openModal">修改密码</button>
+            </div>
+          </div>
+        </el-card>
+      </div>
+
+      <div class="card right-card">
+        <el-card style="margin-top: 50px;">
+          <h2>手机号码</h2>
+          <label>安全手机可以用于登录帐号，重置密码或其他安全验证</label>
+          <button @click="openCurrentPhoneModal">修改手机号</button>
+
+          <!-- 输入当前手机号的弹出框 -->
+          <div v-if="isCurrentPhoneModalVisible" class="modal-overlay">
+            <div class="modal-content">
+              <h3>当前手机号</h3>
+              <div>旧手机号({{ user.phonenumber }})</div>
+              <button @click="sendVerificationCode">发送验证码</button>
+              <button @click="closeCurrentPhoneModal">取消</button>
+            </div>
+          </div>
+
+          <!-- 输入验证码的弹出框 -->
+          <div v-if="isVerificationModalVisible" class="modal-overlay">
+            <div class="modal-content">
+              <h3>输入验证码</h3>
+              <input v-model="code" placeholder="验证码" />
+              <button @click="verCode">验证并输入新手机号</button>
+              <button @click="closeVerificationModal">取消</button>
+            </div>
+          </div>
+
+
+          <!-- 输入新手机号的弹出框 -->
+          <div v-if="isNewPhoneModalVisible" class="modal-overlay">
+            <div class="modal-content">
+              <h3>输入新手机号</h3>
+              <input v-model="newPhone" placeholder="新手机号" />
+              <button @click="updatePhoneNumber">提交修改</button>
+              <button @click="closeNewPhoneModal">取消</button>
+            </div>
+          </div>
+        </el-card>
+      </div>
+    </div>
 
     <!-- 弹出框 -->
     <div v-if="showModal" class="modal">
@@ -47,7 +97,7 @@
 
 <script>
 import axios from 'axios';
-import {getUserProfile,sendCode,checkCode} from "@/api/system/user";
+import {getUserProfile,sendCode,checkCode,updatePhone} from "@/api/system/user";
 import {updateUserPwd} from "@/api/system/user";
 
 export default {
@@ -60,6 +110,13 @@ export default {
       }
     };
     return {
+      isVisible: false,
+      currentPhone: '',
+      newPhone: '',
+      verificationCode: '',
+      isCurrentPhoneModalVisible: false,
+      isVerificationModalVisible: false,
+      isNewPhoneModalVisible: false,
       // 表单校验
       rules: {
         oldPassword: [
@@ -80,6 +137,7 @@ export default {
         confirmPassword: undefined
       },
       showModal: false,
+      aModel: false,
       phonenumber: '',
       code: '',
       oldPassword: '',
@@ -92,6 +150,38 @@ export default {
     this.getUser();
   },
   methods: {
+    updatePhoneNumber() {
+      updatePhone(this.newPhone).then(response => {
+        this.closeNewPhoneModal();
+        this.$message({
+          message: '修改成功',
+          type: 'success'
+        });
+      });
+    },
+    closeNewPhoneModal() {
+      this.isNewPhoneModalVisible = false;
+    },
+    closeVerificationModal() {
+      this.isVerificationModalVisible = false;
+    },
+    sendVerificationCode() {
+      try {
+        sendCode(this.user.phonenumber)
+        this.closeCurrentPhoneModal();
+        this.isVerificationModalVisible = true;
+        alert('验证码已发送');
+      } catch (error) {
+        console.error('发送验证码失败', error);
+        alert('发送验证码失败');
+      }
+    },
+    openCurrentPhoneModal() {
+      this.isCurrentPhoneModalVisible = true;
+    },
+    closeCurrentPhoneModal() {
+      this.isCurrentPhoneModalVisible = false;
+    },
     getUser() {
       getUserProfile().then(response => {
         this.user = response.data.sysUser;
@@ -123,6 +213,17 @@ export default {
         }
       });
     },
+    async verCode() {
+      checkCode(this.user.phonenumber, this.code).then(response => {
+        if (response.code === 200) {
+          this.closeVerificationModal();
+          this.isNewPhoneModalVisible = true; // 验证成功后弹出新手机号输入框
+          alert('验证码验证成功');
+        } else {
+          alert('验证码验证失败');
+        }
+      })
+    },
     async verifyCode() {
       checkCode(this.user.phonenumber, this.code).then(response => {
         if (response.code === 200) {
@@ -135,6 +236,7 @@ export default {
     }
   },
 
+
   resetForm() {
     this.phonenumber = '';
     this.code = '';
@@ -160,6 +262,16 @@ export default {
   justify-content: center;
 }
 
+.container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.button-wrapper {
+  margin-left: auto; /* 将按钮移动到右侧 */
+}
+
+
 .modal-content {
   background: #fff;
   padding: 20px;
@@ -186,6 +298,50 @@ input {
   border-radius: 4px;
 }
 
+
+.card {
+  width: 50%;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.modal {
+  /* 样式设置 */
+}
+
+.modal-content {
+  /* 样式设置 */
+}
+
+.left-card {
+  background-color: #f1f1f1;
+}
+
+.right-card {
+  background-color: #e1e1e1;
+}
+
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-content {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+
 button {
   margin-top: 20px;
   padding: 10px 15px;