ccdw-website/components/GoogleAd.vue

<template>
  <div v-if="!isPaidUser" class="ad-container">
    <ins class="adsbygoogle"
         style="display:block"
         data-ad-client="ca-pub-9165036986914822"
         data-ad-slot="YOUR_AD_SLOT_ID"
         data-ad-format="auto"
         data-full-width-responsive="true"></ins>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 在实际应用中，这里应该从您的状态管理库（如 Pinia）或 API 获取用户信息
// 示例：const { isPaidUser } = useUserStore()
const isPaidUser = ref(false) // 默认为非付费用户，显示广告

// 加载 Google Ads 脚本 (如果尚未加载)
const loadAdScript = () => {
  if (typeof window !== 'undefined' && !document.querySelector('script[src*="adsbygoogle.js"]')) {
    const script = document.createElement('script')
    script.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9165036986914822"
    script.async = true
    script.crossOrigin = "anonymous"
    document.head.appendChild(script)
  }
}

onMounted(() => {
  if (!isPaidUser.value) {
    loadAdScript()
    // 初始化广告
    try {
      // @ts-ignore
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    } catch (e) {
      console.error('AdSense error:', e)
    }
  }
})
</script>

<style scoped>
.ad-container {
  margin: 20px 0;
  text-align: center;
  overflow: hidden;
}
</style>