shenze-sysMan/src/views/forgetPassword.vue

<template>
  <div class="forget-password-container">
    <!-- 系统头部 -->
    <s-header :name="$t('forgetPassword.header')" :noback="false" />

    <!-- 主要内容区域 -->
    <div class="forget-content">

      <!-- 找回密码表单 -->
      <van-form @submit="forgetPasswordSubmit" class="password-form">

        <!-- 选择找回方式 -->
        <div class="recovery-methods">
          <p class="method-title">
            {{ $t("forgetPassword.selectForgetPassword") }}
          </p>
          <van-radio-group
            v-model="ifForeign"
            direction="vertical"
            class="radio-group"
          >
            <van-radio
              name="0"
              shape="square"
              icon-size="20"
              checked-color="@theme-color"
            >
              <div class="radio-option">
                <van-icon name="phone" size="20" class="radio-icon" />
                <span>{{ $t("forgetPassword.phone") }}</span>
              </div>
            </van-radio>

            <van-radio
              name="1"
              shape="square"
              icon-size="20"
              checked-color="@theme-color"
            >
              <div class="radio-option">
                <van-icon name="envelop-o" size="20" class="radio-icon" />
                <span>{{ $t("forgetPassword.email") }}</span>
              </div>
            </van-radio>
          </van-radio-group>
        </div>

        <!-- 联系方式输入 -->
        <div class="contact-input" v-if="ifForeign === '0'">
          <p class="method-title">{{ $t("forgetPassword.phoneWordSpan") }}</p>
          <van-field
            v-model="phone"
            name="phone"
            type="tel"
            :placeholder="$t('forgetPassword.phonePlaceholder')"
            :rules="[
              { required: true, message: $t('forgetPassword.phoneRequired') },
            ]"
            class="form-field"
          >
            <template #left-icon>
              <van-icon name="phone-o" size="20" class="field-icon" />
            </template>
          </van-field>
        </div>

        <div class="contact-input" v-else>
          <p class="method-title">
            {{ $t("forgetPassword.emailRequired") }}
          </p>
          <van-field
            v-model="email"
            name="email"
            :placeholder="$t('forgetPassword.emailPlaceholder')"
            :rules="[
              { required: true, message: $t('forgetPassword.emailRequired') },
            ]"
            class="form-field"
          >
            <template #left-icon>
              <van-icon name="envelop-o" size="20" class="field-icon" />
            </template>
          </van-field>
        </div>

        <!-- 验证码输入 -->
        <div class="verification-code">
          <van-field
            v-model="code"
            name="code"
            :placeholder="$t('forgetPassword.codePlaceholder')"
            :rules="[
              { required: true, message: $t('forgetPassword.codeRequired') },
            ]"
            class="form-field"
          >
            <template #left-icon>
              <van-icon name="comment-o" size="20" class="field-icon" />
            </template>

            <template #button>
              <van-button
                size="small"
                class="code-button"
                @click="seedVerCode()"
                :disabled="time !== 0"
              >
                {{
                  time === 0
                    ? $t("forgetPassword.seedVerCode")
                    : `${time} s`
                }}
              </van-button>
            </template>
          </van-field>
        </div>

        <!-- 提交按钮 -->
        <van-button round block native-type="submit" class="submit-button">
          {{ $t("forgetPassword.registerButton") }}
        </van-button>
      </van-form>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from "vue";
import { showToast, showFailToast } from "vant";
import { setLocal, getLocal, styleUrl } from "@/common/js/utils";
import sHeader from "@/components/SimpleHeader";
import { useRouter } from "vue-router";
import { sentForgetCode, checkForgetCode } from "@/service/forgetPassword";

export default {
  setup() {
    const ifForeign = ref("0"); // 手机号&邮箱状态
    const email = ref(""); // 邮箱
    const phone = ref(""); // 手机号
    const code = ref(""); // 验证码
    const verCodeTime = reactive({
      time: 0,
    }); // 验证码间隔时间及状态
    const router = useRouter();
    // 发送验证码
    const seedVerCode = async () => {
      const { data } = await sentForgetCode({
        phoneOrEmail: ifForeign.value === "0" ? phone.value : email.value,
      });
      if (data.code === "00000") {
        showToast("验证码发送成功");
        verCodeTime.time = 60;
        verCodeTimeInterval();
      } else {
        showFailToast(data.message);
      }
    };
    // 验证码发送成功开始3分钟倒计时
    const verCodeTimeInterval = () => {
      verCodeTime.time--;
      setLocal("forgetVerCodeTime", verCodeTime.time);
      if (verCodeTime.time !== 0) {
        setTimeout(() => {
          verCodeTimeInterval();
        }, 1000);
      }
    };
    // 验证-表单
    const forgetPasswordSubmit = async () => {
      const { data } = await checkForgetCode({
        phoneOrEmail: ifForeign.value === "0" ? phone.value : email.value,
        code: code.value,
      });
      if (data.code === "00000") {
        showToast("校验成功");
        router.push({
          path: "/changepassword",
          query: { name: data.data },
        });
      } else {
        showFailToast(data.message);
      }
    };

    // 初始化页面获取验证码倒计时
    onMounted(async () => {
      styleUrl("forgetPassword");
      verCodeTime.time = getLocal("forgetVerCodeTime");
      if (verCodeTime.time && verCodeTime.time !== "") {
        verCodeTime.time = parseInt(verCodeTime.time);
        if (verCodeTime.time > 0) {
          verCodeTimeInterval();
        }
      } else {
        verCodeTime.time = 0;
      }
    });

    return {
      ...toRefs(verCodeTime),
      ifForeign,
      phone,
      email,
      code,
      seedVerCode,
      forgetPasswordSubmit,
    };
  },
  components: { sHeader },
};
</script>

<style lang="less" scoped>
@theme-color: #2c87c8;

.forget-password-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f8ff;
  overflow-y: auto;
}

.forget-content {
  background: #f5f6fa;
  height: calc(100% - 45px);
  overflow: auto;
  overflow-x: hidden;
}

.password-form {
  background-color: #fff;
  border-radius: 16px;
  padding: 25px;
  margin: 15px;
  box-shadow: 0 8px 20px rgba(77, 106, 221, 0.12);
}

.form-field {
  display: flex;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
  border-radius: 12px;
  background-color: #f9faff;
  padding: 15px 16px;

  :deep(.van-field__control) {
    padding-left: 8px;
    font-size: 15px;
  }

  :deep(.van-field__error-message) {
    margin-left: 10px;
  }

  .field-icon {
    color: @theme-color;
  }
}

.recovery-methods {
  margin-bottom: 15px;

  .method-title {
    font-size: 15px;
    color: #1c2b56;
    font-weight: 500;
    margin-bottom: 12px;
  }
}

.radio-group {
  .van-radio {
    margin-bottom: 12px;

    :deep(.van-radio__label) {
      flex: 1;
      margin-left: 12px;
    }

    :deep(.van-radio__icon--checked .van-icon) {
      background-color: @theme-color;
      border-color: @theme-color;
    }
  }

  .radio-option {
    display: flex;
    align-items: center;
    padding: 12px 0;
    font-size: 16px;

    .radio-icon {
      color: @theme-color;
      margin-right: 10px;
    }
  }
}

.contact-input,
.verification-code {
  margin-bottom: 5px;

  .method-title {
    font-size: 15px;
    color: #1c2b56;
    font-weight: 500;
    margin: 15px 0 12px;
  }
}

.verification-code {
  margin-top: 15px;
}

.code-button {
  background-color: @theme-color;
  color: white;
  border-radius: 20px;
  font-size: 14px;
  padding: 0 15px;
  height: 34px;

  &:disabled {
    background-color: #ccc;
    color: #fff;
  }
}

.submit-button {
  background: linear-gradient(to right, @theme-color, #6878eb);
  color: white;
  border: none;
  height: 50px;
  font-size: 17px;
  font-weight: 500;
  margin-top: 25px;
  box-shadow: 0 4px 15px rgba(77, 106, 221, 0.35);

  &:active {
    opacity: 0.9;
  }
}

.password-footer {
  text-align: center;
  padding: 25px 0;
  font-size: 15px;
  color: #666;

  .login-link {
    color: @theme-color;
    font-weight: 500;
    margin-left: 5px;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }
}

@media (max-width: 480px) {
  .password-form {
    padding: 20px 18px;
  }

  .submit-button {
    height: 48px;
    font-size: 16px;
  }
}
</style>