leisure-core 0.7.7 → 0.7.8

package/le-login/src/ForgotPassword.vue

@@ -1,613 +0,0 @@
-<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>