leisure-core 1.0.2 → 1.0.3

package/le-login/src/ForgotPassword.vue

@@ -0,0 +1,613 @@
+<template>
+  <el-dialog
+    title="找回密码"
+    :visible.sync="dialogVisible"
+    width="480px"
+    :close-on-click-modal="false"
+    custom-class="forgot-dialog"
+    append-to-body
+    @closed="resetForm"
+  >
+    <!-- 自定义紧凑步骤条 -->
+    <div class="forgot-progress">
+      <div
+        v-for="(s, i) in steps"
+        :key="i"
+        class="progress-item"
+        :class="{
+          active: step >= i,
+          done: step > i,
+        }"
+      >
+        <div class="progress-circle">
+          <i v-if="step > i" class="el-icon-check"></i>
+          <span v-else>{{ i + 1 }}</span>
+        </div>
+        <span class="progress-label">{{ s }}</span>
+        <div class="progress-line" v-if="i < steps.length - 1"></div>
+      </div>
+    </div>
+
+    <el-form
+      ref="forgotForm"
+      :model="form"
+      :rules="rules"
+      label-width="0"
+      class="forgot-form"
+      v-if="step < 2"
+    >
+      <!-- 步骤1:验证身份 -->
+      <div v-if="step === 0">
+        <!-- 找回方式切换:手机/邮箱 -->
+        <div class="forgot-tabs" v-if="emailEnabled">
+          <span
+            class="forgot-tab"
+            :class="{ active: type === 'phone' }"
+            @click="switchType('phone')"
+            >手机找回</span
+          >
+          <span
+            class="forgot-tab"
+            :class="{ active: type === 'email' }"
+            @click="switchType('email')"
+            >邮箱找回</span
+          >
+        </div>
+
+        <el-form-item prop="account">
+          <el-input
+            v-model="form.account"
+            :placeholder="
+              type === 'phone' ? '请输入手机号' : '请输入邮箱'
+            "
+            :prefix-icon="
+              type === 'phone' ? 'el-icon-mobile-phone' : 'el-icon-message'
+            "
+            class="forgot-input"
+          />
+        </el-form-item>
+        <el-form-item prop="captcha">
+          <div class="forgot-captcha-wrapper">
+            <el-input
+              v-model="form.captcha"
+              placeholder="请输入6位验证码"
+              prefix-icon="el-icon-key"
+              maxlength="6"
+              class="forgot-captcha-input"
+            ></el-input>
+            <el-button
+              class="forgot-captcha-btn"
+              type="primary"
+              :disabled="isDis || isCounting"
+              :loading="sending"
+              @click="sendCaptcha"
+            >
+              {{ isCounting ? `${retime}秒` : "获取验证码" }}
+            </el-button>
+          </div>
+        </el-form-item>
+      </div>
+
+      <!-- 步骤2:设置新密码 -->
+      <div v-if="step === 1">
+        <el-form-item prop="newPwd">
+          <el-input
+            v-model="form.newPwd"
+            type="password"
+            placeholder="请输入新密码(6-20位)"
+            show-password
+            prefix-icon="el-icon-lock"
+            class="forgot-input"
+          />
+        </el-form-item>
+        <el-form-item prop="confirmPwd">
+          <el-input
+            v-model="form.confirmPwd"
+            type="password"
+            placeholder="请确认新密码"
+            show-password
+            prefix-icon="el-icon-lock"
+            class="forgot-input"
+            @keydown.enter.native="submit"
+          />
+        </el-form-item>
+      </div>
+    </el-form>
+
+    <!-- 步骤3:完成 -->
+    <div v-if="step === 2" class="forgot-success">
+      <i class="el-icon-success"></i>
+      <p>密码修改成功!</p>
+      <span>请使用新密码登录系统</span>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">
+        {{ step === 2 ? "关闭" : "取消" }}
+      </el-button>
+      <el-button
+        v-if="step === 0"
+        type="primary"
+        :loading="submitting"
+        @click="nextStep"
+        >下一步</el-button
+      >
+      <el-button
+        v-if="step === 1"
+        type="primary"
+        :loading="submitting"
+        @click="submit"
+        >确认修改</el-button
+      >
+      <el-button v-if="step === 2" type="primary" @click="finish"
+        >去登录</el-button
+      >
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  name: "ForgotPassword",
+  props: {
+    // 是否显示弹窗(v-model 绑定)
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    // 是否开启邮箱找回方式
+    emailEnabled: {
+      type: Boolean,
+      default: true,
+    },
+    // 默认找回方式
+    defaultType: {
+      type: String,
+      default: "phone",
+      validator: (v) => v === "phone" || v === "email",
+    },
+  },
+  data() {
+    return {
+      step: 0, // 0:验证身份 1:设置新密码 2:完成
+      steps: ["验证", "重置", "完成"], // 紧凑步骤标签
+      type: this.defaultType, // 找回方式:phone/email
+      submitting: false,
+      sending: false,
+      isCounting: false,
+      isDis: false,
+      retime: 60,
+      countdownTimer: null,
+      form: {
+        account: "",
+        captcha: "",
+        newPwd: "",
+        confirmPwd: "",
+      },
+      rules: {
+        account: [
+          { required: true, message: "请输入账号", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (!value) return callback();
+              if (this.type === "phone") {
+                if (!/^1[3-9]\d{9}$/.test(value)) {
+                  callback(new Error("请输入正确的手机号"));
+                } else {
+                  callback();
+                }
+              } else {
+                if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+                  callback(new Error("请输入正确的邮箱"));
+                } else {
+                  callback();
+                }
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+        captcha: [
+          { required: true, message: "请输入验证码", trigger: "blur" },
+          { len: 6, message: "验证码长度为6位", trigger: "blur" },
+          {
+            pattern: /^\d{6}$/,
+            message: "验证码必须是6位数字",
+            trigger: "blur",
+          },
+        ],
+        newPwd: [
+          { required: true, message: "请输入新密码", trigger: "blur" },
+          {
+            min: 6,
+            max: 20,
+            message: "长度在 6 到 20 个字符",
+            trigger: "blur",
+          },
+        ],
+        confirmPwd: [
+          { required: true, message: "请确认新密码", trigger: "blur" },
+          {
+            validator: (rule, value, callback) => {
+              if (value !== this.form.newPwd) {
+                callback(new Error("两次输入的密码不一致"));
+              } else {
+                callback();
+              }
+            },
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  computed: {
+    dialogVisible: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit("input", val);
+      },
+    },
+  },
+  watch: {
+    value(val) {
+      if (val) {
+        // 打开时重置到第一步
+        this.step = 0;
+        this.type = this.defaultType;
+      }
+    },
+  },
+  beforeDestroy() {
+    if (this.countdownTimer) {
+      clearInterval(this.countdownTimer);
+    }
+  },
+  methods: {
+    // 切换找回方式
+    switchType(t) {
+      if (this.type === t) return;
+      this.type = t;
+      this.form.account = "";
+      this.form.captcha = "";
+      if (this.$refs.forgotForm) {
+        this.$refs.forgotForm.clearValidate(["account", "captcha"]);
+      }
+    },
+
+    // 重置表单
+    resetForm() {
+      this.step = 0;
+      this.type = this.defaultType;
+      this.form = {
+        account: "",
+        captcha: "",
+        newPwd: "",
+        confirmPwd: "",
+      };
+      this.submitting = false;
+      this.sending = false;
+      if (this.$refs.forgotForm) {
+        this.$refs.forgotForm.resetFields();
+      }
+      this.$emit("closed");
+    },
+
+    // 发送验证码
+    sendCaptcha() {
+      if (!this.form.account) {
+        this.$message.error(
+          this.type === "phone" ? "请输入手机号" : "请输入邮箱"
+        );
+        return false;
+      }
+
+      // 先校验账号格式
+      const isPhone = this.type === "phone";
+      const valid = isPhone
+        ? /^1[3-9]\d{9}$/.test(this.form.account)
+        : /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.form.account);
+      if (!valid) {
+        this.$message.error(isPhone ? "请输入正确的手机号" : "请输入正确的邮箱");
+        return false;
+      }
+
+      this.sending = true;
+
+      // emit 给父组件,由父组件调用发送验证码接口
+      this.$emit("sendCaptcha", {
+        account: this.form.account,
+        type: this.type,
+        success: this.startCountdown,
+        fail: () => {
+          this.sending = false;
+        },
+      });
+    },
+
+    // 倒计时
+    startCountdown() {
+      this.sending = false;
+      this.isCounting = true;
+      this.isDis = true;
+      this.retime = 60;
+
+      this.countdownTimer = setInterval(() => {
+        this.retime--;
+        if (this.retime <= 0) {
+          clearInterval(this.countdownTimer);
+          this.isCounting = false;
+          this.isDis = false;
+          this.retime = 60;
+        }
+      }, 1000);
+    },
+
+    // 下一步:验证身份
+    nextStep() {
+      this.$refs.forgotForm.validateField(["account", "captcha"], (errors) => {
+        if (!errors) {
+          this.submitting = true;
+          // emit 给父组件验证验证码,成功后进入下一步
+          this.$emit("verifyCaptcha", {
+            account: this.form.account,
+            captcha: this.form.captcha,
+            type: this.type,
+            success: () => {
+              this.submitting = false;
+              this.step = 1;
+              this.$nextTick(() => {
+                if (this.$refs.forgotForm) {
+                  this.$refs.forgotForm.clearValidate();
+                }
+              });
+            },
+            fail: (msg) => {
+              this.submitting = false;
+              this.$message.error(msg || "验证失败");
+            },
+          });
+        }
+      });
+    },
+
+    // 确认修改密码
+    submit() {
+      this.$refs.forgotForm.validateField(["newPwd", "confirmPwd"], (errors) => {
+        if (!errors) {
+          this.submitting = true;
+          // emit 给父组件调用重置密码接口
+          this.$emit("resetPassword", {
+            account: this.form.account,
+            captcha: this.form.captcha,
+            newPwd: this.form.newPwd,
+            type: this.type,
+            success: () => {
+              this.submitting = false;
+              this.step = 2;
+            },
+            fail: (msg) => {
+              this.submitting = false;
+              this.$message.error(msg || "修改失败");
+            },
+          });
+        }
+      });
+    },
+
+    // 完成去登录
+    finish() {
+      this.dialogVisible = false;
+      // 把账号回填给父组件,方便用户直接登录
+      this.$emit("finish", {
+        account: this.form.account,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.forgot-dialog {
+  border-radius: 16px;
+  overflow: hidden;
+
+  .el-dialog__header {
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--le-color-border-light);
+
+    .el-dialog__title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--le-color-text-strong);
+    }
+  }
+
+  .el-dialog__body {
+    padding: 24px;
+  }
+
+  .el-dialog__footer {
+    padding: 16px 24px 20px;
+    border-top: 1px solid var(--le-color-border-light);
+  }
+
+  /* 自定义紧凑步骤条 */
+  .forgot-progress {
+    display: flex;
+    align-items: center;
+    margin-bottom: 28px;
+    padding: 0 8px;
+
+    .progress-item {
+      display: flex;
+      align-items: center;
+      flex: 1;
+      position: relative;
+
+      &:last-child {
+        flex: 0;
+      }
+
+      .progress-circle {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 13px;
+        font-weight: 600;
+        flex-shrink: 0;
+        background: var(--le-color-fill);
+        color: var(--le-color-text-muted);
+        border: 2px solid var(--le-color-border);
+        transition: all 0.25s ease;
+      }
+
+      .progress-label {
+        margin-left: 8px;
+        font-size: 13px;
+        color: var(--le-color-text-muted);
+        white-space: nowrap;
+        transition: color 0.25s ease;
+      }
+
+      .progress-line {
+        flex: 1;
+        height: 2px;
+        background: var(--le-color-border);
+        margin: 0 10px;
+        min-width: 20px;
+        transition: background 0.25s ease;
+      }
+
+      /* 当前/已完成状态 */
+      &.active {
+        .progress-circle {
+          background: var(--le-color-primary);
+          border-color: var(--le-color-primary);
+          color: #fff;
+          box-shadow: 0 4px 12px var(--le-color-primary-shadow-soft);
+        }
+        .progress-label {
+          color: var(--le-color-text-strong);
+          font-weight: 600;
+        }
+      }
+
+      &.done {
+        .progress-circle {
+          background: var(--le-color-success);
+          border-color: var(--le-color-success);
+          color: #fff;
+        }
+        .progress-line {
+          background: var(--le-color-success);
+        }
+        .progress-label {
+          color: var(--le-color-text-regular);
+        }
+      }
+    }
+  }
+
+  /* 找回方式切换 tabs */
+  .forgot-tabs {
+    display: flex;
+    margin-bottom: 18px;
+    background: var(--le-color-fill-light);
+    border-radius: 8px;
+    padding: 4px;
+
+    .forgot-tab {
+      flex: 1;
+      text-align: center;
+      padding: 8px 0;
+      font-size: 13px;
+      color: var(--le-color-text-regular);
+      cursor: pointer;
+      border-radius: 6px;
+      transition: all 0.2s ease;
+      user-select: none;
+
+      &:hover {
+        color: var(--le-color-text-strong);
+      }
+
+      &.active {
+        background: var(--le-color-card-bg);
+        color: var(--le-color-primary);
+        font-weight: 600;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
+      }
+    }
+  }
+
+  .forgot-form {
+    .el-form-item {
+      margin-bottom: 20px;
+    }
+
+    .forgot-captcha-wrapper {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+    }
+
+    .forgot-captcha-input {
+      flex: 1;
+    }
+
+    .forgot-captcha-btn {
+      min-width: 110px;
+      height: 44px;
+      border-radius: 8px;
+      flex-shrink: 0;
+    }
+  }
+
+  .forgot-input .el-input__inner,
+  .forgot-captcha-input .el-input__inner {
+    height: 44px;
+    border-radius: 8px;
+    font-size: 14px;
+  }
+
+  .forgot-success {
+    text-align: center;
+    padding: 20px 0 10px;
+
+    i {
+      font-size: 64px;
+      color: var(--le-color-success);
+      margin-bottom: 16px;
+    }
+
+    p {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--le-color-text-strong);
+      margin: 0 0 8px 0;
+    }
+
+    span {
+      font-size: 13px;
+      color: var(--le-color-text-regular);
+    }
+  }
+
+  .dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+
+    .el-button {
+      min-width: 90px;
+      border-radius: 8px;
+    }
+  }
+}
+</style>