北斗应用技术培训报名系统

src/components/tools/changePassword.vue

@@ -0,0 +1,173 @@
+<template>
+  <el-dialog v-model="dialogVisible" title="密码管理" width="600" center align-center>
+    <el-form
+      ref="ruleFormRef"
+      style="max-width: 600px"
+      :model="ruleForm"
+      :rules="rules"
+      label-width="auto"
+      size="default"
+      status-icon
+    >
+      <el-form-item label="原密码" prop="oldPassword">
+        <el-input
+          clearable
+          placeholder="请输入原密码"
+          type="password"
+          show-password
+          maxlength="16"
+          autocomplete="off"
+          v-model="ruleForm.oldPassword"
+          @input="filter(ruleForm.oldPassword, 'oldPassword')"
+          oncut="return false"
+          onpaste="return false"
+          oncopy="return false"
+        />
+      </el-form-item>
+      <el-form-item label="新密码" prop="newPassword">
+        <el-text class="mx-1" size="small" type="danger">
+          密码必须包含数字、大小写字母以及特殊字符（!@#$%^&*），且长度在8-16位之间
+        </el-text>
+        <el-input
+          clearable
+          placeholder="请输入新密码"
+          type="password"
+          show-password
+          maxlength="16"
+          autocomplete="off"
+          v-model="ruleForm.newPassword"
+          @input="filter(ruleForm.newPassword, 'newPassword')"
+          oncut="return false"
+          onpaste="return false"
+          oncopy="return false"
+        />
+      </el-form-item>
+      <el-form-item label="确认新密码" prop="checkPass">
+        <el-input
+          clearable
+          placeholder="请再次输入新密码"
+          type="checkPass"
+          show-password
+          maxlength="16"
+          autocomplete="off"
+          v-model="ruleForm.checkPass"
+          @input="filter(ruleForm.checkPass, 'checkPass')"
+          oncut="return false"
+          onpaste="return false"
+          oncopy="return false"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
+        <el-button type="primary" @click="changePassword(ruleFormRef)">
+          提交修改
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+
+import { encrypt } from "../../utils/aes";
+
+import $http from "../../api/index";
+import $url from "../../api/url";
+
+const dialogVisible = ref(false);
+
+const ruleFormRef = ref();
+const ruleForm = reactive({
+  oldPassword: "",
+  newPassword: "",
+  checkPass: "",
+});
+
+const filter = (value, label) => {
+  if (/[=\s"'+-]/.test(value)) {
+    if (ruleForm[label]) {
+      ruleForm[label] = value.replace(/[=\s"'+-]/g, "");
+    }
+  }
+};
+
+const passwordRegex = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,16}$/;
+
+const validatePass = (rule, value, callback) => {
+  if (value === "") {
+    callback(new Error("请输入密码"));
+  } else if (!passwordRegex.test(value)) {
+    callback(
+      new Error(
+        "密码必须包含数字、大小写字母以及特殊字符（!@#$%^&*），且长度在8-16位之间"
+      )
+    );
+  } else {
+    if (ruleForm.checkPass !== "") {
+      if (!ruleFormRef.value) return;
+      ruleFormRef.value.validateField("checkPass");
+    }
+    callback();
+  }
+};
+
+const validateCheck = (rule, value, callback) => {
+  if (value === "") {
+    callback(new Error("请再次输入密码"));
+  } else if (value !== ruleForm.newPassword) {
+    callback(new Error("两次输入的密码不一致"));
+  } else {
+    callback();
+  }
+};
+
+const rules = reactive({
+  oldPassword: [{ required: true, message: "请输入原密码", trigger: "blur" }],
+  newPassword: [{ required: true, validator: validatePass, trigger: "blur" }],
+  checkPass: [{ required: true, validator: validateCheck, trigger: "blur" }],
+});
+
+const resetForm = (formEl) => {
+  dialogVisible.value = false;
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+const changePassword = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid) => {
+    if (valid) {
+      dialogVisible.value = false;
+      let encryptForm = {
+        oldPassword: encrypt(ruleForm.oldPassword),
+        newPassword: encrypt(ruleForm.newPassword),
+      };
+      formEl.resetFields();
+      const data = {
+        passwordForm: encryptForm,
+        uid: localStorage.data
+      };
+      $http
+        .post($url.changePassword, data)
+        .then((res) => {
+          if (res.data.code === 200) {
+            localStorage.clear();
+            window.location.reload();
+          } else {
+            ElMessage.error("密码修改失败！");
+          }
+        });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  });
+};
+
+defineExpose({ dialogVisible });
+</script>
+
+<style scoped></style>