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="#fff" :icon-color="isDark ? '#fff' : '#97A1C0' " />
        </view>
      </view>


      <view class="reset-container">
        <view class="company u-flex-y u-flex-y-center">
          <image v-if="!isDark" src="/static/images/vu/logo-full.svg" class="company-icon" mode="widthFix"></image>
          <image v-else src="/static/images/vu/logo-full-white.svg" class="company-icon" mode="widthFix"></image>
        </view>
        <uni-row class="content">
          <uni-col :span="20" :offset="2" :lg="{ span: 10, offset: 7 }">
            <view class="reset-title">{{ t('forget.title') }}</view>
            <view class="reset-form">
              <view class="form-label">{{ t('forget.form') }}</view>
              <uni-easyinput v-model="email" :placeholder="t('newSignup.item7')" class="custom-input">
              </uni-easyinput>

              <view class="reset-button">
                <button class="btn btn-danger" @click="handleReset">{{ t('forget.forget') }}</button>
              </view>
              <view class="login-link">
                <button @click="handleLogin" class="link-text">{{ t('forget.cancel') }}</button>
              </view>
            </view>
          </uni-col>
        </uni-row>
      </view>
<!--      <view class="chat-icon" :class="{ 'chat-icon-expanded': isChatIconExpanded, 'chat-icon-hidden': type == 'chat' }"-->
<!--        @click="handleChatIconClick">-->
<!--        <cwg-icon name="chat" color="#fff" />-->
<!--      </view>-->
    </view>
  </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, computed } 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'
import { useWindowWidth } from '@/composables/useWindowWidth'
import LiveChatService from '@/utils/liveChat.js'
import useGlobalStore from '@/stores/use-global-store'
const windowWidth = useWindowWidth(300)
const isMobile = computed(() => windowWidth.value <= 991)
const { t } = useI18n()
const router = useRouter()
const loading = ref(false)
const email = ref('')

const globalStore = useGlobalStore()
const isDark = computed(() => globalStore.theme === 'dark')

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
  }
}
const isChatIconExpanded = ref(false)
// 处理聊天图标点击
const handleChatIconClick = () => {
  // 如果还没显示 → 先滑出来
  if (!isChatIconExpanded.value) {
    isChatIconExpanded.value = true
    return
  }
  if (isMobile.value) {
    router.push('/pages/common/chat')
  } else {
    if (LiveChatService) {
      LiveChatService.showChat();
    }
  }
  setTimeout(() => {
    isChatIconExpanded.value = false
  }, 300)
}
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";

.company {
  margin-bottom: px2rpx(24);
}

.chat-icon {
  width: px2rpx(50);
  height: px2rpx(50);
  border-radius: 50%;
  background-color: #cf1322;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  bottom: px2rpx(25);
  right: px2rpx(0);
  z-index: 999;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 px2rpx(8) px2rpx(20) rgba(0, 0, 0, 0.15);
  will-change: transform;
}

.chat-icon:hover {
  transform: scale(1.1);
}

.chat-icon-expanded {
  bottom: px2rpx(20);
  right: px2rpx(20);
  transform: scale(1.1);
  box-shadow: 0 px2rpx(12) px2rpx(30) rgba(0, 0, 0, 0.2);
}

.chat-icon-hidden {
  display: none;
}

: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: var(--bs-emphasis-color);
  margin-bottom: px2rpx(40);
  width: 100%;
  text-align: center;
}

.reset-form {
  width: 100%;
}

.form-label {
  font-size: px2rpx(16);
  color: var(--bs-heading-color);
  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(8);
    background-color: var(--bs-btn-bg);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: px2rpx(16);
    font-weight: 500;
    margin: 0;

    &::after {
      border: none;
    }
  }

}

.login-link {
  text-align: center;

  .link-text {
    width: 100%;
    height: px2rpx(44);
    line-height: px2rpx(44);
    border-radius: px2rpx(8);
    background-color: transparent;
    border: 1px solid #e4e4e4;
    color: var(--bs-heading-color);
    font-size: px2rpx(16);
    font-weight: 500;
    margin: 0;

    &::after {
      border: none;
    }
  }
}
</style>