useLoginAndDownload.ts 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. import type { FormInstance, FormRules } from 'element-plus'
  2. import { useUserStore } from '@/stores/modules/user'
  3. import { useCommonStore } from '@/stores/modules/common'
  4. import { getEmailCodeApi, getUpdateUserInfoApi, submitInfoApi, validateEmailIsExistApi, validateEmailIsWorkApi } from '@/api/model/user'
  5. const { closeLoginAndDownloadModal } = useLoginAndDownLoadModal()
  6. const { loading, onGoogleLogin } = useGoogleLogin()
  7. const loginForm = ref<any>({
  8. email: '',
  9. captcha: '',
  10. })
  11. const emailStep = ref<number>(0)
  12. const isEmailGoogle = ref<boolean>(false)
  13. const selectedMethod = ref<string>('google')
  14. export default function useRegister() {
  15. const errorTxt = ref<string>('')
  16. const seconds = ref<number>(0)
  17. const showCode = ref<boolean>(true)
  18. const errorCodeTxt = ref<string>('')
  19. const formInfo = ref<any>({
  20. firstName: '',
  21. catalogueId: '',
  22. lastName: '',
  23. mobile: '',
  24. mobileAreaCode: '+86',
  25. customServer: 'browing',
  26. companyName: '',
  27. purchaseAmount: undefined,
  28. purchaseRequest: '',
  29. })
  30. const visible = computed(() => formInfo.value.customServer === 'suppliers')
  31. watch(() => visible.value, (val) => {
  32. if (!val) {
  33. // 如果visible变为false,重置formInfo的相关字段
  34. formInfo.value.companyName = ''
  35. formInfo.value.purchaseAmount = undefined
  36. formInfo.value.purchaseRequest = ''
  37. }
  38. })
  39. const nextStep = () => {
  40. emailStep.value++
  41. }
  42. const setEmailStep = (val: number) => {
  43. emailStep.value = val
  44. }
  45. const backStep = () => {
  46. if (emailStep.value > 0)
  47. emailStep.value--
  48. }
  49. /**
  50. * 二选一选择邮箱--下一步
  51. */
  52. const onSelectEmail = () => {
  53. selectedMethod.value = 'email'
  54. loginForm.value.email = ''
  55. nextStep()
  56. }
  57. /**
  58. * 选择曾经登陆过的账号--下一步
  59. */
  60. const onSelectAccount = async (item: any) => {
  61. console.log('onSelectAccount', item, loading.value)
  62. // type: 'google' | 'email'
  63. if (item.type === 'google') {
  64. const result = await onGoogleLogin()
  65. await onGoogleLoginSuccess(result)
  66. }
  67. if (item.type === 'email') {
  68. loginForm.value.email = item.email
  69. emailStep.value = 1
  70. }
  71. }
  72. /**
  73. * dao: 倒计时60秒
  74. */
  75. const countSeconds = () => {
  76. seconds.value = 60
  77. const timer = setInterval(() => {
  78. seconds.value--
  79. if (seconds.value === 0)
  80. clearInterval(timer)
  81. }, 1000)
  82. }
  83. /**
  84. * 邮箱--发送验证码
  85. */
  86. const getMailCode = async () => {
  87. try {
  88. if (seconds.value > 0)
  89. return
  90. // 获取验证码
  91. await getEmailCodeApi({ account: loginForm.value.email, type: 's003_login' })
  92. showCode.value = false
  93. countSeconds()
  94. }
  95. catch (error) {
  96. console.error('Error sending email code:', error)
  97. }
  98. }
  99. /**
  100. * 邮箱--验证是否存在--是否与已存在google的邮箱--下一步
  101. * @returns
  102. */
  103. async function sendEmail(formEl: FormInstance | undefined) {
  104. if (!formEl)
  105. return
  106. await formEl.validate(async (valid, fields) => {
  107. if (valid) {
  108. try {
  109. // 先验证邮箱是否有效
  110. const result: any = await validateEmailIsWorkApi({ email: loginForm.value.email })
  111. if (result === '2') {
  112. errorTxt.value = 'The email is invalid.'
  113. formEl.validateField('email')
  114. return
  115. }
  116. // 验证已存在google的邮箱
  117. const res: any = await validateEmailIsExistApi({ email: loginForm.value.email })
  118. if (!res || res !== 'google')
  119. // 如果没有google的邮箱,直接下一步,或者没有注册过邮箱
  120. isEmailGoogle.value = false
  121. if (res === 'google') {
  122. // 显示google登陆按钮
  123. isEmailGoogle.value = true
  124. loginForm.value.email = ''
  125. }
  126. nextStep()
  127. }
  128. catch (error) {
  129. console.log(error)
  130. }
  131. }
  132. else { console.log('error submit!', fields) }
  133. })
  134. }
  135. /**
  136. * 邮箱--验证码--完成注册
  137. * @returns
  138. */
  139. async function finishCode(formEl: FormInstance | undefined) {
  140. errorCodeTxt.value = ''
  141. if (!formEl)
  142. return
  143. await formEl.validate(async (valid, fields) => {
  144. if (valid) {
  145. await handleLogin({
  146. email: loginForm.value.email,
  147. captcha: loginForm.value.captcha,
  148. type: 'email',
  149. })
  150. }
  151. else { console.log('error submit!', fields) }
  152. })
  153. }
  154. /**
  155. * 登录--提交
  156. */
  157. async function handleLogin(params: any) {
  158. try {
  159. const { login } = useUserStore()
  160. await login(params)
  161. console.log('登陆成功后------1111', emailStep.value)
  162. // closeLoginAndDownloadModal({ status: true, isFirstLogin: true })
  163. }
  164. catch (err: any) {
  165. console.log('Login error:', err, selectedMethod.value)
  166. if (selectedMethod.value === 'email')
  167. errorCodeTxt.value = 'The code is wrong or invalid.'
  168. else
  169. ElMessage.error(err.message || 'Login failed, please try again later.')
  170. }
  171. }
  172. /**
  173. * google登陆成功
  174. */
  175. async function onGoogleLoginSuccess(info: any) {
  176. await handleLogin({
  177. googleKey: info.token,
  178. email: info.userInfo.email,
  179. type: 'google',
  180. })
  181. }
  182. // ------------------------ 填写信息部分 ------------------------
  183. const setSubmitInfo = async (formEl: FormInstance | undefined) => {
  184. if (!formEl)
  185. return
  186. await formEl.validate(async (valid, fields) => {
  187. if (valid) {
  188. const { downloadCatalog } = storeToRefs(useCommonStore())
  189. // 提交用户信息
  190. console.log('submit info', formInfo.value)
  191. formInfo.value.catalogueId = downloadCatalog.value?.id || ''
  192. await submitInfoApi(formInfo.value)
  193. // 更新用户信息
  194. const res = await getUpdateUserInfoApi()
  195. const { updateUserInfo } = useUserStore()
  196. updateUserInfo(res)
  197. emailStep.value = 4
  198. }
  199. else { console.log('error submit!', fields) }
  200. })
  201. }
  202. /**
  203. * 已经填写了用户信息---提交请求
  204. */
  205. const onSubmitRequest = async () => {
  206. const { downloadCatalog } = storeToRefs(useCommonStore())
  207. const { userInfo } = storeToRefs(useUserStore())
  208. // 提交用户信息
  209. const params = {
  210. catalogueId: downloadCatalog.value?.id || '',
  211. firstName: userInfo.value?.firstName,
  212. lastName: userInfo.value?.lastName,
  213. }
  214. await submitInfoApi(params)
  215. emailStep.value = 4
  216. }
  217. return { emailStep, visible, errorTxt, showCode, onGoogleLoginSuccess, loginForm, formInfo, setEmailStep, setSubmitInfo, onSubmitRequest, onSelectAccount, errorCodeTxt, seconds, isEmailGoogle, sendEmail, nextStep, onSelectEmail, finishCode, backStep, getMailCode }
  218. }