123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374 |
- <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>
|