feat: 登陆+下载目录册逻辑，对接完成

api/model/user.ts

@@ -2,7 +2,6 @@ import { useMyRequest } from '~/composables/useFetchRequest'
 
 enum Api {
   Login = '/client-s003/s003Customer/login',
-  UserInfo = '/client/user/userinfo',
   Logout = '/client/user/logout',
   Register = '/client/user/preRegister',
   ValidateRegister = '/client/user/register',
@@ -10,6 +9,21 @@ enum Api {
   ResetOrChangePassword = '/client/user/changePassword',
   ValidateEmailIsExist = '/client-s003/s003Customer/lastLoginType',
   SendEmailCode = '/client-s003/captcha/sms/send',
+  SubmitInfo = '/client-s003/s003ProductCatalogue/download',
+  UserInfo = '/client-s003/s003Customer/userinfo',
+}
+/**
+ * 获取用户信息，获取更新后的用户信息
+ */
+export async function getUpdateUserInfoApi(params?: any) {
+  return await useMyRequest().get(Api.UserInfo, params)
+}
+
+/**
+ * 提交用户信息
+ */
+export async function submitInfoApi(params: any) {
+  return await useMyRequest().post(Api.SubmitInfo, params)
 }
 
 /**
@@ -71,12 +85,6 @@ export async function updateUserInfoApi(params: any) {
 export async function resetOrChangePasswordApi(params: any) {
   return await useMyRequest().post(Api.ResetOrChangePassword, params)
 }
-/**
- * @description: getUserInfo
- */
-export async function getUserProfileApi() {
-  return await useMyRequest().get(Api.UserInfo)
-}
 
 export async function logoutApi() {
   return await useMyRequest().get(Api.Logout)

components/business/categories/comp/item.vue

@@ -2,12 +2,13 @@
 defineProps({
   item: Object as any,
 })
+const emit = defineEmits(['select'])
 </script>
 
 <template>
   <div>
     <div class="pos-relative b-rd-12px bg-#fff shadow-item overflow-hidden">
-      <img :src="item.img" alt="" srcset="" class="w-100% h-310px  object-cover">
+      <img :src="item.coverImg" :alt="item.coverAlt" srcset="" class="w-100% h-310px  object-cover">
       <div class="p-30px">
         <h3
           class="!mb-10px fw-800 text-24px text-#333 line-clamp-2 custom-title-font"
@@ -15,7 +16,7 @@ defineProps({
           {{ item.title }}
         </h3>
         <div class="text-16px text-#999 lh-22px line-clamp-2 mb-20px">
-          {{ item.description }}
+          {{ item.subhead }}
         </div>
         <el-button class="!bg-#9B6CFF !text-#fff !b-#9B6CFF !h-40px px-24px" @click="$emit('select', item)">
           Download

components/common/googleLogin/index.vue

@@ -5,7 +5,7 @@ const { loading, onGoogleLogin } = useGoogleLogin()
 async function googleLogin() {
   try {
     const result = await onGoogleLogin()
-    console.log('登陆成功后------222')
+    console.log('google登陆成功------222')
     emit('success', result)
   }
   catch (error) {

components/common/login/index.vue

@@ -16,8 +16,6 @@ const { isLoginModalOpen, closeLoginModal } = useLoginModal()
 const route = useRoute()
 
 watch(() => loginedAccountList.value, (newVal: any) => {
-  console.log('loginedAccountList', newVal)
-
   if (newVal.length > 0)
     commonStore.setLoginType('account')
   else

components/common/login/useLogin.ts

@@ -10,8 +10,8 @@ const loginForm = ref<any>({
   captcha: '',
 })
 const emailStep = ref<number>(0)
-const seconds = ref<number>(0)
 const selectedMethod = ref<string>('google')
+const seconds = ref<number>(0)
 const errorCodeTxt = ref<string>('')
 const isEmailGoogle = ref<boolean>(false)
 export default function useRegister() {
@@ -22,20 +22,6 @@ export default function useRegister() {
     if (emailStep.value > 0)
       emailStep.value--
   }
-  //   const register = async () => {
-  //     try {
-  //       const form = {
-  //         ...params.value,
-  //         purchaseCategory: params.value.purchaseCategory.join(','),
-  //       }
-  //       await registerApi(form)
-  //       nextStep()
-  //     }
-  //     catch (error) {
-  //       console.log(error)
-  //     }
-  //   }
-
   /**
    * 二选一选择邮箱--下一步
    */
@@ -96,12 +82,10 @@ export default function useRegister() {
       if (valid) {
       // 验证已存在google的邮箱
         const res: any = await validateEmailIsExistApi({ email: loginForm.value.email })
-        console.log('loginedAccountList', res)
-
-        if (!res || res.last_login_type !== 'google')
+        if (!res || res !== 'google')
           // 如果没有google的邮箱，直接下一步，或者没有注册过邮箱
           isEmailGoogle.value = false
-        if (res.last_login_type === 'google') {
+        if (res === 'google') {
           // 显示google登陆按钮
           isEmailGoogle.value = true
           loginForm.value.email = ''

components/common/loginAndDownload/comp/account/list.vue

@@ -3,7 +3,9 @@ import useLoginAndDownload from '../../useLoginAndDownload'
 import { useCommonStore } from '@/stores/modules/common'
 
 const commonStore = useCommonStore()
-const { accountList } = storeToRefs(commonStore)
+const defaultName = 'EJET Spark'
+const { loginedAccountList } = storeToRefs(commonStore)
+
 const { onSelectAccount } = useLoginAndDownload()
 function selectOtherLogin() {
   commonStore.setLoginType('choice')
@@ -20,14 +22,14 @@ function selectOtherLogin() {
     </div>
 
     <div class="flex flex-col gap-20px">
-      <div v-for="item, index in accountList" :key="index" class="flex py-15px px-35px b-rd-10px b-#D8D8D b-1px b-solid cursor-pointer hover:b-#9B6CFF" @click="onSelectAccount(item)">
+      <div v-for="item, index in loginedAccountList" :key="index" class="flex py-15px px-35px b-rd-10px b-#D8D8D b-1px b-solid cursor-pointer hover:b-#9B6CFF" @click="onSelectAccount(item)">
         <!-- 获取首字母 -->
-        <div class="w-50px h-50px bg-#F2E5F2 text-#9B6CFF text-24px flex justify-center b-rd-50% items-center mr-28px">
-          {{ item.name.charAt(0).toUpperCase() }}
+        <div class="w-50px h-50px bg-#F2E5F2 text-#9B6CFF fw-800 text-24px flex justify-center b-rd-50% items-center mr-28px">
+          {{ item.name ? item.name.charAt(0).toUpperCase() : defaultName.charAt(0).toUpperCase() }}
         </div>
         <div>
           <div class="text-18px fw-bold text-#333 custom-title-font">
-            {{ item.name }}
+            {{ item.name || defaultName }}
           </div>
           <div class="text-#9B6CFF mt-8px">
             {{ item.email }}

components/common/loginAndDownload/comp/choice.vue

@@ -1,7 +1,7 @@
 <script lang='ts' setup>
 import useLogin from '../useLoginAndDownload'
 
-const { onSelectEmail } = useLogin()
+const { onSelectEmail, onGoogleLoginSuccess } = useLogin()
 </script>
 
 <template>
@@ -12,10 +12,7 @@ const { onSelectEmail } = useLogin()
     <div class="text-14px text-#1A1A1A lh-22px mb-20px">
       Use your Email or another service to continue with EJET Spark!
     </div>
-    <div class="b-rd-200px bg-#fff text-#333 b-1px b-solid b-#D8D8D8 h-48px lh-48px hover:b-#9B6CFF flex justify-center items-center cursor-pointer mb-24px text-14px fw-500">
-      <img src="@/assets/images/google_logo.png" alt="" class="w-24px h-24px mr-10px">
-      Continue with Google
-    </div>
+    <common-google-login class="mb-24px" @success="onGoogleLoginSuccess" />
     <div class="b-rd-200px bg-#fff b-1px text-#333 b-solid b-#D8D8D8 h-48px lh-48px hover:b-#9B6CFF flex justify-center items-center cursor-pointer text-14px fw-500" @click="onSelectEmail">
       <img src="@/assets/images/mail_logo.png" class="w-24px h-24px mr-10px" alt="">
       Continue with Email

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

@@ -6,7 +6,7 @@ const { loginForm, finishCode, errorCodeTxt, seconds, getMailCode, backStep } =
 const ruleFormRef = ref<FormInstance>()
 
 const rules = ref<FormRules>({
-  code: [
+  captcha: [
     { required: true, message: 'Please enter a valid email.', trigger: 'blur' },
   ],
 })
@@ -19,15 +19,15 @@ const rules = ref<FormRules>({
       Finish Signing In
     </div>
     <div class="text-14px text-#1A1A1A lh-22px mb-20px">
-      Once you enter the code we sent to <span class="text-#1A1A1A fw-700">{{ loginForm.mail }}</span>, you’ll be signed in.
+      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" @click="getMailCode">
+    <div 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">
-      <el-form-item label="" prop="code" class="!mb-24px">
-        <el-input v-model.trim="loginForm.code" :class="!!errorCodeTxt && 'error-txt'" class="!h-46px login-input !text-14px" placeholder="Enter email" />
+    <el-form ref="ruleFormRef" :rules="rules" :model="loginForm" @submit.prevent>
+      <el-form-item label="" prop="captcha" class="!mb-24px">
+        <el-input v-model.trim="loginForm.captcha" :class="!!errorCodeTxt && 'error-txt'" class="!h-46px login-input !text-14px" placeholder="Enter email" />
         <div v-if="errorCodeTxt" class="text-red mt-10px">
           {{ errorCodeTxt }}
         </div>
@@ -41,7 +41,7 @@ const rules = ref<FormRules>({
     </el-form>
     <div class="mt-20px text-14px text-#767676">
       <div class="mb-8px">
-        Didn't get the code? <span class="text-#9B6CFF cursor-pointer hover:underline" @click="getMailCode">Resend code</span>⁠.
+        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>

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

@@ -6,7 +6,7 @@ const { loginForm, sendEmail, backStep } = useLogin()
 const ruleFormRef = ref<FormInstance>()
 
 const rules = ref<FormRules>({
-  mail: [
+  email: [
     { required: true, message: 'Please enter a valid email.', trigger: 'blur' },
     {
       pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
@@ -25,9 +25,9 @@ const rules = ref<FormRules>({
     <div class="text-14px text-#1A1A1A lh-22px mb-20px">
       We’ll check if you have an account, and help create one if you don’t.
     </div>
-    <el-form ref="ruleFormRef" :rules="rules" :model="loginForm">
-      <el-form-item label="" prop="mail" class="!mb-24px">
-        <el-input v-model.trim="loginForm.mail" class="!h-46px login-input !text-14px" placeholder="Enter email" />
+    <el-form ref="ruleFormRef" :rules="rules" :model="loginForm" @submit.prevent>
+      <el-form-item label="" prop="email" class="!mb-24px">
+        <el-input v-model.trim="loginForm.email" class="!h-46px login-input !text-14px" placeholder="Enter email" />
       </el-form-item>
       <el-form-item>
         <el-button class="!w-full !h-50px !text-16px !fw-500 !b-rd-10px !bg-#9B6CFF !text-#fff" @click="sendEmail(ruleFormRef)">

components/common/loginAndDownload/comp/info/finish.vue

@@ -7,7 +7,7 @@ const { downloadCatalog } = storeToRefs(commonStore)
 
 function startDownload() {
   if (downloadCatalog.value)
-    downloadFile(downloadCatalog.value.pdfUrl, `${downloadCatalog.value.title}.pdf`)
+    downloadFile(downloadCatalog.value.pdf, `${downloadCatalog.value.title}.pdf`)
   else
     console.error('No download catalog available')
 }

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

@@ -7,7 +7,7 @@ import { getDictListApi } from '~/api/model/common'
 
 const { formInfo, visible, setSubmitInfo } = useLoginAndDownload()
 const ruleFormRef = ref<FormInstance>()
-const annualPurchaseAmountList = ref()
+const purchaseAmountList = ref()
 const mobileAreaCodeList = ref()
 const rules = ref<FormRules>({
   firstName: [
@@ -31,7 +31,7 @@ const rules = ref<FormRules>({
       trigger: 'blur',
     },
   ],
-  type: [
+  customServer: [
     {
       required: true,
       message: 'Mobile must be filled in',
@@ -45,10 +45,10 @@ const rules = ref<FormRules>({
       trigger: 'change',
     },
   ],
-  annualPurchaseAmount: [
+  purchaseAmount: [
     {
       required: true,
-      message: 'AnnualPurchaseAmount must be selected',
+      message: 'purchaseAmount must be selected',
       trigger: 'change',
     },
   ],
@@ -58,12 +58,12 @@ async function getMobileAreaCodeList() {
   const list = await getDictListApi('A064')
   mobileAreaCodeList.value = list
 }
-async function getAnnualPurchaseAmountList() {
+async function getPurchaseAmountList() {
   const list = await getDictListApi('A072')
-  annualPurchaseAmountList.value = list
+  purchaseAmountList.value = list
 }
 getMobileAreaCodeList()
-getAnnualPurchaseAmountList()
+getPurchaseAmountList()
 </script>
 
 <template>
@@ -127,8 +127,8 @@ getAnnualPurchaseAmountList()
           </template>
         </el-input>
       </el-form-item>
-      <el-form-item label="" class="custom-form-item" prop="type">
-        <el-select v-model="formInfo.type" placeholder="* Needs">
+      <el-form-item label="" class="custom-form-item" prop="customServer">
+        <el-select v-model="formInfo.customServer" placeholder="* Needs">
           <el-option
             class="!h-50px !lh-50px"
             label="Just browing"
@@ -157,15 +157,15 @@ getAnnualPurchaseAmountList()
       <el-form-item
         v-if="visible"
         label=""
-        prop="annualPurchaseAmount"
+        prop="purchaseAmount"
         class="custom-form-item"
       >
         <el-select
-          v-model="formInfo.annualPurchaseAmount"
+          v-model="formInfo.purchaseAmount"
           placeholder="* Sourcing Budget "
         >
           <el-option
-            v-for="(item, index) in annualPurchaseAmountList"
+            v-for="(item, index) in purchaseAmountList"
             :key="index"
             class="!h-50px !lh-50px"
             :label="item.label"
@@ -175,7 +175,7 @@ getAnnualPurchaseAmountList()
       </el-form-item>
       <el-form-item v-if="visible" label="" class="custom-form-item">
         <el-input
-          v-model="formInfo.mark"
+          v-model="formInfo.purchaseRequest"
           type="textarea"
           placeholder="Describe your needs"
           :rows="4"

components/common/loginAndDownload/index.vue

@@ -13,15 +13,16 @@ import Request from './comp/info/request.vue'
 import useLoginAndDownload from './useLoginAndDownload'
 import { useUserStore } from '@/stores/modules/user'
 import { useCommonStore } from '@/stores/modules/common'
+import { Condition } from '@/enums/const-enums'
 
 const commonStore = useCommonStore()
-const { downloadCatalog, accountList, loginType, isCompletedInfo } = storeToRefs(commonStore)
-const { emailStep, isEmailGoogle, selectedAccount, setEmailStep } = useLoginAndDownload()
+const { downloadCatalog, loginedAccountList, loginType } = storeToRefs(commonStore)
+const { emailStep, isEmailGoogle, setEmailStep } = useLoginAndDownload()
 const userStore = useUserStore()
-const { isLogin } = storeToRefs(userStore)
+const { isLogin, isCompletedInfo } = storeToRefs(userStore)
 const { isLoginAndDownloadOpen } = useLoginAndDownLoadModal()
 
-watch(() => accountList.value, (newVal: any) => {
+watch(() => loginedAccountList.value, (newVal: any) => {
   if (newVal.length > 0)
     commonStore.setLoginType('account')
   else
@@ -29,15 +30,22 @@ watch(() => accountList.value, (newVal: any) => {
 }, { immediate: true })
 
 watchEffect(() => {
-  if (isLogin.value && isCompletedInfo.value)
-    setEmailStep(4)
-  else
-    console.log('watchEffect-------1', isLogin.value, isCompletedInfo.value)
+  console.log('watchEffect-------1000', isLogin.value, isCompletedInfo.value)
+  if (isLogin.value) {
+    if (isCompletedInfo.value) {
+      if (downloadCatalog.value.downloadCondition === Condition.DOWNLOAD)
+        setEmailStep(4)
+      else
+        setEmailStep(3)
+    }
+
+    else { setEmailStep(3) }
+  }
 })
 
 onUnmounted(() => {
   console.log('组件卸载了', isCompletedInfo.value)
-  setEmailStep(3)
+  // setEmailStep(3)
 })
 </script>
 
@@ -56,7 +64,7 @@ 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.img})` }">
+      <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"
         />
@@ -68,32 +76,32 @@ onUnmounted(() => {
             {{ downloadCatalog.title }}
           </div>
           <div class="text-14px text-#fff lh-22px mb-36px">
-            {{ downloadCatalog.description }}
+            {{ downloadCatalog.subhead }}
           </div>
-          <!-- <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"
           >
-            <NuxtLink to="/">
+            <NuxtLink :to="`/blog/${downloadCatalog.blogSlug}`">
               Learn More
             </NuxtLink>
-          </div> -->
+          </div>
         </div>
       </div>
       <div class="flex-1 b-rd-10px bg-#fff px-70px pt-100px">
         <div v-if="!isLogin">
           <!-- 登陆部分 -->
-          <AccountList v-if="emailStep === 0 && accountList.length && loginType === 'account'" />
+          <AccountList v-if="emailStep === 0 && loginedAccountList.length && loginType === 'account'" />
           <Choice v-if="emailStep === 0 && loginType === 'choice'" />
-          <Mail v-if="emailStep === 1 && !selectedAccount" />
-          <Mail v-if="emailStep === 1 && selectedAccount" />
-          <Code v-if="emailStep === 2 && !isEmailGoogle " />
-          <Google v-if="emailStep === 2 && isEmailGoogle === 'google'" />
-          <!-- 填写信息 -->
-          <Info v-if="emailStep === 3 && !isCompletedInfo" />
-          <SubmitRequest v-if="emailStep === 3 && !!isCompletedInfo && downloadCatalog.type === 'request'" />
-          <Finish v-if="emailStep === 4 && downloadCatalog.type === 'download'" />
-          <Request v-if="emailStep === 4 && downloadCatalog.type === 'request'" />
+          <Mail v-if="emailStep === 1" />
+          <Code v-if="emailStep === 2 && !isEmailGoogle" />
+          <Google v-if="emailStep === 2 && isEmailGoogle" />
         </div>
+        <!-- 填写信息 -->
+        <Info v-if="emailStep === 3 && !isCompletedInfo" />
+        <SubmitRequest v-if="emailStep === 3 && !!isCompletedInfo && downloadCatalog.downloadCondition === Condition.REQUEST" />
+        <Finish v-if="emailStep === 4 && downloadCatalog.downloadCondition === Condition.DOWNLOAD" />
+        <Request v-if="emailStep === 4 && downloadCatalog.downloadCondition === Condition.REQUEST" />
       </div>
     </div>
   </el-dialog>

components/common/loginAndDownload/useLoginAndDownload.ts

@@ -1,34 +1,42 @@
 import type { FormInstance, FormRules } from 'element-plus'
-import { registerApi } from '@/api/model/user'
 import { useUserStore } from '@/stores/modules/user'
+import { useCommonStore } from '@/stores/modules/common'
+import { getEmailCodeApi, getUpdateUserInfoApi, submitInfoApi, validateEmailIsExistApi } from '@/api/model/user'
 
-const { isLoginAndDownloadOpen } = useLoginAndDownLoadModal()
-
-// const userStore = useUserStore()
+const { closeLoginAndDownloadModal } = useLoginAndDownLoadModal()
+const { loading, onGoogleLogin } = useGoogleLogin()
 
 const loginForm = ref<any>({
-  mail: '',
-  code: '',
+  email: '',
+  captcha: '',
 })
-const emailStep = ref<number>(4)
-const selectedAccount = ref<string>('')
-const isEmailGoogle = ref<string>('')
-
+const emailStep = ref<number>(0)
+const isEmailGoogle = ref<boolean>(false)
+const selectedMethod = ref<string>('google')
 export default function useRegister() {
   const seconds = ref<number>(0)
   const errorCodeTxt = ref<string>('')
   const formInfo = ref<any>({
     firstName: '',
+    catalogueId: '',
     lastName: '',
     mobile: '',
     mobileAreaCode: '+86',
-    type: undefined,
+    customServer: 'browing',
     companyName: '',
-    annualPurchaseAmount: undefined,
-    mark: '',
+    purchaseAmount: undefined,
+    purchaseRequest: '',
 
   })
-  const visible = computed(() => formInfo.value.type === 'suppliers')
+  const visible = computed(() => formInfo.value.customServer === 'suppliers')
+  watch(() => visible.value, (val) => {
+    if (!val) {
+      // 如果visible变为false，重置formInfo的相关字段
+      formInfo.value.companyName = ''
+      formInfo.value.purchaseAmount = undefined
+      formInfo.value.purchaseRequest = ''
+    }
+  })
 
   const nextStep = () => {
     emailStep.value++
@@ -40,35 +48,28 @@ export default function useRegister() {
     if (emailStep.value > 0)
       emailStep.value--
   }
-  //   const register = async () => {
-  //     try {
-  //       const form = {
-  //         ...params.value,
-  //         purchaseCategory: params.value.purchaseCategory.join(','),
-  //       }
-  //       await registerApi(form)
-  //       nextStep()
-  //     }
-  //     catch (error) {
-  //       console.log(error)
-  //     }
-  //   }
-
   /**
    * 二选一选择邮箱--下一步
    */
   const onSelectEmail = () => {
-    selectedAccount.value = ''
-    loginForm.value.mail = ''
+    selectedMethod.value = 'email'
+    loginForm.value.email = ''
     nextStep()
   }
   /**
    * 选择曾经登陆过的账号--下一步
    */
-  const onSelectAccount = (item: any) => {
-    selectedAccount.value = item.email
-    loginForm.value.mail = item.email
-    emailStep.value = 1
+  const onSelectAccount = async (item: any) => {
+    console.log('onSelectAccount', item, loading.value)
+    // type: 'google' | 'email'
+    if (item.type === 'google') {
+      const result = await onGoogleLogin()
+      await onGoogleLoginSuccess(result)
+    }
+    if (item.type === 'email') {
+      loginForm.value.email = item.email
+      emailStep.value = 1
+    }
   }
   /**
    * dao: 倒计时60秒
@@ -89,7 +90,7 @@ export default function useRegister() {
       if (seconds.value > 0)
         return
       // 获取验证码
-      //   const res = await registerApi(loginForm.value.mail)
+      await getEmailCodeApi({ account: loginForm.value.email, type: 's003_login' })
       countSeconds()
     }
     catch (error) {
@@ -105,9 +106,16 @@ export default function useRegister() {
       return
     await formEl.validate(async (valid, fields) => {
       if (valid) {
-      // 验证已存在google的邮箱
-
-        // isEmailGoogle.value = 'google' // 模拟google邮箱验证
+        // 验证已存在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 = ''
+        }
         nextStep()
       }
       else { console.log('error submit!', fields) }
@@ -122,45 +130,83 @@ export default function useRegister() {
     if (!formEl)
       return
     await formEl.validate(async (valid, fields) => {
-      if (valid)
-        await handleLogin()
-
-      else console.log('error submit!', fields)
+      if (valid) {
+        await handleLogin({
+          email: loginForm.value.email,
+          captcha: loginForm.value.captcha,
+          type: 'email',
+        })
+      }
+      else { console.log('error submit!', fields) }
     })
   }
   /**
    * 登录--提交
    */
-  async function handleLogin() {
+  async function handleLogin(params: any) {
     try {
-    //   await login(loginForm.value)
-    //   closeLoginModal({ status: true, isFirstLogin: true })
-      isLoginAndDownloadOpen.value = false
+      const { login } = useUserStore()
+      await login(params)
+      console.log('登陆成功后------1111', emailStep.value)
+      // closeLoginAndDownloadModal({ status: true, isFirstLogin: true })
     }
-    catch (err) {
-      errorCodeTxt.value = 'The code is wrong or invalid.'
+    catch (err: any) {
+      console.log('Login error:', err, selectedMethod.value)
+      if (selectedMethod.value === 'email')
+        errorCodeTxt.value = 'The code is wrong or invalid.'
+      else
+        ElMessage.error(err.message || 'Login failed, please try again later.')
     }
   }
+  /**
+   * google登陆成功
+   */
+  async function onGoogleLoginSuccess(info: any) {
+    await handleLogin({
+      googleKey: info.token,
+      email: info.userInfo.email,
+      type: 'google',
+    })
+  }
 
   // ------------------------  填写信息部分 ------------------------
-  const setSubmitInfo = (formEl: FormInstance | undefined) => {
+
+  const setSubmitInfo = async (formEl: FormInstance | undefined) => {
     if (!formEl)
       return
-    emailStep.value = 4
-    // await formEl.validate(async (valid, fields) => {
-    //   if (valid)
-    //     await handleLogin()
+    await formEl.validate(async (valid, fields) => {
+      if (valid) {
+        const { downloadCatalog } = storeToRefs(useCommonStore())
+        // 提交用户信息
+        console.log('submit info', formInfo.value)
+        formInfo.value.catalogueId = downloadCatalog.value?.id || ''
+        await submitInfoApi(formInfo.value)
+        // 更新用户信息
+        const res = await getUpdateUserInfoApi()
+        const { updateUserInfo } = useUserStore()
+        updateUserInfo(res)
+        emailStep.value = 4
+      }
 
-    //   else console.log('error submit!', fields)
-    // })
+      else { console.log('error submit!', fields) }
+    })
   }
 
   /**
    * 已经填写了用户信息---提交请求
    */
-  const onSubmitRequest = () => {
+  const onSubmitRequest = async () => {
+    const { downloadCatalog } = storeToRefs(useCommonStore())
+    const { userInfo } = storeToRefs(useUserStore())
+    // 提交用户信息
+    const params = {
+      catalogueId: downloadCatalog.value?.id || '',
+      firstName: userInfo.value?.firstName,
+      lastName: userInfo.value?.lastName,
+    }
+    await submitInfoApi(params)
     emailStep.value = 4
   }
 
-  return { emailStep, visible, loginForm, formInfo, selectedAccount, setEmailStep, setSubmitInfo, onSubmitRequest, onSelectAccount, errorCodeTxt, seconds, isEmailGoogle, sendEmail, nextStep, onSelectEmail, finishCode, backStep, getMailCode }
+  return { emailStep, visible, onGoogleLoginSuccess, loginForm, formInfo, setEmailStep, setSubmitInfo, onSubmitRequest, onSelectAccount, errorCodeTxt, seconds, isEmailGoogle, sendEmail, nextStep, onSelectEmail, finishCode, backStep, getMailCode }
 }

composables/useGoogleLogin.ts

@@ -1,6 +1,6 @@
 export function useGoogleLogin() {
   const loading = ref(false)
-  const clientID = '482169597782-nic3d8bo67o0gmq93cmgao7050ets16n.apps.googleusercontent.com'
+  const clientID = '686587510116-r0soonrdftkj8d6lhsp0qprguqa65n60.apps.googleusercontent.com'
   onMounted(() => {
     const script = document.createElement('script')
     script.src = 'https://accounts.google.com/gsi/client'

enums/const-enums.ts

@@ -3,3 +3,8 @@ export enum ConstKeys {
   PROJECTNAME = ' - v3-template',
   DOMAINPRO = 'https://www.ejetselection.com',
 }
+
+export enum Condition {
+  DOWNLOAD = 1,
+  REQUEST = 2,
+}

pages/categories/[slug].vue

@@ -1,40 +1,32 @@
 <script lang='ts' setup>
 import { useCommonStore } from '@/stores/modules/common'
+import { Condition } from '@/enums/const-enums'
 
 const commonStore = useCommonStore()
 const list = [
   {
-    id: 1,
+    id: '1930872642297643010',
     title: 'Stationary & Office Supplies',
-    description: 'Discover bestsellers and fresh arrivals tailored to your niche.',
-    img: 'https://picsum.photos/560/310',
-    pdfUrl: 'https://static.ejetselection.com/temp/baozhen_1748937135247.pdf',
+    subhead: 'Discover bestsellers and fresh arrivals tailored to your niche.',
+    coverImg: 'https://picsum.photos/560/310',
+    coverAlt: 'https://picsum.photos/560/310',
+    pdf: 'https://static.ejetselection.com/temp/baozhen_1748937135247.pdf',
+    viewPdf: 'https://static.ejetselection.com/temp/baozhen_1748937135247.pdf',
     // pdfUrl: 'https://static.ejetselection.com/temp/导入模板2222_1736660213488.xlsx',
-    type: 'download',
+    downloadCondition: Condition.DOWNLOAD, // 下载条件 1是登录后下载 2是登录后申请下载
+    blogSlug: 'stationary-office-supplies',
   },
   {
-    id: 2,
+    id: '1930872642297643010',
     title: 'Stationary & Office Supplies',
-    description: 'Discover bestsellers and fresh arrivals tailored to your niche.',
-    img: 'https://picsum.photos/560/310',
-    pdfUrl: 'https://static.ejetselection.com/temp/baozhen_1748937135247.pdf',
-    type: 'request',
-  },
-  {
-    id: 3,
-    title: 'Stationary & Office Supplies',
-    description: 'Discover bestsellers and fresh arrivals tailored to your niche.',
-    img: 'https://picsum.photos/560/310',
-    pdfUrl: 'https://static.ejetselection.com/temp/baozhen_1748937135247.pdf',
-    type: 'request',
-  },
-  {
-    id: 4,
-    title: 'Stationary & Office Supplies',
-    description: 'Discover bestsellers and fresh arrivals tailored to your niche.',
-    img: 'https://picsum.photos/560/310',
-    pdfUrl: 'https://static.ejetselection.com/temp/baozhen_1748937135247.pdf',
-    type: 'request',
+    subhead: 'Discover bestsellers and fresh arrivals tailored to your niche.',
+    coverImg: 'https://picsum.photos/560/310',
+    coverAlt: 'https://picsum.photos/560/310',
+    pdf: 'https://static.ejetselection.com/temp/baozhen_1748937135247.pdf',
+    viewPdf: 'https://static.ejetselection.com/temp/baozhen_1748937135247.pdf',
+    // pdfUrl: 'https://static.ejetselection.com/temp/导入模板2222_1736660213488.xlsx',
+    downloadCondition: Condition.REQUEST, // 下载条件 1是登录后下载 2是登录后申请下载
+    blogSlug: 'stationary-office-supplies',
   },
 ]
 const { openLoginAndDownloadModal } = useLoginAndDownLoadModal()

stores/modules/common.ts

@@ -8,7 +8,6 @@ export const useCommonStore = defineStore(
   () => {
     const navigateTextColor = ref('#ffffff')
     const navigateBgColor = ref('#0F0820')
-    const isCompletedInfo = ref<boolean>(true) // 是否提交过的信息
     const loginType = ref<string>('choice')
     const downloadCatalog = ref<any>(null)
     const accountList = ref<any>([])
@@ -44,6 +43,10 @@ export const useCommonStore = defineStore(
     const pushAccount = (user: any) => {
       if (!user || !user.email)
         return
+      // 检查是否已经存在相同的账号
+      const existingAccount = accountList.value.find((item: any) => item.email === user.email && item.type === user.type)
+      if (existingAccount)
+        return
       accountList.value.push(user)
     }
     /**
@@ -65,24 +68,15 @@ export const useCommonStore = defineStore(
       downloadCatalog.value = catalog
     }
 
-    /**
-     * 记录用户是否提交过信息
-     */
-    const setFilledInfo = (filled: boolean) => {
-      // isCompletedInfo.value = filled
-    }
-
     return {
       navigateTextColor,
       navigateBgColor,
       downloadCatalog,
-      isCompletedInfo,
       setNavigateBgColor,
       setLoginType,
       accountList,
       loginType,
       pushAccount,
-      setFilledInfo,
       loginedAccountList,
       setDownloadCatalog,
     }

stores/modules/user.ts

@@ -19,6 +19,11 @@ export const useUserStore = defineStore(
     const isLogin = computed(() => !!token.value)
     const avatar = computed(() => userInfo.value?.avatar)
     const nickname = computed(() => userInfo.value?.email)
+    // 是否提交过的信息
+    const isCompletedInfo = computed(() => {
+      return !!(+userInfo.value?.infoState)
+    })
+
     /** 登录操作 */
     const login = async (params: LoginRequestData) => {
       try {
@@ -38,6 +43,9 @@ export const useUserStore = defineStore(
         return Promise.reject(error)
       }
     }
+    const updateUserInfo = (data: any) => {
+      userInfo.value = { ...userInfo.value, ...data }
+    }
     /** 退出登录操作 */
     const logout = async () => {
       try {
@@ -59,7 +67,7 @@ export const useUserStore = defineStore(
         router.push('/')
       }
     }
-    return { userInfo, token, login, logout, isLogin, avatar, nickname }
+    return { userInfo, isCompletedInfo, updateUserInfo, token, login, logout, isLogin, avatar, nickname }
   },
   {
     persist: true,