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

<template>
  <cwg-page-wrapper :isLoginPage="true">
    <view class="main-content">

      <view class="global-header-bar pc-header">
        <view class="header-inner">
          <view class="logo-placeholder"></view> <!-- 左侧可预留放logo或留空 -->
          <!-- 这里由于没有深色背景，传递深色文字颜色 -->
          <LoginHeaderGroup text-color="#141d22" icon-color="#141d22" />
        </view>
      </view>


      <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">
                <button class="btn" block :loading="loading" @click="handleReset">{{ t('forget.forget') }}</button>
              </view>
              <view class="login-link">
                <text @click="handleLogin" class="link-text">{{ t('signin.login') }}</text>
              </view>
            </view>
          </uni-col>
        </uni-row>
      </view>
    </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'
  import LoginHeaderGroup from './components/LoginHeaderGroup.vue'

  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;
  }

  .main-content {
    display: flex;
    flex-direction: column;
  }

  .global-header-bar {
    width: 100%;
    height: px2rpx(60);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 100;

    &.pc-header {
      background-color: transparent;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .header-inner {
      width: 100%;
      padding: 0 5%;
      display: flex;
      justify-content: space-between; /* 两端对齐，可放logo和组件 */
      align-items: center;
    }
  }

  .mobile-header-bar {
    position: absolute;
    top: px2rpx(20);
    right: px2rpx(20);
    z-index: 10;
  }

  .reset-container {
    margin-top: px2rpx(20);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .content {
    width: 100%;
    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: var(--color-error); // 主题黄
      border: none;
      color: #fff;
      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>