geekai/web/src/components/ResetPass.vue

<template>
  <div class="reset-pass">
    <el-dialog v-model="showDialog" :close-on-click-modal="true" width="500px" :before-close="close" :title="title" class="reset-pass-dialog">
      <div class="form">
        <el-form :model="form" label-width="80px" label-position="left">
          <el-tabs v-model="form.type" class="demo-tabs">
            <el-tab-pane label="手机号验证" name="mobile">
              <el-form-item label="手机号">
                <el-input v-model="form.mobile" placeholder="请输入手机号" />
              </el-form-item>
              <el-form-item label="验证码">
                <div class="flex">
                  <el-input v-model="form.code" maxlength="6" class="mr-2 w-1/2" />
                  <send-msg size="" :receiver="form.mobile" type="mobile" />
                </div>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="邮箱验证" name="email">
              <el-form-item label="邮箱地址">
                <el-input v-model="form.email" placeholder="请输入邮箱地址" />
              </el-form-item>
              <el-form-item label="验证码">
                <div class="flex">
                  <el-input v-model="form.code" maxlength="6" class="mr-2 w-1/2" />
                  <send-msg size="" :receiver="form.email" type="email" />
                </div>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>

          <el-form-item label="新密码">
            <el-input v-model="form.password" type="password" />
          </el-form-item>
          <el-form-item label="重复密码">
            <el-input v-model="form.repass" type="password" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="save" round> 重置密码 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";
import SendMsg from "@/components/SendMsg.vue";
import { ElMessage } from "element-plus";
import { httpPost } from "@/utils/http";
import { validateEmail, validateMobile } from "@/utils/validate";

const props = defineProps({
  show: Boolean,
  mobile: String,
});

const showDialog = computed(() => {
  return props.show;
});

const title = ref("重置密码");
const form = ref({
  mobile: "",
  email: "",
  type: "mobile",
  code: "",
  password: "",
  repass: "",
});

const emits = defineEmits(["hide"]);

const save = () => {
  if (form.value.code === "") {
    return ElMessage.error("请输入验证码");
  }
  if (form.value.password.length < 8) {
    return ElMessage.error("密码长度必须大于8位");
  }
  if (form.value.repass !== form.value.password) {
    return ElMessage.error("两次输入密码不一致");
  }

  httpPost("/api/user/resetPass", form.value)
    .then(() => {
      ElMessage.success({
        message: "重置密码成功",
        duration: 1000,
        onClose: () => emits("hide", false),
      });
    })
    .catch((e) => {
      ElMessage.error("重置密码失败：" + e.message);
    });
};

const close = function () {
  emits("hide", false);
};
</script>

<style lang="stylus">
.reset-pass {
  .form {
    padding 0 20px
  }

  .code-row {
    width 100%
    .send-button {
      padding-left 10px
    }
  }

  .reset-pass-dialog {
    .el-dialog__footer {
      text-align center
      padding-top 0
    }
    .el-dialog__body {
      padding 0
    }
  }
}
</style>