From cdc5e5406b14428cc0ca6eb1b923ca761d800b17 Mon Sep 17 00:00:00 2001
From: zhangyahui <xiao7li@qq.com>
Date: Wed, 5 Nov 2025 11:59:34 +0800
Subject: [PATCH] test

---
 src/views/login/components/GoogleLogin.vue | 257 ++++++++++++---------
 1 file changed, 150 insertions(+), 107 deletions(-)

diff --git a/src/views/login/components/GoogleLogin.vue b/src/views/login/components/GoogleLogin.vue
index bbe04f5..f75b7ca 100644
--- a/src/views/login/components/GoogleLogin.vue
+++ b/src/views/login/components/GoogleLogin.vue
@@ -1,110 +1,126 @@
 <template>
   <div class="Container">
+    <!-- 谷歌登录 -->
     <div class="g_id_signin" id="g_id_signin"></div>
-    <!-- <div class="icon">
-      <img :src="google" class="google-icon" />
-      <span>{{ text }}</span>
-    </div> -->
+    <!-- <div class="icon" @click="toGmailLogin"> -->
+    <div class="icon">
+      <img src="@/assets/images/loginPage/gmailIcon.svg" alt="" />
+      <span>{{ $props.text }}</span>
+    </div>
   </div>
 </template>
-<script setup lang="ts">
-import { reactive, onMounted, onBeforeUnmount } from 'vue'
-import { google } from '@/assets/base64'
+<script>
+import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, toRefs } from 'vue'
 
-// 定义 props
-defineProps({
-  text: {
-    type: String,
-    default: 'Sign in with Google'
-  }
-})
-
-// 定义 emits
-const emit = defineEmits<{
-  (e: 'googelLogin', code: string): void
-}>()
-
-// 处理 Google 登录回调
-const handleCredentialResponse = async (response: { credential: string }) => {
-  const code = response.credential
-  emit('googelLogin', code)
-  window.isAddGmail = false
-}
-
-// 配置数据
-const data = reactive({
-  // scriptSrc:'https://apis.google.com/js/platform.js',
-  scriptSrc: 'https://accounts.google.com/gsi/client',
-  script: null
-})
-
-// 根据环境设置 Google Client ID
-const GOOGLE_CLIENT_ID = '216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com'
-
-// 创建 Gmail 登录
-const createGmailLogin = async () => {
-  const existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
-  if (!window.isAddGmail) {
-    if (!existingScript) {
-      window.isAddGmail = true
-      await new Promise<void>((resolve) => {
-        const script = document.createElement('script')
-        script.onload = () => {
-          resolve()
-        }
-        document.body.appendChild(script)
-        script.src = data.scriptSrc
-      })
+export default defineComponent({
+  name: 'login',
+  emits: ['googelLogin'],
+  props: {
+    text: {
+      type: String,
+      default: 'Sign in with Google'
     }
-    // 初始化Google登录，禁用One Tap自动提示
-    const initConfig: Parameters<typeof window.google.accounts.id.initialize>[0] = {
-      client_id: GOOGLE_CLIENT_ID,
-      auto_select: false, // 禁用自动选择，避免显示One Tap提示
-      callback: handleCredentialResponse,
-      context: 'signin', // 设置为signin模式，避免显示个性化One Tap提示
-      ux_mode: 'popup',
-      itp_support: true,
-      cancel_on_tap_outside: true // 点击外部时取消One Tap提示
+  },
+  setup(props, { emit }) {
+    function decodeJWT(token) {
+      let base64Url = token.split('.')[1]
+      let base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
+      let jsonPayload = decodeURIComponent(
+        atob(base64)
+          .split('')
+          .map(function (c) {
+            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
+          })
+          .join('')
+      )
+      return JSON.parse(jsonPayload)
     }
-    window.google.accounts.id.initialize(initConfig as any)
-    console.log('创建谷歌登录按钮:', document.querySelector('.Container #g_id_signin'))
-    window.google.accounts.id.renderButton(document.querySelector('.Container #g_id_signin'), {
-      type: 'standard', //icon为只有一个icon
-      shape: 'circle',
-      theme: 'outline',
-      size: 'large',
-      logo_alignment: 'center'
+    const handleCredentialResponse = async (response) => {
+      // 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
+      console.log('Encoded JWT ID token: ' + response.credential)
+      const responsePayload = decodeJWT(response.credential)
+      console.log('Decoded JWT ID token fields:')
+      console.log('  Full Name: ' + responsePayload.name)
+      console.log('  Given Name: ' + responsePayload.given_name)
+      console.log('  Family Name: ' + responsePayload.family_name)
+      console.log('  Unique ID: ' + responsePayload.sub)
+      console.log('  Profile image URL: ' + responsePayload.picture)
+      console.log('  Email: ' + responsePayload.email)
+
+      let code = response.credential
+      emit('googelLogin', code)
+      window.isAddGmail = false
+    }
+    let data = reactive({
+      // scriptSrc:'https://apis.google.com/js/platform.js',
+      scriptSrc: 'https://accounts.google.com/gsi/client',
+      script: null
     })
+    console.log(import.meta.env.VITE_USER_NODE_ENV)
+    let GOOGLE_CLIENT_ID =
+      '216037134725-7q8vqp0ohtmohlosltkfg7bd2v29rm5a.apps.googleusercontent.com'
+    // if(import.meta.env.VITE_USER_NODE_ENV == 'development'){
+    // 	GOOGLE_CLIENT_ID = '157095842121-kdd1fdf8m8nudvj9sprstb2k2prnf9e4.apps.googleusercontent.com'
+    // }else{
+    // 	GOOGLE_CLIENT_ID = '29310152396-nnsd3h533fld665oguu8ovrt1nukmt46.apps.googleusercontent.com'
+    // }
+    // 使用谷歌登录的api
+    const createGmailLogin = async () => {
+      var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
+      if (!window.isAddGmail) {
+        if (!existingScript) {
+          window.isAddGmail = true
+          await new Promise((resolve, reject) => {
+            const script = document.createElement('script')
+            script.onload = () => {
+              resolve()
+            }
+            document.body.appendChild(script)
+            script.src = data.scriptSrc
+          })
+        }
+        window.google.accounts.id.initialize({
+          // 主要就是填写client_id
+          client_id: GOOGLE_CLIENT_ID,
+          auto_select: false,
+          callback: handleCredentialResponse,
+          // context:"signin",
+          ux_mode: 'popup',
+          itp_support: true
+        })
+        console.log(document.querySelector('.Container #g_id_signin'))
+        window.google.accounts.id.renderButton(document.querySelector('.Container #g_id_signin'), {
+          type: 'standard', //icon为只有一个icon
+          shape: 'circle',
+          theme: 'outline',
+          size: 'large',
+          logo_alignment: 'center'
+        })
+      }
+    }
+    onBeforeUnmount(() => {
+      var existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
+      if (existingScript) {
+        existingScript.remove()
+        window.isAddGmail = false
+      }
+    })
+    onMounted(() => {
+      createGmailLogin()
+    })
+    return {}
   }
-}
-
-onBeforeUnmount(() => {
-  const existingScript = document.querySelector(`script[src="${data.scriptSrc}"]`)
-  if (existingScript) {
-    existingScript.remove()
-    window.isAddGmail = false
-  }
-})
-
-onMounted(() => {
-  createGmailLogin()
 })
 </script>
 <style scoped lang="less">
 .Container {
-  width: 100%;
-  height: 10.6rem;
-  padding: 1.6rem;
-  border: 0.2rem solid #fff;
-  border-radius: 7rem;
-  font-size: 3.83rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  column-gap: 3.1rem;
-  margin-bottom: 1.67rem;
-
+  position: relative;
+  border-radius: 4rem;
+  overflow: hidden;
+  background: transparent;
+  @media (max-width: 768px) {
+    border-radius: 2.5rem;
+  }
   :deep(.nsm7Bb-HzV7m-LgbsSe-bN97Pc-sM5MNb) {
     justify-content: center;
     .nsm7Bb-HzV7m-LgbsSe-Bz112c {
@@ -113,10 +129,15 @@ onMounted(() => {
   }
   :deep(.nsm7Bb-HzV7m-LgbsSe.JGcpL-RbRzK) {
     width: 100%;
-    height: 10.6rem;
   }
-
+  // :deep(.S9gUrf-YoZ4jf){
+  // 	*{
+  // 		width: 100%;
+  // 		height: 100%;
+  // 	}
+  // }
   .icon {
+    // width: 40px;
     width: auto;
     display: flex;
     align-items: center;
@@ -128,31 +149,53 @@ onMounted(() => {
     position: relative;
     background: transparent;
     pointer-events: none;
-    column-gap: 3.1rem;
+    background-color: #f9fafa;
+    @media (max-width: 768px) {
+      border-radius: 2.5rem;
+      padding: 0.32rem 1.7rem;
+    }
+    &:hover {
+      background: #f8faff;
+    }
+    img {
+      width: 3.8rem;
+      height: 3.8rem;
+      @media (max-width: 768px) {
+        width: 2.7rem;
+        height: 2.7rem;
+      }
+    }
+    span {
+      font-size: 1.4rem;
+      margin-left: 1.4rem;
+      @media (max-width: 768px) {
+        font-size: 1.2rem;
+        margin-left: 1rem;
+      }
+    }
   }
-
   .g_id_signin {
     position: absolute;
     width: 100%;
     height: 100%;
+    // overflow: hidden;
     top: 0;
     left: 0;
     // opacity: 0;
+    .S9gUrf-YoZ4jf {
+    }
     :deep(.S9gUrf-YoZ4jf) {
-      &,
-      & > div {
-        width: 100%;
-        height: 100%;
-      }
+      width: 100%;
+      height: 100%;
       iframe {
         zoom: 3;
       }
     }
   }
-}
-
-.google-icon {
-  width: 4.8rem;
-  height: 4.8rem;
+  &:hover {
+    .icon {
+      background: #f8faff;
+    }
+  }
 }
 </style>