gypsy-crm-frontend-vu/pages/login/reset.vue

<template>
  <cwg-page-wrapper :isLoginPage="true">
    <view class="reset-container">
      <uni-row class="content">
        <uni-col :span="20" :offset="2" :sm="{ span: 14, offset: 5 }">
          <view class="reset-title">{{ t('pages.login.resetTitle') }}</view>
          <view class="reset-form">
            <view class="form-label">{{ t('newSignup.item7') }}</view>
            <uni-easyinput
              v-model="email"
              :placeholder="t('forget.form')"
              class="custom-input"
            >
            </uni-easyinput>

            <view class="reset-button">
              <u-button block :loading="loading" @click="handleReset">{{ t('forget.forget') }}</u-button>
            </view>
            <view class="login-link">
              <text @click="handleLogin" class="link-text">{{ t('signin.login') }}</text>
            </view>
          </view>
        </uni-col>
      </uni-row>
    </view>

  </cwg-page-wrapper>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import { useI18n } from 'vue-i18n'
  import useRouter from '@/hooks/useRouter'
  import { userApi } from '@/api/user'
  import config from '@/config'

  const { t } = useI18n()
  const router = useRouter()
  const loading = ref(false)
  const email = ref('')

  async function handleReset() {
    if (!email.value) {
      uni.showToast({ title: t('vaildate.email.empty'), icon: 'none' })
      return
    }
    if (!config.Pattern.Email.test(email.value)) {
      uni.showToast({ title: t('vaildate.email.format'), icon: 'none' })
      return
    }

    loading.value = true
    try {
      const res = await userApi.forgetPwd({ email: email.value })
      uni.showToast({ title: res.msg , icon: 'success' })
      setTimeout(() => { router.push('/pages/login/index') }, 1000)
    } catch (error: any) {
      uni.showToast({ title: error.message, icon: 'none' })
    } finally {
      loading.value = false
    }
  }

  function handleChange(value: any) {
    if (value.key == 'email') {
      email.value = value.value
    }
  }

  function handleLogin() {
    router.push('/pages/login/index')
  }
</script>

<style scoped lang="scss">
  @import "@/uni.scss";

  :deep(uni-content) {
    padding-left: 0 !important;
  }
  .reset-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .content {
    width: px2rpx(650);
    margin: 0 auto;
  }

  .reset-title {
    font-size: px2rpx(28);
    font-weight: bold;
    color: #141d22;
    margin-bottom: px2rpx(40);
  }

  .reset-form {
    width: 100%;
  }

  .form-label {
    font-size: px2rpx(14);
    color: #333;
    margin-bottom: px2rpx(8);
  }

  .custom-input {
    margin-bottom: px2rpx(40);

    :deep(.uni-easyinput__content) {
      height: px2rpx(40);
      border: 1px solid #dcdfe6;
      border-radius: px2rpx(4);
    }
  }

  .reset-button {
    margin-bottom: px2rpx(20);

    :deep(button) {
      width: 100%;
      height: px2rpx(44);
      line-height: px2rpx(44);
      border-radius: px2rpx(4);
      background-color: #fddb46; // 主题黄
      border: none;
      color: #333;
      font-size: px2rpx(16);
      font-weight: 500;
      margin: 0;

      &::after {
        border: none;
      }
    }

    :deep(u-button--loading) {
      opacity: 0.8;
    }
  }

  .login-link {
    text-align: center;

    .link-text {
      font-size: px2rpx(14);
      color: #005bbb;
      cursor: pointer;
      text-decoration: none;
    }
  }
</style>