新增手机号校验功能和图片展示区域

在'index.vue'文件中，添加了手机号格式的校验功能，确保输入的新手机号有效。同时，为输入框添加了错误提示，以实时反馈给用户。此外，页面上增加了一个图片展示区域，用于展示指定图片。

src/views/management/secure/index.vue

@@ -47,7 +47,8 @@
           <div v-if="isNewPhoneModalVisible" class="modal-overlay">
             <div class="modal-content">
               <h3>输入新手机号</h3>
-              <input v-model="newPhone" placeholder="新手机号" />
+              <input v-model="newPhone" placeholder="新手机号" @input="validatePhone" />
+              <p v-if="phoneError" style="color: red" class="error">{{ phoneError }}</p>
               <button @click="updatePhoneNumber">提交修改</button>
               <button @click="closeNewPhoneModal">取消</button>
             </div>
@@ -56,6 +57,12 @@
       </div>
     </div>
 
+    <div>
+      <el-card>
+        <img src="/123456789.jpg" style="width: 40%; height: auto;" alt="Big Image">
+      </el-card>
+    </div>
+
     <!-- 弹出框 -->
     <div v-if="showModal" class="modal">
       <div class="modal-content">
@@ -113,6 +120,7 @@ export default {
       isVisible: false,
       currentPhone: '',
       newPhone: '',
+      phoneError: '',
       verificationCode: '',
       isCurrentPhoneModalVisible: false,
       isVerificationModalVisible: false,
@@ -150,6 +158,16 @@ export default {
     this.getUser();
   },
   methods: {
+    validatePhone() {
+      const phonePattern = /^[0-9]{11}$/; // 只允许11位数字
+      if (!this.newPhone) {
+        this.phoneError = '手机号不能为空';
+      } else if (!phonePattern.test(this.newPhone)) {
+        this.phoneError = '请输入有效的11位手机号';
+      } else {
+        this.phoneError = '';
+      }
+    },
     updatePhoneNumber() {
       updatePhone(this.newPhone).then(response => {
         this.closeNewPhoneModal();