fix: bug修复阶段v1.0

api/model/user.ts

@@ -8,6 +8,7 @@ enum Api {
   ValidateEmail = '/client/user/forgetPassword',
   ResetOrChangePassword = '/client/user/changePassword',
   ValidateEmailIsExist = '/client-s003/s003Customer/lastLoginType',
+  validateEmailIsWork = '/client-s003/s003Customer/getStateByEmail',
   SendEmailCode = '/client-s003/captcha/sms/send',
   SubmitInfo = '/client-s003/s003ProductCatalogue/download',
   UserInfo = '/client-s003/s003Customer/userinfo',
@@ -27,13 +28,19 @@ export async function submitInfoApi(params: any) {
 }
 
 /**
- * 验证邮箱是否存在
+ * 验证邮箱是否失效
+ */
+export async function validateEmailIsWorkApi(params: any) {
+  return await useMyRequest().get(Api.validateEmailIsWork, params)
+}
+/**
+ * 验证邮箱
  */
 export async function validateEmailIsExistApi(params: any) {
   return await useMyRequest().get(Api.ValidateEmailIsExist, params)
 }
 /**
- * 验证邮箱是否存在
+ * 获取邮箱验证码
  */
 export async function getEmailCodeApi(params: any) {
   return await useMyRequest().post(Api.SendEmailCode, params)
@@ -42,7 +49,7 @@ export async function getEmailCodeApi(params: any) {
  * @description: user login api
  */
 export async function loginApi(params: any) {
-  return await useMyRequest().post(Api.Login, params)
+  return await useMyRequest().post(Api.Login, params, { isForbiddenErrorPrompt: true })
 }
 /**
  * 预注册

components/common/login/comp/choice.vue

@@ -2,6 +2,7 @@
 import useLogin from '../useLogin'
 
 const { onSelectEmail, onGoogleLoginSuccess } = useLogin()
+const { closeLoginModal } = useLoginModal()
 </script>
 
 <template>
@@ -18,8 +19,12 @@ const { onSelectEmail, onGoogleLoginSuccess } = useLogin()
       Continue with Email
     </div>
     <div class="mt-40px lh-22px text-14px text-#767676">
-      By continuing, you agree to EJET Spark’s <span class="text-#1A1A1A underline cursor-pointer fw-500">Terms of Use⁠.</span> Read our
-      <span class="text-#1A1A1A underline cursor-pointer fw-500">Privacy Policy⁠.</span>
+      By continuing, you agree to EJET Spark’s <span class="text-#1A1A1A underline cursor-pointer fw-500">
+        <nuxt-link to="/terms-of-service" @click="closeLoginModal">Terms of Use</nuxt-link>
+      </span> Read our
+      <span class="text-#1A1A1A underline cursor-pointer fw-500">
+        <nuxt-link to="/privacy-policy" @click="closeLoginModal">Privacy Policy</nuxt-link>
+      </span>
     </div>
   </div>
 </template>

components/common/login/comp/email/code.vue

@@ -2,7 +2,7 @@
 import type { FormInstance, FormRules } from 'element-plus'
 import useLogin from '../../useLogin'
 
-const { loginForm, finishCode, errorCodeTxt, seconds, getMailCode, backStep } = useLogin()
+const { loginForm, finishCode, errorCodeTxt, seconds, showCode, getMailCode, backStep } = useLogin()
 const ruleFormRef = ref<FormInstance>()
 
 const rules = ref<FormRules>({
@@ -22,7 +22,7 @@ const rules = ref<FormRules>({
       Once you enter the code we sent to <span class="text-#1A1A1A fw-700">{{ loginForm.email }}</span>, you’ll be signed in.
     </div>
 
-    <div class="my-10px text-14px text-#9B6CFF underline cursor-pointer fw-bold" :class="seconds && '!text-#999'" @click="getMailCode">
+    <div v-if="showCode" class="my-10px text-14px text-#9B6CFF underline cursor-pointer fw-bold" :class="seconds && '!text-#999'" @click="getMailCode">
       Get a Code
     </div>
     <el-form ref="ruleFormRef" :rules="rules" :model="loginForm" @submit.prevent>
@@ -40,10 +40,12 @@ const rules = ref<FormRules>({
       </el-form-item>
     </el-form>
     <div class="mt-20px text-14px text-#767676">
-      <div class="mb-8px">
+      <div v-if="!seconds && !showCode" class="mb-8px">
         Didn't get the code? <span class="text-#9B6CFF cursor-pointer underline " :class="seconds && '!text-#999'" @click="getMailCode">Resend code</span>⁠.
       </div>
-      <div> Didn't get the code? Resend in {{ seconds }} seconds.</div>
+      <div v-if="seconds && !showCode">
+        Didn't get the code? Resend in {{ seconds }} seconds.
+      </div>
     </div>
   </div>
 </template>

components/common/login/comp/email/index.vue

@@ -2,7 +2,7 @@
 import type { FormInstance, FormRules } from 'element-plus'
 import useLogin from '../../useLogin'
 
-const { loginForm, sendEmail, backStep } = useLogin()
+const { loginForm, sendEmail, backStep, errorTxt } = useLogin()
 const ruleFormRef = ref<FormInstance>()
 
 const rules = ref<FormRules>({
@@ -12,6 +12,15 @@ const rules = ref<FormRules>({
       pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
       message: 'Please enter a valid email.',
     },
+    {
+      validator: (rule: any, value: any, callback: any) => {
+        if (errorTxt.value)
+          callback(new Error(errorTxt.value))
+
+        else
+          callback()
+      },
+    },
   ],
 })
 </script>

components/common/login/index.vue

@@ -10,7 +10,7 @@ import { useCommonStore } from '@/stores/modules/common'
 const commonStore = useCommonStore()
 const { loginedAccountList, loginType } = storeToRefs(commonStore)
 
-const { emailStep, isEmailGoogle } = useLogin()
+const { emailStep, isEmailGoogle, loginForm } = useLogin()
 const { isLoginModalOpen, closeLoginModal } = useLoginModal()
 
 const route = useRoute()
@@ -27,7 +27,8 @@ watch(() => route.path, () => {
     closeLoginModal({ status: false, error: '用户取消登录' })
 })
 onUnmounted(() => {
-  console.log('onUnmounted------>>登陆弹窗销毁')
+  console.log('onUnmounted------>>登陆弹窗销毁', loginForm.value)
+  loginForm.value.captcha = ''
 })
 </script>
 

components/common/login/useLogin.ts

@@ -1,5 +1,5 @@
 import type { FormInstance, FormRules } from 'element-plus'
-import { getEmailCodeApi, validateEmailIsExistApi } from '@/api/model/user'
+import { getEmailCodeApi, validateEmailIsExistApi, validateEmailIsWorkApi } from '@/api/model/user'
 import { useUserStore } from '@/stores/modules/user'
 
 const { closeLoginModal } = useLoginModal()
@@ -15,6 +15,9 @@ const seconds = ref<number>(0)
 const errorCodeTxt = ref<string>('')
 const isEmailGoogle = ref<boolean>(false)
 export default function useRegister() {
+  const errorTxt = ref<string>('')
+  const showCode = ref<boolean>(true)
+
   const nextStep = () => {
     emailStep.value++
   }
@@ -66,6 +69,7 @@ export default function useRegister() {
         return
       // 获取验证码
       await getEmailCodeApi({ account: loginForm.value.email, type: 's003_login' })
+      showCode.value = false
       countSeconds()
     }
     catch (error) {
@@ -81,17 +85,31 @@ export default function useRegister() {
       return
     await formEl.validate(async (valid, fields) => {
       if (valid) {
-      // 验证已存在google的邮箱
-        const res: any = await validateEmailIsExistApi({ email: loginForm.value.email })
-        if (!res || res !== 'google')
+        try {
+          // 先验证邮箱是否有效
+          const result: any = await validateEmailIsWorkApi({ email: loginForm.value.email })
+          if (result === '2') {
+            // 触发form的错误提示
+            errorTxt.value = 'The email is invalid.'
+            formEl.validateField('email')
+            return
+          }
+
+          // 验证已存在google的邮箱
+          const res: any = await validateEmailIsExistApi({ email: loginForm.value.email })
+          if (!res || res !== 'google')
           // 如果没有google的邮箱，直接下一步，或者没有注册过邮箱
-          isEmailGoogle.value = false
-        if (res === 'google') {
+            isEmailGoogle.value = false
+          if (res === 'google') {
           // 显示google登陆按钮
-          isEmailGoogle.value = true
-          loginForm.value.email = ''
+            isEmailGoogle.value = true
+            loginForm.value.email = ''
+          }
+          nextStep()
+        }
+        catch (error) {
+          console.log(error)
         }
-        nextStep()
       }
       else { console.log('error submit!', fields) }
     })
@@ -145,5 +163,5 @@ export default function useRegister() {
       type: 'google',
     })
   }
-  return { emailStep, loginForm, onSelectAccount, errorCodeTxt, seconds, isEmailGoogle, sendEmail, nextStep, onSelectEmail, finishCode, onGoogleLoginSuccess, backStep, getMailCode }
+  return { emailStep, loginForm, errorTxt, onSelectAccount, showCode, errorCodeTxt, seconds, isEmailGoogle, sendEmail, nextStep, onSelectEmail, finishCode, onGoogleLoginSuccess, backStep, getMailCode }
 }

components/common/loginAndDownload/comp/email/code.vue

@@ -2,7 +2,7 @@
 import type { FormInstance, FormRules } from 'element-plus'
 import useLogin from '../../useLoginAndDownload'
 
-const { loginForm, finishCode, errorCodeTxt, seconds, getMailCode, backStep } = useLogin()
+const { loginForm, finishCode, errorCodeTxt, seconds, getMailCode, backStep, showCode } = useLogin()
 const ruleFormRef = ref<FormInstance>()
 
 const rules = ref<FormRules>({
@@ -22,7 +22,7 @@ const rules = ref<FormRules>({
       Once you enter the code we sent to <span class="text-#1A1A1A fw-700">{{ loginForm.email }}</span>, you’ll be signed in.
     </div>
 
-    <div class="my-10px text-14px text-#9B6CFF underline cursor-pointer fw-bold" :class="seconds && '!text-#999'" @click="getMailCode">
+    <div v-if="showCode" class="my-10px text-14px text-#9B6CFF underline cursor-pointer fw-bold" :class="seconds && '!text-#999'" @click="getMailCode">
       Get a Code
     </div>
     <el-form ref="ruleFormRef" :rules="rules" :model="loginForm" @submit.prevent>
@@ -40,10 +40,12 @@ const rules = ref<FormRules>({
       </el-form-item>
     </el-form>
     <div class="mt-20px text-14px text-#767676">
-      <div class="mb-8px">
+      <div v-if="!seconds && !showCode" class="mb-8px">
         Didn't get the code? <span class="text-#9B6CFF cursor-pointer hover:underline" :class="seconds && '!text-#999'" @click="getMailCode">Resend code</span>⁠.
       </div>
-      <div> Didn't get the code? Resend in {{ seconds }} seconds.</div>
+      <div v-if="seconds && !showCode">
+        Didn't get the code? Resend in {{ seconds }} seconds.
+      </div>
     </div>
   </div>
 </template>

components/common/loginAndDownload/comp/email/index.vue

@@ -2,7 +2,7 @@
 import type { FormInstance, FormRules } from 'element-plus'
 import useLogin from '../../useLoginAndDownload'
 
-const { loginForm, sendEmail, backStep } = useLogin()
+const { loginForm, sendEmail, backStep, errorTxt } = useLogin()
 const ruleFormRef = ref<FormInstance>()
 
 const rules = ref<FormRules>({
@@ -12,6 +12,15 @@ const rules = ref<FormRules>({
       pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
       message: 'Please enter a valid email.',
     },
+    {
+      validator: (rule: any, value: any, callback: any) => {
+        if (errorTxt.value)
+          callback(new Error(errorTxt.value))
+
+        else
+          callback()
+      },
+    },
   ],
 })
 </script>

components/common/loginAndDownload/index.vue

@@ -17,7 +17,7 @@ import { Condition } from '@/enums/const-enums'
 
 const commonStore = useCommonStore()
 const { downloadCatalog, loginedAccountList, loginType } = storeToRefs(commonStore)
-const { emailStep, isEmailGoogle, setEmailStep } = useLoginAndDownload()
+const { emailStep, isEmailGoogle, setEmailStep, loginForm } = useLoginAndDownload()
 const userStore = useUserStore()
 const { isLogin, isCompletedInfo } = storeToRefs(userStore)
 const { isLoginAndDownloadOpen } = useLoginAndDownLoadModal()
@@ -30,7 +30,6 @@ watch(() => loginedAccountList.value, (newVal: any) => {
 }, { immediate: true })
 
 watchEffect(() => {
-  console.log('watchEffect-------1000', isLogin.value, isCompletedInfo.value)
   if (isLogin.value) {
     if (isCompletedInfo.value) {
       if (downloadCatalog.value.downloadCondition === Condition.DOWNLOAD)
@@ -44,8 +43,8 @@ watchEffect(() => {
 })
 
 onUnmounted(() => {
-  console.log('组件卸载了', isCompletedInfo.value)
-  // setEmailStep(3)
+  console.log('组件卸载了', loginForm.value)
+  loginForm.value.captcha = ''
 })
 </script>
 
@@ -64,28 +63,30 @@ onUnmounted(() => {
       @click="isLoginAndDownloadOpen = false"
     >
     <div class="flex min-h-550px">
-      <div class="pt-110px pb-52px px-45px flex flex-col justify-between pos-relative w-375px bg-cover bg-no-repeat" :style="{ backgroundImage: `url(${downloadCatalog.coverImg})` }">
-        <svgo-spark-logo
-          class="!w-100px !h-24px  text-#fff"
-        />
-        <div>
-          <div class="custom-title-font text-24px fw-800 text-#fff mb-24px">
-            Download The Catalog
-          </div>
-          <div class="mb-10px custom-title-font text-18px fw-800 text-#fff">
-            {{ downloadCatalog.title }}
-          </div>
-          <div class="text-14px text-#fff lh-22px mb-36px">
-            {{ downloadCatalog.subhead }}
-          </div>
-          <div
-            v-if="downloadCatalog.blogSlug && (emailStep === 0 || emailStep === 4)"
-            @click="isLoginAndDownloadOpen = false"
-            class="w-110px h-32px lh-32px text-center b-rd-6px text-14px text-#9B6CFF fw-bold b-solid b-1px b-#9B6CFF cursor-pointer hover:bg-#9B6CFF hover:text-#fff"
-          >
-            <NuxtLink :to="`/blog/${downloadCatalog.blogSlug}`">
-              Learn More
-            </NuxtLink>
+      <div class="bg-login pos-relative w-375px bg-cover bg-no-repeat" :style="{ backgroundImage: `url(${downloadCatalog.coverImg})` }">
+        <div class="pt-110px  pb-52px px-45px flex flex-col justify-between pos-absolute top-0 left-0 w-100% h-100%">
+          <svgo-spark-logo
+            class="!w-100px !h-24px  text-#fff"
+          />
+          <div>
+            <div class="custom-title-font text-24px fw-800 text-#fff mb-24px">
+              Download The Catalog
+            </div>
+            <div class="mb-10px custom-title-font text-18px fw-800 text-#fff">
+              {{ downloadCatalog.title }}
+            </div>
+            <div class="text-14px text-#fff lh-22px mb-36px">
+              {{ downloadCatalog.subhead }}
+            </div>
+            <div
+              v-if="downloadCatalog.blogSlug && (emailStep === 0 || emailStep === 4)"
+              class="w-110px h-32px lh-32px text-center b-rd-6px text-14px text-#9B6CFF fw-bold b-solid b-1px b-#9B6CFF cursor-pointer hover:bg-#9B6CFF hover:text-#fff"
+              @click="isLoginAndDownloadOpen = false"
+            >
+              <NuxtLink :to="`/blog/${downloadCatalog.blogSlug}`">
+                Learn More
+              </NuxtLink>
+            </div>
           </div>
         </div>
       </div>
@@ -127,4 +128,15 @@ onUnmounted(() => {
     }
   }
 }
+.bg-login{
+  &::before{
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    backdrop-filter: blur(4px);
+  }
+}
 </style>

components/common/loginAndDownload/useLoginAndDownload.ts

@@ -1,7 +1,7 @@
 import type { FormInstance, FormRules } from 'element-plus'
 import { useUserStore } from '@/stores/modules/user'
 import { useCommonStore } from '@/stores/modules/common'
-import { getEmailCodeApi, getUpdateUserInfoApi, submitInfoApi, validateEmailIsExistApi } from '@/api/model/user'
+import { getEmailCodeApi, getUpdateUserInfoApi, submitInfoApi, validateEmailIsExistApi, validateEmailIsWorkApi } from '@/api/model/user'
 
 const { closeLoginAndDownloadModal } = useLoginAndDownLoadModal()
 const { loading, onGoogleLogin } = useGoogleLogin()
@@ -14,7 +14,9 @@ const emailStep = ref<number>(0)
 const isEmailGoogle = ref<boolean>(false)
 const selectedMethod = ref<string>('google')
 export default function useRegister() {
+  const errorTxt = ref<string>('')
   const seconds = ref<number>(0)
+  const showCode = ref<boolean>(true)
   const errorCodeTxt = ref<string>('')
   const formInfo = ref<any>({
     firstName: '',
@@ -91,6 +93,7 @@ export default function useRegister() {
         return
       // 获取验证码
       await getEmailCodeApi({ account: loginForm.value.email, type: 's003_login' })
+      showCode.value = false
       countSeconds()
     }
     catch (error) {
@@ -106,17 +109,29 @@ export default function useRegister() {
       return
     await formEl.validate(async (valid, fields) => {
       if (valid) {
-        // 验证已存在google的邮箱
-        const res: any = await validateEmailIsExistApi({ email: loginForm.value.email })
-        if (!res || res !== 'google')
-        // 如果没有google的邮箱，直接下一步，或者没有注册过邮箱
-          isEmailGoogle.value = false
-        if (res === 'google') {
+        try {
+          // 先验证邮箱是否有效
+          const result: any = await validateEmailIsWorkApi({ email: loginForm.value.email })
+          if (result === '2') {
+            errorTxt.value = 'The email is invalid.'
+            formEl.validateField('email')
+            return
+          }
+          // 验证已存在google的邮箱
+          const res: any = await validateEmailIsExistApi({ email: loginForm.value.email })
+          if (!res || res !== 'google')
+          // 如果没有google的邮箱，直接下一步，或者没有注册过邮箱
+            isEmailGoogle.value = false
+          if (res === 'google') {
           // 显示google登陆按钮
-          isEmailGoogle.value = true
-          loginForm.value.email = ''
+            isEmailGoogle.value = true
+            loginForm.value.email = ''
+          }
+          nextStep()
+        }
+        catch (error) {
+          console.log(error)
         }
-        nextStep()
       }
       else { console.log('error submit!', fields) }
     })
@@ -208,5 +223,5 @@ export default function useRegister() {
     emailStep.value = 4
   }
 
-  return { emailStep, visible, onGoogleLoginSuccess, loginForm, formInfo, setEmailStep, setSubmitInfo, onSubmitRequest, onSelectAccount, errorCodeTxt, seconds, isEmailGoogle, sendEmail, nextStep, onSelectEmail, finishCode, backStep, getMailCode }
+  return { emailStep, visible, errorTxt, showCode, onGoogleLoginSuccess, loginForm, formInfo, setEmailStep, setSubmitInfo, onSubmitRequest, onSelectAccount, errorCodeTxt, seconds, isEmailGoogle, sendEmail, nextStep, onSelectEmail, finishCode, backStep, getMailCode }
 }

composables/useFetchRequest.ts

@@ -44,7 +44,6 @@ export function useMyRequest() {
         headers['Content-Type'] = 'application/json'
       }
     }
-    const isProduction = process.env.NODE_ENV === 'production'
 
     // eslint-disable-next-line no-async-promise-executor
     return new Promise(async (resolve, reject) => {
@@ -98,7 +97,7 @@ export function useMyRequest() {
               if (message)
                 msg = message
           }
-          msg && !opt.isErrorPrompt
+          msg && !opt.isForbiddenErrorPrompt
           && ElMessage({
             message: msg,
             type: 'error',

pages/privacy-policy.vue

@@ -49,7 +49,7 @@ useHead({
 
 <template>
   <div>
-    <div class="w-1000px mx-auto mb-160px mt-40px">
+    <div class="w-1000px mx-auto mb-160px mt-100px">
       <h1 class="text-center">
         Privacy Policy
       </h1>

pages/terms-of-service.vue

@@ -11,7 +11,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div>
+  <div class="pt-100px">
     <div id="__enzuzo-root" />
     <AppFooter />
   </div>