cloud-web/src/views/management/secure/index.vue

<template>
  <div>
    <h1 style="text-align: center; margin-bottom: 30px;">安全设置</h1>
    <el-divider></el-divider>
    <label>登录密码</label>
    <label>安全性高的密码可以使帐号更安全</label>
    <button @click="openModal">修改密码</button>

    <!-- 弹出框 -->
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <h2>身份验证</h2>
        <el-divider></el-divider>

        <!-- 手机号和验证码 -->
        <div v-if="!verificationSent">
          <label for="phonenumber">身份验证方式:</label>
          <div><h3>通过手机({{ user.phonenumber }})获取验证</h3></div>
          <button @click="sendCode">发送验证码</button>
        </div>

        <div v-if="verificationSent && !codeVerified">
          <label for="code">验证码:</label>
          <input v-model="code" id="code" type="text" placeholder="请输入验证码" />
          <button @click="verifyCode">验证验证码</button>
        </div>

        <div v-if="codeVerified">
          <el-form ref="form" :model="user" :rules="rules" label-width="80px">
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input v-model="user.oldPassword" placeholder="请输入旧密码" show-password type="password"/>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="user.newPassword" placeholder="请输入新密码" show-password type="password"/>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="user.confirmPassword" placeholder="请确认新密码" show-password type="password"/>
            </el-form-item>
          </el-form>
          <button @click="submit" :disabled="!user.newPassword">提交修改</button>
        </div>
        <button @click="closeModal" class="close-button">关闭</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import {getUserProfile,sendCode,checkCode} from "@/api/system/user";
import {updateUserPwd} from "@/api/system/user";

export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      // 表单校验
      rules: {
        oldPassword: [
          {required: true, message: "旧密码不能为空", trigger: "blur"}
        ],
        newPassword: [
          {required: true, message: "新密码不能为空", trigger: "blur"},
          {min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur"}
        ],
        confirmPassword: [
          {required: true, message: "确认密码不能为空", trigger: "blur"},
          {required: true, validator: equalToPassword, trigger: "blur"}
        ]
      },
      user: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
      showModal: false,
      phonenumber: '',
      code: '',
      oldPassword: '',
      newPassword: '',
      verificationSent: false,
      codeVerified: false,
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      getUserProfile().then(response => {
        this.user = response.data.sysUser;
      });
    },
    openModal() {
      this.showModal = true;
    },
    closeModal() {
      this.showModal = false;
      this.resetForm();
    },
    async sendCode() {
      try {
        sendCode(this.user.phonenumber)
        this.verificationSent = true;
        alert('验证码已发送');
      } catch (error) {
        console.error('发送验证码失败', error);
        alert('发送验证码失败');
      }
    },
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
            this.$modal.msgSuccess("修改成功");
          });
        }
      });
    },
    async verifyCode() {
      checkCode(this.user.phonenumber, this.code).then(response => {
        if (response.code === 200) {
          this.codeVerified = true;
          alert('验证码验证成功');
        } else {
          alert('验证码验证失败');
        }
      })
    }
  },

  resetForm() {
    this.phonenumber = '';
    this.code = '';
    this.oldPassword = '';
    this.newPassword = '';
    this.verificationSent = false;
    this.codeVerified = false;
  }
};
</script>

<style>
/* 简单样式，仅供参考 */
.modal {
  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: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 400px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

h2 {
  margin-top: 0;
}

label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

button {
  margin-top: 20px;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

button:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

.close-button {
  background-color: #dc3545;
}

.close-button:hover {
  background-color: #c82333;
}
</style>