feat: 谷歌登录注册

src/views/login/LoginPage.vue

@@ -28,10 +28,11 @@
           <div class="login-button" @click="handleLogin">Log in</div>
           <div class="forgot-password" @click="handleForgotPassword">Forgot password?</div>
 
-          <div type="button" class="google-button" @click="handleGoogleLogin">
+          <!-- <div type="button" class="google-button" @click="handleGoogleLogin">
             <img :src="google" class="google-icon" />
             Sign in with Google
-          </div>
+          </div> -->
+          <GoogleLogin @googelLogin="handleGoogleLogin"></GoogleLogin>
           <div class="sign-up-button" @click="handleSignup">Don’t have an account? Sign Up</div>
         </div>
       </div>
@@ -48,9 +49,9 @@ import { ref, reactive, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserInfoStore } from '@/stores'
 import { showToast } from 'vant'
-import { google } from '@/assets/base64'
-import { fetchRegisterOrLogin } from '@/api/login'
+import { fetchRegisterOrLogin, googleAuth } from '@/api/login'
 import { encryptPassword } from '@/utils/tools'
+import GoogleLogin from './components/GoogleLogin.vue'
 
 const router = useRouter()
 const userInfoStore = useUserInfoStore()
@@ -111,13 +112,15 @@ const handleLogin = async () => {
   isLoading.value = true
 
   const encryptedPassword = encryptPassword(formData.password)
-  fetchRegisterOrLogin({ ...formData, password: encryptedPassword, operationType: 'LOGIN' }).then((response) => {
-    console.log('登录成功', response)
-    userInfoStore.setToken(response.token)
-    userInfoStore.setUserInfo(response.user)
-    showToast('login success')
-    router.replace('/stylist/customer')
-  })
+  fetchRegisterOrLogin({ ...formData, password: encryptedPassword, operationType: 'LOGIN' }).then(
+    (response) => {
+      console.log('登录成功', response)
+      userInfoStore.setToken(response.token)
+      userInfoStore.setUserInfo(response.user)
+      showToast('login success')
+      router.replace('/stylist/customer')
+    }
+  )
 }
 
 // 处理忘记密码
@@ -127,13 +130,15 @@ const handleForgotPassword = () => {
 }
 
 // 处理Google登录
-const handleGoogleLogin = async () => {
+const handleGoogleLogin = async (credential: string) => {
   try {
     isLoading.value = true
-    showToast('Google login is not available yet')
-
-    // 这里添加Google OAuth登录逻辑
-    // const response = await googleLoginAPI()
+    const result = await googleAuth({ credential })
+    // console.log('result', result)
+    userInfoStore.setToken(result.token)
+    userInfoStore.setUserInfo(result.user)
+    showToast('Google login successful')
+    router.replace('/stylist/customer')
   } catch (error) {
     console.error('Google登录失败:', error)
     showToast('Google login failed, please try again')
@@ -234,12 +239,12 @@ const handleSignup = () => {
     -moz-backdrop-filter: blur(35px);
     -ms-backdrop-filter: blur(35px);
     -o-backdrop-filter: blur(35px);
-    border: .2rem solid rgba(255, 255, 255, 0.15);
+    border: 0.2rem solid rgba(255, 255, 255, 0.15);
     border-radius: 4.79rem;
     padding: 11.2rem 8.62rem 14.28rem 7.18rem;
     box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.1);
     overflow: hidden;
-    border: .2rem solid #fff;
+    border: 0.2rem solid #fff;
     font-size: 3.83rem;
   }
 
@@ -247,7 +252,7 @@ const handleSignup = () => {
     width: 100%;
     height: 10rem;
     padding: 1.6rem 2rem;
-    border: .2rem solid #fff;
+    border: 0.2rem solid #fff;
     background: transparent;
     border-radius: 7.1rem;
     color: white;
@@ -293,7 +298,7 @@ const handleSignup = () => {
 .google-button {
   width: 100%;
   padding: 1.6rem;
-  border: .2rem solid #fff;
+  border: 0.2rem solid #fff;
   border-radius: 7rem;
   font-size: 3.83rem;
   cursor: pointer;
@@ -303,6 +308,12 @@ const handleSignup = () => {
   column-gap: 3.1rem;
   margin-bottom: 1.67rem;
 }
+
+.google-icon {
+  width: 4.8rem;
+  height: 4.8rem;
+}
+
 .sign-up-button {
   font-family: 'satoshiRegular';
   font-size: 2.39rem;
@@ -310,11 +321,6 @@ const handleSignup = () => {
   text-align: center;
 }
 
-.google-icon {
-  width: 4.8rem;
-  height: 4.8rem;
-}
-
 .footer {
   position: relative;
   text-align: center;