账号页面

src/views/controlPanel/account/security/index.vue

@@ -1,7 +1,13 @@
 <!-- src/components/AccountSecurity.vue -->
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
-import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import {
+  CheckCircleOutlined,
+  ExclamationCircleOutlined,
+  CloseOutlined,
+  SaveOutlined,
+} from '@ant-design/icons-vue';
+import { Modal, message } from 'ant-design-vue';
 
 // 定义安全项接口
 interface SecurityItem {
@@ -18,7 +24,7 @@ const securityItems = ref<SecurityItem[]>([
     description: '安全性高的密码可以使账号更安全。建议您定期更换密码，设置一个包含字母和数字且长度超过8位的密码',
     status: 'unset',
     actionText: '设置',
-    actionHandler: () => alert('跳转到设置密码页面'),
+    actionHandler: () => openSetPasswordModal(),
   },
   {
     title: '手机绑定',
@@ -50,7 +56,7 @@ const securityItems = ref<SecurityItem[]>([
   },
 ]);
 
-// 根据状态返回对应图标和颜色
+
 const getStatusIcon = (status: SecurityItem['status']) => {
   switch (status) {
     case 'bound':
@@ -76,10 +82,87 @@ const getStatusColor = (status: SecurityItem['status']) => {
 };
 
 const getActionColor = (status: SecurityItem['status']) => {
-  if (status === 'bound') {
+  return 'blue'; // 统一蓝色即可
-    return 'blue';
+};
+
+// 弹窗控制
+const setPasswordModalVisible = ref(false);
+
+// 表单数据
+const form = reactive({
+  phoneNumber: '+86 178****5075', // 示例手机号
+  smsCode: '',
+  newPassword: '',
+  confirmPassword: '',
+});
+
+// 验证码倒计时
+const countdown = ref(0);
+const isSending = ref(false);
+
+// 发送验证码
+const sendSmsCode = () => {
+  if (isSending.value) return;
+  isSending.value = true;
+  countdown.value = 60;
+  const timer = setInterval(() => {
+    countdown.value--;
+    if (countdown.value <= 0) {
+      clearInterval(timer);
+      isSending.value = false;
+      countdown.value = 0;
+    }
+  }, 1000);
+  message.success('验证码已发送');
+};
+
+// 重置表单
+const resetForm = () => {
+  form.smsCode = '';
+  form.newPassword = '';
+  form.confirmPassword = '';
+  countdown.value = 0;
+  isSending.value = false;
+};
+
+// 打开设置密码弹窗
+const openSetPasswordModal = () => {
+  resetForm();
+  setPasswordModalVisible.value = true;
+};
+
+// 关闭弹窗
+const closeSetPasswordModal = () => {
+  setPasswordModalVisible.value = false;
+  resetForm();
+};
+
+// 保存密码
+const savePassword = () => {
+  if (!form.smsCode) {
+    message.error('请输入验证码');
+    return;
   }
-  return 'blue'; // 默认蓝色
+  if (!form.newPassword) {
+    message.error('请输入新密码');
+    return;
+  }
+  if (!form.confirmPassword) {
+    message.error('请确认密码');
+    return;
+  }
+  if (form.newPassword !== form.confirmPassword) {
+    message.error('两次输入的密码不一致');
+    return;
+  }
+  if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,16}$/.test(form.newPassword)) {
+    message.error('密码必须为8~16位，且包含字母和数字');
+    return;
+  }
+
+  // 模拟提交成功
+  message.success('密码设置成功！');
+  closeSetPasswordModal();
 };
 </script>
 
@@ -110,6 +193,66 @@ const getActionColor = (status: SecurityItem['status']) => {
       </div>
       <p class="description">{{ item.description }}</p>
     </div>
+
+    <!-- 设置密码弹窗 -->
+    <a-modal
+      v-model:visible="setPasswordModalVisible"
+      title="设置密码"
+      width="500px"
+      :footer="null"
+      @cancel="closeSetPasswordModal"
+    >
+      <div style="padding: 24px 0;">
+        <div style="margin-bottom: 24px; font-size: 16px; color: #333;">
+          手机号：{{ form.phoneNumber }}
+        </div>
+
+        <div style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
+          <span style="color: red;">*</span>
+          <label style="font-size: 14px; color: #333;">手机验证码：</label>
+          <a-input
+            v-model:value="form.smsCode"
+            placeholder="请输入验证码"
+            style="flex: 1;"
+          />
+          <a-button
+            type="primary"
+            :disabled="isSending || countdown > 0"
+            @click="sendSmsCode"
+            style="width: 120px;"
+          >
+            {{ isSending || countdown > 0 ? `${countdown}s后重发` : '发送验证码' }}
+          </a-button>
+        </div>
+
+        <div style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
+          <span style="color: red;">*</span>
+          <label style="font-size: 14px; color: #333;">设置新密码：</label>
+          <a-input
+            v-model:value="form.newPassword"
+            placeholder="请输入8～16位包含数字和字母的密码"
+            type="password"
+            style="flex: 1;"
+          />
+        </div>
+
+        <div style="margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
+          <span style="color: red;">*</span>
+          <label style="font-size: 14px; color: #3 33;">确认新密码：</label>
+          <a-input
+            v-model:value="form.confirmPassword"
+            placeholder="请确认密码"
+            type="password"
+            style="flex: 1;"
+          />
+        </div>
+      </div>
+
+      <div style="text-align: right; padding: 16px 24px;">
+        <a-button @click="closeSetPasswordModal" style="margin-right: 8px;">取消</a-button>
+        <a-button type="primary" @click="savePassword">保存</a-button>
+      </div>
+    </a-modal>
   </div>
 </template>